// NEKO — Pixel-art layer (homepage): sprite engine, avatars, community scene
// Original pixel maps only — no official Minecraft/Discord assets.
// Exports: PixelSprite, PixelAvatar, CommunityScene, PxCorners, DiscordGlyph

function PixelSprite({ map, palette, px, style, className }) {
  const u = px || 4;
  const shadows = [];
  map.forEach((row, y) => {
    Array.from(row).forEach((ch, x) => {
      const c = palette[ch];
      if (c) shadows.push((x * u) + "px " + (y * u) + "px 0 " + c);
    });
  });
  return (
    <div aria-hidden="true" className={className} style={{ width: map[0].length * u, height: map.length * u, position: "relative", flexShrink: 0, ...style }}>
      <div style={{ position: "absolute", top: 0, left: 0, width: u, height: u, boxShadow: shadows.join(", ") }}></div>
    </div>
  );
}

// ---- Maps -------------------------------------------------------
// Friendly community creature (Wumpus-İNSPİRED silhouette, original)
const PX_CREATURE = [
  ".E......E.",
  ".E......E.",
  "..WWWWWW..",
  ".WWWWWWWW.",
  ".WBWWWWBW.",
  ".WWWWWWWW.",
  ".WWMMMMWW.",
  "..WWWWWW..",
  "...W..W...",
];

// Blocky player archetype (original, generic miner silhouette)
const PX_PLAYER = [
  "..HHHH..",
  "..HHHH..",
  "..FFFF..",
  "..FEEF..",
  "..FFFF..",
  ".ATTTTA.",
  ".ATTTTA.",
  ".ATTTTA.",
  ".FTTTTF.",
  "..PPPP..",
  "..PPPP..",
  "..P..P..",
  "..P..P..",
  "..B..B..",
];

const PX_BUBBLE = [
  "CCCCCCC",
  "CDCDCDC",
  "CCCCCCC",
  ".C.....",
];

const PX_STAR = [".S.", "SSS", ".S."];

// Avatar head (8×8)
const PX_HEAD = [
  "HHHHHHHH",
  "HHHHHHHH",
  "HSSSSSSH",
  "SSSSSSSS",
  "SEESSEES",
  "SSSSSSSS",
  "SSSMMSSS",
  "SSSSSSSS",
];

// Tiny creature glyph (6×5) — legacy plain version, kept for reference/archive
const PX_GLYPH = [
  ".E..E.",
  "WWWWWW",
  "WBWWBW",
  "WWWWWW",
  ".WWWW.",
];

// Wumpus-inspired mascot face (10×11) — original silhouette, horns + eyes +
// smile. Canonical Discord button glyph (richer than the legacy PX_GLYPH).
const PX_WUMPUS = [
  ".E......E.",
  ".EE....EE.",
  "..WWWWWW..",
  ".WWWWWWWW.",
  "WWWWWWWWWW",
  "WWBWWWWBWW",
  "WWBWWWWBWW",
  "WWWWWWWWWW",
  ".WWMMMMWW.",
  "..WWWWWW..",
  "..W....W..",
];

// ---- Theme palettes ---------------------------------------------
function communityPalettes(theme) {
  const sun = theme !== "midnight";
  return {
    creature: sun
      ? { W: "#F8D44E", B: "#0C1730", M: "#F5C53C", E: "#F5C53C" }
      : { W: "#76C5FF", B: "#0C1730", M: "#20227A", E: "#C48CF5" },
    playerA: sun
      ? { H: "#34343F", F: "#C99F33", E: "#080812", A: "#463A9E", T: "#463A9E", P: "#555562", B: "#0C1730" }
      : { H: "#20227A", F: "#C99F33", E: "#0C1730", A: "#1F6FE0", T: "#1F6FE0", P: "#20227A", B: "#0C1730" },
    playerB: sun
      ? { H: "#927524", F: "#F8D44E", E: "#080812", A: "#927524", T: "#F5C53C", P: "#0C1730", B: "#080812" }
      : { H: "#A6B0BC", F: "#C99F33", E: "#0C1730", A: "#C48CF5", T: "#C48CF5", P: "#20227A", B: "#0C1730" },
    bubble: sun
      ? { C: "#F7F9FD", D: "#F5C53C" }
      : { C: "#F7F9FD", D: "#C48CF5" },
    star: sun ? { S: "#F5C53C" } : { S: "#F5C53C" },
    star2: sun ? { S: "#F8D44E" } : { S: "#76C5FF" },
    grassTop: sun ? "#C99F33" : "#20227A",
    grassBody: sun ? "#927524" : "#0A1C4A",
    glyph: sun
      ? { W: "#F5C53C", B: "#0C1730", M: "#927524", E: "#927524" }
      : { W: "#76C5FF", B: "#0C1730", M: "#C48CF5", E: "#C48CF5" },
  };
}

