// ============================================
// MODERAÇÃO do Carom3D (carom3d-re/notes/social.md §2.19; servidor: 20261101000001_competitivo.sql)
// ============================================
// Níveis do original: 1 apoio de idioma · 2 moderador · 3 moderador executivo · 4 moderador sênior · 5 admin
// (o admin do mastershot conta como 6). Silenciar (horas), suspender (3 d → 7 d → 14 d) e banir (permanente).
// window.MastershotModeration.open() / .openUser(nick) abrem o painel por cima de qualquer tela.

const MOD_LEVELS = { 1: "Apoio de idioma", 2: "Moderador", 3: "Moderador executivo", 4: "Moderador sênior", 5: "Admin", 6: "Admin sênior" };
const MOD_KIND = { mute: "Silêncio", suspend: "Suspensão", ban: "Banimento" };
const modApi = () => window.MastershotSocialApi;
const modDate = (d) => d ? new Date(d).toLocaleString([], { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" }) : "—";
const modErr = (e) => window.t({ forbidden: "Seu nível não permite isso (ou a pessoa tem nível igual ou maior).", not_found: "Jogador não encontrado." }[e] || "Não foi possível agora.");

function ModUserView({ nick, level, onBack }) {
    const [u, setU] = React.useState(null);
    const [msg, setMsg] = React.useState(null);
    const load = React.useCallback(async () => {
        try { const r = await modApi().modUser(nick); setU(r?.ok ? r : { error: modErr(r?.error) }); } catch (e) { setU({ error: modErr(/forbidden/.test(e.message) ? "forbidden" : "x") }); }
    }, [nick]);
    React.useEffect(() => { load(); }, [load]);
    async function sanction(kind) {
        let hours = null;
        if (kind === "mute") {
            const h = await window.MastershotPrompt({ title: window.t("Silenciar {nick}", { nick }), message: window.t("Por quantas horas?"), placeholder: "1", maxLength: 3 });
            if (h == null) return;
            hours = Math.max(1, parseInt(h, 10) || 1);
        }
        const reason = await window.MastershotPrompt({ title: window.t(MOD_KIND[kind]), message: window.t("Motivo (vai para o jogador)"), maxLength: 300 });
        if (reason == null) return;
        if (kind === "ban" && !(await window.MastershotConfirm({ title: window.t("Banir {nick}", { nick }), message: window.t("A conta é desligada e as sessões caem."), danger: true }))) return;
        try { const r = await modApi().modSanction(nick, kind, { hours, reason }); setMsg(r?.ok === false ? modErr(r.error) : window.t("Feito.")); load(); }
        catch (e) { setMsg(modErr("x")); }
    }
    if (!u) return <div className="mod-empty">{window.t("Carregando…")}</div>;
    if (u.error) return <div className="mod-empty">{u.error}</div>;
    return (
        <div className="mod-user">
            {onBack && <button className="soc-link" onClick={onBack}>← {window.t("Voltar")}</button>}
            <div className="mod-uhead">
                <CountryFlag code={u.user.country} size={18}/> <b>{u.user.nick}</b>
                <span className="mod-tag">{window.t("Nível {n}", { n: u.user.level })}</span>
                <span className={"mod-tag" + (u.status !== "active" ? " bad" : "")}>{u.status}</span>
                {u.modLevel > 0 && <span className="mod-tag">{window.t(MOD_LEVELS[u.modLevel])}</span>}
                <span className="mod-tag">{window.t("{n} denúncias", { n: u.reports })}</span>
            </div>
            <div className="mod-actions">
                <button onClick={() => sanction("mute")}>🔇 {window.t("Silenciar")}</button>
                {level >= 2 && <button onClick={() => sanction("suspend")}>⏸ {window.t("Suspender (escalonada)")}</button>}
                {level >= 4 && <button className="danger" onClick={() => sanction("ban")}>⛔ {window.t("Banir")}</button>}
            </div>
            {msg && <div className="mod-msg">{msg}</div>}
            <div className="mod-h">{window.t("Sanções")}</div>
            {u.sanctions.length === 0 && <div className="mod-empty small">{window.t("Nenhuma.")}</div>}
            {u.sanctions.map((s) => (
                <div key={s.id} className={"mod-row" + (s.active ? " active" : "")}>
                    <span>{window.t(MOD_KIND[s.kind])}</span>
                    <span>{s.until ? window.t("até {d}", { d: modDate(s.until) }) : window.t("permanente")}</span>
                    <span className="mod-dim">{s.reason || ""} · {s.by || "?"} · {modDate(s.createdAt)}</span>
                    {s.active && <button onClick={async () => { await modApi().modLift(s.id); load(); }}>{window.t("Tirar")}</button>}
                </div>
            ))}
            <div className="mod-h">{window.t("Chat recente")}</div>
            {u.chat.length === 0 && <div className="mod-empty small">{window.t("Nada.")}</div>}
            {u.chat.map((c, i) => <div key={i} className="mod-line"><span className="mod-dim">{modDate(c.at)} · {c.channel}</span> {c.body}</div>)}
        </div>
    );
}

function ModerationPanel({ initialUser, onClose }) {
    const [me, setMe] = React.useState(null);
    const [tab, setTab] = React.useState(initialUser ? "user" : "reports");
    const [status, setStatus] = React.useState("open");
    const [reports, setReports] = React.useState(null);
    const [user, setUser] = React.useState(initialUser || "");
    const [lookup, setLookup] = React.useState(initialUser || "");
    const [mods, setMods] = React.useState(null);
    const isAdmin = !!window.MastershotAuth?.getPlayer?.()?.isAdmin;
    React.useEffect(() => { modApi()?.myModeration().then(setMe).catch(() => setMe({ level: 0 })); }, []);
    const loadReports = React.useCallback(() => { modApi().modReports(status).then(setReports).catch(() => setReports([])); }, [status]);
    React.useEffect(() => { if (tab === "reports" && me?.level >= 1) loadReports(); }, [tab, me, loadReports]);
    React.useEffect(() => { if (tab === "mods" && me?.level >= 1) modApi().modList().then(setMods).catch(() => setMods([])); }, [tab, me]);
    const level = me?.level || 0;
    async function act(r, kind) {
        if (kind === "dismiss") { await modApi().modResolve(r.id, null); loadReports(); return; }
        let hours = null;
        if (kind === "mute") {
            const h = await window.MastershotPrompt({ title: window.t("Silenciar {nick}", { nick: r.target.nick }), message: window.t("Por quantas horas?"), placeholder: "1", maxLength: 3 });
            if (h == null) return;
            hours = Math.max(1, parseInt(h, 10) || 1);
        }
        const res = await modApi().modSanction(r.target.nick, kind, { hours, reason: r.reason || null, report: r.id }).catch(() => ({ ok: false }));
        if (res?.ok === false) window.MastershotAlert(modErr(res.error));
        loadReports();
    }
    return (
        <div className="soc-card-ov" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
            <div className="soc-card mod-panel">
                <button className="soc-x" onClick={onClose}>✕</button>
                <div className="soc-card-nick">🛡 {window.t("Moderação")}</div>
                {me && <div className="soc-card-sub">{level ? window.t(MOD_LEVELS[level]) : window.t("Sem acesso")}</div>}
                {me && level < 1 ? <div className="mod-empty">{window.t("Só moderadores.")}</div> : (<>
                    <div className="soc-gtabs" style={{ margin: "10px 0" }}>
                        <button className={tab === "reports" ? "on" : ""} onClick={() => setTab("reports")}>{window.t("Denúncias")}</button>
                        <button className={tab === "user" ? "on" : ""} onClick={() => setTab("user")}>{window.t("Jogador")}</button>
                        <button className={tab === "mods" ? "on" : ""} onClick={() => setTab("mods")}>{window.t("Moderadores")}</button>
                    </div>
                    {tab === "reports" && (<>
                        <div className="soc-gtabs" style={{ marginBottom: 8 }}>
                            {[["open", "Abertas"], ["all", "Todas"]].map(([k, l]) => <button key={k} className={status === k ? "on" : ""} onClick={() => setStatus(k)}>{window.t(l)}</button>)}
                        </div>
                        {reports === null && <div className="mod-empty">{window.t("Carregando…")}</div>}
                        {reports && reports.length === 0 && <div className="mod-empty">{window.t("Nenhuma denúncia.")}</div>}
                        {reports && reports.map((r) => (
                            <div key={r.id} className="mod-report">
                                <div className="mod-rhead">
                                    <b className="soc-link" style={{ padding: 0 }} onClick={() => { setLookup(r.target.nick); setUser(r.target.nick); setTab("user"); }}>{r.target.nick}</b>
                                    <span className="mod-dim">{window.t("por {nick}", { nick: r.reporter?.nick || "?" })} · {modDate(r.createdAt)} · {window.t("{n} denúncias, {s} sanções", { n: r.targetReports, s: r.targetSanctions })}</span>
                                    {r.status !== "open" && <span className="mod-tag">{r.resolution || r.status}</span>}
                                </div>
                                {r.reason && <div className="mod-reason">“{r.reason}”</div>}
                                <div className="mod-ctx">
                                    {(r.context?.chat || []).slice(0, 8).map((c, i) => <div key={i} className="mod-line"><span className="mod-dim">{modDate(c.at)} · {c.channel}</span> {c.body}</div>)}
                                    {(r.context?.whispers || []).slice(0, 5).map((c, i) => <div key={"w" + i} className="mod-line"><span className="mod-dim">{modDate(c.at)} · {window.t("cochicho")}</span> {c.body}</div>)}
                                </div>
                                {r.status === "open" && (
                                    <div className="mod-actions">
                                        <button onClick={() => act(r, "mute")}>🔇 {window.t("Silenciar")}</button>
                                        {level >= 2 && <button onClick={() => act(r, "suspend")}>⏸ {window.t("Suspender")}</button>}
                                        {level >= 4 && <button className="danger" onClick={() => act(r, "ban")}>⛔ {window.t("Banir")}</button>}
                                        <button className="ghost" onClick={() => act(r, "dismiss")}>{window.t("Arquivar")}</button>
                                    </div>
                                )}
                            </div>
                        ))}
                    </>)}
                    {tab === "user" && (<>
                        <form className="soc-add" style={{ padding: "0 0 8px" }} onSubmit={(e) => { e.preventDefault(); setUser(lookup.trim()); }}>
                            <input value={lookup} placeholder={window.t("Nick do jogador")} onChange={(e) => setLookup(e.target.value)}/>
                            <button type="submit">🔍</button>
                        </form>
                        {user && <ModUserView key={user} nick={user} level={level}/>}
                    </>)}
                    {tab === "mods" && (<>
                        {mods === null && <div className="mod-empty">{window.t("Carregando…")}</div>}
                        {mods && mods.map((m) => (
                            <div key={m.id} className="mod-row">
                                <span>{m.nick}</span><span>{window.t(MOD_LEVELS[m.modLevel])}</span>
                                {isAdmin && <button onClick={async () => { await modApi().adminSetModerator(m.nick, 0); modApi().modList().then(setMods); }}>{window.t("Remover")}</button>}
                            </div>
                        ))}
                        {isAdmin && (
                            <form className="soc-add" style={{ padding: "8px 0" }} onSubmit={async (e) => {
                                e.preventDefault();
                                const f = new FormData(e.target);
                                const r = await modApi().adminSetModerator(String(f.get("nick")).trim(), Number(f.get("level"))).catch(() => ({ ok: false }));
                                if (r?.ok === false) window.MastershotAlert(modErr(r.error));
                                modApi().modList().then(setMods); e.target.reset();
                            }}>
                                <input name="nick" placeholder={window.t("Nick")}/>
                                <select name="level" defaultValue="2" style={{ background: "rgba(0,0,0,.4)", color: "#eee", border: "1px solid rgba(201,165,92,.22)", borderRadius: 9 }}>
                                    {[1, 2, 3, 4, 5].map((n) => <option key={n} value={n}>{window.t(MOD_LEVELS[n])}</option>)}
                                </select>
                                <button type="submit">+</button>
                            </form>
                        )}
                    </>)}
                </>)}
            </div>
        </div>
    );
}

(function modInjectStyles() {
    if (document.getElementById("mod-styles")) return;
    const st = document.createElement("style");
    st.id = "mod-styles";
    st.textContent = `
    .mod-panel { width: min(680px, calc(100vw - 24px)) !important; }
    .mod-empty { padding: 20px; text-align: center; color: rgba(241,227,182,.45); font-size: 13px; }
    .mod-empty.small { padding: 6px; text-align: left; }
    .mod-report { border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; background: rgba(255,255,255,.025); }
    .mod-rhead { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; color: #eee; }
    .mod-dim { color: rgba(241,227,182,.45); font-size: 11px; }
    .mod-reason { font-size: 13px; color: #f3e3ad; margin: 6px 0; }
    .mod-ctx { max-height: 140px; overflow-y: auto; margin: 6px 0; }
    .mod-line { font-size: 12px; color: #e9e3d2; padding: 2px 0; }
    .mod-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
    .mod-actions button, .mod-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: 11.5px; line-height: 1; font-family: inherit; padding: 7px 10px; cursor: pointer; }
    .mod-actions button.danger { color: #f0a49c; border-color: rgba(212,87,76,.45); }
    .mod-actions button.ghost { opacity: .75; }
    .mod-h { font-weight: 700; font-size: 10px; line-height: 1; font-family: inherit; letter-spacing: .24em; text-transform: uppercase; color: var(--ms-eyebrow, #a8894a); margin: 12px 0 6px; }
    .mod-row { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: #e9e3d2; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.05); }
    .mod-row.active { color: #ffd87a; }
    .mod-row .mod-dim { flex: 1; }
    .mod-uhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 15px; color: #fff; }
    .mod-tag { font-size: 10.5px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; padding: 2px 6px; color: rgba(241,227,182,.8); }
    .mod-tag.bad { color: #ff9b90; border-color: rgba(224,82,74,.5); }
    .mod-msg { font-size: 12px; color: #9fd3a8; }
    `;
    document.head.appendChild(st);
})();

// abre por cima de qualquer tela (raiz React própria)
window.MastershotModeration = (() => {
    let host = null, root = null;
    const close = () => { root?.unmount(); host?.remove(); host = root = null; };
    const show = (initialUser) => {
        close();
        host = document.createElement("div");
        document.body.appendChild(host);
        root = ReactDOM.createRoot(host);
        root.render(<ModerationPanel initialUser={initialUser || null} onClose={close}/>);
    };
    return { open: () => show(null), openUser: (nick) => show(nick), close };
})();

Object.assign(window, { ModerationPanel });