// ============================================
// SALA DE ESPERA do Carom3D — peças comuns às duas salas (rei da mesa e times):
//   - espectadores ("Assistindo"), Assistir partida e "Entrar na fila";
//   - mestre da sala (LG_CHANGEROOMMASTER, LG_ROOMBANUSER): passar o mestre, expulsar (= banir), senha;
//   - itens de partida (USE ITEM, item_icon.bmp): ×2 pontos e ×2 moedas armados para a próxima partida,
//     VIP e os abandonos do dia (Win–Lose–Drop).
// Servidor: supabase/migrations/20261031000002_salas_partida.sql.
// ============================================

const RX_ITEMS = [
    ["item_double_xp", "×2 pontos", "XP da vitória em dobro na próxima partida online"],
    ["item_double_coins", "×2 moedas", "O ganho líquido da vitória outra vez (até 5.000) na próxima partida online"],
];
const RX_REASONS = {
    not_master: "Só o mestre da sala pode fazer isso.", self: "Você não pode fazer isso consigo mesmo.",
    in_game: "Não dá durante a partida.", not_in_room: "Essa pessoa não está na sala.", not_found: "Sala não encontrada.",
    invalid_password: "A senha precisa ter de 1 a 8 caracteres, sem espaço nem aspas.",
};
const rxReason = (r) => window.t(RX_REASONS[r] || "Não foi possível agora.");

// a sala marca quem entrou para assistir (o "entrar" ao abrir a tela não pode virar fila)
const rxSpecKey = (roomId) => "mastershot.spectating." + roomId;
function rxMarkSpectating(roomId, on) {
    try { if (on) sessionStorage.setItem(rxSpecKey(roomId), "1"); else sessionStorage.removeItem(rxSpecKey(roomId)); } catch {}
}
function rxIsSpectating(roomId) {
    try { return sessionStorage.getItem(rxSpecKey(roomId)) === "1"; } catch { return false; }
}

// abre o jogo como espectador (seat −1, watch): a partida segue pelo servidor; sair não é abandono
function rxWatchGame(navigate, room) {
    if (!room?.current_match_id) return;
    window.MastershotLobby?.markStayingInRoom?.();
    navigate("game", {
        mode: room.mode || "8ball", table: room.table_id || "classic", env: room.env_id || "pool-hall",
        aim: room.aim_mode || "com", opponent: "remote", roomId: room.id, matchId: room.current_match_id,
        seat: -1, watch: 1, ...(room.room_kind === "team" ? { team: room.team_size || 2 } : {}),
    });
}

function RoomSpectators({ list }) {
    if (!list || !list.length) return null;
    return (
        <div className="rx-specs">
            <span>👁 {window.t("Assistindo ({n})", { n: list.length })}</span>
            {list.map((p) => (
                <button key={p.client_id} onClick={() => window.MastershotSocial?.openCard(p.client_id)}>{p.nick}</button>
            ))}
        </div>
    );
}

// people: [{ client_id, nick, role? }] — todos da sala menos ninguém (o próprio mestre fica de fora da lista)
function RoomMasterMenu({ room, people, myId, onChanged }) {
    const [open, setOpen] = React.useState(false);
    const [msg, setMsg] = React.useState(null);
    if (!room) return null;
    const isMaster = room.master_client_id === myId;
    const master = people.find((p) => p.client_id === room.master_client_id);
    const Lobby = window.MastershotLobby;
    const act = async (fn) => {
        setMsg(null);
        try {
            const r = await fn();
            if (r && r.ok === false) setMsg(rxReason(r.reason));
            else onChanged?.();
        } catch (e) { setMsg(rxReason(/invalid_password/.test(e.message) ? "invalid_password" : "x")); }
    };
    const others = people.filter((p) => p.client_id && p.client_id !== myId);
    return (
        <div className="rx-master">
            <button className="rx-master-btn" disabled={!isMaster} onClick={() => setOpen((v) => !v)}
                title={isMaster ? window.t("Gerenciar a sala") : window.t("Mestre da sala")}>
                ♛ {master?.nick || window.t("Mestre")}{room.has_password ? " 🔒" : ""}{isMaster ? " ▾" : ""}
            </button>
            {open && isMaster && (
                <div className="rx-pop" onMouseLeave={() => setOpen(false)}>
                    <div className="rx-pop-title">{window.t("Mestre da sala")}</div>
                    {others.length === 0 && <div className="rx-pop-empty">{window.t("Ninguém mais na sala.")}</div>}
                    {others.map((p) => (
                        <div key={p.client_id} className="rx-row">
                            <span>{p.nick}{p.role === "spectator" ? " 👁" : ""}</span>
                            {p.role !== "spectator" && <button onClick={() => act(() => Lobby.setRoomMaster(room.id, p.client_id))}>♛ {window.t("Passar o mestre")}</button>}
                            <button className="danger" onClick={() => act(() => Lobby.kickFromRoom(room.id, p.client_id))}>{window.t("Expulsar")}</button>
                        </div>
                    ))}
                    <div className="rx-row">
                        <button onClick={async () => {
                            const pw = await window.MastershotPrompt({ title: window.t("Senha da sala"), message: window.t("Até 8 caracteres. Vazio abre a sala."), maxLength: 8, placeholder: window.t("Senha") });
                            if (pw != null) act(() => Lobby.setRoomPassword(room.id, pw.trim()));
                        }}>🔒 {room.has_password ? window.t("Trocar ou tirar a senha") : window.t("Pôr senha")}</button>
                    </div>
                    {msg && <div className="rx-msg">{msg}</div>}
                </div>
            )}
        </div>
    );
}