// ---- Composition: community gathering ---------------------------
function CommunityScene({ theme }) {
  const p = communityPalettes(theme);
  const sun = theme !== "midnight";
  const blockFace = sun ? "#927524" : "#20227A";
  const blockTop = sun ? "#C99F33" : "#20227A";
  const block = (x, bottom, s) => (
    <div style={{
      position: "absolute", left: x, bottom: bottom, width: s, height: s, background: blockFace,
      boxShadow: "inset 0 " + Math.max(2, Math.round(s / 5)) + "px 0 " + blockTop + ", inset -2px -2px 0 rgba(8,8,18,.25)",
    }}></div>
  );
  return (
    <div className="community-scene" aria-hidden="true" style={{ position: "relative", width: 300, height: 158, flexShrink: 0 }}>
      {/* soft midnight glow behind the gathering — keeps the art 'seated' in the card */}
      <div className="deco" style={{
        position: "absolute", left: "50%", bottom: -10, transform: "translateX(-50%)",
        width: 320, height: 130, pointerEvents: "none",
        background: sun
          ? "radial-gradient(55% 70% at 50% 100%, rgba(249,115,22,.18), transparent 75%)"
          : "radial-gradient(55% 70% at 42% 100%, rgba(56,189,248,.16), transparent 75%), radial-gradient(50% 60% at 68% 100%, rgba(124,58,237,.18), transparent 75%)",
      }}></div>
      {/* sparkles */}
      <PixelSprite map={PX_STAR} palette={p.star} px={3} style={{ position: "absolute", left: 6, top: 14 }} />
      <div className="deco deco-extra">
        <PixelSprite map={PX_STAR} palette={p.star2} px={3} style={{ position: "absolute", right: 10, top: 4 }} />
        <PixelSprite map={PX_STAR} palette={p.star2} px={2} style={{ position: "absolute", left: 96, top: 0 }} />
        <PixelSprite map={PX_STAR} palette={p.star} px={2} style={{ position: "absolute", right: 52, top: 46 }} />
        <PixelSprite map={PX_STAR} palette={p.star2} px={2} style={{ position: "absolute", left: 10, top: 72 }} />
      </div>
      {/* chat bubbles — the creature speaks, a player answers */}
      <PixelSprite map={PX_BUBBLE} palette={p.bubble} px={4} style={{ position: "absolute", left: 150, top: 22 }} />
      <div className="deco">
        <PixelSprite map={PX_BUBBLE} palette={p.bubble} px={3} style={{ position: "absolute", left: 246, top: 40, transform: "scaleX(-1)" }} />
      </div>
      {/* cast, standing on the grass strip */}
      <PixelSprite map={PX_PLAYER} palette={p.playerA} px={5} style={{ position: "absolute", left: 28, bottom: 24 }} />
      <PixelSprite map={PX_CREATURE} palette={p.creature} px={6} style={{ position: "absolute", left: 110, bottom: 30 }} />
      <PixelSprite map={PX_PLAYER} palette={p.playerB} px={5} style={{ position: "absolute", left: 212, bottom: 24 }} />
      {/* voxel pedestal under the creature + scattered blocks */}
      <div className="deco">
        {block(116, 18, 14)}{block(130, 18, 14)}{block(144, 18, 14)}
        {block(-2, 20, 12)}{block(282, 22, 14)}{block(268, 18, 10)}
      </div>
      {/* grass strip */}
      <div style={{ position: "absolute", left: 0, right: 0, bottom: 12, height: 6, background: p.grassTop }}></div>
      <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: 12, background: p.grassBody }}></div>
      {/* stepped ends so the strip reads as blocks, not a bar */}
      <div style={{ position: "absolute", left: -8, bottom: 0, width: 8, height: 12, background: p.grassBody }}></div>
      <div style={{ position: "absolute", right: -8, bottom: 0, width: 8, height: 14, background: p.grassTop }}></div>
      {/* layered pixel corner details (frame ornaments) */}
      <div className="deco deco-extra">
        <span style={{ position: "absolute", left: -14, top: 34, width: 6, height: 6, background: sun ? "#F5C53C" : "#76C5FF", boxShadow: "0 10px 0 -1px " + (sun ? "#F8D44E" : "#C48CF5") }}></span>
        <span style={{ position: "absolute", right: -12, top: 60, width: 6, height: 6, background: sun ? "#F8D44E" : "#C48CF5", boxShadow: "0 -10px 0 -1px " + (sun ? "#F5C53C" : "#76C5FF") }}></span>
      </div>
    </div>
  );
}

