// ============================================
// HUD (in-game) + END GAME screens
// ============================================

function GameHUD({ navigate }) {
    const [power, setPower] = React.useState(0);
    const [spin, setSpin] = React.useState({ x: 0, y: 0 });
    const [turn, setTurn] = React.useState("me");
    const [timer, setTimer] = React.useState(45);
    const [p1Score, setP1] = React.useState(3);
    const [p2Score, setP2] = React.useState(2);

    React.useEffect(() => {
        const id = setInterval(() => {
            setTimer(t => t > 0 ? t - 1 : 45);
            setPower(p => (p + 2) % 100);
        }, 1000);
        return () => clearInterval(id);
    }, []);

    return (
        <div className="screen active" style={{ opacity: 1 }}>
            {/* 3D felt viewport simulation */}
            <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse at 50% 50%, #184732, #050302)" }}/>
            <div style={{
                position: "absolute", inset: 0,
                background: `repeating-linear-gradient(45deg, rgba(255,255,255,0.01) 0 1px, transparent 1px 4px)`,
            }}/>

            {/* Fake 3D table */}
            <div style={{
                position: "absolute",
                top: "50%", left: "50%",
                transform: "translate(-50%, -50%) perspective(1200px) rotateX(55deg)",
                transformOrigin: "center",
                width: "70vw", maxWidth: 1000,
                aspectRatio: "2/1",
                background: "linear-gradient(180deg, #2a1810, #1a0e07)",
                padding: 28,
                borderRadius: 14,
                boxShadow: "0 60px 120px rgba(0,0,0,0.7)",
            }}>
                <div style={{
                    width: "100%", height: "100%",
                    background: "radial-gradient(ellipse at 50% 50%, #1f5a3f, #0a1f15)",
                    borderRadius: 8,
                    position: "relative",
                    boxShadow: "inset 0 0 80px rgba(0,0,0,0.5)",
                }}>
                    {[[3,3],[50,2],[97,3],[3,97],[50,98],[97,97]].map(([x,y],i) => (
                        <div key={i} style={{
                            position: "absolute", left: `${x}%`, top: `${y}%`, transform: "translate(-50%,-50%)",
                            width: 32, height: 32, borderRadius: "50%",
                            background: "radial-gradient(circle, #000 35%, rgba(0,0,0,0.7))",
                            boxShadow: "inset 0 3px 8px rgba(0,0,0,0.9), 0 0 0 3px rgba(232,185,73,0.3)",
                        }}/>
                    ))}
                    {/* Balls */}
                    <div style={{ position: "absolute", top: "50%", left: "30%", transform: "translate(-50%,-50%)" }}>
                        <PoolBall number={0} size={26}/>
                    </div>
                    <div style={{ position: "absolute", top: "45%", left: "65%", transform: "translate(-50%,-50%)" }}>
                        <PoolBall number={8} size={26}/>
                    </div>
                    <div style={{ position: "absolute", top: "55%", left: "70%", transform: "translate(-50%,-50%)" }}>
                        <PoolBall number={3} size={26}/>
                    </div>
                    <div style={{ position: "absolute", top: "38%", left: "55%", transform: "translate(-50%,-50%)" }}>
                        <PoolBall number={11} size={26}/>
                    </div>
                    {/* aim line */}
                    <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }}>
                        <line x1="30%" y1="50%" x2="85%" y2="30%" stroke="rgba(255,255,255,0.3)" strokeWidth="1" strokeDasharray="4 4"/>
                    </svg>
                </div>
            </div>

            {/* Top HUD — scores */}
            <div style={{ position: "absolute", top: 0, left: 0, right: 0, padding: 20, display: "flex", justifyContent: "space-between", alignItems: "flex-start", zIndex: 10 }}>
                <HUDPlayerCard nick="ShadowCue" avatar="SC" level={34} score={p1Score} active={turn === "me"} balls="lisas"/>

                <div style={{ textAlign: "center", padding: "10px 24px", background: "rgba(0,0,0,0.6)", border: "1px solid var(--gold-800)", borderRadius: "var(--r-md)", backdropFilter: "blur(8px)" }}>
                    <div style={{ fontSize: 10, color: "var(--gold-500)", letterSpacing: "0.18em", textTransform: "uppercase" }}>Sala do Mestre · 8-Ball</div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 18, color: "var(--gold-300)", marginTop: 4 }}>$ 5.000 · BO3</div>
                    <div style={{ display: "flex", gap: 6, justifyContent: "center", marginTop: 8 }}>
                        {[0,1,2].map(i => (
                            <div key={i} style={{ width: 14, height: 4, borderRadius: 2, background: i < 1 ? "var(--gold-500)" : "var(--ink-700)" }}/>
                        ))}
                    </div>
                </div>

                <HUDPlayerCard nick="PhantomCue" avatar="PC" level={42} score={p2Score} active={turn === "op"} balls="listradas" mirror/>
            </div>

            {/* Timer */}
            <div style={{ position: "absolute", top: 130, left: "50%", transform: "translateX(-50%)", zIndex: 10 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 16px", background: "rgba(0,0,0,0.7)", border: `1px solid ${timer < 10 ? "var(--loss)" : "var(--ink-600)"}`, borderRadius: "var(--r-full)" }}>
                    <span style={{ color: timer < 10 ? "var(--loss-bright)" : "var(--gold-400)" }} dangerouslySetInnerHTML={{ __html: window.Icon.clock(14) }}/>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 16, color: timer < 10 ? "var(--loss-bright)" : "var(--ink-100)", fontWeight: 600 }}>{timer}s</span>
                </div>
            </div>

            {/* Power bar */}
            <div style={{ position: "absolute", bottom: 40, left: "50%", transform: "translateX(-50%)", width: 360, zIndex: 10 }}>
                <div style={{ fontSize: 10, color: "var(--gold-500)", letterSpacing: "0.18em", textTransform: "uppercase", textAlign: "center", marginBottom: 6, fontWeight: 600 }}>Força {power}%</div>
                <div style={{
                    height: 14,
                    background: "rgba(0,0,0,0.6)",
                    border: "1px solid var(--ink-600)",
                    borderRadius: "var(--r-full)",
                    overflow: "hidden",
                    position: "relative",
                    boxShadow: "inset 0 2px 4px rgba(0,0,0,0.6)",
                }}>
                    <div style={{
                        height: "100%",
                        width: `${power}%`,
                        background: "linear-gradient(90deg, #4aa3d9 0%, #3fa075 30%, #e8b949 65%, #ff7a2d 85%, #c2453a 100%)",
                        transition: "width 0.3s var(--ease-out)",
                        boxShadow: "0 0 20px rgba(232,185,73,0.5)",
                    }}/>
                </div>
            </div>

            {/* Spin indicator */}
            <div style={{ position: "absolute", bottom: 40, right: 40, zIndex: 10 }}>
                <div style={{ fontSize: 10, color: "var(--gold-500)", letterSpacing: "0.18em", textTransform: "uppercase", textAlign: "center", marginBottom: 8, fontWeight: 600 }}>Efeito</div>
                <div style={{
                    width: 100, height: 100,
                    borderRadius: "50%",
                    background: "radial-gradient(circle at 35% 30%, #fdfaf0, #d4c5a0)",
                    border: "2px solid var(--gold-700)",
                    boxShadow: "0 8px 20px rgba(0,0,0,0.5), inset 0 3px 6px rgba(255,255,255,0.5)",
                    position: "relative",
                }}>
                    <div style={{ position: "absolute", top: "50%", left: "10%", right: "10%", height: 1, background: "rgba(0,0,0,0.15)" }}/>
                    <div style={{ position: "absolute", left: "50%", top: "10%", bottom: "10%", width: 1, background: "rgba(0,0,0,0.15)" }}/>
                    <div style={{
                        position: "absolute",
                        width: 18, height: 18,
                        borderRadius: "50%",
                        background: "radial-gradient(circle at 35% 30%, #ff5252, #b71c1c)",
                        boxShadow: "0 2px 4px rgba(0,0,0,0.5)",
                        top: "35%", left: "55%",
                    }}/>
                </div>
            </div>

            {/* Controls hint */}
            <div style={{ position: "absolute", bottom: 40, left: 40, fontSize: 11, color: "var(--ink-400)", letterSpacing: "0.1em", lineHeight: 1.8, zIndex: 10 }}>
                <div><kbd className="kbd">Mouse</kbd> Mirar</div>
                <div><kbd className="kbd">Ctrl</kbd> + arrasto Tacada</div>
                <div><kbd className="kbd">Shift</kbd> Mira fina</div>
                <div><kbd className="kbd">Esc</kbd> Menu</div>
            </div>

            {/* Exit button */}
            <div style={{ position: "absolute", top: 20, right: 20, zIndex: 20 }}>
                <button className="btn-icon" onClick={() => navigate("endgame")} title="Sair da partida"
                    dangerouslySetInnerHTML={{ __html: window.Icon.close(18) }}/>
            </div>

            <style>{`
                .kbd {
                    display: inline-block;
                    padding: 2px 6px;
                    background: var(--ink-800);
                    border: 1px solid var(--ink-600);
                    border-bottom-width: 2px;
                    border-radius: 3px;
                    font-family: var(--font-mono);
                    font-size: 10px;
                    color: var(--ink-200);
                    min-width: 20px;
                    text-align: center;
                    margin-right: 4px;
                }
            `}</style>
        </div>
    );
}

