// Pixel EmoTree — drawn as a chunky pixel SVG.
// `intensity` 0..1 controls how green/glowing it is.
function EmoTree({ intensity = 0.5, raining = true }) {
  // 16x16 grid, each cell = 12px
  const C = 12;
  const W = 16, H = 16;

  // colors based on intensity
  const leafA = intensity > 0.6 ? "#7fb04a" : intensity > 0.3 ? "#6f9a4b" : "#8a8455";
  const leafB = intensity > 0.6 ? "#4a7333" : intensity > 0.3 ? "#3d5e2a" : "#5c5a3a";
  const leafHi = intensity > 0.6 ? "#c8e08a" : "#b5c378";
  const trunk = "#6b4422";
  const trunkD = "#4a2d14";
  const fruit = "#e8a93b";
  const fruitR = "#d96a3d";

  // map: which pixels are which
  // L = leaf A, D = leaf B (deep), H = highlight, T = trunk, t = trunk dark,
  // F = fruit, R = red fruit
  const map = [
    "  . . L L L L . . . . . . . . . .",
    "  . L L D L L L . . L L . . . . .",
    "  L L L L H L L L L L D L L . . .",
    "  L D L L L L L L H L L L L L . .",
    "  L L H L L D L L L L D L L L . .",
    "  . L L L L L L F L L L H L . . .",
    "  . . L L L L L L L D L L . . . .",
    "  . . . L L H L L L L L . . . . .",
    "  . . . . . T T . . . . . . . . .",
    "  . . . . . T t . . . . . . . . .",
    "  . . . . . T T . . . . . . . . .",
    "  . . . . t T T t . . . . . . . .",
    "  . . . t T T T T t . . . . . . .",
    "  . . t T T T T T T t . . . . . .",
    "  . t t T T T T T T t t . . . . .",
    "  t t t t t t t t t t t t . . . ."
  ];

  const rects = [];
  for (let y = 0; y < H; y++) {
    const row = map[y].trim().split(/\s+/);
    for (let x = 0; x < W; x++) {
      const ch = row[x];
      let fill = null;
      if (ch === "L") fill = leafA;
      else if (ch === "D") fill = leafB;
      else if (ch === "H") fill = leafHi;
      else if (ch === "T") fill = trunk;
      else if (ch === "t") fill = trunkD;
      else if (ch === "F") fill = fruit;
      else if (ch === "R") fill = fruitR;
      if (fill) {
        rects.push(
          <rect key={`${x}-${y}`} x={x * C} y={y * C} width={C} height={C} fill={fill} />
        );
      }
    }
  }

  // glowing core - center of canopy, around (8,5)
  const coreCx = 8 * C + C / 2;
  const coreCy = 5 * C + C / 2;

  return (
    <svg
      className="pixel-art tree-svg"
      viewBox={`0 0 ${W * C} ${H * C}`}
      shapeRendering="crispEdges"
      aria-hidden="true"
    >
      <defs>
        <radialGradient id="treeglow" cx="50%" cy="50%" r="50%">
          <stop offset="0%"  stopColor="#fff3b0" stopOpacity="0.95" />
          <stop offset="60%" stopColor="#ffd97a" stopOpacity="0.35" />
          <stop offset="100%" stopColor="#ffd97a" stopOpacity="0" />
        </radialGradient>
      </defs>
      {/* soft glow ring behind canopy */}
      <circle cx={coreCx} cy={coreCy} r={56} fill="url(#treeglow)">
        <animate attributeName="r" values="50;64;50" dur="2.6s" repeatCount="indefinite" />
      </circle>
      {rects}
      {/* glowing core pixel */}
      <rect x={coreCx - C/2} y={coreCy - C/2} width={C} height={C} fill="#fff1a8">
        <animate attributeName="opacity" values="0.6;1;0.6" dur="1.4s" repeatCount="indefinite" />
      </rect>
    </svg>
  );
}

window.EmoTree = EmoTree;

