import * as React from "react";
import type { SymbolStyle, SymbolTier } from "@spinza/game-core/client";

/* ------------------------------------------------------------------------
   SymbolSvg — the exact same procedural symbol artwork the PixiJS renderer
   draws on the reels (`components/game/symbol-art.ts`), ported to SVG so
   lobby posters show the symbols the player will actually meet in-game.
   Geometry, colours, highlights and glow follow symbol-art.ts 1:1; `size` is
   the tile edge, the glyph is centred on (x, y).
   ------------------------------------------------------------------------ */

const INK = "#0b0d14";
const FONT = "var(--font-geist-sans), Geist, Inter, ui-sans-serif, system-ui, sans-serif";

function clamp8(n: number): number {
  return Math.max(0, Math.min(255, n));
}

function parseHex(c: string): [number, number, number] {
  const h = c.replace("#", "");
  const full = h.length === 3 ? h.split("").map((ch) => ch + ch).join("") : h;
  const n = parseInt(full, 16);
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
}

function toHex(r: number, g: number, b: number): string {
  return `#${((clamp8(r) << 16) | (clamp8(g) << 8) | clamp8(b)).toString(16).padStart(6, "0")}`;
}

/** Same arithmetic as symbol-art.ts `lighten` (adds 255*amt per channel). */
export function lightenHex(c: string, amt: number): string {
  const [r, g, b] = parseHex(c);
  const d = Math.round(255 * amt);
  return toHex(r + d, g + d, b + d);
}

/** Same arithmetic as symbol-art.ts `darken`. */
export function darkenHex(c: string, amt: number): string {
  const [r, g, b] = parseHex(c);
  const d = Math.round(255 * amt);
  return toHex(r - d, g - d, b - d);
}

const f = (n: number) => Math.round(n * 100) / 100;

/** Flat [x0,y0,x1,y1,…] list → SVG points string. */
function pts(list: number[]): string {
  const out: string[] = [];
  for (let i = 0; i < list.length; i += 2) out.push(`${f(list[i])},${f(list[i + 1])}`);
  return out.join(" ");
}

function polygonPts(cx: number, cy: number, r: number, sides: number, rot = -Math.PI / 2): string {
  const list: number[] = [];
  for (let i = 0; i < sides; i++) {
    const a = rot + (i * Math.PI * 2) / sides;
    list.push(cx + Math.cos(a) * r, cy + Math.sin(a) * r);
  }
  return pts(list);
}

function starPts(cx: number, cy: number, outer: number, inner: number, points = 5): string {
  const list: number[] = [];
  for (let i = 0; i < points * 2; i++) {
    const r = i % 2 === 0 ? outer : inner;
    const a = -Math.PI / 2 + (i * Math.PI) / points;
    list.push(cx + Math.cos(a) * r, cy + Math.sin(a) * r);
  }
  return pts(list);
}

function arcPath(cx: number, cy: number, r: number, a0: number, a1: number): string {
  const x0 = cx + Math.cos(a0) * r;
  const y0 = cy + Math.sin(a0) * r;
  const x1 = cx + Math.cos(a1) * r;
  const y1 = cy + Math.sin(a1) * r;
  const large = Math.abs(a1 - a0) > Math.PI ? 1 : 0;
  const sweep = a1 > a0 ? 1 : 0;
  return `M${f(x0)} ${f(y0)} A${f(r)} ${f(r)} 0 ${large} ${sweep} ${f(x1)} ${f(y1)}`;
}

export { pts as svgPoints, polygonPts as svgPolygon, starPts as svgStar, arcPath as svgArc };

function Label({ text, fontSize, color, bold = true }: { text: string; fontSize: number; color: string; bold?: boolean }) {
  return (
    <text x={0} y={0} textAnchor="middle" dominantBaseline="central" fontSize={f(fontSize)} fontWeight={bold ? 800 : 600} fill={color} style={{ fontFamily: FONT, letterSpacing: 1 }}>
      {text}
    </text>
  );
}

/* ------------------------------------------------------------------ glyph */

