// ============================================
// ADMIN — Painel restrito (is_admin=true)
// Gate: o gate REAL precisa estar no servidor; aqui é só UX.
// ============================================

function AdminGuardOrChild({ children }) {
    const PLAYER = window.MastershotAuth.getPlayer();
    if (!PLAYER || !PLAYER.isAdmin) {
        return (
            <div style={{ padding: 80, textAlign: "center", color: "var(--ink-300)" }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 28, color: "var(--gold-300)" }}>
                    {window.t("Acesso restrito")}
                </div>
                <div style={{ marginTop: 12, fontSize: 14 }}>
                    {window.t("Esta área é exclusiva para administradores.")}
                </div>
            </div>
        );
    }
    return children;
}

function AdminCard({ title, desc, icon, status, onClick }) {
    const isComing = status === "coming";
    return (
        <button
            className="admin-card"
            onClick={isComing ? undefined : onClick}
            disabled={isComing}
            style={{ opacity: isComing ? 0.55 : 1, cursor: isComing ? "not-allowed" : "pointer" }}
        >
            <div className="admin-card-icon" dangerouslySetInnerHTML={{ __html: icon }}/>
            <div style={{ flex: 1, textAlign: "left" }}>
                <div className="admin-card-title">{title}</div>
                <div className="admin-card-desc">{desc}</div>
            </div>
            {isComing && <span className="admin-tag">{window.t("em breve")}</span>}
        </button>
    );
}

