import { Outlet, NavLink, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useAuth } from '@/lib/auth';
import { useTenant } from '@/lib/tenant';
import {
    LayoutDashboard, Building2, Users, Phone, MessageSquare, Contact2,
    Activity, CreditCard, Bot, LogOut, ChevronLeft, ScrollText
} from 'lucide-react';

const NAV_ITEMS = [
    { to: '/platform/dashboard',           icon: LayoutDashboard, labelKey: 'super_admin.nav_dashboard' },
    { to: '/platform/organizations',       icon: Building2,       labelKey: 'super_admin.nav_organizations' },
    { to: '/platform/users',               icon: Users,           labelKey: 'super_admin.nav_users' },
    { to: '/platform/whatsapp',            icon: Phone,           labelKey: 'super_admin.nav_whatsapp' },
    { to: '/platform/whatsapp/templates',  icon: MessageSquare,   labelKey: 'super_admin.nav_templates' },
    { to: '/platform/whatsapp/profiles',   icon: Contact2,        labelKey: 'super_admin.nav_profiles' },
    { to: '/platform/monitoring',          icon: Activity,        labelKey: 'super_admin.nav_monitoring' },
    { to: '/platform/billing',             icon: CreditCard,      labelKey: 'super_admin.nav_billing' },
    { to: '/platform/ai',                  icon: Bot,             labelKey: 'super_admin.nav_ai' },
    { to: '/platform/audit-logs',          icon: ScrollText,      labelKey: 'super_admin.nav_audit_logs' },
];

export default function SuperAdminLayout() {
    const { t } = useTranslation();
    const { user, logout } = useAuth();
    const { setSelectedOrgId } = useTenant();
    const navigate = useNavigate();

    function handleExit() {
        setSelectedOrgId(null);
        navigate('/');
    }

    return (
        <div className="flex h-screen bg-slate-950 text-white overflow-hidden">
            {/* Sidebar */}
            <aside className="w-60 shrink-0 bg-slate-900 border-r border-slate-800 flex flex-col">
                <div className="px-4 py-5 border-b border-slate-800">
                    <div className="text-xs font-semibold text-violet-400 uppercase tracking-widest mb-0.5">XAMLÉ</div>
                    <div className="text-base font-bold text-white">{t('super_admin.platform_admin')}</div>
                </div>

                <nav className="flex-1 overflow-y-auto py-3 px-2 space-y-0.5">
                    {NAV_ITEMS.map(({ to, icon: Icon, labelKey }) => (
                        <NavLink
                            key={to}
                            to={to}
                            className={({ isActive }) =>
                                `flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                                    isActive
                                        ? 'bg-violet-600 text-white'
                                        : 'text-slate-400 hover:text-white hover:bg-slate-800'
                                }`
                            }
                        >
                            <Icon className="w-4 h-4 shrink-0" />
                            {t(labelKey)}
                        </NavLink>
                    ))}
                </nav>

                <div className="p-3 border-t border-slate-800 space-y-1">
                    <button
                        onClick={handleExit}
                        className="flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm text-slate-400 hover:text-white hover:bg-slate-800 transition-colors"
                    >
                        <ChevronLeft className="w-4 h-4" />
                        {t('super_admin.exit_admin')}
                    </button>
                    <button
                        onClick={logout}
                        className="flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm text-red-400 hover:text-red-300 hover:bg-slate-800 transition-colors"
                    >
                        <LogOut className="w-4 h-4" />
                        {t('super_admin.logout')}
                    </button>
                </div>
            </aside>

            {/* Main */}
            <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
                {/* Top bar */}
                <header className="h-14 shrink-0 bg-slate-900 border-b border-slate-800 flex items-center justify-between px-6">
                    <div className="text-sm text-slate-400">
                        {t('super_admin.super_admin_label')} · <span className="text-white">{user?.email || user?.name || 'Admin'}</span>
                    </div>
                    <div className="flex items-center gap-2">
                        <div className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
                        <span className="text-xs text-slate-400">{t('super_admin.system_active')}</span>
                    </div>
                </header>

                {/* Page content */}
                <main className="flex-1 overflow-y-auto bg-slate-950">
                    <div className="p-6 max-w-screen-xl mx-auto">
                        <Outlet />
                    </div>
                </main>
            </div>
        </div>
    );
}