/* icons.jsx — Dutch resource + reward glyphs + procedural PixelAvatar.
   Tier 0 = solid circle, Tier 1 = solid square, Tier 2 = purple star / dust.
   Globals: window.ItemIcon, window.PixelAvatar, window.BrandGlyph
*/

const ICON_COLORS = {
  blue:   { stroke: '#4d92dc', dark: '#22507f', glow: '#4d92dc' },
  red:    { stroke: '#d65a48', dark: '#7a261c', glow: '#d65a48' },
  yellow: { stroke: '#e8c050', dark: '#8a6a1c', glow: '#e8c050' },
  orange: { stroke: '#e08840', dark: '#7d4214', glow: '#e08840' },
  green:  { stroke: '#6ca042', dark: '#33521a', glow: '#6ca042' },
  white:  { stroke: '#f0f0f0', dark: '#888888', glow: '#ffffff' },
  purple: { stroke: '#b48ef0', dark: '#5a3a8c', glow: '#b48ef0' },
  gold:   { stroke: '#d4a73a', dark: '#7d5e1f', glow: '#d4a73a' },
  /* legacy aliases */
  teal:   { stroke: '#4d92dc', dark: '#22507f', glow: '#4d92dc' },
  amber:  { stroke: '#e08840', dark: '#7d4214', glow: '#e08840' },
  violet: { stroke: '#b48ef0', dark: '#5a3a8c', glow: '#b48ef0' },
  rose:   { stroke: '#b48ef0', dark: '#5a3a8c', glow: '#b48ef0' },
};

const GLYPHS = {
  // ---- Tier 0 — solid circles ----
  water:       (c) => <circle cx="16" cy="16" r="10" fill={c.stroke} stroke={c.dark} strokeWidth="2"/>,
  paddenstoel: (c) => <circle cx="16" cy="16" r="10" fill={c.stroke} stroke={c.dark} strokeWidth="2"/>,
  zand:        (c) => <circle cx="16" cy="16" r="10" fill={c.stroke} stroke={c.dark} strokeWidth="2"/>,

  // ---- Tier 1 — solid squares ----
  lava:    (c) => <rect x="6" y="6" width="20" height="20" fill={c.stroke} stroke={c.dark} strokeWidth="2"/>,
  zeewier: (c) => <rect x="6" y="6" width="20" height="20" fill={c.stroke} stroke={c.dark} strokeWidth="2"/>,
  fles:    (c) => <rect x="6" y="6" width="20" height="20" fill={c.stroke} stroke={c.dark} strokeWidth="2"/>,

  // ---- Tier 2 ----
  enderparel: (c) => (
    <polygon
      points="16,3 19.6,12.4 29.4,12.7 21.4,18.8 24.4,28 16,22.6 7.6,28 10.6,18.8 2.6,12.7 12.4,12.4"
      fill={c.stroke} stroke={c.dark} strokeWidth="1.5" strokeLinejoin="miter"
    />
  ),
  enderpoeder: (c) => (
    <g fill={c.stroke} stroke={c.dark} strokeWidth="0.6">
      <rect x="7"  y="7"  width="3" height="3"/>
      <rect x="14" y="5"  width="2" height="2"/>
      <rect x="21" y="7"  width="3" height="3"/>
      <rect x="5"  y="14" width="2" height="2"/>
      <rect x="11" y="13" width="3" height="3"/>
      <rect x="17" y="15" width="2" height="2"/>
      <rect x="23" y="13" width="3" height="3"/>
      <rect x="8"  y="21" width="2" height="2"/>
      <rect x="14" y="22" width="3" height="3"/>
      <rect x="21" y="21" width="2" height="2"/>
    </g>
  ),

  // ---- Basic rewards (Dutch) -----------------------------------------------
  // Snelheid — speed chevron
  snelheid: (c) => (
    <polyline points="9,7 21,16 9,25" fill="none" stroke={c.stroke} strokeWidth="3.5" strokeLinecap="square" strokeLinejoin="miter"/>
  ),
  // Partner — tall Enderman-like silhouette with eyes
  partner: (c) => (
    <g>
      <rect x="11" y="4"  width="10" height="24" fill={c.stroke} stroke={c.dark} strokeWidth="1"/>
      <rect x="13" y="11" width="2"  height="3"  fill="#ffffff"/>
      <rect x="17" y="11" width="2"  height="3"  fill="#ffffff"/>
    </g>
  ),
  // DJ — eighth note
  dj: (c) => (
    <g>
      <ellipse cx="11" cy="23" rx="5" ry="4" fill={c.stroke} stroke={c.dark} strokeWidth="1.5"/>
      <rect x="15" y="6" width="3" height="18" fill={c.stroke}/>
      <polygon points="15,6 23,9 23,14 15,11" fill={c.stroke}/>
    </g>
  ),

  // ---- Advanced rewards (Dutch) --------------------------------------------
  // Snelheid 2 — double chevron
  snelheid_2: (c) => (
    <g fill="none" stroke={c.stroke} strokeWidth="3.5" strokeLinecap="square" strokeLinejoin="miter">
      <polyline points="5,7 14,16 5,25"/>
      <polyline points="14,7 23,16 14,25"/>
    </g>
  ),
  // Teleporteren — 8-rayed starburst with a small core
  teleporteren: (c) => (
    <g>
      <g stroke={c.stroke} strokeWidth="3" strokeLinecap="square">
        <line x1="16" y1="3"  x2="16" y2="9"/>
        <line x1="16" y1="23" x2="16" y2="29"/>
        <line x1="3"  y1="16" x2="9"  y2="16"/>
        <line x1="23" y1="16" x2="29" y2="16"/>
        <line x1="6"  y1="6"  x2="11" y2="11"/>
        <line x1="21" y1="21" x2="26" y2="26"/>
        <line x1="6"  y1="26" x2="11" y2="21"/>
        <line x1="21" y1="11" x2="26" y2="6"/>
      </g>
      <rect x="12" y="12" width="8" height="8" fill={c.stroke} stroke={c.dark} strokeWidth="1.5"/>
    </g>
  ),
  // Duo — pixel heart
  duo: (c) => (
    <g fill={c.stroke}>
      <rect x="6"  y="8"  width="6" height="6"/>
      <rect x="20" y="8"  width="6" height="6"/>
      <rect x="4"  y="10" width="2" height="6"/>
      <rect x="26" y="10" width="2" height="6"/>
      <rect x="6"  y="14" width="20" height="4"/>
      <rect x="8"  y="18" width="16" height="2"/>
      <rect x="10" y="20" width="12" height="2"/>
      <rect x="12" y="22" width="8"  height="2"/>
      <rect x="14" y="24" width="4"  height="2"/>
    </g>
  ),

  // ---- Class rewards (Dutch) ----------------------------------------------
  // Speeltijd — pixel clock face
  speeltijd: (c) => (
    <g>
      <circle cx="16" cy="16" r="11" fill="none" stroke={c.stroke} strokeWidth="3"/>
      <rect x="15" y="8"  width="2" height="9" fill={c.stroke}/>
      <rect x="16" y="15" width="8" height="2" fill={c.stroke}/>
      <rect x="15" y="15" width="3" height="3" fill={c.stroke}/>
    </g>
  ),
  // Plaats kiezen — pixel chair (back + seat + legs)
  plaats_kiezen: (c) => (
    <g fill={c.stroke}>
      <rect x="9"  y="6"  width="14" height="4"/>    {/* backrest top */}
      <rect x="9"  y="6"  width="3"  height="14"/>   {/* back left */}
      <rect x="20" y="6"  width="3"  height="14"/>   {/* back right */}
      <rect x="7"  y="18" width="18" height="4"/>    {/* seat */}
      <rect x="8"  y="22" width="3"  height="6"/>    {/* leg front-left */}
      <rect x="21" y="22" width="3"  height="6"/>    {/* leg front-right */}
    </g>
  ),
};