function Glyph({ style, size }: { style: SymbolStyle; size: number }) {
  const main = style.color;
  const accent = style.accent ?? lightenHex(style.color, 0.35);
  const r = size * 0.36;
  const sw = (k: number) => f(size * k);

  switch (style.shape) {
    case "gem":
      return (
        <>
          <polygon points={pts([0, -r, r * 0.85, -r * 0.25, r * 0.55, r, -r * 0.55, r, -r * 0.85, -r * 0.25])} fill={main} />
          <polygon points={pts([0, -r, r * 0.85, -r * 0.25, 0, -r * 0.1, -r * 0.85, -r * 0.25])} fill={accent} fillOpacity={0.85} />
          <polygon points={pts([0, -r * 0.1, r * 0.85, -r * 0.25, r * 0.55, r])} fill={darkenHex(main, 0.15)} />
          <polygon points={pts([-r * 0.2, -r * 0.7, r * 0.15, -r * 0.55, -r * 0.35, -r * 0.35])} fill="#fff" fillOpacity={0.65} />
        </>
      );
    case "hex":
      return (
        <>
          <polygon points={polygonPts(0, 0, r, 6)} fill={main} />
          <polygon points={polygonPts(0, 0, r * 0.68, 6)} fill={darkenHex(main, 0.25)} />
          <polygon points={polygonPts(0, 0, r * 0.42, 6)} fill={accent} />
          {style.label ? <Label text={style.label} fontSize={size * 0.26} color={INK} /> : null}
        </>
      );
    case "star":
      return (
        <>
          <polygon points={starPts(0, 0, r, r * 0.45)} fill={main} />
          <polygon points={starPts(0, 0, r * 0.55, r * 0.25)} fill="#fff" fillOpacity={0.85} />
        </>
      );
    case "circle":
      return (
        <>
          <circle r={f(r)} fill={main} stroke={accent} strokeWidth={sw(0.02)} />
          <circle cx={f(-r * 0.3)} cy={f(-r * 0.3)} r={f(r * 0.35)} fill="#fff" fillOpacity={0.35} />
        </>
      );
    case "diamond":
      return (
        <>
          <polygon points={pts([0, -r, r, 0, 0, r, -r, 0])} fill={main} />
          <polygon points={pts([0, -r, r, 0, 0, 0])} fill={accent} fillOpacity={0.8} />
          <polygon points={pts([0, 0, 0, r, -r, 0])} fill={darkenHex(main, 0.2)} />
        </>
      );
    case "shield":
      return (
        <>
          <polygon points={pts([0, -r, r * 0.85, -r * 0.65, r * 0.75, r * 0.15, 0, r, -r * 0.75, r * 0.15, -r * 0.85, -r * 0.65])} fill={main} />
          <polygon points={pts([0, -r * 0.7, r * 0.5, -r * 0.5, r * 0.45, r * 0.05, 0, r * 0.6, -r * 0.45, r * 0.05, -r * 0.5, -r * 0.5])} fill={darkenHex(main, 0.28)} />
          <path d={`M${f(-r * 0.08)} ${f(-r * 0.5)}h${f(r * 0.16)}v${f(r * 0.9)}h${f(-r * 0.16)}z M${f(-r * 0.38)} ${f(-r * 0.25)}h${f(r * 0.76)}v${f(r * 0.16)}h${f(-r * 0.76)}z`} fill={accent} />
        </>
      );
    case "bolt":
      return (
        <>
          <polygon points={pts([r * 0.15, -r, -r * 0.55, r * 0.1, -r * 0.05, r * 0.1, -r * 0.25, r, r * 0.6, -r * 0.15, r * 0.05, -r * 0.15])} fill={main} />
          <polygon points={pts([r * 0.1, -r * 0.8, -r * 0.3, 0, 0, 0])} fill="#fff" fillOpacity={0.5} />
        </>
      );
    case "ring":
      return (
        <>
          <circle r={f(r * 0.81)} fill="none" stroke={main} strokeWidth={f(r * 0.38)} />
          <circle r={f(r * 0.62)} fill="none" stroke={accent} strokeWidth={sw(0.02)} strokeOpacity={0.9} />
          <path d={arcPath(0, 0, r * 0.81, -Math.PI * 0.9, -Math.PI * 0.3)} fill="none" stroke="#fff" strokeWidth={sw(0.04)} strokeOpacity={0.55} />
        </>
      );
    case "chip": {
      let pins = "";
      for (let i = -2; i <= 2; i++) {
        const y = f(i * r * 0.28 - r * 0.06);
        pins += `M${f(-r - r * 0.18)} ${y}h${f(r * 0.18)}v${f(r * 0.12)}h${f(-r * 0.18)}z M${f(r)} ${y}h${f(r * 0.18)}v${f(r * 0.12)}h${f(-r * 0.18)}z `;
      }
      return (
        <>
          <rect x={f(-r)} y={f(-r * 0.75)} width={f(r * 2)} height={f(r * 1.5)} rx={f(r * 0.25)} fill={main} />
          <rect x={f(-r * 0.75)} y={f(-r * 0.5)} width={f(r * 1.5)} height={f(r)} rx={f(r * 0.15)} fill={darkenHex(main, 0.35)} />
          <path d={pins} fill={accent} />
          {style.label ? <Label text={style.label} fontSize={size * 0.22} color={accent} /> : null}
        </>
      );
    }
    case "crystal":
      return (
        <>
          <polygon points={pts([0, -r, r * 0.5, -r * 0.3, r * 0.35, r * 0.8, -r * 0.35, r * 0.8, -r * 0.5, -r * 0.3])} fill={main} />
          <polygon points={pts([0, -r, r * 0.5, -r * 0.3, 0, r * 0.1])} fill={accent} fillOpacity={0.75} />
          <polygon points={pts([0, r * 0.1, r * 0.35, r * 0.8, -r * 0.35, r * 0.8])} fill={darkenHex(main, 0.2)} />
        </>
      );
    case "letter":
      return (
        <>
          <rect x={f(-r * 0.95)} y={f(-r * 0.95)} width={f(r * 1.9)} height={f(r * 1.9)} rx={f(r * 0.3)} fill={darkenHex(main, 0.45)} fillOpacity={0.9} stroke={main} strokeWidth={sw(0.025)} />
          <Label text={style.label ?? "?"} fontSize={size * 0.4} color={main} />
        </>
      );
    case "vault": {
      let spokes = "";
      for (let i = 0; i < 6; i++) {
        const a = (i * Math.PI) / 3;
        spokes += `M${f(Math.cos(a) * r * 0.25)} ${f(Math.sin(a) * r * 0.25)}L${f(Math.cos(a) * r * 0.62)} ${f(Math.sin(a) * r * 0.62)} `;
      }
      return (
        <>
          <circle r={f(r)} fill={darkenHex(main, 0.4)} stroke={main} strokeWidth={sw(0.03)} />
          <circle r={f(r * 0.7)} fill="none" stroke={main} strokeWidth={sw(0.02)} strokeOpacity={0.7} />
          <path d={spokes} stroke={accent} strokeWidth={sw(0.035)} fill="none" />
          <circle r={f(r * 0.22)} fill={accent} />
        </>
      );
    }
    case "orb":
      return (
        <>
          <circle r={f(r)} fill={main} stroke={accent} strokeWidth={sw(0.02)} strokeOpacity={0.9} />
          <circle r={f(r * 0.75)} fill={accent} fillOpacity={0.35} />
          <circle cx={f(-r * 0.25)} cy={f(-r * 0.3)} r={f(r * 0.25)} fill="#fff" fillOpacity={0.5} />
          {style.label ? <Label text={style.label} fontSize={size * 0.36} color={accent} /> : null}
        </>
      );
    case "coin":
      return (
        <>
          <circle r={f(r)} fill={main} stroke={accent} strokeWidth={sw(0.02)} />
          <circle r={f(r * 0.8)} fill="none" stroke={darkenHex(main, 0.25)} strokeWidth={sw(0.03)} />
          <Label text={style.label ?? "SC"} fontSize={size * 0.24} color={darkenHex(main, 0.5)} />
        </>
      );
    case "skull":
      return (
        <>
          <circle cy={f(-r * 0.15)} r={f(r * 0.8)} fill={main} />
          <rect x={f(-r * 0.45)} y={f(r * 0.3)} width={f(r * 0.9)} height={f(r * 0.55)} rx={f(r * 0.15)} fill={main} />
          <circle cx={f(-r * 0.3)} cy={f(-r * 0.2)} r={f(r * 0.22)} fill={INK} />
          <circle cx={f(r * 0.3)} cy={f(-r * 0.2)} r={f(r * 0.22)} fill={INK} />
          <polygon points={pts([0, r * 0.05, r * 0.12, r * 0.3, -r * 0.12, r * 0.3])} fill={INK} />
        </>
      );
    case "flame":
      return (
        <>
          <polygon points={pts([0, -r, r * 0.55, -r * 0.2, r * 0.7, r * 0.45, r * 0.3, r, -r * 0.3, r, -r * 0.7, r * 0.45, -r * 0.55, -r * 0.2])} fill={main} />
          <polygon points={pts([0, -r * 0.4, r * 0.3, r * 0.1, r * 0.25, r * 0.6, -r * 0.25, r * 0.6, -r * 0.3, r * 0.1])} fill={accent} />
        </>
      );
    case "snow": {
      let axes = "";
      let branches = "";
      for (let i = 0; i < 3; i++) {
        const a = (i * Math.PI) / 3;
        axes += `M${f(Math.cos(a) * r)} ${f(Math.sin(a) * r)}L${f(-Math.cos(a) * r)} ${f(-Math.sin(a) * r)} `;
        for (const s of [1, -1]) {
          const bx = Math.cos(a) * r * 0.6 * s;
          const by = Math.sin(a) * r * 0.6 * s;
          branches += `M${f(bx)} ${f(by)}L${f(bx + Math.cos(a + 0.6) * r * 0.3 * s)} ${f(by + Math.sin(a + 0.6) * r * 0.3 * s)} `;
          branches += `M${f(bx)} ${f(by)}L${f(bx + Math.cos(a - 0.6) * r * 0.3 * s)} ${f(by + Math.sin(a - 0.6) * r * 0.3 * s)} `;
        }
      }
      return (
        <>
          <path d={axes} stroke={main} strokeWidth={sw(0.035)} fill="none" strokeLinecap="round" />
          <path d={branches} stroke={accent} strokeWidth={sw(0.025)} fill="none" strokeLinecap="round" />
          <circle r={f(r * 0.14)} fill="#fff" />
        </>
      );
    }
    case "eye":
      return (
        <>
          <ellipse rx={f(r)} ry={f(r * 0.6)} fill={main} />
          <circle r={f(r * 0.42)} fill={darkenHex(main, 0.5)} />
          <circle r={f(r * 0.2)} fill={accent} />
          <circle cx={f(r * 0.12)} cy={f(-r * 0.14)} r={f(r * 0.07)} fill="#fff" />
        </>
      );
    case "moon":
      return (
        <>
          <circle r={f(r)} fill={main} />
          <circle cx={f(r * 0.45)} cy={f(-r * 0.2)} r={f(r * 0.78)} fill={INK} fillOpacity={0.85} />
          <circle cx={f(-r * 0.4)} cy={f(r * 0.3)} r={f(r * 0.12)} fill={darkenHex(main, 0.2)} />
        </>
      );
    case "leaf":
      return (
        <>
          <path d={`M0 ${f(r)} C${f(-r * 1.1)} ${f(r * 0.2)} ${f(-r * 0.6)} ${f(-r * 0.9)} 0 ${f(-r)} C${f(r * 0.6)} ${f(-r * 0.9)} ${f(r * 1.1)} ${f(r * 0.2)} 0 ${f(r)}Z`} fill={main} />
          <line x1={0} y1={f(r * 0.9)} x2={0} y2={f(-r * 0.8)} stroke={accent} strokeWidth={sw(0.02)} />
        </>
      );
    case "atom":
      return (
        <>
          <circle r={f(r * 0.2)} fill={accent} />
          <ellipse rx={f(r)} ry={f(r * 0.38)} fill="none" stroke={main} strokeWidth={sw(0.025)} />
          <ellipse rx={f(r)} ry={f(r * 0.38)} fill="none" stroke={main} strokeWidth={sw(0.025)} transform="rotate(60)" />
          <ellipse rx={f(r)} ry={f(r * 0.38)} fill="none" stroke={main} strokeWidth={sw(0.025)} transform="rotate(120)" />
        </>
      );
    case "crown":
      return (
        <>
          <polygon points={pts([-r, r * 0.6, -r, -r * 0.4, -r * 0.5, r * 0.05, 0, -r, r * 0.5, r * 0.05, r, -r * 0.4, r, r * 0.6])} fill={main} />
          <rect x={f(-r)} y={f(r * 0.4)} width={f(r * 2)} height={f(r * 0.25)} fill={darkenHex(main, 0.3)} />
          <circle cy={f(-r * 0.95)} r={f(r * 0.12)} fill={accent} />
          <circle cx={f(-r)} cy={f(-r * 0.4)} r={f(r * 0.1)} fill={accent} />
          <circle cx={f(r)} cy={f(-r * 0.4)} r={f(r * 0.1)} fill={accent} />
        </>
      );
    case "wave": {
      const wave = (y: number) => `M${f(-r)} ${f(y)} C${f(-r * 0.5)} ${f(y - r * 0.4)} ${f(-r * 0.2)} ${f(y + r * 0.4)} 0 ${f(y)} C${f(r * 0.2)} ${f(y - r * 0.4)} ${f(r * 0.5)} ${f(y + r * 0.4)} ${f(r)} ${f(y)}`;
      return (
        <>
          <path d={`${wave(-r * 0.5)} ${wave(r * 0.5)}`} fill="none" stroke={main} strokeWidth={sw(0.04)} strokeOpacity={0.8} strokeLinecap="round" />
          <path d={wave(0)} fill="none" stroke={accent} strokeWidth={sw(0.04)} strokeLinecap="round" />
        </>
      );
    }
    case "cube":
      return (
        <>
          <polygon points={pts([0, -r, r * 0.87, -r * 0.5, r * 0.87, r * 0.5, 0, r, -r * 0.87, r * 0.5, -r * 0.87, -r * 0.5])} fill={main} />
          <polygon points={pts([0, -r, r * 0.87, -r * 0.5, 0, 0, -r * 0.87, -r * 0.5])} fill={accent} />
          <polygon points={pts([0, 0, r * 0.87, -r * 0.5, r * 0.87, r * 0.5, 0, r])} fill={darkenHex(main, 0.3)} />
          {style.label ? <Label text={style.label} fontSize={size * 0.3} color="#fff" /> : null}
        </>
      );
    /* ----------------------------------------------------------- themed set */
    case "lock":
      return (
        <>
          <rect x={f(-r * 0.75)} y={f(-r * 0.1)} width={f(r * 1.5)} height={f(r * 1.1)} rx={f(r * 0.2)} fill={main} />
          <path d={arcPath(0, -r * 0.15, r * 0.5, Math.PI, 0)} fill="none" stroke={accent} strokeWidth={sw(0.05)} />
          <circle cy={f(r * 0.35)} r={f(r * 0.16)} fill={INK} />
          <rect x={f(-r * 0.06)} y={f(r * 0.35)} width={f(r * 0.12)} height={f(r * 0.35)} fill={INK} />
        </>
      );
    case "key":
      return (
        <>
          <circle cx={f(-r * 0.45)} cy={f(-r * 0.35)} r={f(r * 0.42)} fill="none" stroke={main} strokeWidth={sw(0.06)} />
          <path d={`M${f(-r * 0.15)} ${f(-r * 0.05)}L${f(r * 0.85)} ${f(r * 0.95)}`} stroke={main} strokeWidth={sw(0.06)} />
          <path d={`M${f(r * 0.45)} ${f(r * 0.55)}L${f(r * 0.7)} ${f(r * 0.3)} M${f(r * 0.65)} ${f(r * 0.75)}L${f(r * 0.9)} ${f(r * 0.5)}`} stroke={accent} strokeWidth={sw(0.05)} />
        </>
      );
    case "bag":
      return (
        <>
          <path d={`M${f(-r * 0.75)} ${f(r * 0.9)} C${f(-r * 1.1)} ${f(-r * 0.3)} ${f(-r * 0.3)} ${f(-r * 0.6)} 0 ${f(-r * 0.55)} C${f(r * 0.3)} ${f(-r * 0.6)} ${f(r * 1.1)} ${f(-r * 0.3)} ${f(r * 0.75)} ${f(r * 0.9)}Z`} fill={main} />
          <rect x={f(-r * 0.3)} y={f(-r * 0.95)} width={f(r * 0.6)} height={f(r * 0.35)} rx={f(r * 0.1)} fill={accent} />
          <line x1={f(-r * 0.35)} y1={f(r * 0.3)} x2={f(r * 0.35)} y2={f(r * 0.3)} stroke={darkenHex(main, 0.3)} strokeWidth={sw(0.03)} />
        </>
      );
    case "warning":
      return (
        <>
          <polygon points={pts([0, -r, r * 0.95, r * 0.75, -r * 0.95, r * 0.75])} fill={main} />
          <polygon points={pts([0, -r * 0.6, r * 0.55, r * 0.55, -r * 0.55, r * 0.55])} fill={INK} />
          <rect x={f(-r * 0.08)} y={f(-r * 0.3)} width={f(r * 0.16)} height={f(r * 0.5)} fill={main} />
          <circle cy={f(r * 0.38)} r={f(r * 0.09)} fill={main} />
        </>
      );
    case "gauge":
      return (
        <>
          <path d={arcPath(0, r * 0.2, r * 0.9, Math.PI, 0)} fill="none" stroke={darkenHex(main, 0.3)} strokeWidth={sw(0.09)} />
          <path d={arcPath(0, r * 0.2, r * 0.9, Math.PI, Math.PI * 1.6)} fill="none" stroke={main} strokeWidth={sw(0.09)} />
          <line x1={0} y1={f(r * 0.2)} x2={f(r * 0.45)} y2={f(-r * 0.5)} stroke={accent} strokeWidth={sw(0.04)} />
          <circle cy={f(r * 0.2)} r={f(r * 0.12)} fill={accent} />
        </>
      );
    case "rocket":
      return (
        <>
          <path d={`M0 ${f(-r)} C${f(r * 0.6)} ${f(-r * 0.4)} ${f(r * 0.5)} ${f(r * 0.4)} ${f(r * 0.35)} ${f(r * 0.6)} L${f(-r * 0.35)} ${f(r * 0.6)} C${f(-r * 0.5)} ${f(r * 0.4)} ${f(-r * 0.6)} ${f(-r * 0.4)} 0 ${f(-r)}Z`} fill={main} />
          <polygon points={pts([-r * 0.35, r * 0.2, -r * 0.75, r * 0.8, -r * 0.35, r * 0.6])} fill={accent} />
          <polygon points={pts([r * 0.35, r * 0.2, r * 0.75, r * 0.8, r * 0.35, r * 0.6])} fill={accent} />
          <circle cy={f(-r * 0.25)} r={f(r * 0.18)} fill={INK} />
          <polygon points={pts([-r * 0.2, r * 0.6, r * 0.2, r * 0.6, 0, r])} fill="#ffb347" />
        </>
      );
    case "chest":
      return (
        <>
          <rect x={f(-r * 0.9)} y={f(-r * 0.2)} width={f(r * 1.8)} height={f(r * 1.0)} rx={f(r * 0.1)} fill={main} />
          <rect x={f(-r * 0.9)} y={f(-r * 0.75)} width={f(r * 1.8)} height={f(r * 0.6)} rx={f(r * 0.3)} fill={darkenHex(main, 0.2)} />
          <rect x={f(-r * 0.9)} y={f(-r * 0.2)} width={f(r * 1.8)} height={f(r * 0.12)} fill={accent} />
          <rect x={f(-r * 0.15)} y={f(-r * 0.2)} width={f(r * 0.3)} height={f(r * 0.35)} rx={f(r * 0.05)} fill={accent} />
        </>
      );
    case "planet":
      return (
        <>
          <circle r={f(r * 0.7)} fill={main} />
          <ellipse cy={f(r * 0.05)} rx={f(r * 1.05)} ry={f(r * 0.28)} fill="none" stroke={accent} strokeWidth={sw(0.04)} />
          <circle cx={f(-r * 0.25)} cy={f(-r * 0.25)} r={f(r * 0.18)} fill="#fff" fillOpacity={0.3} />
          <ellipse cx={f(r * 0.15)} cy={f(r * 0.15)} rx={f(r * 0.3)} ry={f(r * 0.12)} fill={darkenHex(main, 0.25)} fillOpacity={0.8} />
        </>
      );
    case "comet":
      return (
        <>
          <polygon points={pts([r * 0.5, -r * 0.5, -r * 1.0, r * 0.15, -r * 0.6, r * 0.6])} fill={accent} fillOpacity={0.5} />
          <line x1={f(r * 0.5)} y1={f(-r * 0.5)} x2={f(-r * 0.7)} y2={f(r * 0.7)} stroke={accent} strokeOpacity={0.4} strokeWidth={sw(0.05)} />
          <circle cx={f(r * 0.5)} cy={f(-r * 0.5)} r={f(r * 0.4)} fill={main} />
          <circle cx={f(r * 0.4)} cy={f(-r * 0.6)} r={f(r * 0.12)} fill="#fff" fillOpacity={0.6} />
        </>
      );
    case "satellite":
      return (
        <>
          <rect x={f(-r * 0.3)} y={f(-r * 0.3)} width={f(r * 0.6)} height={f(r * 0.6)} rx={f(r * 0.1)} fill={main} />
          <rect x={f(-r * 1.0)} y={f(-r * 0.18)} width={f(r * 0.6)} height={f(r * 0.36)} fill={accent} />
          <rect x={f(r * 0.4)} y={f(-r * 0.18)} width={f(r * 0.6)} height={f(r * 0.36)} fill={accent} />
          <path d={[-0.8, -0.6, 0.6, 0.8].map((x) => `M${f(x * r)} ${f(-r * 0.18)}V${f(r * 0.18)}`).join(" ")} stroke={darkenHex(main, 0.4)} strokeWidth={sw(0.012)} />
          <path d={arcPath(0, -r * 0.55, r * 0.3, Math.PI, 0)} fill="none" stroke={main} strokeWidth={sw(0.03)} />
        </>
      );
    default:
      return <circle r={f(r)} fill={main} />;
  }
}