function AdminScreen({ navigate }) {
    return (
        <AdminGuardOrChild>
            <div className="screen active" style={{ opacity: 1 }}>
                <AmbientBackdrop/>
                <TopBar navigate={navigate}/>

                <div style={{ position: "relative", zIndex: 5, padding: "100px 48px 40px", maxWidth: 1400, margin: "0 auto" }}>
                    <div className="admin-back-wrap">
                        <button className="back-btn" onClick={() => navigate("menu")}>
                            <span>‹</span> {window.t("Voltar")}
                        </button>
                    </div>

                    <div style={{ marginTop: 16, marginBottom: 36 }}>
                        <div style={{ fontSize: 12, color: "var(--gold-500)", letterSpacing: "0.3em", textTransform: "uppercase", marginBottom: 6 }}>
                            {window.t("Painel restrito")}
                        </div>
                        <div className="admin-title" style={{ fontFamily: "var(--font-display)", fontSize: 36, color: "var(--ink-100)", letterSpacing: "0.04em", fontWeight: 600 }}>
                            {window.t("Administração")}
                        </div>
                        <div style={{ marginTop: 8, fontSize: 13, color: "var(--ink-300)", maxWidth: 720 }}>
                            {window.t("Ferramentas internas para gestão do jogo. Mudanças aqui podem afetar o ambiente de produção.")}
                        </div>
                    </div>

                    <div className="admin-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
                        <AdminCard
                            title={window.t("Criador de Mesas")}
                            desc={window.t("Editor visual de mesas — estilo de cushion, cores do feltro/madeira/trilho, preview ao vivo.")}
                            icon={window.Icon.cue ? window.Icon.cue(26) : '◉'}
                            onClick={() => navigate("tableEditor")}
                        />
                        <AdminCard
                            title={window.t("Catálogo de Tacos")}
                            desc={window.t("Cadastrar/editar tacos, atributos, preços, skins.")}
                            icon={window.Icon.shop ? window.Icon.shop(26) : '⌗'}
                            onClick={() => navigate("cueCatalog")}
                        />
                        <AdminCard
                            title={window.t("Catálogo de Avatares")}
                            desc={window.t("Cadastrar/editar skins de boneco; exportar manifest.json e SQL.")}
                            icon={window.Icon.user ? window.Icon.user(26) : '☻'}
                            onClick={() => navigate("avatarCatalog")}
                        />
                        <AdminCard
                            title={window.t("Loja & Preços")}
                            desc={window.t("Definir preço e moeda (do jogo ou paga) de cada mesa, taco e ambiente.")}
                            icon={window.Icon.shop ? window.Icon.shop(26) : '$'}
                            onClick={() => navigate("shopPricing")}
                        />
                        <AdminCard
                            title={window.t("Ambientes & Cenários")}
                            desc={window.t("Gerenciar cenários disponíveis e suas paletas.")}
                            icon={window.Icon.globe ? window.Icon.globe(26) : '◯'}
                            status="coming"
                        />
                        <AdminCard
                            title={window.t("Usuários")}
                            desc={window.t("Promover admin, banir, ajustar coins/mastercoins.")}
                            icon={window.Icon.user ? window.Icon.user(26) : '☻'}
                            status="coming"
                        />
                        <AdminCard
                            title={window.t("Moderação de Salas")}
                            desc={window.t("Listar salas ativas, encerrar partidas, kick.")}
                            icon={window.Icon.trophy ? window.Icon.trophy(26) : '✣'}
                            status="coming"
                        />
                        <AdminCard
                            title={window.t("Economia de Moedas")}
                            desc={window.t("Fluxo de coins: circulação, inflow/outflow diário, top holders.")}
                            icon={window.Icon.trophy ? window.Icon.trophy(26) : '$'}
                            onClick={() => navigate("coinEconomy")}
                        />
                        <AdminCard
                            title={window.t("Métricas")}
                            desc={window.t("Concorrência, partidas/dia, retenção.")}
                            icon={window.Icon.cog ? window.Icon.cog(26) : '⚙'}
                            status="coming"
                        />
                    </div>
                </div>

                <style>{`
                    .admin-card {
                        display: flex; align-items: center; gap: 18px;
                        padding: 22px 26px;
                        background: linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%);
                        border: 1px solid var(--ink-700);
                        border-radius: var(--r-lg);
                        color: var(--ink-100);
                        text-align: left;
                        transition: all var(--t-fast) var(--ease-out);
                    }
                    .admin-card:not(:disabled):hover {
                        border-color: var(--gold-700);
                        transform: translateY(-2px);
                        box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 24px rgba(232,185,73,0.12);
                    }
                    .admin-card-icon {
                        width: 48px; height: 48px;
                        display: flex; align-items: center; justify-content: center;
                        background: linear-gradient(145deg, var(--ink-700), var(--ink-900));
                        border: 1px solid var(--ink-600);
                        border-radius: var(--r-md);
                        color: var(--gold-400);
                        flex-shrink: 0;
                    }
                    .admin-card-title {
                        font-family: var(--font-display);
                        font-size: 18px;
                        font-weight: 600;
                        color: var(--ink-100);
                        letter-spacing: 0.04em;
                        margin-bottom: 4px;
                    }
                    .admin-card-desc {
                        font-size: 12px;
                        color: var(--ink-300);
                        line-height: 1.5;
                    }
                    .admin-tag {
                        font-size: 10px;
                        letter-spacing: 0.2em;
                        text-transform: uppercase;
                        color: var(--ink-400);
                        border: 1px solid var(--ink-600);
                        padding: 4px 10px;
                        border-radius: 12px;
                        background: rgba(0,0,0,0.3);
                    }
                    @media (max-width: 768px) {
                        .admin-title { font-size: clamp(24px, 7vw, 32px) !important; }
                        .admin-card { padding: 14px 16px; gap: 12px; }
                        .admin-card-icon { width: 40px; height: 40px; }
                        .admin-card-title { font-size: 15px; }
                        .admin-card-desc { font-size: 11px; }
                        .admin-grid { gap: 12px !important; }
                    }
                    @media (max-width: 480px) {
                        .admin-grid { grid-template-columns: 1fr !important; }
                    }
                `}</style>
            </div>
        </AdminGuardOrChild>
    );
}

Object.assign(window, { AdminScreen });