// sprites.jsx — pixel-art monster + UI sprites rendered as SVG rect grids.
// Each sprite is an array of strings; each char maps to a color in `palette`.
// "." = transparent.

const SPR = {
  slime: {
    palette: { ".": null, g: "#7CFF6B", G: "#41B82E", d: "#1B5510", e: "#0E1813", w: "#FFFFFF" },
    rows: [
      "....gggggg....",
      "..ggGGGGGGgg..",
      ".gGGGGGGGGGGg.",
      "gGGwGGGGGGwGg.",
      "gGGwwGGGGwwGg.",
      "gGGGGeGeGGGGg.",
      "gGGGGGGGGGGGg.",
      "gGdGGGGGGGdGg.",
      ".gddGGGGGGddg.",
      "..ddddddddddd.",
    ],
  },
  bat: {
    palette: { ".": null, p: "#C25BD1", P: "#7B2A8E", d: "#3B0F4D", w: "#FFFFFF", r: "#FF3B6B", e: "#0E1813" },
    rows: [
      "P...........P",
      "PP.PPPPPPP.PP",
      "PPPPPpPPPpPPP",
      "PPpppppppppPP",
      "PpppwPpPwppppP",
      "PpppwepePwppp",
      "PPpppppppppPP",
      ".PPPPrPrPPPP.",
      "..PP.....PP..",
      "...d.....d...",
    ],
  },
  ghost: {
    palette: { ".": null, c: "#A6F1FF", C: "#5BD1E8", d: "#2E6E80", w: "#FFFFFF", e: "#0E1813" },
    rows: [
      "....cccccc....",
      "..ccCCCCCCcc..",
      ".cCCCCCCCCCCc.",
      "cCCCwCCCCwCCc.",
      "cCCCwwCCwwCCc.",
      "cCCCCeeeeeCCc.",
      "cCCCCCCCCCCCc.",
      "cCCCCCCCCCCCc.",
      "cCdCCdCCdCCdc.",
      ".d..dd.dd..d..",
    ],
  },
  robot: {
    palette: { ".": null, m: "#C9CCD6", M: "#6B7080", d: "#2A2E3A", r: "#FF3B6B", y: "#FFD83B", e: "#0E1813", w: "#FFFFFF" },
    rows: [
      "...mmmMMMmmm...",
      "..mMMMMMMMMMm..",
      ".mMMrMMMMMrMMm.",
      "mMMMMyMMyMMMMm.",
      "mMMMMyMMyMMMMm.",
      "mMMMMMeeMMMMMm.",
      "mMddMMMMMMddMm.",
      ".mMMMMMMMMMMMm.",
      "..MMddMMddMM..",
      "...M..MM..M...",
    ],
  },
  dragon: {
    palette: { ".": null, r: "#FF6B3B", R: "#C2331B", d: "#5C0F08", y: "#FFD83B", w: "#FFFFFF", e: "#0E1813" },
    rows: [
      ".....RRR.RRR....",
      "....RrrRRrrR....",
      "...RrrRrrRrrR...",
      "..RrrwRrrRwrrR..",
      "..RrrweRReWrrR..",
      ".RrrrrRRRRrrrrR.",
      ".RrrrrrrrrrrrrR.",
      "RyrrrRRRRRRrrrYR",
      "RyyrrrrrrrrrrYYR",
      ".RyyrrrrrrrrYYR.",
      "..RddrrrrrrddR..",
      "...d........d...",
    ],
  },
  // ── pixel hearts and stars used in HUD ──
  heart: {
    palette: { ".": null, r: "#FF3B6B", R: "#C2104A", w: "#FFC4D2" },
    rows: [
      ".rr...rr.",
      "rRRr.rRRr",
      "rRwRrRwRr",
      "rRRRRRRRr",
      ".rRRRRRr.",
      "..rRRRr..",
      "...rRr...",
      "....r....",
    ],
  },
  star: {
    palette: { ".": null, y: "#FFD83B", Y: "#C29A1B", w: "#FFF6CC" },
    rows: [
      "....y....",
      "....y....",
      "...ywy...",
      "yyyyyyYyy",
      ".yyyyyy..",
      "..ywyy...",
      ".yY..yY..",
      "y......y.",
    ],
  },
  // ── Player avatars ──
  knight: {
    palette: { ".": null, s: "#C9CCD6", S: "#6B7080", d: "#2A2E3A", r: "#FF3B6B", w: "#FFFFFF", e: "#0E1813", p: "#FFC79A" },
    rows: [
      "...SSSSSS...",
      "..SssssssS..",
      ".SsssrrsssS.",
      ".SssspppssS.",
      ".SspweppwpS.",
      ".SsppeepppS.",
      "..SsppppsS..",
      "...SsssSS...",
      "..SSdSSdSS..",
      ".SsSdSSdSsS.",
      ".S..d..d..S.",
      "....d..d....",
    ],
  },
  wizard: {
    palette: { ".": null, p: "#7B5AE0", P: "#3A1F8E", y: "#FFD83B", s: "#FFC79A", w: "#FFFFFF", e: "#0E1813", b: "#5A3520" },
    rows: [
      ".....p......",
      "....pp......",
      "...ppy......",
      "..ppppp.....",
      ".PPPPPPP....",
      "..ssssss....",
      "..swewse....",
      "..ssssss....",
      ".bbbsssbbb..",
      "PPpppppppPP.",
      ".PpppppppP..",
      "..b......b..",
    ],
  },
  cat: {
    palette: { ".": null, o: "#FFAD5A", O: "#C26A1B", p: "#FFC4D2", w: "#FFFFFF", e: "#0E1813", g: "#3BC9A6" },
    rows: [
      "..oO.....Oo..",
      ".oOOO...OOOo.",
      ".oOoOOoOOoOo.",
      ".oOweOOOewOo.",
      ".oOOOpOpOOOo.",
      "..oOOpppOOo..",
      "...oOOOOOo...",
      "...gOOOOOg...",
      "....oOOOo....",
      ".....OOO.....",
      "......O......",
    ],
  },
  alien: {
    palette: { ".": null, g: "#7CFF6B", G: "#41B82E", d: "#1B5510", w: "#FFFFFF", e: "#0E1813", m: "#FF3BD1" },
    rows: [
      "....ggggg....",
      "...gGGGGGg...",
      "..gGGGGGGGg..",
      ".gGwGGGGGwGg.",
      ".gGweGGGewGg.",
      ".gGGGGmGGGGg.",
      "..gGGmmmGGg..",
      "...gGGGGGg...",
      "....gdGdg....",
      "...gd.G.dg...",
      "..d...G...d..",
    ],
  },
  robothead: {
    palette: { ".": null, m: "#C9CCD6", M: "#6B7080", y: "#FFD83B", r: "#FF3B6B", e: "#0E1813", w: "#FFFFFF" },
    rows: [
      "....m....",
      "....M....",
      "..mMMMm..",
      ".mMMMMMm.",
      ".MyMrMrMy",
      ".MMweweMM",
      ".MMMmmMMM",
      ".MMrrrMMM",
      ".mMMMMMm.",
      "..M...M..",
    ],
  },
};