function HUDPlayerCard({ nick, avatar, level, score, active, balls, mirror }) {
    return (
        <div style={{
            padding: "10px 14px",
            background: active ? "linear-gradient(180deg, rgba(232,185,73,0.15), rgba(0,0,0,0.7))" : "rgba(0,0,0,0.6)",
            border: `1px solid ${active ? "var(--gold-500)" : "var(--ink-700)"}`,
            borderRadius: "var(--r-md)",
            backdropFilter: "blur(8px)",
            minWidth: 240,
            boxShadow: active ? "0 0 20px rgba(232,185,73,0.25)" : "none",
            transition: "all 0.3s",
        }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, flexDirection: mirror ? "row-reverse" : "row" }}>
                <Avatar initials={avatar} level={level} size="md"/>
                <div style={{ flex: 1, textAlign: mirror ? "right" : "left" }}>
                    <div style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-100)" }}>{nick}</div>
                    <div style={{ fontSize: 10, color: "var(--gold-500)", letterSpacing: "0.12em", textTransform: "uppercase" }}>{balls}</div>
                </div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 28, color: "var(--gold-300)", fontWeight: 700, lineHeight: 1 }}>{score}</div>
            </div>
            {active && <div style={{ height: 2, background: "var(--g-gold)", borderRadius: 1, marginTop: 8, boxShadow: "0 0 8px var(--gold-500)" }}/>}
        </div>
    );
}

