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,
  ChevronDown,
  ShieldCheck,
  Database,
  Home,
  User,
  Users,
  GitPullRequest,
  MapPin,
} from 'lucide-react';
import { useAuth } from '../../auth/AuthProvider';
import { BrandLogo } from '../ui/BrandLogo';
import { HelpTooltip } from '../ui/HelpTooltip';
import { useQuery } from '@tanstack/react-query';
import { getUsers } from '../../services/api';
import { getUserEmail, registerUserEmail } from '../../lib/formatters';

interface SubNavItem {
  name: string;
  path: string;
  icon: React.ElementType;
  help?: string;
}

interface NavItem {
  name: string;
  path: string;
  icon: React.ElementType;
  help: string;
  subItems?: SubNavItem[];
}

const navItems: NavItem[] = [
  {
    name: 'Executive Dashboard',
    path: '/dashboard',
    icon: LayoutDashboard,
    help: 'Strategic macro metrics, portfolio value, disbursed funding, ISO 31000 risk heatmap, and projects requiring immediate intervention.',
  },
  {
    name: 'Governance & Structure',
    path: '/governance',
    icon: Building2,
    help: 'Master records for legal entities, holding structures, investment portfolios, and thematic programmes funded under statutory mandates.',
  },
  {
    name: 'Projects & Milestones',
    path: '/projects',
    icon: FolderKanban,
    help: 'Project Work Breakdown Structure (WBS), contractual deliverables, scheduled milestones, evidence verification, and execution tracking.',
    subItems: [
      {
        name: 'Beneficiaries',
        path: '/projects/beneficiaries',
        icon: Users,
        help: 'Manage target beneficiaries, demographics, and statutory compliance items satisfying beneficiaries.',
      },
      {
        name: 'Change Management',
        path: '/projects/change-management',
        icon: GitPullRequest,
        help: 'Track project issues, contractual change requests, and resolve changes in-place.',
      },
    ],
  },
  {
    name: 'Site Visits',
    path: '/site-visits',
    icon: MapPin,
    help: 'Log physical site visits, field observations, inspector findings, and project feedback.',
  },
  {
    name: 'Grant & Financials',
    path: '/grants',
    icon: Coins,
    help: 'Financial management including statutory awards, multi-year budget line allocations, tranches, and scheduled payment disbursements.',
  },
  {
    name: 'M&E, Evidence & Risks',
    path: '/monitoring',
    icon: ShieldAlert,
    help: 'Monitoring & Evaluation (M&E) framework, indicator tracking, ISO 31000 risk registers, mitigation plans, and compliance audits.',
  },
  {
    name: 'Settings & Communications',
    path: '/settings',
    icon: Settings,
    help: 'User account provisioning, statutory sync, tenant environment parameters, and communication invite templates.',
  },
];

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

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

  // Pre-populate user directory cache so all components and modals resolve user emails instantly
  useQuery({
    queryKey: ['users-directory'],
    queryFn: () => getUsers(1, 200),
    staleTime: 5 * 60 * 1000,
  });

  // Ensure current logged-in user is registered in the email cache
  const effectiveEmail = ((user?.email || claims?.email || claims?.['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress'] || claims?.upn) as string);
  if (sub && effectiveEmail) {
    registerUserEmail(sub, effectiveEmail);
  }
  if (user?.id && effectiveEmail) {
    registerUserEmail(user.id, effectiveEmail);
  }

  // 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 ? getUserEmail(sub) : '');

  // Extract tenant name directly from the user claim named 'tenant'
  const tenantName =
    (claims?.tenant as string) ||
    user?.tenant ||
    (claims?.['tenant'] as string) ||
    user?.organisationName ||
    (claims?.organisation as string) ||
    'Department of Science, Innovation & Technology (DSI)';

  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 */}
        <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"
          >
            <BrandLogo size={36} showGlow animateOnHover />
            {sidebarOpen && (
              <div className="flex flex-col min-w-0">
                <span className="font-bold 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;
            const hasSub = item.subItems && item.subItems.length > 0;

            return (
              <div key={item.path} className="space-y-1">
                <NavLink
                  to={item.path}
                  end={hasSub}
                  className={({ isActive }) =>
                    `flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-xs font-medium transition-all min-w-0 ${
                      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'
                    }`
                  }
                  title={item.name}
                >
                  <Icon className="w-4 h-4 shrink-0" />
                  {sidebarOpen && <span className="truncate flex-1">{item.name}</span>}
                </NavLink>

                {/* Sub-items under parent item */}
                {hasSub && sidebarOpen && (
                  <div className="pl-6 pr-1 py-1 space-y-1 border-l border-slate-800/80 ml-5">
                    {item.subItems?.map((subItem) => {
                      const SubIcon = subItem.icon;
                      return (
                        <NavLink
                          key={subItem.path}
                          to={subItem.path}
                          className={({ isActive }) =>
                            `flex items-center gap-2.5 px-3 py-2 rounded-lg text-[11px] font-medium transition-all min-w-0 ${
                              isActive
                                ? 'bg-blue-600/20 text-blue-300 font-semibold border border-blue-500/30'
                                : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/50'
                            }`
                          }
                          title={subItem.name}
                        >
                          <SubIcon className="w-3.5 h-3.5 shrink-0 text-slate-400" />
                          <span className="truncate">{subItem.name}</span>
                        </NavLink>
                      );
                    })}
                  </div>
                )}
              </div>
            );
          })}
        </nav>

        {/* User Card */}
        <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 || 'Authenticated 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 of Session"
            >
              <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-4 sm:px-6 md:px-8 flex items-center justify-between shrink-0 z-20">
          <div className="flex items-center gap-3">
            {/* Home Navigation */}
            <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 max-w-[320px] truncate"
                title={`${tenantName}${hashedTenantId ? ` (Partition: ${hashedTenantId})` : ''}`}
              >
                <Database className="w-3.5 h-3.5 text-blue-400 shrink-0" />
                <span className="truncate">{tenantName}</span>
                {hashedTenantId && (
                  <span
                    className="text-[10px] font-mono text-blue-400 bg-blue-950/60 px-1.5 py-0.5 rounded border border-blue-800/60 shrink-0"
                    title={`Tenant Partition HashID: ${hashedTenantId}`}
                  >
                    {hashedTenantId}
                  </span>
                )}
              </span>
              <HelpTooltip
                title="Tenant Context"
                content={`Identifies the multi-tenant organization partition and database boundary within the national PFM environment.${
                  hashedTenantId ? ` Tenant Partition (HashID): ${hashedTenantId}` : ''
                }`}
                size="sm"
                placement="bottom"
              />
            </div>

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

            <div className="flex items-center gap-1.5">
              <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>
              <HelpTooltip
                title="Security Session Status"
                content="Current session is verified against OIDC Identity Server with active cryptographic token and claims."
                size="sm"
                placement="bottom"
              />
            </div>
          </div>

          {/* User Profile and Controls */}
          <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-300 font-medium truncate">{tokenUserEmail || (sub ? getUserEmail(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 of Session</span>
                </button>
              </div>
            )}
          </div>
        </header>

        {/* Main Content Area */}
        <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 flex items-center gap-1.5">
            <span className="h-1.5 w-1.5 rounded-full bg-emerald-400 inline-block"></span>
            Enterprise Secure Session
          </span>
        </footer>
      </div>
    </div>
  );
};