function PixelSprite({ name, scale = 6, style }) {
  const sp = SPR[name];
  if (!sp) return null;
  const w = sp.rows[0].length;
  const h = sp.rows.length;
  const rects = [];
  for (let y = 0; y < h; y++) {
    for (let x = 0; x < w; x++) {
      const ch = sp.rows[y][x];
      const fill = sp.palette[ch];
      if (!fill) continue;
      rects.push(
        <rect key={`${x}-${y}`} x={x} y={y} width="1.02" height="1.02" fill={fill} />
      );
    }
  }
  return (
    <svg
      viewBox={`0 0 ${w} ${h}`}
      width={w * scale}
      height={h * scale}
      shapeRendering="crispEdges"
      style={{ imageRendering: "pixelated", display: "block", ...style }}
    >
      {rects}
    </svg>
  );
}

// Pixelated explosion burst — drawn from a star-shaped boolean grid.
function PixelBurst({ scale = 6, color = "#FFD83B", color2 = "#FF6B3B", style }) {
  const grid = [
    "...y...y...",
    "...yy.yy...",
    "y...y.y...y",
    ".yy.yyy.yy.",
    "..yyooyyy..",
    "yyyooooyyyy",
    "..yyooyyy..",
    ".yy.yyy.yy.",
    "y...y.y...y",
    "...yy.yy...",
    "...y...y...",
  ];
  const rects = [];
  for (let y = 0; y < grid.length; y++) {
    for (let x = 0; x < grid[0].length; x++) {
      const ch = grid[y][x];
      if (ch === ".") continue;
      rects.push(
        <rect key={`${x}-${y}`} x={x} y={y} width="1.02" height="1.02"
              fill={ch === "o" ? color : color2} />
      );
    }
  }
  return (
    <svg viewBox={`0 0 ${grid[0].length} ${grid.length}`}
         width={grid[0].length * scale} height={grid.length * scale}
         shapeRendering="crispEdges"
         style={{ imageRendering: "pixelated", display: "block", ...style }}>
      {rects}
    </svg>
  );
}

const MONSTER_ORDER = ["slime", "bat", "ghost", "robot", "dragon"];
const MONSTER_HP = { slime: 3, bat: 4, ghost: 5, robot: 6, dragon: 8 };
const MONSTER_NAMES = {
  slime: "GLOOPLET",
  bat: "VEXBAT",
  ghost: "BOOLEAN",
  robot: "MX-7",
  dragon: "AXIOM REX",
};

const AVATARS = ["knight", "wizard", "cat", "alien", "robothead", "slime", "bat", "ghost"];

window.AlgebraSprites = { PixelSprite, PixelBurst, SPR, MONSTER_ORDER, MONSTER_HP, MONSTER_NAMES, AVATARS };