// === END GAME ===
function EndGameScreen({ navigate }) {
    return (
        <div className="screen active" style={{ opacity: 1 }}>
            <AmbientBackdrop intensity="strong"/>
            <Particles count={50}/>

            {/* Victory beams */}
            <div style={{
                position: "absolute", inset: 0, pointerEvents: "none", zIndex: 1,
                background: "conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(232,185,73,0.08) 30deg, transparent 60deg, rgba(232,185,73,0.08) 120deg, transparent 150deg, rgba(232,185,73,0.08) 210deg, transparent 240deg, rgba(232,185,73,0.08) 300deg, transparent 330deg)",
                animation: "spin-slow 40s linear infinite",
                filter: "blur(20px)",
            }}/>

            <div style={{
                position: "relative", zIndex: 10,
                width: "100%", height: "100%",
                display: "flex", flexDirection: "column",
                alignItems: "center", justifyContent: "center",
                padding: 40,
            }}>
                <div style={{
                    fontSize: 13, letterSpacing: "0.4em", textTransform: "uppercase",
                    color: "var(--gold-500)", marginBottom: 12,
                    animation: "float-up 0.6s var(--ease-out) both",
                }}>
                    ★ ★ ★ Partida Encerrada ★ ★ ★
                </div>

                <div style={{
                    fontFamily: "var(--font-display)", fontSize: 96,
                    fontWeight: 900, letterSpacing: "0.08em",
                    background: "var(--g-gold-shiny)",
                    WebkitBackgroundClip: "text",
                    backgroundClip: "text",
                    color: "transparent",
                    filter: "drop-shadow(0 6px 0 rgba(0,0,0,0.8)) drop-shadow(0 0 40px rgba(232,185,73,0.5))",
                    animation: "victory-entry 0.8s var(--ease-out) 0.2s both",
                    marginBottom: 8,
                }}>VITÓRIA</div>

                <div style={{
                    fontFamily: "var(--font-display)", fontSize: 18,
                    color: "var(--ink-200)", letterSpacing: "0.24em", textTransform: "uppercase",
                    marginBottom: 40,
                    animation: "float-up 0.6s var(--ease-out) 0.5s both",
                }}>
                    ShadowCue venceu PhantomCue · 2–1
                </div>

                {/* Rewards panel */}
                <div style={{
                    display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
                    gap: 16, marginBottom: 32,
                    animation: "float-up 0.6s var(--ease-out) 0.7s both",
                }}>
                    <RewardTile label="Aposta" value="+$ 4.750" color="gold"/>
                    <RewardTile label="Bônus de Streak" value="+$ 500" color="fire" small="W4"/>
                    <RewardTile label="XP Ganho" value="+420 XP" color="cool"/>
                    <RewardTile label="Nova posição ELO" value="1.871" color="gold" delta="+29"/>
                </div>

                {/* Stats grid */}
                <div style={{
                    display: "grid", gridTemplateColumns: "repeat(4, auto)",
                    gap: 40, padding: "20px 32px",
                    background: "rgba(0,0,0,0.4)", borderRadius: "var(--r-md)",
                    border: "1px solid var(--ink-700)",
                    marginBottom: 40,
                    animation: "float-up 0.6s var(--ease-out) 0.9s both",
                }}>
                    <StatSmall label="Tacadas" value="24"/>
                    <StatSmall label="Acerto" value="78%"/>
                    <StatSmall label="Bolas encaçapadas" value="7"/>
                    <StatSmall label="Tempo médio" value="12s"/>
                </div>

                {/* Actions */}
                <div style={{ display: "flex", gap: 14, animation: "float-up 0.6s var(--ease-out) 1.1s both" }}>
                    <button className="btn-ghost" onClick={() => navigate("menu")}>Menu Principal</button>
                    <button className="btn-ghost" onClick={() => navigate("profile")}>Ver Perfil</button>
                    <button className="btn" onClick={() => navigate("waiting")}>
                        <span dangerouslySetInnerHTML={{ __html: window.Icon.zap(14) }}/>
                        <span>Revanche</span>
                    </button>
                    <button className="btn-cta" onClick={() => navigate("online")}>Nova Partida</button>
                </div>
            </div>

            <style>{`
                @keyframes victory-entry {
                    0% { transform: scale(0.6) translateY(40px); opacity: 0; filter: blur(12px); }
                    60% { transform: scale(1.05); }
                    100% { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
                }
            `}</style>
        </div>
    );
}

