import React, { useState } from 'react';
import { NavLink, Outlet, useNavigate, Link } from 'react-router-dom';
import {
    LayoutDashboard,
    Building2,
    FolderKanban,
    Coins,
    ShieldAlert,
    Settings,
    LogOut,
    Menu,
    X,
    ChevronRight,
    ShieldCheck,
    Layers,
    Database,
    Home,
    User,
} from 'lucide-react';
import { useAuth } from '../../auth/AuthProvider';

const navItems = [
    {
        name: 'Executive Dashboard',
        path: '/dashboard',
        icon: LayoutDashboard,
    },
    {
        name: 'Governance & Structure',
        path: '/governance',
        icon: Building2,
    },
    {
        name: 'Projects & Milestones',
        path: '/projects',
        icon: FolderKanban,
    },
    {
        name: 'Grant & Financials',
        path: '/grants',
        icon: Coins,
    },
    {
        name: 'M&E, Evidence & Risks',
        path: '/monitoring',
        icon: ShieldAlert,
    },
    {
        name: 'Settings & Communications',
        path: '/settings',
        icon: Settings,
    },
];

export const AppLayout: React.FC = () => {
    const { user, claims, sub, logout } = useAuth();
    const [sidebarOpen, setSidebarOpen] = useState(true);
    const [userMenuOpen, setUserMenuOpen] = useState(false);
    const navigate = useNavigate();

    const handleLogout = async () => {
        await logout();
    };

    // Extract name and email directly from validated token claims
    const tokenUserName =
        user?.name ||
        (claims.name as string) ||
        (claims.preferred_username as string) ||
        (claims.given_name ? `${claims.given_name} ${claims.family_name || ''}`.trim() : '') ||
        'Authorized User';

    const tokenUserEmail =
        user?.email ||
        (claims.email as string) ||
        (claims['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress'] as string) ||
        (claims.upn as string) ||
        (sub ? `sub:${sub}` : '');

    return (
        <div className="flex h-screen w-full overflow-hidden bg-[#090d16] font-sans text-slate-100 selection:bg-blue-600 selection:text-white">
            {/* Sidebar */}
            <aside
                className={`${sidebarOpen ? 'w-64' : 'w-20'
                    } shrink-0 bg-[#0b101b]/95 text-slate-200 border-r border-slate-800/80 transition-all duration-300 flex flex-col z-30 shadow-2xl backdrop-blur-md`}
            >
                {/* Brand Header — Clickable link navigating to auth-aware Home page */}
                <div className="h-16 px-4 flex items-center justify-between border-b border-slate-800/80 bg-[#0d121f]/90">
                    <Link
                        to="/"
                        id="nav-brand-home-link"
                        title="Go to Home page"
                        className="flex items-center gap-3 overflow-hidden group cursor-pointer"
                    >
                        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-blue-600 to-indigo-700 font-bold text-white shadow-md shadow-blue-500/20 border border-blue-400/20 group-hover:scale-105 transition">
                            <Layers className="w-5 h-5 text-white" />
                        </div>
                        {sidebarOpen && (
                            <div className="flex flex-col min-w-0">
                                <span className="font-semibold text-sm tracking-tight text-white truncate group-hover:text-blue-400 transition">
                                    PFM Console
                                </span>
                                <span className="text-[11px] text-blue-400 font-medium tracking-tight">Enterprise Management</span>
                            </div>
                        )}
                    </Link>
                    <button
                        onClick={() => setSidebarOpen(!sidebarOpen)}
                        className="rounded-lg p-1.5 text-slate-400 hover:text-white hover:bg-slate-800/60 transition cursor-pointer"
                        title={sidebarOpen ? 'Collapse sidebar' : 'Expand sidebar'}
                    >
                        {sidebarOpen ? <X className="w-4 h-4" /> : <Menu className="w-4 h-4" />}
                    </button>
                </div>

                {/* Navigation Items */}
                <nav className="flex-1 overflow-y-auto px-3 py-4 space-y-1.5">
                    {navItems.map((item) => {
                        const Icon = item.icon;
                        return (
                            <NavLink
                                key={item.path}
                                to={item.path}
                                className={({ isActive }) =>
                                    `flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-xs font-medium transition-all ${isActive
                                        ? 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-md shadow-blue-600/25 font-semibold'
                                        : 'text-slate-400 hover:text-slate-100 hover:bg-slate-800/60'
                                    }`
                                }
                            >
                                <Icon className="w-4 h-4 shrink-0" />
                                {sidebarOpen && <span className="truncate">{item.name}</span>}
                            </NavLink>
                        );
                    })}
                </nav>

                {/* User Card with Token-derived info & Identity Server Logout */}
                <div className="p-3 border-t border-slate-800/80 bg-[#0d121f]/90">
                    <div className="flex items-center gap-3">
                        <div className="h-9 w-9 shrink-0 rounded-full bg-blue-600/20 border border-blue-500/40 flex items-center justify-center font-bold text-xs text-blue-400">
                            {tokenUserName ? tokenUserName.slice(0, 2).toUpperCase() : 'AU'}
                        </div>
                        {sidebarOpen && (
                            <div className="flex-1 min-w-0">
                                <p className="text-xs font-semibold text-white truncate" title={tokenUserName}>
                                    {tokenUserName}
                                </p>
                                <p className="text-[11px] text-slate-400 truncate font-mono" title={tokenUserEmail}>
                                    {tokenUserEmail || 'STS Token User'}
                                </p>
                            </div>
                        )}
                        <button
                            onClick={handleLogout}
                            id="sidebar-logout-btn"
                            className="rounded-lg p-1.5 text-slate-400 hover:text-rose-400 hover:bg-rose-950/30 transition cursor-pointer"
                            title="Sign Out via Identity Server"
                        >
                            <LogOut className="w-4 h-4" />
                        </button>
                    </div>
                </div>
            </aside>

            {/* Main Content Area */}
            <div className="flex-1 flex flex-col min-w-0 overflow-hidden relative">
                {/* Top Header */}
                <header className="h-16 bg-[#0d121f]/90 border-b border-slate-800/80 backdrop-blur-md px-6 md:px-8 flex items-center justify-between shrink-0 z-20">
                    <div className="flex items-center gap-3">
                        {/* Clickable Home Link */}
                        <Link
                            to="/"
                            id="header-home-link"
                            className="flex items-center gap-1.5 text-xs font-semibold text-slate-300 hover:text-white bg-slate-900/80 hover:bg-slate-800 px-3 py-1.5 rounded-lg border border-slate-800 transition cursor-pointer shadow-xs"
                            title="Return to Auth-Aware Home page"
                        >
                            <Home className="w-3.5 h-3.5 text-blue-400" />
                            <span>Home</span>
                        </Link>

                        <ChevronRight className="w-4 h-4 text-slate-600" />

                        <div className="hidden sm:flex items-center gap-2 text-xs font-medium text-slate-300">
                            <span className="text-slate-400">Tenant:</span>
                            <span className="bg-slate-900/80 text-slate-200 px-2.5 py-1 rounded-lg border border-slate-800 flex items-center gap-1.5 font-medium shadow-xs">
                                <Database className="w-3.5 h-3.5 text-blue-400" />
                                Department of Science, Innovation & Technology (DSI)
                            </span>
                        </div>

                        <ChevronRight className="w-4 h-4 text-slate-600 hidden sm:block" />

                        <span className="text-xs font-medium text-emerald-400 bg-emerald-500/10 px-2.5 py-0.5 rounded-full border border-emerald-500/30 flex items-center gap-1.5 shadow-xs">
                            <ShieldCheck className="w-3.5 h-3.5 text-emerald-400" />
                            Authenticated Session
                        </span>
                    </div>

                    {/* User Name & Email derived from token, plus Identity Server signout */}
                    <div className="relative flex items-center gap-3">
                        <div className="text-right hidden sm:block">
                            <p className="text-xs font-semibold text-white truncate max-w-[200px]" title={tokenUserName}>
                                {tokenUserName}
                            </p>
                            <p className="text-[11px] text-slate-400 font-mono truncate max-w-[200px]" title={tokenUserEmail}>
                                {tokenUserEmail}
                            </p>
                        </div>

                        <button
                            onClick={() => setUserMenuOpen(!userMenuOpen)}
                            id="header-user-menu-btn"
                            className="h-9 w-9 rounded-full bg-blue-600/20 border border-blue-500/40 hover:border-blue-400 flex items-center justify-center font-bold text-xs text-blue-400 transition cursor-pointer shadow-md shadow-blue-500/10"
                            title="User Account"
                        >
                            {tokenUserName ? tokenUserName.slice(0, 2).toUpperCase() : <User className="w-4 h-4" />}
                        </button>

                        {/* Dropdown Menu */}
                        {userMenuOpen && (
                            <div
                                className="absolute right-0 top-12 w-64 bg-[#0f1523] border border-slate-800 rounded-2xl shadow-2xl p-3 z-50 space-y-2 animate-in fade-in slide-in-from-top-2 backdrop-blur-md"
                                onMouseLeave={() => setUserMenuOpen(false)}
                            >
                                <div className="p-2.5 border-b border-slate-800">
                                    <p className="text-xs font-semibold text-white">{tokenUserName}</p>
                                    <p className="text-[11px] text-slate-400 font-mono truncate">{tokenUserEmail}</p>
                                    {sub && <p className="text-[10px] text-slate-500 font-mono mt-1">sub: {sub}</p>}
                                </div>

                                <Link
                                    to="/"
                                    onClick={() => setUserMenuOpen(false)}
                                    className="flex items-center gap-2 px-3 py-2 text-xs text-slate-300 hover:text-white hover:bg-slate-800/60 rounded-xl transition"
                                >
                                    <Home className="w-3.5 h-3.5 text-blue-400" />
                                    <span>Go to Home Page</span>
                                </Link>

                                <button
                                    onClick={handleLogout}
                                    id="dropdown-logout-btn"
                                    className="w-full flex items-center gap-2 px-3 py-2 text-xs text-rose-400 hover:bg-rose-950/30 rounded-xl transition cursor-pointer"
                                >
                                    <LogOut className="w-3.5 h-3.5" />
                                    <span>Sign Out via Identity Server</span>
                                </button>
                            </div>
                        )}
                    </div>
                </header>

                {/* Viewport with Landing Page ambient dot grid and glow */}
                <main className="flex-1 overflow-y-auto p-6 md:p-8 bg-[#090d16] relative text-slate-100">
                    <div
                        className="absolute inset-0 pointer-events-none opacity-15"
                        style={{
                            backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)',
                            backgroundSize: '32px 32px',
                        }}
                    />
                    <div className="absolute -top-24 -left-24 w-80 h-80 bg-blue-600/10 rounded-full blur-3xl pointer-events-none" />
                    <div className="absolute top-1/2 -right-24 w-80 h-80 bg-indigo-600/10 rounded-full blur-3xl pointer-events-none" />

                    <div className="relative z-10">
                        <Outlet />
                    </div>
                </main>

                {/* Bottom Status Footer */}
                <footer className="h-10 px-6 md:px-8 border-t border-slate-800/80 bg-[#0d121f]/90 flex items-center justify-between text-[11px] text-slate-400 shrink-0">
                    <span>Project Financial Management (PFM) System</span>
                    <span className="text-slate-400 font-medium">Duende STS OIDC Secure Session</span>
                </footer>
            </div>
        </div>
    );
};