// ============================================
// REGRAS & COMO JOGAR — documentação (progressão de XP + regras dos modos)
// ============================================

const RL = {
    gold: "#e3c878", goldSoft: "rgba(212,175,55,.7)", text: "#f1e8d0",
    win: "#6fca9f", loss: "#e0625a",
    cardBg: "linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.28))",
    cardBorder: "rgba(201,162,39,.16)",
};

// Regras resumidas por modo (padrão do bilhar; sequência de bolas inclusa).
const RL_GAMES = [
    {
        id: "8ball", name: window.t("8-Ball (Bola 8)"), icon: "8",
        how: window.t("15 bolas: lisas (1–7), listradas (9–15) e a 8 preta. Depois da quebra, cada jogador fica com um grupo (lisas OU listradas) conforme a primeira encaçapada."),
        win: window.t("Encaçape TODO o seu grupo e, por fim, a bola 8 na caçapa que você indicar. Encaçapar a 8 antes da hora, na caçapa errada, ou junto com falta = derrota imediata."),
        seq: window.t("Livre dentro do seu grupo → a 8 por último."),
    },
    {
        id: "9ball", name: window.t("9-Ball (Bola 9)"), icon: "9",
        how: window.t("Bolas 1 a 9. É obrigatório acertar PRIMEIRO a bola de menor número na mesa (mas qualquer bola pode cair na jogada)."),
        win: window.t("Quem encaçapar a bola 9 de forma legal vence — inclusive por combinação (ex.: acerta a 1 que bate na 9)."),
        seq: window.t("Sempre a de menor número primeiro."),
    },
    {
        id: "snooker", name: "Snooker", icon: "❄",
        how: window.t("15 vermelhas (1 pt) + 6 coloridas: amarela (2), verde (3), marrom (4), azul (5), rosa (6), preta (7). Alterna vermelha → colorida."),
        win: window.t("As vermelhas ficam na caçapa; as coloridas voltam à mesa enquanto houver vermelhas. No fim, encaçapam-se as coloridas em ordem de valor. Maior pontuação vence o frame."),
        seq: window.t("Vermelha → colorida → vermelha… depois coloridas crescentes."),
    },
    {
        id: "straight", name: window.t("Straight Pool (14.1)"), icon: "▣",
        how: window.t("Encaçape qualquer bola ANUNCIADA (bola + caçapa) — cada uma vale 1 ponto."),
        win: window.t("Quando sobra 1 bola, as outras 14 são re-arrumadas e o jogo continua. Primeiro a atingir a pontuação-alvo vence."),
        seq: window.t("Livre, mas tudo é anunciado."),
    },
    {
        id: "carom", name: window.t("Carom 3 Tabelas"), icon: "◎",
        how: window.t("Mesa SEM caçapas, 3 bolas. Você joga sempre com a sua branca."),
        win: window.t("Faça sua branca tocar as DUAS outras bolas, batendo em pelo menos 3 tabelas (bordas) antes de tocar a segunda bola. Cada acerto = 1 ponto."),
        seq: window.t("Sem sequência — é pontuação por carambola."),
    },
    {
        id: "15ball", name: window.t("Bola 15 (Rotation)"), icon: "15",
        how: window.t("Bolas 1 a 15. Acerte sempre a de menor número primeiro; cada bola vale o seu número em pontos."),
        win: window.t("Maior pontuação quando todas as 15 caírem (total 120). Bom pra quem gosta de planejar a sequência."),
        seq: window.t("Sempre a de menor número primeiro."),
    },
];

