// ============================================
// WAITING ROOM — pre-match lobby
// ============================================

function WaitingRoom({ navigate, params = {} }) {
    const { PLAYER, GAME_MODES, TABLES } = window.MastershotData;
    const [ready, setReady] = React.useState(false);
    const [oppReady, setOppReady] = React.useState(false);
    const [room, setRoom] = React.useState(null);
    const [participants, setParticipants] = React.useState([]);
    const [error, setError] = React.useState(null);
    // Configuração da sala deixada pelo createRoom (ou defaults)
    const roomCfg = React.useMemo(() => {
        try { return JSON.parse(sessionStorage.getItem('mastershot.room') || '{}'); }
        catch(e) { return {}; }
    }, []);

    // roomId vem de navigate("waiting", { roomId }) — guardamos em sessionStorage
    // pra sobreviver a refresh.
    const roomId = React.useMemo(() => {
        if (params.roomId) {
            try { sessionStorage.setItem('mastershot.activeRoomId', params.roomId); } catch {}
            return params.roomId;
        }
        try { return sessionStorage.getItem('mastershot.activeRoomId') || null; } catch { return null; }
    }, [params.roomId]);

    const isHost = !!params.isHost;
    const Lobby = window.MastershotLobby;
    const myClientId = Lobby?.getCurrentClientId?.()?.id;

    // Monta sala + subscribe realtime pra mudanças (peer entrando, ready, status)
    React.useEffect(() => {
        if (!Lobby || !roomId) return;
        let mounted = true;

        // Estado inicial: pega room + participants
        Lobby.joinRoom(roomId).then(({ room, participants }) => {
            if (!mounted) return;
            setRoom(room);
            setParticipants(participants);
        }).catch(err => { if (mounted) setError(err.message); });

        // Subscreve mudanças
        const unsub = Lobby.subscribeToRoom(roomId, ({ type, room: r, participant, eventType }) => {
            if (type === 'room' && r) {
                setRoom(prev => ({ ...(prev || {}), ...r }));
                // Sala virou 'playing' → host iniciou match. Todos navegam pro game.
                if (r.status === 'playing' && r.match_id) {
                    navigateToMatch(r.match_id, r);
                }
            } else if (type === 'participant') {
                setParticipants(prev => {
                    if (eventType === 'DELETE') {
                        return prev.filter(p => p.client_id !== participant.client_id);
                    }
                    if (eventType === 'INSERT') {
                        if (prev.find(p => p.client_id === participant.client_id)) return prev;
                        return [...prev, participant].sort((a,b) => a.seat - b.seat);
                    }
                    if (eventType === 'UPDATE') {
                        return prev.map(p => p.client_id === participant.client_id ? participant : p);
                    }
                    return prev;
                });
            }
        });
        return () => { mounted = false; unsub(); };
    }, [roomId, Lobby]);

    function navigateToMatch(matchId, roomData) {
        // Determina o seat do jogador pelo id do client
        const me = participants.find(p => p.client_id === myClientId);
        const seat = me ? me.seat : 0;
        const r = roomData || room;
        // Sai limpo do sessionStorage de waiting pra não voltar pro mesmo loop
        try { sessionStorage.removeItem('mastershot.activeRoomId'); } catch {}
        navigate('game', {
            mode:  r?.mode  || roomCfg.mode  || '8ball',
            table: r?.table_id || roomCfg.table || 'classic',
            env:   r?.env_id   || roomCfg.env   || 'pool-hall',
            opponent: 'remote',
            matchId,
            seat,
        });
    }

    // Quando ambos prontos E sou host → starta o match
    React.useEffect(() => {
        if (!Lobby || !room || !isHost) return;
        if (participants.length < 2) return;
        const allReady = participants.every(p => p.ready);
        if (!allReady) return;
        if (room.status !== 'open') return;
        Lobby.startMatch(roomId).catch(err => setError('startMatch: ' + err.message));
    }, [Lobby, room, participants, isHost, roomId]);

    // Toggle "ready" no DB → outros clients recebem via subscribe
    async function toggleReady() {
        const next = !ready;
        setReady(next);
        if (Lobby?.setParticipantReady && roomId) {
            try { await Lobby.setParticipantReady(roomId, next); }
            catch (err) { console.warn('[waiting] setParticipantReady:', err.message); }
        }
    }

    // Determina opp pra display
    const me = participants.find(p => p.client_id === myClientId);
    const oppPart = participants.find(p => p.client_id !== myClientId);
    const cfgMode  = (room?.mode) || roomCfg.mode  || '8ball';
    const cfgTable = (room?.table_id) || roomCfg.table || 'classic';
    const cfgEnv   = (room?.env_id) || roomCfg.env   || 'pool-hall';
    const mode = GAME_MODES.find(m => m.id === cfgMode) || GAME_MODES[0];
    const table = TABLES.find(t => t.id === cfgTable) || TABLES.find(t => t.id === 'classic') || TABLES[0];
    const opp = oppPart
        ? { nick: oppPart.nick, avatar: oppPart.avatar || oppPart.nick.slice(0,2).toUpperCase(), level: 1, elo: 1000, wins: 0, streak: 0, country: 'BR' }
        : { nick: 'Aguardando…', avatar: '?', level: 0, elo: 0, wins: 0, streak: 0, country: 'BR' };

    // Sincroniza oppReady com participants
    React.useEffect(() => {
        setOppReady(!!oppPart?.ready);
    }, [oppPart?.ready]);

    // chat: mantém estado simples, ainda não persistido
    const [chat] = React.useState([
        { from: "Sistema", text: "Sala criada. Aguardando segundo jogador.", system: true, t: "agora" },
    ]);

    return (
        <div className="screen active" style={{ opacity: 1 }}>
            <AmbientBackdrop intensity="strong"/>
            <Particles count={15}/>
            <TopBar navigate={navigate}/>

            <div style={{ position: "absolute", top: 88, left: 48, zIndex: 20 }}>
                <button className="back-btn" onClick={async () => {
                    if (Lobby && roomId) {
                        try { await Lobby.leaveRoom(roomId); } catch {}
                    }
                    try { sessionStorage.removeItem('mastershot.activeRoomId'); } catch {}
                    navigate("online");
                }}>
                    <span dangerouslySetInnerHTML={{ __html: window.Icon.back(14) }}/>
                    <span>Sair da Sala</span>
                </button>
            </div>

            <div style={{
                position: "relative", zIndex: 5,
                paddingTop: 110, paddingBottom: 40, paddingLeft: 48, paddingRight: 48,
                maxWidth: 1400, margin: "0 auto",
                height: "100%",
                display: "flex", flexDirection: "column", gap: 24,
            }}>
                {error && (
                    <div style={{
                        padding: 14, borderRadius: 8,
                        background: "rgba(220, 60, 60, 0.15)",
                        border: "1px solid rgba(220, 60, 60, 0.4)",
                        color: "var(--loss-bright)", fontSize: 13, textAlign: "center",
                    }}>{error}</div>
                )}
                {/* Header */}
                <div style={{ textAlign: "center" }}>
                    <div style={{ fontSize: 12, color: "var(--gold-500)", letterSpacing: "0.24em", textTransform: "uppercase", marginBottom: 4 }}>
                        {room ? `Sala #${(room.id || '').slice(0, 8)}` : 'Salão do Mestre'}
                    </div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 28, color: "var(--ink-100)", letterSpacing: "0.04em" }}>
                        {mode.name} · Melhor de 3 · <span style={{ color: "var(--gold-300)" }}>${(5000).toLocaleString()}</span>
                    </div>
                </div>

                {/* VS layout */}
                <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: 32, alignItems: "center", flex: 1, minHeight: 0 }}>
                    {/* Player card */}
                    <PlayerVsCard player={PLAYER} ready={ready} isMe/>

                    {/* VS + table preview */}
                    <div style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 20 }}>
                        <div style={{
                            fontFamily: "var(--font-display)",
                            fontSize: 64,
                            fontWeight: 900,
                            letterSpacing: "0.1em",
                            background: "var(--g-gold-shiny)",
                            WebkitBackgroundClip: "text",
                            backgroundClip: "text",
                            color: "transparent",
                            filter: "drop-shadow(0 4px 0 rgba(0,0,0,.6))",
                            animation: "vs-pulse 2s ease-in-out infinite",
                        }}>VS</div>
                        <div style={{ width: 280 }}>
                            <TablePreview table={table} mode={mode}/>
                        </div>
                        <div style={{ fontSize: 11, color: "var(--ink-400)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
                            {table.name}
                        </div>
                    </div>

                    {/* Opponent card */}
                    <PlayerVsCard player={opp} ready={oppReady} mirror/>
                </div>

                {/* Bottom: chat + ready button */}
                <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 20 }}>
                    {/* Chat */}
                    <div className="panel" style={{ height: 180, display: "flex", flexDirection: "column", overflow: "hidden" }}>
                        <div style={{ padding: "10px 18px", borderBottom: "1px solid var(--ink-700)", display: "flex", alignItems: "center", gap: 8 }}>
                            <span style={{ color: "var(--gold-400)" }} dangerouslySetInnerHTML={{ __html: window.Icon.chat(14) }}/>
                            <span style={{ fontSize: 11, color: "var(--ink-300)", letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 600 }}>Chat da Sala</span>
                        </div>
                        <div style={{ flex: 1, overflowY: "auto", padding: "10px 18px", display: "flex", flexDirection: "column", gap: 6 }}>
                            {chat.map((c, i) => (
                                <div key={i} style={{ fontSize: 13, color: c.system ? "var(--gold-500)" : "var(--ink-200)", fontStyle: c.system ? "italic" : "normal" }}>
                                    {!c.system && <span style={{ color: "var(--gold-400)", fontWeight: 600, marginRight: 6 }}>{c.from}:</span>}
                                    {c.text}
                                </div>
                            ))}
                        </div>
                        <div style={{ padding: 10, borderTop: "1px solid var(--ink-700)" }}>
                            <input className="input" placeholder="Digite uma mensagem..." style={{ background: "var(--ink-950)" }}/>
                        </div>
                    </div>

                    {/* Ready panel */}
                    <div className="panel" style={{ padding: 18, display: "flex", flexDirection: "column", gap: 12, justifyContent: "center" }}>
                        <div style={{ textAlign: "center", fontSize: 11, color: "var(--ink-300)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
                            {ready && oppReady ? "Iniciando partida..." : ready ? "Aguardando oponente" : "Confirme quando estiver pronto"}
                        </div>
                        <button className={ready ? "btn-ghost" : "btn-cta"} style={{ width: "100%", padding: 16 }}
                            onClick={async () => {
                                if (!ready) { await toggleReady(); }
                                else if (ready && oppReady && !Lobby) {
                                    // Modo offline: navega direto sem matchId
                                    navigate("game", { mode: cfgMode, table: cfgTable, env: cfgEnv });
                                } else if (ready) {
                                    // online: aguarda host iniciar match (subscribe vai navegar)
                                }
                            }}>
                            {ready && oppReady ? (Lobby ? "AGUARDANDO INÍCIO…" : "ENTRAR NA MESA") : ready ? "PRONTO ✓" : "ESTOU PRONTO"}
                        </button>
                        <div style={{ display: "flex", gap: 6, justifyContent: "center", fontSize: 11, color: "var(--ink-400)" }}>
                            <span style={{ width: 8, height: 8, borderRadius: "50%", background: ready ? "var(--win-bright)" : "var(--ink-600)", display: "inline-block", marginTop: 2 }}/>
                            Você
                            <span style={{ margin: "0 4px" }}>·</span>
                            <span style={{ width: 8, height: 8, borderRadius: "50%", background: oppReady ? "var(--win-bright)" : "var(--ink-600)", display: "inline-block", marginTop: 2 }}/>
                            Oponente
                        </div>
                    </div>
                </div>
            </div>

            <style>{`
                @keyframes vs-pulse {
                    0%, 100% { transform: scale(1); }
                    50% { transform: scale(1.05); }
                }
            `}</style>
        </div>
    );
}

