const SHOWCASE = [
    { id: "espadas-1", suit: "espadas", rank: 1 },
    { id: "bastos-1", suit: "bastos", rank: 1 },
    { id: "espadas-7", suit: "espadas", rank: 7 },
    { id: "oros-7", suit: "oros", rank: 7 },
];
function TrucoApp() {
    const [save, setSave] = useState(null);
    const [screen, setScreen] = useState("title");
    const [match, setMatch] = useState(null);
    const [helpOpen, setHelpOpen] = useState(false);
    const [result, setResult] = useState(null);
    const [lang, setLang] = useState(getLanguage());
    useEffect(() => { const fn = (e) => setLang(e.detail.lang); window.addEventListener("languagechange", fn); return () => window.removeEventListener("languagechange", fn); }, []);
    const recorded = useRef(false);
    useEffect(() => {
        const loaded = loadSave();
        setSave(loaded);
        setSoundEnabled(loaded.sound);
    }, []);
    useEffect(() => {
        if (!match)
            return;
        if (waitingOn(match) !== "ai")
            return;
        const rival = rivalById(match.rivalId);
        const t = window.setTimeout(() => {
            const action = chooseAiAction(match, rival.profile);
            playSfx(action);
            setMatch((m) => (m ? applyAction(m, action) : m));
        }, thinkDelay(rival.profile));
        return () => window.clearTimeout(t);
    }, [match]);
    useEffect(() => {
        if (!match || !save)
            return;
        if (match.phase !== "matchOver" || !match.matchWinner)
            return;
        if (recorded.current)
            return;
        recorded.current = true;
        const rival = rivalById(match.rivalId);
        const won = match.matchWinner === "player";
        const { save: next, delta } = recordMatch(save, {
            ranked: match.ranked,
            won,
            rivalId: rival.id,
            rivalPower: rival.difficulty,
            matchId: match.id,
        });
        writeSave(next);
        setSave(next);
        setResult({
            won,
            delta,
            ranked: match.ranked,
            rival,
            before: save.lp,
            after: next.lp,
            scores: match.scores,
        });
        if (won)
            sfx.win();
        else
            sfx.lose();
        setScreen("result");
    }, [match, save]);
    function persist(partial) {
        if (!save)
            return;
        const next = { ...save, ...partial };
        setSave(next);
        writeSave(next);
    }
    function begin(rival, ranked) {
        unlockAudio();
        recorded.current = false;
        setResult(null);
        setMatch(startMatch(rival.id, ranked));
        setScreen("play");
        sfx.deal();
    }
    function dispatch(action) {
        playSfx(action);
        setMatch((m) => (m ? applyAction(m, action) : m));
    }
    function playSfx(action) {
        if (action.type === "PLAY")
            sfx.play();
        else if (action.type === "CALL")
            sfx.call();
        else if (action.type === "RESPOND" && action.response === "quiero")
            sfx.want();
        else if (action.type === "RESPOND" && action.response === "no-quiero")
            sfx.fold();
        else if (action.type === "MAZO")
            sfx.fold();
        else if (action.type === "ACK")
            sfx.click();
    }
    const rank = lpToRank(save?.lp ?? 0);
    const rival = match ? rivalById(match.rivalId) : null;
    return (<div className="min-h-dvh bg-felt text-cream">
      {screen === "title" ? (<TitleScreen rank={rank} sound={save?.sound ?? true} onPlay={() => {
                unlockAudio();
                setScreen("rivals");
            }} onRanked={() => {
                unlockAudio();
                setScreen("ranked");
            }} onRules={() => setScreen("rules")} onHelp={() => setHelpOpen(true)} onToggleSound={() => {
                const next = !(save?.sound ?? true);
                persist({ sound: next });
                setSoundEnabled(next);
                unlockAudio();
            }}/>) : null}

      {screen === "rivals" ? (<RivalSelect onBack={() => setScreen("title")} onPick={(r) => begin(r, false)}/>) : null}

      {screen === "ranked" && save ? (<RankedHub save={save} onBack={() => setScreen("title")} onQueue={() => begin(rivalForLp(save.lp), true)}/>) : null}

      {screen === "rules" ? <RulesScreen onBack={() => setScreen("title")}/> : null}

      {screen === "play" && match && rival && save ? (<TableView match={match} rival={rival} sound={save.sound} onAction={dispatch} onHelp={() => setHelpOpen(true)} onExit={() => {
                setMatch(null);
                setScreen("title");
            }} onToggleSound={() => {
                persist({ sound: !save.sound });
                setSoundEnabled(!save.sound);
            }}/>) : null}

      {screen === "result" && result && save ? (<ResultScreen result={result} save={save} onMenu={() => {
                setMatch(null);
                setScreen("title");
            }} onRematch={() => begin(result.rival, result.ranked)} onRanked={() => {
                setMatch(null);
                setScreen("ranked");
            }}/>) : null}

      <HelpPanel open={helpOpen} onClose={() => setHelpOpen(false)} match={match}/>
    </div>);
}
function LanguageSelector(){ return <label className="language-box"><span aria-hidden className="text-sm">🌐</span><span className="sr-only">{t("language")}</span><select aria-label={t("language")} value={getLanguage()} onChange={e=>setLanguage(e.target.value)} className="language-select">
  <option className="bg-[#1c1410] text-cream" value="es">Español</option>
  <option className="bg-[#1c1410] text-cream" value="en">🇬🇧 English</option>
  <option className="bg-[#1c1410] text-cream" value="pt">🇧🇷 Português</option>
  <option className="bg-[#1c1410] text-cream" value="it">🇮🇹 Italiano</option>
  <option className="bg-[#1c1410] text-cream" value="fr">🇫🇷 Français</option>
</select></label>; }
function TitleScreen({ rank, sound, onPlay, onRanked, onRules, onHelp, onToggleSound, }) {
    return (<main className="felt-bg mx-auto flex min-h-dvh max-w-3xl flex-col px-4 py-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2"><div className="rank-frame-v12"><RankBadge rank={rank} size="sm"/></div><LanguageSelector/></div>
        <div className="flex">
          <button type="button" className="grid size-11 place-items-center" onClick={onToggleSound} aria-label="Sonido">
            {sound ? <Volume2 className="size-4"/> : <VolumeX className="size-4"/>}
          </button>
          <button type="button" className="grid size-11 place-items-center" onClick={onHelp} aria-label="Ayuda">
            <HelpCircle className="size-4"/>
          </button>
        </div>
      </div>

      <div className="mt-6 text-center">
        <p className="text-[10px] uppercase tracking-[0.25em] text-cream/60">{t("deck")}</p>
        <h1 className="title-logo-v12 mt-2">TRUCO <span>URUGUAYO</span></h1>
        <p className="mx-auto mt-3 max-w-md text-sm leading-relaxed text-cream/75">
          {t("tagline")}
        </p>
        <div className="mx-auto mt-4 flex max-w-md items-center justify-center gap-2 border-2 border-cream/20 bg-ink/40 px-3 py-2 text-[11px] leading-relaxed text-cream/85">
          <span className="font-display text-cream">{t("update")}</span> {t("newTable")}
        </div>
      </div>

      <div className="relative mx-auto mt-8 h-[180px] w-full max-w-md">
        {SHOWCASE.map((card, i) => (<div key={card.id} className="absolute left-1/2 top-4 origin-bottom" style={{
                transform: `translateX(-50%) rotate(${(i - 1.5) * 11}deg) translateX(${(i - 1.5) * 42}px)`,
            }}>
            <PixelCard card={card} size="md" face/>
          </div>))}
      </div>

      <div className="mt-auto flex flex-col gap-2 pt-8">
        <button type="button" className="pixel-btn pixel-btn-primary w-full" onClick={onPlay}>
          <Swords className="size-4"/>
          {t("chooseRival")}
        </button>
        <button type="button" className="pixel-btn w-full" onClick={onRanked}>
          <Trophy className="size-4"/>
          {t("ranked")}
        </button>
        <button type="button" className="pixel-btn w-full" onClick={onRules}>
          <BookOpen className="size-4"/>
          {t("rules")}
        </button>
      </div>
    </main>);
}
function RivalSelect({ onBack, onPick }) {
    return (<main className="mx-auto flex min-h-dvh max-w-3xl flex-col px-4 py-5 sm:py-6">
      <button type="button" className="mb-4 flex shrink-0 items-center gap-1 text-sm text-cream/80" onClick={onBack}>
        <ChevronLeft className="size-4"/> {t("back")}
      </button>
      <h1 className="shrink-0 font-display text-xl">{t("rivals")}</h1>
      <p className="mt-1 shrink-0 text-sm leading-relaxed text-cream/75">{t("rivalsDesc")}</p>
      <div className="mt-4 min-h-0 flex-1 overflow-y-auto overscroll-contain pr-2 pb-6 [scrollbar-width:thin] [scrollbar-color:#f4e8c8_#1c1410]">
        <div className="grid gap-3 sm:grid-cols-2">
          {RIVALS.map((r) => (<button key={r.id} type="button" onClick={() => onPick(r)} className="flex gap-3 border-2 border-ink bg-felt-2 p-3 text-left shadow-pixel transition hover:-translate-y-0.5 hover:bg-felt focus:outline-none focus:ring-2 focus:ring-cream/70">
              <div className="shrink-0 border-2 border-cream/25 bg-ink p-1">
                <PixelAvatar rival={r} size={72}/>
              </div>
              <div className="min-w-0 flex-1">
                <p className="font-display text-sm">{r.name}</p>
                <p className="font-display text-[9px] uppercase tracking-wide text-cream/60">
                  {trDifficulty(r.difficultyLabel)} · {trRivalField(r.id, "title", r.title)}
                </p>
                <p className="mt-1 text-xs leading-snug text-cream/80">{trRivalField(r.id, "blurb", r.blurb)}</p>
              </div>
            </button>))}
        </div>
      </div>
    </main>);
}
function RankedHub({ save, onBack, onQueue, }) {
    const rank = lpToRank(save.lp);
    const peak = lpToRank(save.peakLp);
    const rival = rivalForLp(save.lp);
    const games = save.rankedWins + save.rankedLosses;
    const wr = games ? Math.round((save.rankedWins / games) * 100) : 0;
    return (<main className="mx-auto min-h-dvh max-w-lg px-4 py-6">
      <button type="button" className="mb-4 flex items-center gap-1 text-sm text-cream/70" onClick={onBack}>
        <ChevronLeft className="size-4"/> {t("back")}
      </button>
      <h1 className="font-display text-xl">{t("ranked")}</h1>
      <p className="mt-1 text-sm text-cream/70">
        {t("rankDesc")}
      </p>

      <div className="mt-5 border-2 border-ink bg-felt-2 p-4 shadow-pixel">
        <div className="rank-frame-v12"><RankBadge rank={rank} size="lg"/></div>
        <dl className="mt-4 grid grid-cols-3 gap-2 text-center text-xs">
          <div>
            <dt className="text-cream/50">{t("wins")}</dt>
            <dd className="font-mono text-lg tabular-nums">{save.rankedWins}</dd>
          </div>
          <div>
            <dt className="text-cream/50">{t("losses")}</dt>
            <dd className="font-mono text-lg tabular-nums">{save.rankedLosses}</dd>
          </div>
          <div>
            <dt className="text-cream/50">WR</dt>
            <dd className="font-mono text-lg tabular-nums">{wr}%</dd>
          </div>
        </dl>
        <p className="mt-3 text-[11px] text-cream/60">
          {t("peak")}: {rankLabel(peak)} · {t("streak")} {save.streak} ({t("best")} {save.bestStreak})
        </p>
      </div>

      <div className="rank-scroll mt-4 max-h-40 overflow-y-auto border-2 border-ink bg-ink/25 p-2">
        <p className="mb-2 font-display text-[10px] uppercase tracking-wide text-cream/60">{t("rankDesc")}</p>
        <div className="grid grid-cols-2 gap-1 sm:grid-cols-3">
          {["madera","hierro","bronce","plata","oro","platino","esmeralda","diamante","maestro","gran_maestro","challenger","retador","retador_dorado"].map((tier)=>{ const rr=lpToRank(TIER_META?.[tier]?.min ?? 0); return <div key={tier} className="border border-cream/10 px-2 py-1 text-[10px] text-cream/75">{trTier(tier)}{["madera","hierro","bronce","plata","oro","platino","esmeralda","diamante"].includes(tier)?" IV–I":""}</div>;})}
        </div>
      </div>

      <div className="mt-4 flex items-center gap-3 border-2 border-ink bg-ink/30 p-3">
        <PixelAvatar rival={rival} size={56}/>
        <div>
          <p className="text-[10px] uppercase tracking-wide text-cream/50">{t("nextRival")}</p>
          <p className="font-display text-sm">{rival.name}</p>
          <p className="text-xs text-cream/70">{rival.difficultyLabel}</p>
        </div>
      </div>

      <button type="button" className="pixel-btn pixel-btn-primary mt-5 w-full" onClick={onQueue}>
        {t("queue")}
      </button>

      {save.history.length ? (<ul className="mt-6 space-y-2">
          {save.history.slice(0, 8).map((h, i) => (<li key={`${h.at}-${i}`} className="flex justify-between text-xs text-cream/70">
              <span>
                {h.won ? t("victory") : t("defeat")} {t("versus")} {rivalById(h.rival).name}
              </span>
              <span className={cn("font-mono tabular-nums", h.lp >= 0 ? "text-cream" : "text-crimson")}>
                {h.lp >= 0 ? `+${h.lp}` : h.lp} LP
              </span>
            </li>))}
        </ul>) : null}
    </main>);
}
function RulesScreen({ onBack }) {
    return (<main className="mx-auto min-h-dvh max-w-2xl px-4 py-6">
      <button type="button" className="mb-4 flex items-center gap-1 text-sm text-cream/70" onClick={onBack}>
        <ChevronLeft className="size-4"/> {t("back")}
      </button>
      <h1 className="font-display text-xl">{t("rules")}</h1>
      <div className="mt-4 space-y-5">
        {RULE_SECTIONS.map((s) => (<section key={s.id} className="border-2 border-ink bg-felt-2 p-4">
            <h2 className="font-display text-sm">{s.title}</h2>
            <p className="mt-2 text-sm leading-relaxed text-cream/80">{s.body}</p>
          </section>))}
        <section className="border-2 border-ink bg-felt-2 p-4">
          <h2 className="font-display text-sm">{t("hierarchy")}</h2>
          <div className="mt-3 grid grid-cols-2 gap-2 sm:grid-cols-4">
            {POWER_LADDER.slice(0, 4).map((row) => (<div key={row.label} className="flex flex-col items-center gap-1">
                <PixelCard card={row.sample} size="sm"/>
                <p className="text-center text-[10px] leading-tight text-cream/80">{row.label}</p>
              </div>))}
          </div>
        </section>
      </div>
    </main>);
}
function ResultScreen({ result, save, onMenu, onRematch, onRanked, }) {
    const before = lpToRank(result.before);
    const after = lpToRank(result.after);
    const promoted = rankLabel(before) !== rankLabel(after) && result.won;
    return (<main className="felt-bg mx-auto flex min-h-dvh max-w-md flex-col px-4 py-8">
      <p className="text-center text-[10px] uppercase tracking-[0.2em] text-cream/60">
        {result.ranked ? t("rankedShort") : t("free")}
      </p>
      <h1 className="mt-2 text-center font-display text-3xl">{result.won ? t("win") : t("lose")}</h1>
      <p className="mt-2 text-center text-sm text-cream/75">
        {result.scores.player} a {result.scores.ai} {t("versus")} {result.rival.name}
      </p>

      <div className="mx-auto mt-6">
        <PixelAvatar rival={result.rival} size={96}/>
      </div>
      <p className="mt-2 text-center text-xs italic text-cream/60">“{trRivalField(result.rival.id, "quote", result.rival.quote)}”</p>

      {result.ranked ? (<div className="mt-6 border-2 border-ink bg-felt-2 p-4">
          <RankBadge rank={after} size="md"/>
          <p className="mt-3 font-mono text-sm tabular-nums">
            {result.delta >= 0 ? "+" : ""}
            {result.delta} LP
          </p>
          {promoted ? (<p className="mt-2 font-display text-sm text-cream">{t("promotion", {rank: rankLabel(after)})}</p>) : null}
          <p className="mt-1 text-xs text-cream/60">{t("streak")} {save.streak}</p>
        </div>) : null}

      <div className="mt-auto flex flex-col gap-2 pt-8">
        <button type="button" className="pixel-btn pixel-btn-primary w-full" onClick={onRematch}>
          {t("rematch")}
        </button>
        {result.ranked ? (<button type="button" className="pixel-btn w-full" onClick={onRanked}>
            {t("viewRanked")}
          </button>) : null}
        <button type="button" className="pixel-btn w-full" onClick={onMenu}>
          {t("menu")}
        </button>
      </div>
    </main>);
}