import React, { useState, useEffect, useCallback } from 'react';
import { useConfirm } from '../contexts/ConfirmContext.tsx';
import {
    Users, Building2, Activity, DollarSign, ShieldCheck, RefreshCw,
    CheckCircle2, XCircle, Clock, Search, ChevronLeft, ChevronRight,
    TrendingUp, Stethoscope, FlaskConical, User, ToggleLeft, ToggleRight,
    Save, AlertTriangle, Wifi, WifiOff, Briefcase, Trash2, Bell, Send,
    MapPin, Phone, MoreVertical, X, ArrowLeft, UserX, Sparkles, DoorOpen, UserSearch
} from 'lucide-react';

const apiFetch = (url: string, opts: RequestInit = {}) => {
    const token = localStorage.getItem('SCOREODONTO_AUTH_TOKEN');
    return fetch(url, { ...opts, headers: { 'Content-Type': 'application/json', ...(token ? { Authorization: `Bearer ${token}` } : {}), ...opts.headers } });
};

const ROLE_LABELS: Record<string, { label: string; color: string; icon: React.ElementType }> = {
    donoconsultorio: { label: 'Consultório', color: 'emerald', icon: Briefcase   },
    donoclinica:     { label: 'Clínica',     color: 'blue',    icon: Building2   },
    donosala:        { label: 'Dono de Sala', color: 'teal',   icon: DoorOpen    },
    dentista:        { label: 'Dentista',    color: 'indigo',  icon: Stethoscope },
    protetico:       { label: 'Protético',   color: 'violet',  icon: FlaskConical },
    paciente:        { label: 'Paciente',    color: 'gray',    icon: User        },
    superadmin:      { label: 'Super Admin', color: 'red',     icon: ShieldCheck },
};