function RewardTile({ label, value, color, small, delta }) {
    const colorMap = { gold: "var(--gold-300)", fire: "var(--fire-bright)", cool: "var(--cool)" };
    return (
        <div style={{
            padding: "18px 22px",
            background: "linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.8))",
            border: `1px solid ${colorMap[color]}40`,
            borderRadius: "var(--r-md)",
            textAlign: "center",
            minWidth: 160,
        }}>
            <div style={{ fontSize: 10, color: "var(--ink-300)", letterSpacing: "0.2em", textTransform: "uppercase", marginBottom: 8 }}>{label}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 24, color: colorMap[color], fontWeight: 700 }}>
                {value}
                {delta && <span style={{ fontSize: 13, color: "var(--win-bright)", marginLeft: 6 }}>{delta}</span>}
            </div>
            {small && <div style={{ marginTop: 6 }}><StreakBadge count={parseInt(small.replace("W",""))}/></div>}
        </div>
    );
}

function StatSmall({ label, value }) {
    return (
        <div style={{ textAlign: "center" }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "var(--gold-300)", fontWeight: 600 }}>{value}</div>
            <div style={{ fontSize: 10, color: "var(--ink-300)", letterSpacing: "0.16em", textTransform: "uppercase", marginTop: 2 }}>{label}</div>
        </div>
    );
}

Object.assign(window, { GameHUD, EndGameScreen, HUDPlayerCard, RewardTile, StatSmall });