// ============================================
// ARCADE MODE — rules + table selection
// ============================================

function ArcadeScreen({ navigate }) {
    const { GAME_MODES, TABLES, ENVIRONMENTS } = window.MastershotData;
    const [selectedMode, setMode] = React.useState("8ball");
    const [selectedTable, setTable] = React.useState("classic");
    const [selectedEnv, setEnv] = React.useState("pool-hall");
    const [difficulty, setDiff] = React.useState("normal");
    const [opponent, setOpp] = React.useState("ai");

    const mode = GAME_MODES.find(m => m.id === selectedMode);
    const table = TABLES.find(t => t.id === selectedTable);
    const env = ENVIRONMENTS.find(e => e.id === selectedEnv);

    return (
        <div className="screen active" style={{ opacity: 1 }}>
            <AmbientBackdrop/>
            <Particles count={12}/>
            <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>Menu</span>
                </button>
            </div>

            <div style={{
                position: "relative", zIndex: 5,
                height: "100%", paddingTop: 120, paddingBottom: 40, paddingLeft: 48, paddingRight: 48,
                maxWidth: 1400, margin: "0 auto",
                display: "grid", gridTemplateColumns: "1fr 420px", gap: 32,
                overflow: "hidden",
            }}>
                {/* LEFT: Mode grid */}
                <div style={{ display: "flex", flexDirection: "column", minHeight: 0 }}>
                    <div style={{ marginBottom: 20 }}>
                        <div style={{ fontSize: 12, color: "var(--gold-500)", letterSpacing: "0.24em", textTransform: "uppercase", marginBottom: 6 }}>
                            Modo Arcade
                        </div>
                        <div style={{ fontFamily: "var(--font-display)", fontSize: 36, color: "var(--ink-100)", letterSpacing: "0.03em", fontWeight: 600 }}>
                            Escolha seu jogo
                        </div>
                    </div>

                    <div style={{
                        flex: 1,
                        display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12,
                        overflowY: "auto", paddingRight: 8,
                    }}>
                        {GAME_MODES.map((m, i) => (
                            <button key={m.id}
                                onClick={() => setMode(m.id)}
                                className={`mode-tile ${selectedMode === m.id ? "sel" : ""}`}
                                style={{ animationDelay: `${i * 0.04}s` }}
                            >
                                <div className="mode-tile-icon">{m.icon}</div>
                                <div className="mode-tile-name">{m.name}</div>
                                <div className="mode-tile-tag">{m.tag}</div>
                                <div className="mode-tile-meta">
                                    <span>{m.balls} bolas</span>
                                    <span>·</span>
                                    <span>{m.dur}</span>
                                </div>
                            </button>
                        ))}
                    </div>

                    {/* Options */}
                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 20 }}>
                        <div className="field">
                            <label className="field-label">Oponente</label>
                            <div className="seg">
                                {[["ai","CPU"],["local","2 Jogadores"]].map(([v,l]) => (
                                    <button key={v} className={`seg-btn ${opponent===v?"sel":""}`} onClick={()=>setOpp(v)}>{l}</button>
                                ))}
                            </div>
                        </div>
                        <div className="field">
                            <label className="field-label">Dificuldade</label>
                            <div className="seg">
                                {[["easy","Fácil"],["normal","Normal"],["hard","Difícil"],["master","Mestre"]].map(([v,l]) => (
                                    <button key={v} className={`seg-btn ${difficulty===v?"sel":""}`} onClick={()=>setDiff(v)}>{l}</button>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>

                {/* RIGHT: Preview panel */}
                <div className="panel" style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
                    <div className="panel-header">
                        <div className="panel-title">Pré-visualização</div>
                        <span className="chip chip-gold">{mode.tag}</span>
                    </div>
                    <div style={{ flex: 1, overflowY: "auto" }}>
                        <TablePreview table={table} mode={mode}/>
                        <div style={{ padding: "20px 28px", borderBottom: "1px solid var(--ink-700)" }}>
                            <div style={{ fontFamily: "var(--font-display)", fontSize: 24, color: "var(--gold-300)", letterSpacing: "0.04em", marginBottom: 4 }}>
                                {mode.name}
                            </div>
                            <div style={{ fontSize: 13, color: "var(--ink-200)", lineHeight: 1.6 }}>
                                {mode.desc}
                            </div>
                        </div>

                        {/* Table selector */}
                        <div style={{ padding: "18px 28px 8px" }}>
                            <div className="field-label" style={{ marginBottom: 12 }}>Mesa</div>
                            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
                                {TABLES.filter(t => t.unlocked).map(t => (
                                    <button key={t.id} onClick={() => setTable(t.id)} className={`table-chip ${selectedTable===t.id?"sel":""} ${!t.owned?"locked":""}`}>
                                        <div className="table-chip-swatch" style={{
                                            background: `radial-gradient(ellipse at 50% 40%, ${t.felt}, ${t.rail})`
                                        }}/>
                                        <div style={{ flex: 1, minWidth: 0, textAlign: "left" }}>
                                            <div className="table-chip-name">{t.name}</div>
                                            <div className="table-chip-tier">{t.tier}</div>
                                        </div>
                                        {!t.owned && <span dangerouslySetInnerHTML={{ __html: window.Icon.lock(12) }}/>}
                                    </button>
                                ))}
                            </div>
                        </div>

                        {/* Environment selector */}
                        <div style={{ padding: "8px 28px 18px" }}>
                            <div className="field-label" style={{ marginBottom: 12 }}>Ambiente</div>
                            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
                                {ENVIRONMENTS.filter(e => e.unlocked).map(e => (
                                    <button key={e.id} onClick={() => setEnv(e.id)} className={`table-chip ${selectedEnv===e.id?"sel":""} ${!e.owned?"locked":""}`}>
                                        <div className="table-chip-swatch" style={{
                                            background: `linear-gradient(180deg, ${e.preview.sky} 0%, ${e.preview.sky} 55%, ${e.preview.floor} 55%, ${e.preview.floor} 100%)`
                                        }}/>
                                        <div style={{ flex: 1, minWidth: 0, textAlign: "left" }}>
                                            <div className="table-chip-name">{e.name}</div>
                                            <div className="table-chip-tier">{e.tier}</div>
                                        </div>
                                        {!e.owned && <span dangerouslySetInnerHTML={{ __html: window.Icon.lock(12) }}/>}
                                    </button>
                                ))}
                            </div>
                        </div>
                    </div>

                    <div style={{ padding: 20, borderTop: "1px solid var(--ink-700)", background: "rgba(0,0,0,0.3)" }}>
                        <button className="btn-cta" style={{ width: "100%" }} onClick={() => navigate("game", { mode: selectedMode, table: selectedTable, env: selectedEnv, opponent, difficulty })}>
                            <span dangerouslySetInnerHTML={{ __html: window.Icon.play(16) }}/>
                            <span>Iniciar Partida</span>
                        </button>
                    </div>
                </div>
            </div>

            <style>{`
                .mode-tile {
                    position: relative;
                    background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
                    border: 1px solid var(--ink-700);
                    border-radius: var(--r-md);
                    padding: 20px 16px 16px;
                    text-align: left;
                    transition: all var(--t-fast) var(--ease-out);
                    cursor: pointer;
                    animation: card-in 0.4s var(--ease-out) both;
                    color: var(--ink-200);
                }
                .mode-tile:hover {
                    border-color: var(--gold-700);
                    transform: translateY(-2px);
                    background: linear-gradient(180deg, var(--ink-700), var(--ink-850));
                }
                .mode-tile.sel {
                    border-color: var(--gold-500);
                    box-shadow: 0 0 0 1px var(--gold-600), 0 0 20px rgba(232,185,73,0.25);
                    background: linear-gradient(180deg, rgba(232,185,73,0.08), var(--ink-900));
                }
                .mode-tile.sel::after {
                    content: "";
                    position: absolute; top: 8px; right: 8px;
                    width: 8px; height: 8px; border-radius: 50%;
                    background: var(--gold-500);
                    box-shadow: 0 0 8px var(--gold-500);
                }
                .mode-tile-icon {
                    font-family: var(--font-display);
                    font-size: 32px;
                    color: var(--gold-400);
                    margin-bottom: 12px;
                    line-height: 1;
                }
                .mode-tile.sel .mode-tile-icon { color: var(--gold-300); }
                .mode-tile-name {
                    font-family: var(--font-display);
                    font-size: 14px;
                    font-weight: 600;
                    letter-spacing: 0.04em;
                    color: var(--ink-100);
                    margin-bottom: 2px;
                }
                .mode-tile-tag {
                    font-size: 10px;
                    color: var(--gold-500);
                    letter-spacing: 0.14em;
                    text-transform: uppercase;
                    margin-bottom: 10px;
                }
                .mode-tile-meta {
                    font-size: 11px;
                    color: var(--ink-400);
                    display: flex; gap: 6px;
                }
                .seg {
                    display: flex;
                    background: var(--ink-900);
                    border: 1px solid var(--ink-600);
                    border-radius: var(--r-sm);
                    padding: 3px;
                    gap: 2px;
                }
                .seg-btn {
                    flex: 1;
                    padding: 8px 12px;
                    font-size: 12px;
                    font-weight: 500;
                    color: var(--ink-300);
                    background: transparent;
                    border: none;
                    border-radius: calc(var(--r-sm) - 2px);
                    cursor: pointer;
                    transition: all var(--t-fast);
                    letter-spacing: 0.06em;
                }
                .seg-btn:hover { color: var(--ink-100); }
                .seg-btn.sel {
                    color: var(--ink-900);
                    background: var(--g-gold);
                    box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4);
                }
                .table-chip {
                    display: flex; align-items: center; gap: 10px;
                    padding: 8px;
                    background: var(--ink-900);
                    border: 1px solid var(--ink-700);
                    border-radius: var(--r-sm);
                    color: var(--ink-200);
                    cursor: pointer;
                    transition: all var(--t-fast);
                }
                .table-chip:hover { border-color: var(--gold-700); }
                .table-chip.sel {
                    border-color: var(--gold-500);
                    box-shadow: 0 0 0 1px var(--gold-600);
                }
                .table-chip.locked { opacity: 0.6; }
                .table-chip-swatch {
                    width: 36px; height: 28px;
                    border-radius: 4px;
                    border: 1px solid rgba(0,0,0,0.5);
                    box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
                    flex-shrink: 0;
                }
                .table-chip-name {
                    font-size: 12px;
                    font-weight: 600;
                    color: var(--ink-100);
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                }
                .table-chip-tier {
                    font-size: 10px;
                    color: var(--gold-500);
                    letter-spacing: 0.12em;
                    text-transform: uppercase;
                }
            `}</style>
        </div>
    );
}

// === 3D TABLE PREVIEW ===
function TablePreview({ table, mode }) {
    return (
        <div style={{
            padding: "30px 28px 0",
            position: "relative",
        }}>
            <div style={{
                position: "relative",
                aspectRatio: "2/1.2",
                borderRadius: 12,
                background: `linear-gradient(145deg, ${table.rail}, ${table.rail})`,
                padding: 18,
                boxShadow: "0 20px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1)",
                transform: "perspective(800px) rotateX(18deg)",
                transformOrigin: "center bottom",
            }}>
                {/* rail gold accent */}
                <div style={{
                    position: "absolute",
                    inset: 10,
                    borderRadius: 8,
                    border: "1px solid rgba(232,185,73,0.3)",
                    pointerEvents: "none",
                }}/>
                {/* felt */}
                <div style={{
                    width: "100%", height: "100%",
                    borderRadius: 6,
                    background: `radial-gradient(ellipse at 50% 50%, ${table.felt}, ${shade(table.felt, -0.3)})`,
                    position: "relative",
                    boxShadow: "inset 0 0 40px rgba(0,0,0,0.5)",
                }}>
                    {/* pockets */}
                    {[[4,4],[50,3],[96,4],[4,96],[50,97],[96,96]].map(([x,y],i) => (
                        <div key={i} style={{
                            position: "absolute",
                            left: `${x}%`, top: `${y}%`,
                            transform: "translate(-50%,-50%)",
                            width: 14, height: 14,
                            borderRadius: "50%",
                            background: "radial-gradient(circle, #000 30%, rgba(0,0,0,0.6))",
                            boxShadow: "inset 0 2px 4px rgba(0,0,0,0.9), 0 0 0 2px rgba(232,185,73,0.25)",
                        }}/>
                    ))}
                    {/* balls — rack preview */}
                    <div style={{ position: "absolute", top: "50%", left: "68%", transform: "translate(-50%,-50%)" }}>
                        <BallRack mode={mode.id}/>
                    </div>
                    {/* cue ball */}
                    <div style={{ position: "absolute", top: "50%", left: "22%", transform: "translate(-50%,-50%)" }}>
                        <PoolBall number={0} size={18}/>
                    </div>
                </div>
            </div>
        </div>
    );
}

function BallRack({ mode }) {
    // simplified diamond rack
    if (mode === "9ball") {
        const rack = [[1],[2,3],[4,9,5],[6,7],[8]];
        return (
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 1 }}>
                {rack.map((row, i) => (
                    <div key={i} style={{ display: "flex", gap: 1 }}>
                        {row.map(n => <PoolBall key={n} number={n} size={16}/>)}
                    </div>
                ))}
            </div>
        );
    }
    if (mode === "carom") {
        return (
            <div style={{ display: "flex", gap: 18 }}>
                <PoolBall number={0} size={18}/>
                <PoolBall number={3} size={18}/>
            </div>
        );
    }
    // default 8ball triangle
    const rack = [[1],[2,3],[4,8,5],[6,7,9,10],[11,12,13,14,15]];
    return (
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 1 }}>
            {rack.map((row, i) => (
                <div key={i} style={{ display: "flex", gap: 1 }}>
                    {row.map(n => <PoolBall key={n} number={n} size={14}/>)}
                </div>
            ))}
        </div>
    );
}

function shade(hex, amt) {
    // simple darker/lighter
    const rgb = hex.replace("#","").match(/.{2}/g).map(h => parseInt(h,16));
    return "#" + rgb.map(c => Math.max(0, Math.min(255, Math.round(c * (1+amt)))).toString(16).padStart(2,"0")).join("");
}

Object.assign(window, { ArcadeScreen, TablePreview, BallRack });