const RoleBadge: React.FC<{ role: string }> = ({ role }) => {
    const cfg = ROLE_LABELS[role] || { label: role, color: 'gray', icon: User };
    const Icon = cfg.icon;
    const colors: Record<string, string> = {
        emerald: 'bg-emerald-50 text-emerald-700 border-emerald-200',
        blue:    'bg-blue-50 text-blue-700 border-blue-200',
        indigo:  'bg-indigo-50 text-indigo-700 border-indigo-200',
        violet:  'bg-violet-50 text-violet-700 border-violet-200',
        gray:    'bg-gray-100 text-gray-600 border-gray-200',
        red:     'bg-red-50 text-red-700 border-red-200',
    };
    return (
        <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-black uppercase border ${colors[cfg.color]}`}>
            <Icon size={10} />{cfg.label}
        </span>
    );
};

const StatusBadge: React.FC<{ ok: boolean }> = ({ ok }) => ok
    ? <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-black uppercase bg-green-50 text-green-700 border border-green-200"><CheckCircle2 size={10} />Ativo</span>
    : <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-black uppercase bg-red-50 text-red-600 border border-red-200"><XCircle size={10} />Suspenso</span>;

const ASSBadge: React.FC<{ status?: string; validade?: string }> = ({ status, validade }) => {
    const expired = validade ? new Date(validade) < new Date() : true;
    if (status === 'pago' && !expired)
        return <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-black bg-emerald-50 text-emerald-700 border border-emerald-200"><CheckCircle2 size={10} />Pago</span>;
    if (status === 'pago' && expired)
        return <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-black bg-orange-50 text-orange-700 border border-orange-200"><AlertTriangle size={10} />Vencido</span>;
    return <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-black bg-yellow-50 text-yellow-700 border border-yellow-200"><Clock size={10} />Pendente</span>;
};

const fmt = (d: string | null | undefined) => d ? new Date(d).toLocaleDateString('pt-BR', { day:'2-digit', month:'2-digit', year:'2-digit', hour:'2-digit', minute:'2-digit' }) : '—';
const fmtDate = (d: string | null | undefined) => d ? new Date(d).toLocaleDateString('pt-BR') : '—';

/* ─── KPI Card ─── */
const KPI: React.FC<{ icon: React.ElementType; label: string; value: string | number; sub?: string; color?: string }> = ({ icon: Icon, label, value, sub, color = 'blue' }) => {
    const bg: Record<string, string> = { blue: 'bg-blue-600', green: 'bg-emerald-500', orange: 'bg-orange-500', violet: 'bg-violet-600' };
    return (
        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5 flex items-start gap-3 sm:gap-4">
            <div className={`w-10 h-10 sm:w-11 sm:h-11 ${bg[color]} rounded-xl flex items-center justify-center shrink-0`}>
                <Icon size={18} className="text-white" />
            </div>
            <div className="min-w-0">
                <p className="text-[9px] sm:text-[10px] font-black text-gray-400 uppercase tracking-widest leading-tight">{label}</p>
                <p className="text-xl sm:text-2xl font-black text-gray-900 leading-tight">{value}</p>
                {sub && <p className="text-[10px] sm:text-xs text-gray-400 font-medium mt-0.5 leading-tight">{sub}</p>}
            </div>
        </div>
    );
};

type SuperAdminTab = 'overview' | 'users' | 'clinicas' | 'logs' | 'financeiro' | 'notificacoes';

/* ═══════════════════════════════════════════════════ MAIN VIEW */
export const SuperAdminView: React.FC<{ tab?: SuperAdminTab }> = ({ tab = 'overview' }) => {
    return (
        <div className="space-y-6">
            {tab === 'overview'     && <TabOverview />}
            {tab === 'users'        && <TabUsers />}
            {tab === 'clinicas'     && <TabClinicas />}
            {tab === 'logs'         && <TabLogs />}
            {tab === 'financeiro'   && <TabFinanceiro />}
            {tab === 'notificacoes' && <TabNotificacoes />}
        </div>
    );
};

/* ═══════════════════════════════════════════════════ TAB OVERVIEW */
const TabOverview: React.FC = () => {
    const [stats, setStats] = useState<any>(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        apiFetch('/api/superadmin/stats')
            .then(r => r.ok ? r.json() : null)
            .then(d => { if (d?.usuarios) setStats(d); })
            .finally(() => setLoading(false));
    }, []);

    if (loading) return <Spinner />;
    if (!stats?.usuarios) return <ErrorMsg />;

    const totalUsers = stats.usuarios.reduce((s: number, r: any) => s + parseInt(r.total), 0);

    return (
        <div className="space-y-5 sm:space-y-6">
            <SectionTitle>Resumo do Sistema</SectionTitle>
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
                <KPI icon={Users}         label="Total Usuários"       value={totalUsers}          color="blue"   />
                <KPI icon={Building2}     label="Clínicas"             value={stats.clinicas}      color="violet" />
                <KPI icon={Activity}      label="Logins Hoje"          value={stats.logins_hoje}   color="green"  />
                <KPI icon={AlertTriangle} label="Sem Assinatura"       value={stats.sem_assinatura} color="orange" sub="aguardando" />
            </div>

            <SectionTitle>Usuários por Perfil</SectionTitle>
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
                {stats.usuarios.map((r: any) => {
                    const cfg = ROLE_LABELS[r.role] || { label: r.role, icon: User };
                    const Icon = cfg.icon;
                    return (
                        <div key={r.role} className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5">
                            <div className="flex items-center gap-2 mb-2">
                                <Icon size={14} className="text-blue-600 shrink-0" />
                                <span className="text-[9px] sm:text-[10px] font-black text-gray-400 uppercase tracking-widest truncate">{cfg.label}</span>
                            </div>
                            <p className="text-2xl sm:text-3xl font-black text-gray-900">{r.total}</p>
                            {parseInt(r.suspensos) > 0 && (
                                <p className="text-[10px] text-red-500 font-bold mt-1">{r.suspensos} suspenso(s)</p>
                            )}
                        </div>
                    );
                })}
            </div>
        </div>
    );
};

/* ═══════════════════════════════════════════════════ TAB USERS */
const TabUsers: React.FC = () => {
    const [clinicas, setClinicas]         = useState<any[]>([]);
    const [loadingClinicas, setLoadingClinicas] = useState(true);
    const [clinicaSearch, setClinicaSearch] = useState('');
    const [selectedClinica, setSelectedClinica] = useState<any | null>(null);

    useEffect(() => {
        apiFetch('/api/superadmin/clinicas').then(r => r.json()).then(d => {
            setClinicas(Array.isArray(d) ? d : []);
        }).finally(() => setLoadingClinicas(false));
    }, []);

    const filteredClinicas = clinicas.filter(c =>
        !clinicaSearch || c.nome_fantasia?.toLowerCase().includes(clinicaSearch.toLowerCase()) ||
        c.cidade?.toLowerCase().includes(clinicaSearch.toLowerCase())
    );

    /* ── Estágio 1: grid de clínicas ── */
    if (!selectedClinica) {
        return (
            <div className="space-y-3 sm:space-y-4">
                <div className="flex gap-2 sm:gap-3 items-center">
                    <div className="relative flex-1">
                        <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
                        <input value={clinicaSearch} onChange={e => setClinicaSearch(e.target.value)}
                            className="w-full pl-9 pr-3 py-2.5 bg-white border border-gray-200 rounded-xl text-sm font-medium outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-50 transition-all"
                            placeholder="Buscar clínica ou consultório..." />
                    </div>
                    <button onClick={() => { setLoadingClinicas(true); apiFetch('/api/superadmin/clinicas').then(r => r.json()).then(d => setClinicas(Array.isArray(d) ? d : [])).finally(() => setLoadingClinicas(false)); }}
                        className="p-2.5 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition-all shrink-0">
                        <RefreshCw size={14} className={`text-gray-400 ${loadingClinicas ? 'animate-spin' : ''}`} />
                    </button>
                </div>

                {loadingClinicas ? <Spinner /> : (
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                        {filteredClinicas.map(c => {
                            const isCons = c.dono_role === 'donoconsultorio';
                            return (
                                <button key={c.id} onClick={() => setSelectedClinica(c)}
                                    className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 text-left hover:border-blue-300 hover:shadow-md transition-all group">
                                    <div className="flex items-start gap-3">
                                        <div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${isCons ? 'bg-emerald-50' : 'bg-blue-50'} group-hover:scale-105 transition-transform`}>
                                            {isCons ? <Briefcase size={18} className="text-emerald-600" /> : <Building2 size={18} className="text-blue-600" />}
                                        </div>
                                        <div className="flex-1 min-w-0">
                                            <p className="font-black text-gray-900 text-sm truncate leading-tight">{c.nome_fantasia}</p>
                                            {c.dono_nome && <p className="text-xs text-gray-400 font-medium truncate mt-0.5">{c.dono_nome}</p>}
                                        </div>
                                    </div>
                                    <div className="flex items-center justify-between mt-3">
                                        <div className="flex items-center gap-2">
                                            {c.cidade && (
                                                <span className="flex items-center gap-1 text-[10px] text-gray-400 font-medium">
                                                    <MapPin size={10} />{c.cidade}{c.estado ? `/${c.estado}` : ''}
                                                </span>
                                            )}
                                        </div>
                                        <span className={`text-[10px] font-black px-2 py-1 rounded-lg ${c.membros > 0 ? 'bg-blue-50 text-blue-600' : 'bg-gray-100 text-gray-400'}`}>
                                            {c.membros} {Number(c.membros) === 1 ? 'membro' : 'membros'}
                                        </span>
                                    </div>
                                </button>
                            );
                        })}

                        {/* Card: sem vínculo */}
                        <button onClick={() => setSelectedClinica({ id: 'none', nome_fantasia: 'Sem vínculo', _none: true })}
                            className="bg-white rounded-2xl border border-dashed border-gray-200 p-4 text-left hover:border-gray-400 hover:shadow-md transition-all group">
                            <div className="flex items-start gap-3">
                                <div className="w-10 h-10 rounded-xl bg-gray-100 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform">
                                    <UserX size={18} className="text-gray-400" />
                                </div>
                                <div>
                                    <p className="font-black text-gray-600 text-sm">Sem vínculo</p>
                                    <p className="text-[10px] text-gray-400 mt-0.5">Usuários sem clínica</p>
                                </div>
                            </div>
                        </button>
                    </div>
                )}
            </div>
        );
    }

    /* ── Estágio 2: usuários da clínica selecionada ── */
    return (
        <ClinicaUsuarios
            clinica={selectedClinica}
            onBack={() => setSelectedClinica(null)}
        />
    );
};