function RoomItemsBar() {
    const [state, setState] = React.useState(null);
    const [owned, setOwned] = React.useState({});
    const load = React.useCallback(async () => {
        const Lobby = window.MastershotLobby;
        if (!Lobby?.getItemsState || !window.MastershotAuth?.isAuthenticated?.()) return;
        try { setState(await Lobby.getItemsState()); } catch {}
        try { const o = await window.__msFetchOwned?.(); setOwned(o?.consumables || {}); } catch {}
    }, []);
    React.useEffect(() => { load(); }, [load]);
    if (!state) return null;
    const toggle = async (id) => {
        try { const r = await window.MastershotLobby.armItem(id, !state.armed.includes(id)); if (r?.ok !== false) setState(r); } catch {}
    };
    return (
        <div className="rx-items">
            <span className="rx-label">{window.t("Itens da partida")}</span>
            {RX_ITEMS.map(([id, name, desc]) => {
                const qty = owned[id] || 0, on = state.armed.includes(id);
                return (
                    <button key={id} className={"rx-item" + (on ? " on" : "")} disabled={!qty && !on} onClick={() => toggle(id)}
                        title={window.t(desc) + (qty ? "" : " — " + window.t("compre no inventário"))}>
                        <img src={`assets/ui/items/${id}${on ? "" : "-off"}.png`} alt=""/>{window.t(name)} <small>×{qty}</small>
                    </button>
                );
            })}
            {state.vipUntil && <span className="rx-vip" title={window.t("VIP até {d}", { d: new Date(state.vipUntil).toLocaleDateString() })}>★ VIP</span>}
            {state.dropsToday > 0 && (
                <span className={"rx-drops" + (state.locked ? " locked" : "")} title={window.t("5 abandonos no dia travam as salas apostadas até amanhã.")}>
                    {window.t("Abandonos hoje: {n}/5", { n: state.dropsToday })}
                </span>
            )}
        </div>
    );
}

(function rxInjectStyles() {
    if (document.getElementById("rx-styles")) return;
    const st = document.createElement("style");
    st.id = "rx-styles";
    st.textContent = `
    .rx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; }
    .rx-specs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: rgba(241,227,182,.6); }
    .rx-specs button { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #e9e3d2; font-weight: 600; font-size: 11px; line-height: 1; font-family: inherit; padding: 4px 9px; cursor: pointer; }
    .rx-master { position: relative; }
    .rx-master-btn { background: rgba(201,165,92,.1); border: 1px solid rgba(201,165,92,.3); border-radius: 999px; color: #f3e3ad; font-weight: 600; font-size: 12px; line-height: 1; font-family: inherit; padding: 6px 12px; cursor: pointer; }
    .rx-master-btn:disabled { cursor: default; opacity: .85; }
    .rx-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 300px; background: #0b1710; border: 1px solid rgba(201,165,92,.3);
        border-radius: 14px; padding: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 6px; }
    .rx-pop-title { font-weight: 700; font-size: 10px; line-height: 1; font-family: inherit; letter-spacing: .14em; text-transform: uppercase; color: var(--ms-eyebrow, #a8894a); margin-bottom: 4px; }
    .rx-pop-empty { font-size: 12px; color: rgba(241,227,182,.5); }
    .rx-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #e9e3d2; }
    .rx-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rx-row button { border-radius: 999px; border: 1px solid rgba(201,165,92,.3); background: transparent; color: var(--gold-400, #e2c178); font-weight: 600; font-size: 11px; line-height: 1; font-family: inherit; padding: 6px 8px; cursor: pointer; white-space: nowrap; }
    .rx-row button.danger { color: #f0a49c; border-color: rgba(212,87,76,.45); }
    .rx-msg { font-size: 11.5px; color: #ff9b90; }
    .rx-items { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
    .rx-label { font-weight: 700; font-size: 10px; line-height: 1; font-family: inherit; letter-spacing: .24em; text-transform: uppercase; color: var(--ms-eyebrow, #a8894a); }
    .rx-item { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.3);
        color: rgba(241,227,182,.7); font-weight: 600; font-size: 11.5px; line-height: 1; font-family: inherit; padding: 3px 10px 3px 3px; cursor: pointer; }
    .rx-item img { width: 22px; height: 22px; border-radius: 50%; }
    .rx-item.on { border-color: #d9b44a; color: #ffd87a; background: rgba(201,165,92,.14); }
    .rx-item:disabled { opacity: .45; cursor: not-allowed; }
    .rx-item small { opacity: .6; }
    .rx-vip { color: #ffd87a; font-weight: 800; }
    .rx-drops { color: rgba(241,227,182,.55); }
    .rx-drops.locked { color: #ff9b90; }
    `;
    document.head.appendChild(st);
})();

Object.assign(window, { RoomSpectators, RoomMasterMenu, RoomItemsBar, rxWatchGame, rxMarkSpectating, rxIsSpectating });