// Pixel-art robot mascot, drawn from a small grid. Idle animation cycles
// through frames where eyes blink + antenna wiggles. Original artwork.

const MASCOT_PALETTE = {
  ".": null,                // transparent
  "K": "#000000",
  "B": "var(--mascot-body)",
  "S": "var(--mascot-shadow)",
  "L": "var(--mascot-light)",
  "E": "var(--mascot-eye)",
  "M": "var(--mascot-mouth)",
  "A": "var(--mascot-antenna)",
  "W": "var(--mascot-window)",
};

// 16x16 pixel mascot frames. Three frames: open eyes, blink, mid-blink.
// Squarish chunky robot head with antenna + visor band.
const FRAMES = {
  open: [
    "................",
    ".......AA.......",
    ".......AA.......",
    ".....BBBBBB.....",
    "....BBBBBBBB....",
    "...BBLLLLLLBB...",
    "...BLEWWWWELB...",
    "...BLEWWWWELB...",
    "...BLLLLLLLLB...",
    "...BBSSMMMSSBB..",
    "....BBSSSSBB....",
    ".....BBBBBB.....",
    "....BB....BB....",
    "....BB....BB....",
    "...BBB....BBB...",
    "................",
  ],
  blink: [
    "................",
    ".......AA.......",
    ".......AA.......",
    ".....BBBBBB.....",
    "....BBBBBBBB....",
    "...BBLLLLLLBB...",
    "...BLLLLLLLLB...",
    "...BLEEEEEEEB...",
    "...BLLLLLLLLB...",
    "...BBSSMMMSSBB..",
    "....BBSSSSBB....",
    ".....BBBBBB.....",
    "....BB....BB....",
    "....BB....BB....",
    "...BBB....BBB...",
    "................",
  ],
  wave: [
    "................",
    "......AA........",
    ".......AA.......",
    ".....BBBBBB.....",
    "....BBBBBBBB....",
    "...BBLLLLLLBB...",
    "...BLEWWWWELB...",
    "...BLEWWWWELB...",
    "...BLLLLLLLLB...",
    "...BBSS^^^SSBB..",
    "....BBSSSSBB....",
    ".....BBBBBB.....",
    "....BB....BB....",
    "....BB....BB....",
    "...BBB....BBB...",
    "................",
  ],
};

// "^" = mouth open
const PALETTE = { ...MASCOT_PALETTE, "^": "var(--mascot-mouth)" };

function drawMascot(canvas, frameKey) {
  const ctx = canvas.getContext("2d");
  const grid = FRAMES[frameKey] || FRAMES.open;
  const size = grid.length;
  const px = canvas.width / size;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // resolve CSS vars
  const cs = getComputedStyle(canvas);
  for (let y = 0; y < size; y++) {
    for (let x = 0; x < size; x++) {
      const ch = grid[y][x];
      if (ch === ".") continue;
      let color = PALETTE[ch];
      if (!color) continue;
      if (color.startsWith("var(")) {
        const v = color.slice(4, -1);
        color = cs.getPropertyValue(v).trim() || "#fff";
      }
      ctx.fillStyle = color;
      ctx.fillRect(Math.floor(x * px), Math.floor(y * px), Math.ceil(px), Math.ceil(px));
    }
  }
}

function Mascot({ size = 56, talking = false }) {
  const ref = React.useRef(null);
  const [frame, setFrame] = React.useState("open");

  // Idle blink loop
  React.useEffect(() => {
    if (talking) return;
    let t1, t2;
    const loop = () => {
      const wait = 2200 + Math.random() * 2400;
      t1 = setTimeout(() => {
        setFrame("blink");
        t2 = setTimeout(() => {
          setFrame("open");
          loop();
        }, 110);
      }, wait);
    };
    loop();
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, [talking]);

  // Talking loop — alternate open / wave (mouth) frames
  React.useEffect(() => {
    if (!talking) return;
    let i = 0;
    const id = setInterval(() => {
      i = (i + 1) % 3;
      setFrame(i === 0 ? "open" : i === 1 ? "wave" : "blink");
    }, 180);
    return () => clearInterval(id);
  }, [talking]);

  React.useEffect(() => {
    if (ref.current) drawMascot(ref.current, frame);
  }, [frame]);

  return (
    <canvas
      ref={ref}
      className="mascot"
      width={size * 4}
      height={size * 4}
      style={{
        width: size,
        height: size,
        // mascot palette — terracotta robot
        "--mascot-body": "var(--accent)",
        "--mascot-shadow": "var(--accent-soft)",
        "--mascot-light": "rgba(255,255,255,0.18)",
        "--mascot-eye": "#1c1b1a",
        "--mascot-mouth": "#1c1b1a",
        "--mascot-antenna": "var(--accent)",
        "--mascot-window": "#fff4e8",
      }}
    />
  );
}

window.Mascot = Mascot;