/* ── Usuários de uma clínica específica ── */
const ClinicaUsuarios: React.FC<{ clinica: any; onBack: () => void }> = ({ clinica, onBack }) => {
    const confirm = useConfirm();
    const [data, setData]       = useState<any[]>([]);
    const [total, setTotal]     = useState(0);
    const [page, setPage]       = useState(1);
    const [search, setSearch]   = useState('');
    const [loading, setLoading] = useState(false);
    const [togglingId, setTogglingId] = useState<string | null>(null);
    const [assinaturaModal, setAssinaturaModal] = useState<any | null>(null);
    const [menuOpen, setMenuOpen] = useState<string | null>(null);

    const PAGE_SIZE = 20;

    const load = useCallback(async () => {
        setLoading(true);
        try {
            const params = new URLSearchParams({ page: String(page), pageSize: String(PAGE_SIZE), clinicaId: clinica.id });
            if (search) params.set('search', search);
            const res = await apiFetch(`/api/superadmin/usuarios?${params}`);
            const json = await res.json();
            setData(json.data || []); setTotal(json.total || 0);
        } finally { setLoading(false); }
    }, [page, search, clinica.id]);

    useEffect(() => { load(); }, [load]);

    const toggleStatus = async (u: any) => {
        setTogglingId(u.id); setMenuOpen(null);
        await apiFetch(`/api/superadmin/usuarios/${u.id}/status`, { method: 'PUT', body: JSON.stringify({ ativo: !u.ativo }) });
        setTogglingId(null);
        load();
    };

    const deleteUser = async (u: any) => {
        setMenuOpen(null);
        if (!await confirm(`EXCLUIR "${u.nome}" PERMANENTEMENTE?`)) return;
        await apiFetch(`/api/superadmin/usuarios/${u.id}`, { method: 'DELETE' });
        load();
    };

    const totalPages = Math.ceil(total / PAGE_SIZE);
    const isCons = clinica.dono_role === 'donoconsultorio';

    return (
        <div className="space-y-3 sm:space-y-4">
            {/* Breadcrumb header */}
            <div className="flex items-center gap-3">
                <button onClick={onBack}
                    className="flex items-center gap-1.5 px-3 py-2 rounded-xl bg-white border border-gray-200 text-xs font-black uppercase text-gray-500 hover:text-gray-800 hover:bg-gray-50 transition-all shrink-0">
                    <ArrowLeft size={13} />
                    <span className="hidden sm:inline">Clínicas</span>
                </button>
                <div className="flex items-center gap-2.5 min-w-0 flex-1">
                    <div className={`w-8 h-8 rounded-xl flex items-center justify-center shrink-0 ${clinica._none ? 'bg-gray-100' : isCons ? 'bg-emerald-50' : 'bg-blue-50'}`}>
                        {clinica._none ? <UserX size={15} className="text-gray-400" />
                            : isCons ? <Briefcase size={15} className="text-emerald-600" />
                            : <Building2 size={15} className="text-blue-600" />}
                    </div>
                    <div className="min-w-0">
                        <p className="font-black text-gray-900 text-sm truncate leading-tight">{clinica.nome_fantasia}</p>
                        {!clinica._none && (
                            <p className="text-[10px] text-gray-400 font-medium leading-tight hidden sm:block">
                                {clinica.cidade ? `${clinica.cidade}${clinica.estado ? `/${clinica.estado}` : ''}` : ''}
                                {clinica.dono_nome ? ` · ${clinica.dono_nome}` : ''}
                            </p>
                        )}
                    </div>
                </div>
                {!loading && (
                    <span className="shrink-0 text-[10px] font-black px-2.5 py-1.5 rounded-xl bg-blue-50 text-blue-600 border border-blue-100">
                        {total} {total === 1 ? 'membro' : 'membros'}
                    </span>
                )}
            </div>

            {/* Search + refresh */}
            <div className="flex gap-2 sm:gap-3 items-center">
                <div className="relative flex-1">
                    <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
                    <input value={search} onChange={e => { setSearch(e.target.value); setPage(1); }}
                        className="w-full pl-9 pr-3 py-2.5 bg-white border border-gray-200 rounded-xl text-sm font-medium outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-50 transition-all"
                        placeholder="Buscar por nome ou e-mail..." />
                </div>
                <button onClick={load} className="p-2.5 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition-all shrink-0">
                    <RefreshCw size={14} className={`text-gray-400 ${loading ? 'animate-spin' : ''}`} />
                </button>
            </div>

            {/* Mobile: Cards */}
            <div className="sm:hidden space-y-2">
                {loading && <Spinner />}
                {!loading && data.length === 0 && (
                    <div className="text-center py-12 text-gray-400">
                        <Users size={28} className="mx-auto mb-2 opacity-30" />
                        <p className="text-sm font-medium">Nenhum usuário encontrado</p>
                    </div>
                )}
                {data.map(u => (
                    <div key={u.id} className={`bg-white rounded-2xl border border-gray-100 shadow-sm p-4 ${u.ativo === false ? 'opacity-60' : ''}`}>
                        <div className="flex items-start justify-between gap-2">
                            <div className="min-w-0 flex-1">
                                <p className="font-black text-gray-900 text-sm truncate">{u.nome}</p>
                                <p className="text-xs text-gray-400 truncate">{u.email}</p>
                            </div>
                            <div className="relative shrink-0">
                                <button onClick={() => setMenuOpen(menuOpen === u.id ? null : u.id)}
                                    className="p-1.5 rounded-lg hover:bg-gray-100 transition-all">
                                    <MoreVertical size={16} className="text-gray-400" />
                                </button>
                                {menuOpen === u.id && (
                                    <div className="absolute right-0 top-8 bg-white rounded-xl border border-gray-100 shadow-xl z-20 min-w-40 overflow-hidden">
                                        <button onClick={() => { setAssinaturaModal(u); setMenuOpen(null); }}
                                            className="w-full flex items-center gap-2 px-4 py-2.5 text-xs font-black uppercase text-blue-600 hover:bg-blue-50 transition-all">
                                            <DollarSign size={12} />Registrar Pag.
                                        </button>
                                        <button onClick={() => toggleStatus(u)} disabled={togglingId === u.id}
                                            className={`w-full flex items-center gap-2 px-4 py-2.5 text-xs font-black uppercase transition-all ${u.ativo !== false ? 'text-orange-600 hover:bg-orange-50' : 'text-green-600 hover:bg-green-50'}`}>
                                            {togglingId === u.id ? <RefreshCw size={12} className="animate-spin" /> : u.ativo !== false ? <><ToggleLeft size={12} />Suspender</> : <><ToggleRight size={12} />Ativar</>}
                                        </button>
                                        <button onClick={() => deleteUser(u)}
                                            className="w-full flex items-center gap-2 px-4 py-2.5 text-xs font-black uppercase text-red-600 hover:bg-red-50 transition-all border-t border-gray-100">
                                            <Trash2 size={12} />Excluir
                                        </button>
                                    </div>
                                )}
                            </div>
                        </div>
                        <div className="flex flex-wrap gap-1.5 mt-3">
                            <RoleBadge role={u.role} />
                            <StatusBadge ok={u.ativo !== false} />
                            <ASSBadge status={u.assinatura_status} validade={u.assinatura_validade} />
                        </div>
                        {u.assinatura_validade && (
                            <p className="text-[10px] text-gray-400 mt-2">Validade: {fmtDate(u.assinatura_validade)}</p>
                        )}
                        {u.ultimo_acesso && (
                            <p className="text-[10px] text-gray-400">Último acesso: {fmt(u.ultimo_acesso)}</p>
                        )}
                    </div>
                ))}
            </div>

            {/* Desktop: Table */}
            <div className="hidden sm:block bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
                <div className="overflow-x-auto">
                    <table className="w-full text-sm">
                        <thead>
                            <tr className="bg-gray-50 border-b border-gray-100">
                                {['Usuário', 'Perfil', 'Status', 'Assinatura', 'Validade', 'Último acesso', 'Ações'].map(h => (
                                    <th key={h} className="text-left px-4 py-3 text-[10px] font-black text-gray-400 uppercase tracking-widest whitespace-nowrap">{h}</th>
                                ))}
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-gray-50">
                            {loading && <tr><td colSpan={7} className="text-center py-12"><Spinner /></td></tr>}
                            {!loading && data.length === 0 && (
                                <tr><td colSpan={7} className="text-center py-12 text-gray-400 text-sm font-medium">Nenhum usuário nesta clínica</td></tr>
                            )}
                            {data.map(u => (
                                <tr key={u.id} className={`hover:bg-gray-50/50 transition-colors ${u.ativo === false ? 'opacity-60' : ''}`}>
                                    <td className="px-4 py-3">
                                        <p className="font-bold text-gray-900 text-sm">{u.nome}</p>
                                        <p className="text-xs text-gray-400 font-medium">{u.email}</p>
                                    </td>
                                    <td className="px-4 py-3"><RoleBadge role={u.role} /></td>
                                    <td className="px-4 py-3"><StatusBadge ok={u.ativo !== false} /></td>
                                    <td className="px-4 py-3"><ASSBadge status={u.assinatura_status} validade={u.assinatura_validade} /></td>
                                    <td className="px-4 py-3 text-xs text-gray-500 font-medium whitespace-nowrap">{fmtDate(u.assinatura_validade)}</td>
                                    <td className="px-4 py-3 text-xs text-gray-400 font-medium whitespace-nowrap">{fmt(u.ultimo_acesso)}</td>
                                    <td className="px-4 py-3">
                                        <div className="flex items-center gap-1.5">
                                            <button onClick={() => toggleStatus(u)} disabled={togglingId === u.id}
                                                className={`flex items-center gap-1 px-2 py-1 rounded-lg text-[10px] font-black uppercase transition-all ${
                                                    u.ativo !== false ? 'bg-red-50 text-red-600 hover:bg-red-100 border border-red-200' : 'bg-green-50 text-green-600 hover:bg-green-100 border border-green-200'
                                                }`}>
                                                {togglingId === u.id ? <RefreshCw size={10} className="animate-spin" /> : u.ativo !== false ? <><ToggleLeft size={10} />Suspen.</> : <><ToggleRight size={10} />Ativar</>}
                                            </button>
                                            <button onClick={() => setAssinaturaModal(u)}
                                                className="flex items-center gap-1 px-2 py-1 rounded-lg text-[10px] font-black uppercase bg-blue-50 text-blue-600 hover:bg-blue-100 border border-blue-200 transition-all">
                                                <DollarSign size={10} />Pag.
                                            </button>
                                            <button onClick={() => deleteUser(u)}
                                                className="flex items-center gap-1 px-2 py-1 rounded-lg text-[10px] font-black uppercase bg-gray-50 text-gray-500 hover:bg-red-50 hover:text-red-600 border border-gray-200 hover:border-red-200 transition-all">
                                                <Trash2 size={10} />
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
                {totalPages > 1 && (
                    <div className="flex items-center justify-between px-4 py-3 border-t border-gray-100 bg-gray-50">
                        <span className="text-xs text-gray-400 font-medium">{total} usuários · pág. {page}/{totalPages}</span>
                        <div className="flex gap-2">
                            <button onClick={() => setPage(p => p - 1)} disabled={page === 1}
                                className="p-1.5 rounded-lg border border-gray-200 bg-white disabled:opacity-40 hover:bg-gray-50 transition-all">
                                <ChevronLeft size={14} className="text-gray-600" />
                            </button>
                            <button onClick={() => setPage(p => p + 1)} disabled={page >= totalPages}
                                className="p-1.5 rounded-lg border border-gray-200 bg-white disabled:opacity-40 hover:bg-gray-50 transition-all">
                                <ChevronRight size={14} className="text-gray-600" />
                            </button>
                        </div>
                    </div>
                )}
            </div>

            {/* Mobile pagination */}
            {totalPages > 1 && (
                <div className="sm:hidden flex items-center justify-between px-1">
                    <span className="text-xs text-gray-400 font-medium">{total} usuários · pág. {page}/{totalPages}</span>
                    <div className="flex gap-2">
                        <button onClick={() => setPage(p => p - 1)} disabled={page === 1}
                            className="p-2 rounded-xl border border-gray-200 bg-white disabled:opacity-40">
                            <ChevronLeft size={14} className="text-gray-600" />
                        </button>
                        <button onClick={() => setPage(p => p + 1)} disabled={page >= totalPages}
                            className="p-2 rounded-xl border border-gray-200 bg-white disabled:opacity-40">
                            <ChevronRight size={14} className="text-gray-600" />
                        </button>
                    </div>
                </div>
            )}

            {assinaturaModal && <AssinaturaModal user={assinaturaModal} onClose={() => { setAssinaturaModal(null); load(); }} />}
            {menuOpen && <div className="fixed inset-0 z-10" onClick={() => setMenuOpen(null)} />}
        </div>
    );
};

/* ── Assinatura Modal ── */
const AssinaturaModal: React.FC<{ user: any; onClose: () => void }> = ({ user, onClose }) => {
    const [status, setStatus] = useState('pago');
    const [meses, setMeses]   = useState(1);
    const [valor, setValor]   = useState('');
    const [saving, setSaving] = useState(false);

    const save = async () => {
        setSaving(true);
        await apiFetch(`/api/superadmin/assinaturas/${user.id}`, { method: 'PUT', body: JSON.stringify({ status, meses, valor: parseFloat(valor) || 0 }) });
        setSaving(false);
        onClose();
    };

    return (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-end sm:items-center justify-center z-50 p-0 sm:p-4"
             onClick={onClose}>
            <div className="bg-white rounded-t-3xl sm:rounded-3xl border border-gray-100 shadow-2xl w-full sm:max-w-sm p-6 pb-8 sm:pb-6"
                 onClick={e => e.stopPropagation()}>
                <div className="flex items-center justify-between mb-1">
                    <h3 className="text-base font-black text-gray-900 uppercase tracking-tight">Registrar Pagamento</h3>
                    <button onClick={onClose} className="p-1 rounded-lg hover:bg-gray-100 transition-all">
                        <X size={16} className="text-gray-400" />
                    </button>
                </div>
                <p className="text-sm text-gray-500 mb-5 truncate">{user.nome} · <span className="font-bold">{user.email}</span></p>
                <div className="space-y-4">
                    <div>
                        <label className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1.5 block">Status</label>
                        <select value={status} onChange={e => setStatus(e.target.value)}
                            className="w-full px-3 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm font-bold outline-none focus:border-blue-400 transition-all">
                            <option value="pago">Pago</option>
                            <option value="pendente">Pendente</option>
                            <option value="cancelado">Cancelado</option>
                        </select>
                    </div>
                    <div className="grid grid-cols-2 gap-3">
                        <div>
                            <label className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1.5 block">Meses</label>
                            <input type="number" min={1} max={12} value={meses} onChange={e => setMeses(parseInt(e.target.value))}
                                className="w-full px-3 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm font-bold outline-none focus:border-blue-400 transition-all" />
                        </div>
                        <div>
                            <label className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1.5 block">Valor (R$)</label>
                            <input type="number" step="0.01" value={valor} onChange={e => setValor(e.target.value)} placeholder="0,00"
                                className="w-full px-3 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm font-bold outline-none focus:border-blue-400 transition-all" />
                        </div>
                    </div>
                </div>
                <div className="flex gap-3 mt-5">
                    <button onClick={onClose} className="flex-1 py-3 rounded-2xl bg-gray-100 text-gray-600 font-black uppercase tracking-widest text-sm hover:bg-gray-200 transition-all">Cancelar</button>
                    <button onClick={save} disabled={saving}
                        className="flex-[2] py-3 rounded-2xl bg-blue-600 text-white font-black uppercase tracking-widest text-sm shadow-lg shadow-blue-200 hover:bg-blue-700 transition-all flex items-center justify-center gap-2 disabled:opacity-60">
                        {saving ? <><RefreshCw size={16} className="animate-spin" />Salvando...</> : <><Save size={16} />Confirmar</>}
                    </button>
                </div>
            </div>
        </div>
    );
};

/* ═══════════════════════════════════════════════════ TAB CLINICAS */
const TabClinicas: React.FC = () => {
    const confirm = useConfirm();
    const [data, setData]       = useState<any[]>([]);
    const [search, setSearch]   = useState('');
    const [estado, setEstado]   = useState('');
    const [loading, setLoading] = useState(false);

    const ESTADOS = ['AC','AL','AM','AP','BA','CE','DF','ES','GO','MA','MG','MS','MT','PA','PB','PE','PI','PR','RJ','RN','RO','RR','RS','SC','SE','SP','TO'];

    const load = useCallback(async () => {
        setLoading(true);
        try {
            const params = new URLSearchParams();
            if (search) params.set('search', search);
            if (estado) params.set('estado', estado);
            const res = await apiFetch(`/api/superadmin/clinicas?${params}`);
            const d = await res.json();
            setData(Array.isArray(d) ? d : []);
        } finally { setLoading(false); }
    }, [search, estado]);

    useEffect(() => { load(); }, [load]);

    const deleteClinica = async (c: any) => {
        if (!await confirm(`EXCLUIR "${c.nome_fantasia}" PERMANENTEMENTE?`)) return;
        await apiFetch(`/api/superadmin/clinicas/${c.id}`, { method: 'DELETE' });
        load();
    };

    const grouped: Record<string, any[]> = {};
    for (const c of data) {
        const key = c.estado || 'Não informado';
        (grouped[key] ??= []).push(c);
    }

    return (
        <div className="space-y-3 sm:space-y-4">
            <div className="flex gap-2 sm:gap-3">
                <div className="relative flex-1">
                    <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
                    <input value={search} onChange={e => setSearch(e.target.value)}
                        className="w-full pl-9 pr-3 py-2.5 bg-white border border-gray-200 rounded-xl text-sm font-medium outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-50 transition-all"
                        placeholder="Buscar clínica..." />
                </div>
                <select value={estado} onChange={e => setEstado(e.target.value)}
                    className="px-2 sm:px-3 py-2.5 bg-white border border-gray-200 rounded-xl text-[10px] sm:text-xs font-black uppercase outline-none focus:border-blue-400 transition-all max-w-[80px] sm:max-w-none">
                    <option value="">UF</option>
                    {ESTADOS.map(e => <option key={e} value={e}>{e}</option>)}
                </select>
                <button onClick={load} className="p-2.5 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition-all shrink-0">
                    <RefreshCw size={14} className={`text-gray-400 ${loading ? 'animate-spin' : ''}`} />
                </button>
            </div>

            {loading ? <Spinner /> : Object.keys(grouped).sort().map(est => (
                <div key={est}>
                    <div className="flex items-center gap-2 mb-2 px-1">
                        <MapPin size={11} className="text-gray-400" />
                        <span className="text-[10px] font-black text-gray-400 uppercase tracking-widest">{est}</span>
                        <span className="text-[9px] font-black bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">{grouped[est].length}</span>
                    </div>

                    {/* Mobile: cards */}
                    <div className="sm:hidden space-y-2 mb-4">
                        {grouped[est].map(c => (
                            <div key={c.id} className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4">
                                <div className="flex items-start justify-between gap-2">
                                    <div className="min-w-0 flex-1">
                                        <p className="font-black text-gray-900 text-sm truncate">{c.nome_fantasia}</p>
                                        <p className="text-[10px] text-gray-400">{c.documento || '—'}</p>
                                    </div>
                                    <button onClick={() => deleteClinica(c)}
                                        className="shrink-0 p-1.5 rounded-lg text-gray-400 hover:bg-red-50 hover:text-red-600 transition-all">
                                        <Trash2 size={15} />
                                    </button>
                                </div>
                                <div className="flex items-center gap-3 mt-2.5 text-xs text-gray-500">
                                    {c.dono_nome && <span className="font-medium truncate max-w-[140px]">{c.dono_nome}</span>}
                                    {c.cidade && <span className="flex items-center gap-1 shrink-0"><MapPin size={10} />{c.cidade}</span>}
                                    <span className="shrink-0 font-bold text-gray-400">{c.membros} membros</span>
                                </div>
                            </div>
                        ))}
                    </div>

                    {/* Desktop: table */}
                    <div className="hidden sm:block bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden mb-4">
                        <table className="w-full text-sm">
                            <thead>
                                <tr className="bg-gray-50 border-b border-gray-100">
                                    {['Clínica', 'Dono', 'Membros', 'Cidade', 'Criada em', ''].map(h => (
                                        <th key={h} className="text-left px-4 py-2.5 text-[10px] font-black text-gray-400 uppercase tracking-widest">{h}</th>
                                    ))}
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-gray-50">
                                {grouped[est].map(c => (
                                    <tr key={c.id} className="hover:bg-gray-50/50 transition-colors">
                                        <td className="px-4 py-3">
                                            <p className="font-bold text-gray-900">{c.nome_fantasia}</p>
                                            <p className="text-xs text-gray-400">{c.documento || '—'}</p>
                                        </td>
                                        <td className="px-4 py-3">
                                            <p className="text-sm font-medium text-gray-700">{c.dono_nome || '—'}</p>
                                            <p className="text-xs text-gray-400">{c.dono_email || ''}</p>
                                        </td>
                                        <td className="px-4 py-3 text-sm font-bold text-gray-700 text-center">{c.membros}</td>
                                        <td className="px-4 py-3 text-sm text-gray-500">{c.cidade || '—'}</td>
                                        <td className="px-4 py-3 text-xs text-gray-400 whitespace-nowrap">{fmtDate(c.createdat)}</td>
                                        <td className="px-4 py-3">
                                            <button onClick={() => deleteClinica(c)}
                                                className="flex items-center gap-1 px-2 py-1 rounded-lg text-[10px] font-black uppercase bg-gray-50 text-gray-500 hover:bg-red-50 hover:text-red-600 border border-gray-200 hover:border-red-200 transition-all">
                                                <Trash2 size={12} />Excluir
                                            </button>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>
            ))}
        </div>
    );
};

/* ═══════════════════════════════════════════════════ TAB LOGS */
const TabLogs: React.FC = () => {
    const [data, setData]       = useState<any[]>([]);
    const [total, setTotal]     = useState(0);
    const [page, setPage]       = useState(1);
    const [loading, setLoading] = useState(false);
    const PAGE_SIZE = 50;

    const load = useCallback(async () => {
        setLoading(true);
        try {
            const res = await apiFetch(`/api/superadmin/login-log?page=${page}&pageSize=${PAGE_SIZE}`);
            const json = await res.json();
            setData(json.data || []); setTotal(json.total || 0);
        } finally { setLoading(false); }
    }, [page]);

    useEffect(() => { load(); }, [load]);

    const totalPages = Math.ceil(total / PAGE_SIZE);
    const statusCfg: Record<string, { bg: string; icon: React.ElementType; label: string; dot: string }> = {
        ok:       { bg: 'text-green-600 bg-green-50 border-green-200',    icon: Wifi,    label: 'Sucesso',  dot: 'bg-green-500'  },
        falha:    { bg: 'text-red-600 bg-red-50 border-red-200',          icon: WifiOff, label: 'Falha',    dot: 'bg-red-500'    },
        suspenso: { bg: 'text-orange-600 bg-orange-50 border-orange-200', icon: XCircle, label: 'Suspenso', dot: 'bg-orange-500' },
    };

    return (
        <div className="space-y-3 sm:space-y-4">
            <div className="flex items-center justify-between">
                <SectionTitle>Log de Acessos — {total} registros</SectionTitle>
                <button onClick={load} className="p-2 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition-all">
                    <RefreshCw size={14} className={`text-gray-400 ${loading ? 'animate-spin' : ''}`} />
                </button>
            </div>

            {/* Mobile: timeline cards */}
            <div className="sm:hidden space-y-2">
                {loading && <Spinner />}
                {data.map(l => {
                    const cfg = statusCfg[l.status] || statusCfg.falha;
                    return (
                        <div key={l.id} className="bg-white rounded-2xl border border-gray-100 shadow-sm p-3.5">
                            <div className="flex items-center justify-between gap-2">
                                <div className="flex items-center gap-2 min-w-0 flex-1">
                                    <span className={`w-2 h-2 rounded-full shrink-0 ${cfg.dot}`} />
                                    <div className="min-w-0">
                                        <p className="font-bold text-gray-900 text-sm truncate">{l.nome || l.email}</p>
                                        {l.nome && <p className="text-[10px] text-gray-400 truncate">{l.email}</p>}
                                    </div>
                                </div>
                                <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-black uppercase border shrink-0 ${cfg.bg}`}>
                                    {cfg.label}
                                </span>
                            </div>
                            <div className="flex items-center gap-3 mt-2 text-[10px] text-gray-400">
                                <span>{fmt(l.created_at)}</span>
                                {l.role && <RoleBadge role={l.role} />}
                                <span className="font-mono">{l.ip}</span>
                            </div>
                        </div>
                    );
                })}
            </div>

            {/* Desktop: table */}
            <div className="hidden sm:block bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
                <div className="overflow-x-auto">
                    <table className="w-full text-sm">
                        <thead>
                            <tr className="bg-gray-50 border-b border-gray-100">
                                {['Data / Hora', 'Usuário', 'Perfil', 'IP', 'Status'].map(h => (
                                    <th key={h} className="text-left px-4 py-3 text-[10px] font-black text-gray-400 uppercase tracking-widest whitespace-nowrap">{h}</th>
                                ))}
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-gray-50">
                            {loading && <tr><td colSpan={5} className="text-center py-12"><Spinner /></td></tr>}
                            {data.map(l => {
                                const cfg = statusCfg[l.status] || statusCfg.falha;
                                const Icon = cfg.icon;
                                return (
                                    <tr key={l.id} className="hover:bg-gray-50/50 transition-colors">
                                        <td className="px-4 py-3 text-xs text-gray-500 font-medium whitespace-nowrap">{fmt(l.created_at)}</td>
                                        <td className="px-4 py-3">
                                            <p className="font-bold text-gray-900">{l.nome || '—'}</p>
                                            <p className="text-xs text-gray-400">{l.email}</p>
                                        </td>
                                        <td className="px-4 py-3">{l.role ? <RoleBadge role={l.role} /> : <span className="text-xs text-gray-300">—</span>}</td>
                                        <td className="px-4 py-3 text-xs font-mono text-gray-400">{l.ip}</td>
                                        <td className="px-4 py-3">
                                            <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-black uppercase border ${cfg.bg}`}>
                                                <Icon size={10} />{cfg.label}
                                            </span>
                                        </td>
                                    </tr>
                                );
                            })}
                        </tbody>
                    </table>
                </div>
                {totalPages > 1 && (
                    <div className="flex items-center justify-between px-4 py-3 border-t border-gray-100 bg-gray-50">
                        <span className="text-xs text-gray-400 font-medium">pág. {page}/{totalPages}</span>
                        <div className="flex gap-2">
                            <button onClick={() => setPage(p => p - 1)} disabled={page === 1}
                                className="p-1.5 rounded-lg border border-gray-200 bg-white disabled:opacity-40 hover:bg-gray-50 transition-all">
                                <ChevronLeft size={14} className="text-gray-600" />
                            </button>
                            <button onClick={() => setPage(p => p + 1)} disabled={page >= totalPages}
                                className="p-1.5 rounded-lg border border-gray-200 bg-white disabled:opacity-40 hover:bg-gray-50 transition-all">
                                <ChevronRight size={14} className="text-gray-600" />
                            </button>
                        </div>
                    </div>
                )}
            </div>

            {/* Mobile pagination */}
            {totalPages > 1 && (
                <div className="sm:hidden flex items-center justify-between px-1">
                    <span className="text-xs text-gray-400 font-medium">pág. {page}/{totalPages}</span>
                    <div className="flex gap-2">
                        <button onClick={() => setPage(p => p - 1)} disabled={page === 1}
                            className="p-2 rounded-xl border border-gray-200 bg-white disabled:opacity-40">
                            <ChevronLeft size={14} className="text-gray-600" />
                        </button>
                        <button onClick={() => setPage(p => p + 1)} disabled={page >= totalPages}
                            className="p-2 rounded-xl border border-gray-200 bg-white disabled:opacity-40">
                            <ChevronRight size={14} className="text-gray-600" />
                        </button>
                    </div>
                </div>
            )}
        </div>
    );
};

/* ═══════════════════════════════════════════════════ TAB FINANCEIRO */
const TabFinanceiro: React.FC = () => {
    const [pricing, setPricing] = useState<Record<string, number>>({ donoconsultorio: 49.90, donoclinica: 499.00, dentista: 49.90, biomedico: 49.90, protetico: 49.90, paciente: 0, 'plugin:locacao-salas': 0, 'plugin:profissionais-marketplace': 0 });
    const [loading, setLoading] = useState(true);
    const [saving, setSaving]   = useState(false);
    const [saved, setSaved]     = useState(false);

    useEffect(() => {
        apiFetch('/api/superadmin/pricing').then(r => r.json()).then(d => { setPricing(d); setLoading(false); });
    }, []);

    const save = async () => {
        setSaving(true);
        await apiFetch('/api/superadmin/pricing', { method: 'PUT', body: JSON.stringify(pricing) });
        setSaving(false); setSaved(true);
        setTimeout(() => setSaved(false), 2500);
    };

    const pricingRows = [
        { role: 'donoconsultorio', label: 'Consultório', sub: '1 cadeira / solo',    icon: Briefcase,    color: 'emerald' },
        { role: 'donoclinica',     label: 'Clínica',     sub: 'multi-cadeira',       icon: Building2,    color: 'blue'    },
        { role: 'dentista',        label: 'Dentista',    sub: 'por usuário/mês',     icon: Stethoscope,  color: 'indigo'  },
        { role: 'biomedico',       label: 'Biomédico(a)',sub: 'por usuário/mês',     icon: Sparkles,     color: 'pink'    },
        { role: 'protetico',       label: 'Protético',   sub: 'por usuário/mês',     icon: FlaskConical, color: 'violet'  },
        { role: 'paciente',        label: 'Paciente',    sub: '0 = gratuito',        icon: User,         color: 'gray'    },
    ];

    // Add-ons: mesma tabela (settings.pricing), chave `plugin:<id do plugin>`.
    const pluginRows = [
        { role: 'plugin:locacao-salas',             label: 'Locação de Salas', sub: 'add-on por conta/mês', icon: DoorOpen,   color: 'teal'   },
        { role: 'plugin:profissionais-marketplace', label: 'Profissionais',    sub: 'add-on por conta/mês', icon: UserSearch, color: 'orange' },
    ];

    return (
        <div className="space-y-5 sm:space-y-8 max-w-2xl">
            <div>
                <SectionTitle>Tabela de Preços</SectionTitle>
                <p className="text-sm text-gray-500 mt-1">Configure o valor mensal por perfil.</p>
            </div>

            {loading ? <Spinner /> : (
                <div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
                    {(() => {
                        const colors: Record<string, string> = {
                            emerald: 'bg-emerald-50 text-emerald-600',
                            blue:    'bg-blue-50 text-blue-600',
                            indigo:  'bg-indigo-50 text-indigo-600',
                            pink:    'bg-pink-50 text-pink-600',
                            violet:  'bg-violet-50 text-violet-600',
                            gray:    'bg-gray-100 text-gray-500',
                            teal:    'bg-teal-50 text-teal-600',
                            orange:  'bg-orange-50 text-orange-600',
                        };
                        const renderRow = ({ role, label, sub, icon: Icon, color }: typeof pricingRows[number]) => (
                            <div key={role} className="flex items-center gap-3 sm:gap-4 px-4 sm:px-5 py-3.5 sm:py-4">
                                <div className={`w-9 h-9 sm:w-10 sm:h-10 rounded-xl flex items-center justify-center shrink-0 ${colors[color]}`}>
                                    <Icon size={16} />
                                </div>
                                <div className="flex-1 min-w-0">
                                    <p className="text-sm font-black text-gray-900 uppercase tracking-tight">{label}</p>
                                    <p className="text-[10px] text-gray-400 font-medium hidden sm:block">{sub}</p>
                                </div>
                                <div className="flex items-center gap-1 sm:gap-1.5 shrink-0">
                                    <span className="text-sm font-black text-gray-500">R$</span>
                                    <input
                                        type="number" step="0.01" min="0"
                                        value={pricing[role] ?? 0}
                                        onChange={e => setPricing(p => ({ ...p, [role]: parseFloat(e.target.value) || 0 }))}
                                        className="w-20 sm:w-24 px-2 sm:px-3 py-2 bg-gray-50 border border-gray-200 rounded-xl text-sm font-black text-right outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-50 transition-all"
                                    />
                                    <span className="text-[10px] text-gray-400 font-medium hidden sm:block">/mês</span>
                                </div>
                            </div>
                        );
                        return (
                            <>
                                <div className="divide-y divide-gray-50">{pricingRows.map(renderRow)}</div>
                                <div className="px-4 sm:px-5 pt-4 pb-1 bg-gray-50/60 border-t border-gray-100">
                                    <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest">Plugins (add-ons) · 0 = incluído no plano</p>
                                </div>
                                <div className="divide-y divide-gray-50">{pluginRows.map(renderRow)}</div>
                            </>
                        );
                    })()}

                    <div className="px-4 sm:px-5 py-4 bg-gray-50 border-t border-gray-100 flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:justify-between">
                        <p className="text-[10px] sm:text-xs text-gray-400 font-medium">Alterações entram em vigor no próximo ciclo.</p>
                        <button onClick={save} disabled={saving}
                            className={`w-full sm:w-auto flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest shadow-sm transition-all ${
                                saved ? 'bg-emerald-500 text-white' : 'bg-blue-600 text-white hover:bg-blue-700 shadow-blue-200'
                            } disabled:opacity-60`}>
                            {saving ? <><RefreshCw size={14} className="animate-spin" />Salvando...</> : saved ? <><CheckCircle2 size={14} />Salvo!</> : <><Save size={14} />Salvar Tabela</>}
                        </button>
                    </div>
                </div>
            )}

            <div className="bg-blue-50 border border-blue-100 rounded-2xl p-4 sm:p-5">
                <p className="text-[10px] sm:text-xs font-black text-blue-600 uppercase tracking-widest mb-2">Como funciona</p>
                <ul className="space-y-1.5 text-xs sm:text-sm text-blue-800 font-medium">
                    <li>• Registre o pagamento na aba <strong>Usuários</strong> → botão <strong>Pag.</strong></li>
                    <li>• Defina quantos meses o acesso ficará liberado (1–12)</li>
                    <li>• Ao suspender, o usuário não consegue mais fazer login</li>
                    <li>• Usuários vencidos aparecem como <strong>Pendente</strong></li>
                </ul>
            </div>
        </div>
    );
};

/* ═══════════════════════════════════════════════════ TAB NOTIFICACOES */
const TabNotificacoes: React.FC = () => {
    const [titulo,      setTitulo]      = useState('');
    const [mensagem,    setMensagem]    = useState('');
    const [tipo,        setTipo]        = useState<'info' | 'sucesso' | 'alerta' | 'erro'>('info');
    const [targetEmail, setTargetEmail] = useState('');
    const [sending,     setSending]     = useState(false);
    const [sent,        setSent]        = useState(false);
    const [error,       setError]       = useState('');
    const [history,     setHistory]     = useState<any[]>([]);
    const [loadingH,    setLoadingH]    = useState(true);

    const loadHistory = async () => {
        setLoadingH(true);
        try {
            const res = await apiFetch('/api/superadmin/notificacoes-history');
            if (res.ok) setHistory(await res.json());
        } finally { setLoadingH(false); }
    };

    useEffect(() => { loadHistory(); }, []);

    const resolveTarget = async (): Promise<string | null> => {
        if (!targetEmail.trim()) return null;
        const res = await apiFetch(`/api/superadmin/usuarios?search=${encodeURIComponent(targetEmail.trim())}&pageSize=1`);
        const json = await res.json();
        const user = json.data?.[0];
        if (!user) { setError(`Usuário "${targetEmail}" não encontrado.`); return 'NOT_FOUND'; }
        return user.id;
    };

    const handleSend = async () => {
        if (!titulo.trim() || !mensagem.trim()) { setError('Preencha título e mensagem.'); return; }
        setSending(true); setError('');
        try {
            let usuario_id: string | null | undefined = undefined;
            if (targetEmail.trim()) {
                const resolved = await resolveTarget();
                if (resolved === 'NOT_FOUND') { setSending(false); return; }
                usuario_id = resolved;
            }
            const res = await apiFetch('/api/superadmin/notificacoes', {
                method: 'POST',
                body: JSON.stringify({ titulo: titulo.trim(), mensagem: mensagem.trim(), tipo, usuario_id }),
            });
            if (res.ok) {
                setSent(true); setTitulo(''); setMensagem(''); setTargetEmail('');
                setTimeout(() => setSent(false), 3000);
                loadHistory();
            } else {
                const d = await res.json();
                setError(d.error || 'Erro ao enviar.');
            }
        } catch { setError('Falha na conexão.'); }
        finally { setSending(false); }
    };

    const TIPO_COLORS: Record<string, string> = {
        info:    'bg-blue-50 text-blue-700 border-blue-200',
        sucesso: 'bg-emerald-50 text-emerald-700 border-emerald-200',
        alerta:  'bg-yellow-50 text-yellow-700 border-yellow-200',
        erro:    'bg-red-50 text-red-700 border-red-200',
    };

    return (
        <div className="space-y-5 sm:space-y-6 max-w-2xl">
            <div>
                <SectionTitle>Enviar Notificação</SectionTitle>
                <p className="text-sm text-gray-500 mt-1">Envie avisos globais ou para um usuário específico.</p>
            </div>

            <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-6 space-y-4">
                <div>
                    <label className="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1.5">Destino (opcional)</label>
                    <div className="relative">
                        <Phone size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
                        <input value={targetEmail} onChange={e => setTargetEmail(e.target.value)}
                            placeholder="E-mail do usuário — vazio = todos"
                            className="w-full pl-9 border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-800 focus:ring-2 focus:ring-blue-100 focus:border-blue-300 outline-none transition-all" />
                    </div>
                </div>

                <div>
                    <label className="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1.5">Tipo</label>
                    <div className="grid grid-cols-4 gap-2">
                        {(['info', 'sucesso', 'alerta', 'erro'] as const).map(t => (
                            <button key={t} onClick={() => setTipo(t)}
                                className={`py-2 rounded-xl text-[10px] font-black uppercase border transition-all ${tipo === t ? TIPO_COLORS[t] : 'bg-gray-50 text-gray-400 border-gray-200 hover:bg-gray-100'}`}>
                                {t}
                            </button>
                        ))}
                    </div>
                </div>

                <div>
                    <label className="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1.5">Título</label>
                    <input value={titulo} onChange={e => setTitulo(e.target.value)}
                        placeholder="Ex: Manutenção programada"
                        className="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-800 focus:ring-2 focus:ring-blue-100 focus:border-blue-300 outline-none transition-all" />
                </div>

                <div>
                    <label className="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1.5">Mensagem</label>
                    <textarea value={mensagem} onChange={e => setMensagem(e.target.value)} rows={3}
                        placeholder="Texto completo da notificação..."
                        className="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-800 focus:ring-2 focus:ring-blue-100 focus:border-blue-300 outline-none transition-all resize-none" />
                </div>

                {error && <p className="text-xs text-red-600 font-bold bg-red-50 px-4 py-2.5 rounded-xl border border-red-100">{error}</p>}

                <button onClick={handleSend} disabled={sending}
                    className="w-full flex items-center justify-center gap-2 py-3.5 rounded-2xl text-xs font-black uppercase tracking-widest bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 transition-all shadow-lg shadow-blue-200">
                    {sending  ? <><RefreshCw size={14} className="animate-spin" />Enviando...</>
                    : sent    ? <><CheckCircle2 size={14} />Enviado com sucesso!</>
                    : <><Send size={14} />Enviar Notificação</>}
                </button>
            </div>

            <div>
                <SectionTitle>Últimas Notificações Enviadas</SectionTitle>
                <div className="mt-3 space-y-2">
                    {loadingH ? <Spinner /> : history.length === 0 ? (
                        <p className="text-sm text-gray-400 text-center py-8">Nenhuma notificação enviada ainda.</p>
                    ) : history.map((n: any) => (
                        <div key={n.id} className={`flex items-start gap-3 px-4 py-3 rounded-2xl border text-sm ${TIPO_COLORS[n.tipo] || TIPO_COLORS.info}`}>
                            <Bell size={13} className="shrink-0 mt-0.5" />
                            <div className="flex-1 min-w-0">
                                <p className="font-black text-xs uppercase truncate">{n.titulo}</p>
                                <p className="font-medium text-xs mt-0.5 opacity-80 line-clamp-2">{n.mensagem}</p>
                                <p className="text-[10px] opacity-60 mt-1">{fmt(n.data)} · {n.usuario_id ? `→ usuário específico` : '→ Todos'}</p>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
};

/* ─── Helpers ─── */
const Spinner: React.FC = () => (
    <div className="flex justify-center py-10"><RefreshCw size={22} className="animate-spin text-blue-400" /></div>
);
const ErrorMsg: React.FC = () => (
    <div className="flex justify-center py-10 text-gray-400 text-sm font-medium">Erro ao carregar. Tente novamente.</div>
);
const SectionTitle: React.FC<{ children: React.ReactNode }> = ({ children }) => (
    <h2 className="text-[10px] sm:text-xs font-black text-gray-400 uppercase tracking-widest">{children}</h2>
);