/* QueueUp.gg — Results page (best match + alternatives + why) */
const { useState, useEffect } = React;

const STORE_LABEL = { PC: "Steam", PS5: "PlayStation Store", Xbox: "Xbox Store", Switch: "Nintendo eShop" };

function PrefSummary({ prefs }) {
  const moodNames = prefs.moods.map((m) => MOODS.find((x) => x.id === m)?.name).filter(Boolean);
  return (
    <div className="results-pref-row">
      <span className="chip chip-a1">{prefs.players} {prefs.players === 1 ? "player" : "players"}</span>
      <span className="chip">{prefs.platforms.join(" · ") || "any platform"}</span>
      <span className="chip">{QU_TIME_LABEL[prefs.time]}</span>
      {moodNames.map((m) => <span key={m} className="chip chip-a2">{m}</span>)}
      {prefs.freeOnly && <span className="chip chip-free">Free only</span>}
      {prefs.skill && prefs.skill !== "mixed" && <span className="chip">{prefs.skill}</span>}
    </div>
  );
}

function WhyRow({ ico, title, detail }) {
  return (
    <div className="why-row">
      <div className="why-ico">{Icons[ico]({ size: 16 })}</div>
      <div><div className="wt">{title}</div><div className="wd">{detail}</div></div>
    </div>
  );
}

function BestMatch({ g, onOpen }) {
  return (
    <div className="card best" onClick={() => onOpen(g)}>
      <div className="best-grid">
        <div className="best-art">
          <GameArt game={g} className="" />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(120deg, transparent, rgba(8,8,13,.35))" }} />
          <span className="chip" style={{ position: "absolute", top: 16, left: 16, background: "rgba(8,8,13,.7)", color: "var(--amber)", borderColor: "rgba(251,191,36,.4)" }}>
            {Icons.crown({ size: 13 })}&nbsp; Best Match
          </span>
        </div>
        <div className="best-body">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16 }}>
            <div>
              <div className="kicker" style={{ marginBottom: 8 }}>Tonight's pick</div>
              <h2>{g.name}</h2>
              <div className="gcard-tags" style={{ marginTop: 12 }}>
                {g.genres.map((t) => <span key={t} className="tag">{t}</span>)}
                {g.free && <span className="chip chip-free">Free</span>}
              </div>
            </div>
            <ScoreRing value={g.score} />
          </div>
          <p className="muted" style={{ fontSize: 15.5, lineHeight: 1.55, margin: "16px 0 0" }}>{g.blurb}</p>
          <div className="best-why">
            <WhyRow ico="users" title="Player fit" detail={g.breakdown.players.label} />
            <WhyRow ico="clock" title="Session length" detail={g.breakdown.length.label} />
            <WhyRow ico="gamepad" title="Platform" detail={g.breakdown.platforms.label} />
            <WhyRow ico="target" title="Mood match" detail={g.breakdown.mood.label} />
          </div>
          <div className="best-cta">View full breakdown {Icons.arrowR({ size: 16 })}</div>
        </div>
      </div>
    </div>
  );
}

function AltCard({ g, rank, onOpen }) {
  // rotate the highlighted reason across facets so the list isn't monotonous
  const facets = [g.breakdown.mood.label, g.breakdown.length.label, g.breakdown.players.label];
  const reason = g.reasons.find((r) => r !== g.breakdown.mood.label) && rank % 2 === 1
    ? g.reasons.find((r) => r !== g.breakdown.mood.label)
    : facets[rank % facets.length];
  return (
    <div className="card gcard" onClick={() => onOpen(g)}>
      <GameArt game={g} className="gcard-art" />
      <div className="gcard-main">
        <div className="gcard-top">
          <div className="gcard-name">{g.name}</div>
          <div className="gcard-score">{g.score}%</div>
        </div>
        <div className="gcard-tags">
          {g.genres.slice(0, 2).map((t) => <span key={t} className="tag">{t}</span>)}
          {g.free && <span className="chip chip-free">Free</span>}
        </div>
        <div className="gcard-reason">{reason}</div>
        <div className="gcard-meta">
          <span><b>{g.min === g.max ? g.min : `${g.min}–${g.max}`}</b> players</span>
          <span><b>~{g.length}m</b> sessions</span>
          <span>{g.breakdown.platforms.matched.length ? g.breakdown.platforms.matched.join("/") : g.platforms[0]}</span>
        </div>
        <div className="gcard-cta">Details {Icons.arrowR({ size: 12 })}</div>
      </div>
    </div>
  );
}

