/* QueueUp.gg — icons + shared atoms (exported to window) */
const { useState, useEffect, useRef } = React;

/* ---------------- icons (stroke, currentColor) ---------------- */
const Ic = ({ d, size = 20, fill, ...p }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill || "none"} stroke="currentColor"
    strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>{d}</svg>
);
const Icons = {
  users: (p) => <Ic {...p} d={<><path d="M16 19v-1a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v1"/><circle cx="9" cy="7" r="3.2"/><path d="M22 19v-1a4 4 0 0 0-3-3.8"/><path d="M16 3.3A4 4 0 0 1 16 11"/></>} />,
  pc: (p) => <Ic {...p} d={<><rect x="2" y="3.5" width="20" height="13" rx="2"/><path d="M8 20.5h8M12 16.5v4"/></>} />,
  gamepad: (p) => <Ic {...p} d={<><path d="M6 11h4M8 9v4"/><circle cx="15.5" cy="11" r=".6" fill="currentColor"/><circle cx="17.5" cy="13" r=".6" fill="currentColor"/><rect x="2" y="6" width="20" height="12" rx="5"/></>} />,
  clock: (p) => <Ic {...p} d={<><circle cx="12" cy="12" r="9"/><path d="M12 7.5V12l3 2"/></>} />,
  sword: (p) => <Ic {...p} d={<><path d="M14.5 17.5 3 6V3h3l11.5 11.5"/><path d="m13 19 6-6M16 16l4 4M19 21l2-2"/></>} />,
  handshake: (p) => <Ic {...p} d={<><path d="m11 17 2 2a1 1 0 0 0 1.4 0l3.6-3.6a1 1 0 0 0 0-1.4L14 9.5"/><path d="m21 14-5.5-5.5L13 11l-2-2"/><path d="M3 10.5 8.5 5l3.5 3.5L9 11.5"/><path d="m3 10.5 5.5 5.5"/></>} />,
  ghost: (p) => <Ic {...p} d={<><path d="M5 21v-9a7 7 0 0 1 14 0v9l-2.5-1.8L14 21l-2-1.6L10 21l-2.5-1.8L5 21Z"/><circle cx="9.5" cy="11" r=".7" fill="currentColor"/><circle cx="14.5" cy="11" r=".7" fill="currentColor"/></>} />,
  smile: (p) => <Ic {...p} d={<><circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><path d="M9 9h.01M15 9h.01"/></>} />,
  coffee: (p) => <Ic {...p} d={<><path d="M17 8h1.5a2.5 2.5 0 0 1 0 5H17"/><path d="M3 8h14v6a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V8Z"/><path d="M7 3v2M11 3v2"/></>} />,
  check: (p) => <Ic {...p} d={<path d="M20 6 9 17l-5-5"/>} />,
  copy: (p) => <Ic {...p} d={<><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></>} />,
  crown: (p) => <Ic {...p} d={<path d="M3 17h18l-1.5-9-4.5 4-3-6-3 6L4.5 8 3 17Z"/>} />,
  sparkles: (p) => <Ic {...p} d={<><path d="M12 3v4M12 17v4M3 12h4M17 12h4"/><path d="m6.5 6.5 1.8 1.8M15.7 15.7l1.8 1.8M17.5 6.5l-1.8 1.8M8.3 15.7l-1.8 1.8"/></>} />,
  arrowR: (p) => <Ic {...p} d={<><path d="M5 12h14M13 6l6 6-6 6"/></>} />,
  arrowL: (p) => <Ic {...p} d={<><path d="M19 12H5M11 6l-6 6 6 6"/></>} />,
  share: (p) => <Ic {...p} d={<><circle cx="18" cy="5" r="2.5"/><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="19" r="2.5"/><path d="m8.2 10.8 7.6-4.6M8.2 13.2l7.6 4.6"/></>} />,
  refresh: (p) => <Ic {...p} d={<><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></>} />,
  zap: (p) => <Ic {...p} d={<path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/>} />,
  trophy: (p) => <Ic {...p} d={<><path d="M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0V4Z"/><path d="M7 6H4v2a3 3 0 0 0 3 3M17 6h3v2a3 3 0 0 1-3 3"/></>} />,
  link: (p) => <Ic {...p} d={<><path d="M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1"/></>} />,
  target: (p) => <Ic {...p} d={<><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.2" fill="currentColor"/></>} />,
};

/* mood → icon + meta */
const MOODS = [
  { id: "casual", name: "Casual", desc: "Chill fun, low stakes", ico: "smile" },
  { id: "competitive", name: "Competitive", desc: "Ranked, sweaty, clutch", ico: "sword" },
  { id: "coop", name: "Co-op", desc: "Team up vs the game", ico: "handshake" },
  { id: "horror", name: "Horror", desc: "Screams guaranteed", ico: "ghost" },
  { id: "chill", name: "Chill", desc: "Cozy, slow, vibes", ico: "coffee" },
];
const PLATFORMS = [
  { id: "PC", name: "PC", ico: "pc" },
  { id: "PS5", name: "PS5", ico: "gamepad" },
  { id: "Xbox", name: "Xbox", ico: "gamepad" },
  { id: "Switch", name: "Switch", ico: "gamepad" },
];
const TIMES = [
  { id: 30, name: "30 min", desc: "Quick session" },
  { id: 60, name: "1 hour", desc: "A solid run" },
  { id: 150, name: "2+ hours", desc: "We're locked in" },
];
const SKILLS = [
  { id: "casual", name: "Casual", desc: "Just here for fun" },
  { id: "mixed", name: "Mixed", desc: "A bit of everything" },
  { id: "sweaty", name: "Sweaty", desc: "We came to win" },
];

/* deterministic gradient hue per game id (stable art) */
function gameHue(id) { let h = 0; for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) % 360; return h; }
function GameArt({ game, className }) {
  // Real cover art when a coverUrl is present; auto-falls back to the
  // procedural poster if it's empty OR the image fails to load.
  const [err, setErr] = useState(false);
  const showImg = game.coverUrl && !err;
  return (
    <div className={className} style={{ position: "relative", overflow: "hidden" }}>
      <CoverArt game={game} />
      {showImg && (
        <img src={game.coverUrl} alt={game.name} loading="lazy" onError={() => setErr(true)}
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      )}
    </div>
  );
}

function Pill({ kids, cls = "" }) { return <span className={`chip ${cls}`}>{kids}</span>; }

/* circular score ring */
function ScoreRing({ value, size = 92 }) {
  const r = (size - 12) / 2, c = 2 * Math.PI * r;
  return (
    <div className="score-ring" style={{ width: size, height: size }}>
      <svg width={size} height={size}>
        <circle cx={size/2} cy={size/2} r={r} stroke="var(--surface-3)" strokeWidth="7" fill="none" />
        <circle cx={size/2} cy={size/2} r={r} stroke="url(#sg)" strokeWidth="7" fill="none"
          strokelinecap="round" strokeDasharray={c} strokeDashoffset={c * (1 - value/100)} style={{ transition: "stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1)" }} />
        <defs><linearGradient id="sg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="var(--a1)"/><stop offset="1" stopColor="var(--a2)"/></linearGradient></defs>
      </svg>
      <div className="val">{value}<small>%</small></div>
    </div>
  );
}

Object.assign(window, { Icons, MOODS, PLATFORMS, TIMES, SKILLS, GameArt, Pill, ScoreRing, gameHue });