function PlayerVsCard({ player, ready, isMe, mirror }) {
    return (
        <div style={{
            padding: 28,
            background: "var(--g-panel)",
            border: `1px solid ${ready ? "var(--gold-600)" : "var(--ink-700)"}`,
            borderRadius: "var(--r-lg)",
            boxShadow: ready ? "var(--sh-xl), 0 0 30px rgba(232,185,73,0.25)" : "var(--sh-xl)",
            transition: "all 0.3s var(--ease-out)",
            textAlign: mirror ? "right" : "left",
            position: "relative",
            overflow: "hidden",
        }}>
            {ready && (
                <div style={{
                    position: "absolute", top: 12, right: mirror ? "auto" : 12, left: mirror ? 12 : "auto",
                    color: "var(--win-bright)",
                    display: "flex", alignItems: "center", gap: 4,
                    fontSize: 11, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase",
                }}>
                    <span dangerouslySetInnerHTML={{ __html: window.Icon.check(12) }}/>
                    Pronto
                </div>
            )}
            <div style={{ display: "flex", alignItems: "center", gap: 18, flexDirection: mirror ? "row-reverse" : "row" }}>
                <Avatar initials={player.avatar} level={player.level} size="xl"/>
                <div style={{ textAlign: mirror ? "right" : "left" }}>
                    {player.title && (
                        <div style={{ fontSize: 11, color: "var(--gold-500)", letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 4 }}>
                            {player.title || "Jogador"}
                        </div>
                    )}
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 28, color: "var(--ink-100)", letterSpacing: "0.04em", marginBottom: 8 }}>
                        {player.nick}
                    </div>
                    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", justifyContent: mirror ? "flex-end" : "flex-start" }}>
                        <span className="chip chip-gold">ELO {player.elo || "—"}</span>
                        <span className="chip">{player.wins?.toLocaleString() || player.stats?.wins?.toLocaleString()} vitórias</span>
                        {player.streak !== undefined && player.streak > 0 && <StreakBadge count={player.streak}/>}
                    </div>
                </div>
            </div>
        </div>
    );
}

Object.assign(window, { WaitingRoom, PlayerVsCard });