/* -------------------------------------------------------------- SymbolSvg */

export interface SymbolSvgProps {
  style: SymbolStyle;
  /** Tile edge in user units; the glyph radius is 0.36 × size (as on the reels). */
  size: number;
  tier?: SymbolTier;
  /** Centre position inside the parent SVG (default 0,0). */
  x?: number;
  y?: number;
  rotate?: number;
  opacity?: number;
  /** Dark reel tile behind the glyph (default true, matches the in-game plate). */
  plate?: boolean;
  /** Coloured halo behind the glyph (default true, driven by `style.glow`). */
  halo?: boolean;
  className?: string;
}

/**
 * Renders a reel symbol as an SVG `<g>` centred on (x, y). Drop it inside any
 * `<svg>`; use `SymbolIcon` for a standalone image.
 */
export function SymbolSvg({ style, size, tier = "mid", x = 0, y = 0, rotate = 0, opacity, plate = true, halo = true, className }: SymbolSvgProps) {
  const main = style.color;
  const accent = style.accent ?? lightenHex(style.color, 0.35);
  const glow = style.glow ?? 0.3;
  const r = size * 0.36;
  const pad = size * 0.06;
  const rich = tier === "premium" || tier === "special";
  const transform = `translate(${f(x)} ${f(y)})${rotate ? ` rotate(${f(rotate)})` : ""}`;
  return (
    <g transform={transform} opacity={opacity} className={className}>
      {plate ? <rect x={f(-size / 2 + pad)} y={f(-size / 2 + pad)} width={f(size - pad * 2)} height={f(size - pad * 2)} rx={f(size * 0.16)} fill={INK} fillOpacity={0.72} stroke={rich ? accent : "#fff"} strokeOpacity={rich ? 0.45 : 0.08} strokeWidth={f(Math.max(1, size * 0.012))} /> : null}
      {halo && glow > 0 ? (
        <>
          <circle r={f(r * 1.25)} fill={main} fillOpacity={f(0.18 * glow)} />
          <circle r={f(r)} fill={main} fillOpacity={f(0.16 * glow)} />
        </>
      ) : null}
      <Glyph style={style} size={size} />
    </g>
  );
}

/** Standalone `<svg>` wrapper around `SymbolSvg` (paytable rows, tooltips…). */
export function SymbolIcon({ style, tier, size = 64, className, label }: { style: SymbolStyle; tier?: SymbolTier; size?: number; className?: string; label?: string }) {
  return (
    <svg viewBox={`${-size / 2} ${-size / 2} ${size} ${size}`} width={size} height={size} className={className} role={label ? "img" : undefined} aria-label={label} aria-hidden={label ? undefined : true}>
      <SymbolSvg style={style} tier={tier} size={size} />
    </svg>
  );
}