function ItemIcon({ itemKey, size = 20, glow = false }) {
  const item = ITEMS[itemKey];
  if (!item) return null;
  const c = ICON_COLORS[item.color] || ICON_COLORS.purple;
  const draw = GLYPHS[itemKey];
  return (
    <svg
      width={size} height={size} viewBox="0 0 32 32"
      style={glow ? { filter: `drop-shadow(0 0 4px ${c.glow})` } : undefined}
      shapeRendering="crispEdges"
    >
      {draw ? draw(c) : <rect x="6" y="6" width="20" height="20" fill={c.stroke} stroke={c.dark} strokeWidth="2"/>}
    </svg>
  );
}

function BrandGlyph() {
  return (
    <svg viewBox="0 0 16 16" className="brand-glyph" shapeRendering="crispEdges">
      <polygon points="8,1 15,8 8,15 1,8" fill="#b48ef0"/>
      <rect x="5" y="5" width="6" height="6" fill="#6e3ec8"/>
      <rect x="7" y="7" width="2" height="2" fill="#ffffff"/>
    </svg>
  );
}

const AVATAR_PALETTE = [
  { fg: '#b48ef0', bg: '#2a1648' },
  { fg: '#5fb0ff', bg: '#0e2848' },
  { fg: '#7ec850', bg: '#102a0e' },
  { fg: '#f0a868', bg: '#2c1808' },
  { fg: '#f0d050', bg: '#2a2008' },
  { fg: '#f08070', bg: '#2a0c08' },
  { fg: '#d8d8e0', bg: '#1a1a22' },
];

function hash3(seed, x, y) {
  let h = ((seed + 17) * 2654435761 ^ (x * 374761393) ^ (y * 668265263)) >>> 0;
  h = ((h ^ (h >>> 15)) * 2246822519) >>> 0;
  h = ((h ^ (h >>> 13)) * 3266489917) >>> 0;
  return (h ^ (h >>> 16)) >>> 0;
}

function PixelAvatar({ seed = 0, size = '100%' }) {
  const N = 8;
  const palette = AVATAR_PALETTE[seed % AVATAR_PALETTE.length];
  const cells = [];
  const half = N / 2;
  for (let y = 0; y < N; y++) {
    for (let x = 0; x < half; x++) {
      const fillProb = (y === 0 || y === N - 1) ? 30 : 55;
      if ((hash3(seed, x, y) % 100) < fillProb) {
        cells.push([x, y]);
        cells.push([N - 1 - x, y]);
      }
    }
  }
  return (
    <svg
      width={size} height={size} viewBox={`0 0 ${N} ${N}`}
      preserveAspectRatio="none"
      shapeRendering="crispEdges"
      style={{ background: palette.bg }}
    >
      {cells.map(([x, y], i) => (
        <rect key={i} x={x} y={y} width="1" height="1" fill={palette.fg}/>
      ))}
    </svg>
  );
}

Object.assign(window, { ItemIcon, ICON_COLORS, BrandGlyph, PixelAvatar });