// Pixel weather visualisation drawn for a given weather key
function WeatherVis({ kind = "雷陣雨" }) {
  // big stylised pixel weather scene inside the receiver card
  if (kind.includes("雷")) {
    return (
      <div style={{position:"absolute", inset:0}}>
        {/* dark sky already from parent gradient */}
        {Array.from({length: 22}).map((_, i) => (
          <div key={i} className="rain" style={{
            left: `${(i*17 + 10) % 100}%`,
            animationDelay: `${(i % 7) * 0.13}s`,
            top: `-${20 + (i%5)*10}px`
          }} />
        ))}
        {/* lightning bolt */}
        <svg viewBox="0 0 100 100" style={{position:"absolute", left:"34%", top:"18%", width:"60px", height:"90px"}} shapeRendering="crispEdges">
          <polygon points="55,5 25,55 45,55 35,95 70,40 50,40 60,5" fill="#ffd97a" stroke="#3a2615" strokeWidth="3" strokeLinejoin="miter" />
        </svg>
        {/* cloud */}
        <div style={{position:"absolute", top:18, left:20, width:120, height:28, background:"#4a607a", border:"3px solid #3a2615"}} />
        <div style={{position:"absolute", top:4, left:60, width:60, height:18, background:"#4a607a", border:"3px solid #3a2615", borderBottom:"none"}} />
      </div>
    );
  }
  if (kind.includes("寒") || kind.includes("雪")) {
    return (
      <div style={{position:"absolute", inset:0, background:"linear-gradient(180deg,#a8c3d6,#cfdfe9)"}}>
        {Array.from({length: 26}).map((_, i) => (
          <div key={i} style={{
            position:"absolute",
            width:"6px", height:"6px",
            background:"#fff",
            border:"1.5px solid #3a2615",
            left: `${(i*13+5)%96}%`,
            top: `${(i*23)%80 + 5}%`,
          }} />
        ))}
      </div>
    );
  }
  if (kind.includes("陰") || kind.includes("多雲")) {
    return (
      <div style={{position:"absolute", inset:0, background:"linear-gradient(180deg,#9fb4c4,#c9d6df)"}}>
        <div style={{position:"absolute", top:30, left:30, width:120, height:30, background:"#e8eef2", border:"3px solid #3a2615"}} />
        <div style={{position:"absolute", top:10, left:70, width:80, height:22, background:"#e8eef2", border:"3px solid #3a2615", borderBottom:"none"}} />
        <div style={{position:"absolute", top:80, right:30, width:90, height:24, background:"#cdd6db", border:"3px solid #3a2615"}} />
      </div>
    );
  }
  // default: 微雨 / 陣雨
  return (
    <div style={{position:"absolute", inset:0, background:"linear-gradient(180deg,#7e9bb2,#a9c0d0)"}}>
      {Array.from({length: 14}).map((_, i) => (
        <div key={i} className="rain" style={{
          left: `${(i*23 + 12) % 100}%`,
          animationDelay: `${(i % 5) * 0.18}s`,
        }} />
      ))}
      <div style={{position:"absolute", top:24, left:30, width:110, height:24, background:"#dfe8ef", border:"3px solid #3a2615"}} />
    </div>
  );
}
window.WeatherVis = WeatherVis;

// Tiny pixel icon used inside weather card top-right box
function WeatherIcon({ kind = "雷陣雨" }) {
  const k = kind || "";
  if (k.includes("雷"))
    return <svg viewBox="0 0 24 24" width="34" height="34" shapeRendering="crispEdges">
      <polygon points="13,2 6,13 11,13 9,22 17,10 12,10 14,2" fill="#e8a93b" stroke="#3a2615" strokeWidth="1.5"/>
    </svg>;
  if (k.includes("雪") || k.includes("寒"))
    return <svg viewBox="0 0 24 24" width="32" height="32" shapeRendering="crispEdges">
      <rect x="11" y="3" width="2" height="18" fill="#3a2615"/>
      <rect x="3" y="11" width="18" height="2" fill="#3a2615"/>
      <rect x="6" y="6" width="2" height="2" fill="#3a2615"/>
      <rect x="16" y="6" width="2" height="2" fill="#3a2615"/>
      <rect x="6" y="16" width="2" height="2" fill="#3a2615"/>
      <rect x="16" y="16" width="2" height="2" fill="#3a2615"/>
    </svg>;
  if (k.includes("陰") || k.includes("雲"))
    return <svg viewBox="0 0 24 24" width="32" height="32" shapeRendering="crispEdges">
      <rect x="3" y="10" width="18" height="8" fill="#e8eef2" stroke="#3a2615" strokeWidth="1.5"/>
      <rect x="7" y="6" width="11" height="6" fill="#e8eef2" stroke="#3a2615" strokeWidth="1.5"/>
    </svg>;
  return <svg viewBox="0 0 24 24" width="32" height="32" shapeRendering="crispEdges">
    <rect x="3" y="6" width="16" height="7" fill="#e8eef2" stroke="#3a2615" strokeWidth="1.5"/>
    <rect x="6" y="15" width="2" height="5" fill="#5b86a3"/>
    <rect x="11" y="15" width="2" height="5" fill="#5b86a3"/>
    <rect x="16" y="15" width="2" height="5" fill="#5b86a3"/>
  </svg>;
}
window.WeatherIcon = WeatherIcon;