// ---- Compact variant: Destek sayfası Discord kartı ---------------
function CommunitySceneMini({ theme }) {
  const p = communityPalettes(theme);
  const sun = theme !== "midnight";
  return (
    <div className="community-scene" aria-hidden="true" style={{ position: "relative", width: 170, height: 112, flexShrink: 0 }}>
      <div className="deco" style={{
        position: "absolute", left: "50%", bottom: -8, transform: "translateX(-50%)",
        width: 190, height: 90, pointerEvents: "none",
        background: sun
          ? "radial-gradient(60% 75% at 50% 100%, rgba(249,115,22,.16), transparent 75%)"
          : "radial-gradient(60% 75% at 50% 100%, rgba(124,58,237,.18), transparent 75%)",
      }}></div>
      <div className="deco">
        <PixelSprite map={PX_STAR} palette={p.star} px={2} style={{ position: "absolute", left: 8, top: 10 }} />
        <PixelSprite map={PX_STAR} palette={p.star2} px={2} style={{ position: "absolute", right: 6, top: 24 }} />
      </div>
      <PixelSprite map={PX_BUBBLE} palette={p.bubble} px={3} style={{ position: "absolute", left: 104, top: 8 }} />
      <PixelSprite map={PX_CREATURE} palette={p.creature} px={5} style={{ position: "absolute", left: 58, bottom: 18 }} />
      <div style={{ position: "absolute", left: 26, right: 26, bottom: 12, height: 5, background: p.grassTop }}></div>
      <div style={{ position: "absolute", left: 26, right: 26, bottom: 0, height: 12, background: p.grassBody }}></div>
      <div style={{ position: "absolute", left: 14, bottom: 0, width: 12, height: 8, background: p.grassBody }}></div>
      <div style={{ position: "absolute", right: 14, bottom: 0, width: 12, height: 9, background: p.grassTop }}></div>
    </div>
  );
}

// ---- Avatar (placeholder heads — future skin API slot) ----------
const NEKO_AVATAR_PALETTES = [
  { H: "#34343F", S: "#C99F33", E: "#080812", M: "#B97A56" },
  { H: "#2E2A26", S: "#C98E5F", E: "#1C120A", M: "#A06A42" },
  { H: "#927524", S: "#F8D44E", E: "#080812", M: "#C98E5F" },
  { H: "#B98A1F", S: "#D8A878", E: "#241608", M: "#AC7B52" },
];

function PixelAvatar({ seed, px }) {
  const pal = NEKO_AVATAR_PALETTES[(seed || 0) % NEKO_AVATAR_PALETTES.length];
  return (
    <span style={{
      display: "inline-block", lineHeight: 0, flexShrink: 0,
      border: "2px solid var(--c-border)",
      boxShadow: "2px 3px 0 var(--block-shadow), inset 0 0 0 1px rgba(247,249,253,.25)",
      background: "rgba(var(--c-text-rgb), .06)",
    }}>
      <PixelSprite map={PX_HEAD} palette={pal} px={px || 5} />
    </span>
  );
}

// ---- Pixel frame corners for glass panels -----------------------
function PxCorners({ size, color }) {
  const sz = size || 12;
  const c = color || "var(--c-accent)";
  const st = (pos) => ({
    position: "absolute", width: sz, height: sz, background: c, zIndex: 1,
    ...(pos.includes("t") ? { top: -4 } : { bottom: -4 }),
    ...(pos.includes("l") ? { left: -4 } : { right: -4 }),
  });
  return (
    <React.Fragment>
      {["tl", "tr", "bl", "br"].map((p) => (
        <span key={p} aria-hidden="true" className="deco" style={st(p)}></span>
      ))}
    </React.Fragment>
  );
}

// Canonical Discord button mascot — the richer Wumpus face. `plain` falls back
// to the legacy tiny glyph (kept for the archive/design-system comparison).
function DiscordGlyph({ theme, plain, px }) {
  const p = communityPalettes(theme);
  if (plain) {
    return <PixelSprite map={PX_GLYPH} palette={p.glyph} px={px || 3} style={{ display: "inline-block" }} />;
  }
  return <PixelSprite map={PX_WUMPUS} palette={p.glyph} px={px || 3} className="wumpus-glyph" style={{ display: "inline-block" }} />;
}

Object.assign(window, { PixelSprite, PixelAvatar, CommunityScene, CommunitySceneMini, PxCorners, DiscordGlyph, communityPalettes, PX_WUMPUS, PX_GLYPH });