function RulesScreen({ navigate }) {
    const [tab, setTab] = React.useState("xp");
    const TABS = [["xp", window.t("Progressão & XP")], ["games", window.t("Regras dos Jogos")]];

    return (
        <div className="screen active" style={{ opacity: 1 }}>
            <AmbientBackdrop/>
            <Particles count={8}/>
            <TopBar navigate={navigate}/>
            <div style={{ position: "absolute", top: 88, left: 48, zIndex: 20 }}>
                <button className="back-btn" onClick={() => navigate("menu")}>
                    <span dangerouslySetInnerHTML={{ __html: window.Icon.back(14) }}/><span>{window.t("Menu")}</span>
                </button>
            </div>

            <div className="rl-shell">
                <div style={{ marginBottom: 22 }}>
                    <div style={{ fontSize: 12, color: RL.goldSoft, letterSpacing: "0.24em", textTransform: "uppercase", marginBottom: 6 }}>{window.t("Ajuda")}</div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 34, color: RL.text, letterSpacing: "0.03em", fontWeight: 600 }}>{window.t("Regras & Como Jogar")}</div>
                </div>

                <div className="rl-tabs">
                    {TABS.map(([k, l]) => (
                        <button key={k} className={"rl-tab" + (tab === k ? " on" : "")} onClick={() => setTab(k)}>{l}</button>
                    ))}
                </div>

                <div className="rl-body">
                    {tab === "xp" ? <RulesXP/> : <RulesGames/>}
                </div>
            </div>

            <style>{`
                .rl-shell { position:relative; z-index:5; max-width:1100px; margin:0 auto; padding:110px 48px 48px; }
                .rl-tabs { display:flex; gap:34px; border-bottom:1px solid rgba(201,162,39,.14); margin-bottom:24px; flex-wrap:wrap; }
                .rl-tab { font-family:var(--font-display),'Cinzel',serif; font-weight:400; font-size:15px; letter-spacing:1.5px; color:rgba(241,232,208,.45); padding:0 2px 14px; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; cursor:pointer; transition:color .15s; }
                .rl-tab:hover { color:rgba(241,232,208,.8); }
                .rl-tab.on { font-weight:700; color:#f5ecd0; border-bottom-color:#d4af37; }
                .rl-card { background:${RL.cardBg}; border:1px solid ${RL.cardBorder}; border-radius:16px; padding:22px 26px; margin-bottom:16px; }
                .rl-h { font-family:var(--font-display),'Cinzel',serif; font-weight:600; font-size:18px; letter-spacing:.6px; color:#f5ecd0; margin-bottom:12px; display:flex; align-items:center; gap:10px; }
                .rl-p { font-size:14px; line-height:1.65; color:rgba(241,232,208,.78); margin:0 0 10px; }
                .rl-p:last-child { margin-bottom:0; }
                .rl-li { display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.6; color:rgba(241,232,208,.78); margin-bottom:9px; }
                .rl-li b { color:#f1e8d0; }
                .rl-bullet { flex-shrink:0; width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:12px; background:rgba(212,175,55,.14); color:#e3c878; margin-top:1px; }
                .rl-tag { display:inline-block; font-size:11px; font-weight:600; letter-spacing:.4px; padding:3px 9px; border-radius:14px; }
                .rl-tag-gold { color:#2a1c00; background:linear-gradient(145deg,#f4d676,#c9a227); }
                .rl-tag-win  { color:#6fca9f; background:rgba(111,202,159,.12); border:1px solid rgba(111,202,159,.3); }
                .rl-tag-loss { color:#e0625a; background:rgba(224,98,90,.12); border:1px solid rgba(224,98,90,.3); }
                .rl-game { display:flex; gap:16px; }
                .rl-game-ico { flex-shrink:0; width:46px; height:46px; border-radius:12px; background:radial-gradient(circle at 38% 30%,#1c3a4f,#0c1622); border:2px solid #d4af37; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:16px; color:#f1e8d0; }
                .rl-game-line { font-size:13.5px; line-height:1.55; color:rgba(241,232,208,.75); margin:6px 0; }
                .rl-game-line b { color:#e3c878; font-weight:600; }
                @media (max-width:640px){ .rl-shell { padding-left:16px; padding-right:16px; } .rl-card { padding:18px; } }
            `}</style>
        </div>
    );
}