function Results({ prefs, results, onRestart, onTweak, onVote }) {
  const [shared, setShared] = useState(false);
  const [selected, setSelected] = useState(null);
  const best = results[0];
  const alts = results.slice(1, 7);

  const share = () => {
    const link = `ggwhatnext.com/s/${prefs.sessionId}`;
    navigator.clipboard?.writeText(link).catch(() => {});
    setShared(true); setTimeout(() => setShared(false), 1800);
  };

  return (
    <div className="results container">
      <div className="results-head">
        <div>
          <div className="kicker">{results.length} matches found</div>
          <h1>{best ? "Here's your move." : "Hmm, tough crowd."}</h1>
          <PrefSummary prefs={prefs} />
        </div>
        <div style={{ display: "flex", gap: 10, flexShrink: 0 }}>
          {results.length > 1 && (
            <button className="btn btn-primary" onClick={onVote}>{Icons.users({ size: 17 })} Put it to a vote</button>
          )}
          <button className="btn btn-outline" onClick={share}>
            {shared ? <>{Icons.check({ size: 17 })} Link copied</> : <>{Icons.share({ size: 17 })} Share</>}
          </button>
          <button className="btn btn-ghost" onClick={onRestart}>{Icons.refresh({ size: 17 })} Start again</button>
        </div>
      </div>

      <div className="faint" style={{ fontSize: 12.5, lineHeight: 1.5, margin: "2px 0 22px" }}>
        Some recommended games may include mature-rated content. Please review age ratings before playing.
      </div>

      {best ? (
        <>
          <BestMatch g={best} onOpen={setSelected} />
          {alts.length > 0 && (
            <>
              <div style={{ display: "flex", alignItems: "center", gap: 12, margin: "30px 0 4px" }}>
                <h3 style={{ fontSize: 20 }}>If that's not it…</h3>
                <div style={{ flex: 1, height: 1, background: "var(--border)" }} />
                <span className="wz-step-label">{alts.length} backups</span>
              </div>
              <div className="alts">
                {alts.map((g, i) => <AltCard key={g.id} g={g} rank={i + 2} onOpen={setSelected} />)}
              </div>
            </>
          )}
        </>
      ) : (
        <div className="card empty">
          <div className="e-emoji">🎮💀</div>
          <h2 style={{ fontSize: 26, marginTop: 14 }}>No games cleared the filters.</h2>
          <p className="muted" style={{ maxWidth: 420, margin: "10px auto 22px", lineHeight: 1.5 }}>
            Your combo was a little too specific — try fewer platforms, more time, or loosen the free-only toggle.
          </p>
          <button className="btn btn-primary" onClick={onRestart}>{Icons.refresh({ size: 17 })} Tweak the filters</button>
        </div>
      )}

      <div style={{ textAlign: "center", marginTop: 40 }}>
        <button className="btn btn-ghost" onClick={onTweak}>{Icons.arrowL({ size: 16 })} Adjust answers</button>
      </div>

      {selected && <GameModal game={selected} prefs={prefs} isBest={best && selected.id === best.id} onClose={() => setSelected(null)} />}
    </div>
  );
}
window.Results = Results;

/* ---------------- game detail modal ---------------- */
function GameModal({ game, prefs, isBest, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, []);
  if (!game) return null;
  const g = game;
  const inRoom = (pl) => prefs.platforms.includes(pl);

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-art">
          <GameArt game={g} className="" />
          <div className="m-scrim" />
          {isBest && (
            <span className="chip modal-crown" style={{ background: "rgba(8,8,13,.7)", color: "var(--amber)", borderColor: "rgba(251,191,36,.4)" }}>
              {Icons.crown({ size: 13 })}&nbsp; Best Match
            </span>
          )}
          <button className="modal-close" onClick={onClose} aria-label="Close">{Icons.check ? "\u2715" : "x"}</button>
          <div className="modal-headline">
            <div>
              <h2>{g.name}</h2>
              <div className="m-tags">
                {g.genres.map((t) => <span key={t} className="tag">{t}</span>)}
                {g.free && <span className="chip chip-free">Free</span>}
              </div>
            </div>
            <ScoreRing value={g.score} size={76} />
          </div>
        </div>

        <div className="modal-body">
          <p className="m-blurb">{g.blurb}</p>

          <div className="m-stats">
            <div className="m-stat"><div className="v">{g.min === g.max ? g.min : `${g.min}–${g.max}`}</div><div className="k">Players</div></div>
            <div className="m-stat"><div className="v">~{g.length}m{g.flexible ? "+" : ""}</div><div className="k">Per session</div></div>
            <div className="m-stat"><div className="v">{g.score}%</div><div className="k">Match score</div></div>
          </div>

          <p className="m-label">Why it fits your night</p>
          <div className="m-why">
            <WhyRow ico="users" title="Player fit" detail={g.breakdown.players.label} />
            <WhyRow ico="clock" title="Session length" detail={g.breakdown.length.label} />
            <WhyRow ico="gamepad" title="Platform" detail={g.breakdown.platforms.label} />
            <WhyRow ico="target" title="Mood match" detail={g.breakdown.mood.label} />
            <WhyRow ico={g.free ? "sparkles" : "zap"} title="Cost" detail={g.free ? "Free to play — nobody has to buy in" : "Paid title — make sure the squad owns it"} />
          </div>

          <p className="m-label">Available on</p>
          <div className="m-plats">
            {g.platforms.map((pl) => (
              <span key={pl} className={`plat-pill ${inRoom(pl) ? "in-room" : ""}`}>
                {Icons[pl === "PC" ? "pc" : "gamepad"]({ size: 15 })} {pl}{inRoom(pl) ? " · in your room" : ""}
              </span>
            ))}
          </div>

          <div className="store-row">
            <a className="btn btn-primary store-btn" href="#" onClick={(e) => e.preventDefault()}>
              {Icons.zap({ size: 16, fill: "currentColor", stroke: "none" })} Launch on {STORE_LABEL[g.breakdown.platforms.matched[0] || g.platforms[0]]}
            </a>
            <button className="btn btn-ghost store-btn" onClick={onClose}>{Icons.arrowL({ size: 16 })} Back to picks</button>
          </div>
        </div>
      </div>
    </div>
  );
}