function RulesXP() {
    return (
        <div style={{ paddingBottom: 10 }}>
            <div className="rl-card">
                <div className="rl-h">🎖 {window.t("O XP é a sua régua")}</div>
                <p className="rl-p">{window.t("Cada partida online dá ou tira")} <b style={{ color: RL.gold }}>XP</b>{window.t(", e acumular XP sobe o seu")} <b style={{ color: RL.gold }}>{window.t("nível")}</b> {window.t("(de 1 a 100). Não existe ELO separado nem busca automática de partida:")} <b>{window.t("o nível é o seu prestígio")}</b>. {window.t("Quem tem")} <span className="rl-tag rl-tag-win">{window.t("mais vitórias")}</span>, <span className="rl-tag rl-tag-loss">{window.t("menos derrotas")}</span> {window.t("e maior nível se destaca por si só.")}</p>
                <p className="rl-p">⚠️ <b>{window.t("O nível nunca cai.")}</b> {window.t("Você pode perder XP numa derrota, mas o nível conquistado fica — no pior caso o seu progresso volta a 0 dentro do nível atual. Nenhum taco/desbloqueio é perdido.")}</p>
            </div>

            <div className="rl-card">
                <div className="rl-h">⬆ {window.t("Como você GANHA mais ou menos XP (ao vencer)")}</div>
                <div className="rl-li"><span className="rl-bullet">⚔</span><div><b>{window.t("Força do oponente.")}</b> {window.t("Bater alguém de")} <b>{window.t("nível maior")}</b> {window.t('rende muito mais XP; bater alguém bem mais fraco rende o mínimo. (A base segue a "surpresa" da vitória.)')}</div></div>
                <div className="rl-li"><span className="rl-bullet">🔥</span><div><b>{window.t("Sequência de vitórias.")}</b> {window.t("A partir da 3ª seguida, um bônus crescente (até +30).")}</div></div>
                <div className="rl-li"><span className="rl-bullet">🎯</span><div><b>Run-out.</b> {window.t("Vencer sem o oponente nem chegar a jogar dá um bônus grande.")}</div></div>
                <div className="rl-li"><span className="rl-bullet">✦</span><div><b>{window.t("Precisão.")}</b> {window.t("Quanto mais bolas por tacada (menos erros), maior o bônus.")} <b>{window.t("Faltas reduzem.")}</b></div></div>
                <div className="rl-li"><span className="rl-bullet">⏱</span><div><b>{window.t("Modo da partida.")}</b> {window.t("Partidas mais longas valem mais:")} <b>{window.t("Snooker ×1,5")}</b>{window.t(", Straight e Bola 15 ×1,3, demais ×1,0.")}</div></div>
            </div>

            <div className="rl-card">
                <div className="rl-h">⬇ {window.t("Como funcionam as PERDAS")}</div>
                <div className="rl-li"><span className="rl-bullet">−</span><div>{window.t("Ao perder, você")} <b>{window.t("perde XP")}</b> {window.t("(menos do que se ganharia numa vitória equivalente).")}</div></div>
                <div className="rl-li"><span className="rl-bullet">⚖</span><div><b>{window.t("Perder pra quem é mais fraco custa mais")}</b>{window.t("; perder pra quem é mais forte custa pouco.")}</div></div>
                <div className="rl-li"><span className="rl-bullet">🛡</span><div><b>{window.t("O nível não desce.")}</b> {window.t("A perda só reduz o progresso do nível atual (mínimo 0). Sem penalidade extra por sequência de derrotas.")}</div></div>
                <div className="rl-li"><span className="rl-bullet">🏃</span><div><b>{window.t("Fugir da partida")}</b> {window.t("(fechar/abandonar uma partida em andamento) conta como derrota e, em sala apostada, entrega o pote ao oponente. Sair do lobby antes de começar não penaliza.")}</div></div>
            </div>

            <div className="rl-card">
                <div className="rl-h">📜 {window.t("No fim de cada partida")}</div>
                <p className="rl-p">{window.t("O recibo mostra a conta do XP da partida:")} <b>{window.t("Base")}</b> {window.t("(pela força do oponente) +")} <b>{window.t("Sequência 🔥")}</b> + <b>{window.t("Desempenho ✦/Run-out 🎯")}</b>{window.t(", multiplicado pelo modo. Assim você vê exatamente de onde veio cada ponto.")}</p>
            </div>
        </div>
    );
}

function RulesGames() {
    return (
        <div style={{ paddingBottom: 10 }}>
            {RL_GAMES.map(g => (
                <div key={g.id} className="rl-card">
                    <div className="rl-game">
                        <div className="rl-game-ico">{g.icon}</div>
                        <div style={{ flex: 1, minWidth: 0 }}>
                            <div className="rl-h" style={{ marginBottom: 6 }}>{g.name}</div>
                            <div className="rl-game-line">{g.how}</div>
                            <div className="rl-game-line"><b>{window.t("Como vencer:")}</b> {g.win}</div>
                            <div className="rl-game-line"><b>{window.t("Sequência:")}</b> {g.seq}</div>
                        </div>
                    </div>
                </div>
            ))}
        </div>
    );
}

Object.assign(window, { RulesScreen });