'use client';

import Link from 'next/link';
import { useEffect, useId, useState } from 'react';
import {
  LayoutDashboard,
  Map,
  Globe2,
  FileSpreadsheet,
  AlertTriangle,
  ShieldCheck,
  Radio,
  Sparkles,
  Smartphone,
  LogOut,
  UserCheck,
  ChevronRight,
  ChevronLeft,
  ChevronDown,
  BadgeCheck,
  Layers,
  Wrench,
  Users,
  Flag,
  Home
} from 'lucide-react';
import { UserRole } from '@/types';
import { canManageUsers } from '@/lib/users';

export type DashboardViewMode =
  | 'COMPLETE_DASHBOARD'
  | 'STATE_BY_STATE'
  | 'REGIONAL_SUMMARY'
  | 'VOTER_REGISTER'
  | 'REGISTERED_VOTERS'
  | 'BVAS_INFO'
  | 'BVAS_REPORT_1'
  | 'BVAS_REPORT_2'
  | 'BVAS_REPORT_3'
  | 'FORM_DOSSIER'
  | 'INCIDENTS'
  | 'PVT_AUDIT'
  | 'COMMUNICATION'
  | 'SIMULATION'
  | 'MOBILE_CENTER'
  | 'PARTICIPANTS'
  | 'USERS'
  | 'TIMELINE'
  | 'TECH_DESK';

interface SidebarNavProps {
  activeView: DashboardViewMode;
  onViewChange: (view: DashboardViewMode) => void;
  currentUser: {
    full_name: string;
    role: UserRole;
    backend_role?: string;
    assigned_scope_type: string;
    assigned_scope_id: string;
  };
  onLogout: () => void;
  isCollapsed?: boolean;
  onToggleCollapse?: () => void;
  navigationHref?: (view: DashboardViewMode) => string;
}

export function SidebarNav({
  activeView,
  onViewChange,
  currentUser,
  onLogout,
  isCollapsed = false,
  onToggleCollapse,
  navigationHref,
}: SidebarNavProps) {
  const bvasItems = [
    { id: 'BVAS_REPORT_1', href: '/bvas-report-1', label: 'BVAS Default', icon: FileSpreadsheet },
    { id: 'BVAS_REPORT_2', href: '/bvas-report-2', label: 'Turn Out', icon: FileSpreadsheet },
    { id: 'BVAS_REPORT_3', href: '/bvas-report-3', label: 'Sign Off', icon: FileSpreadsheet },
    { id: 'BVAS_INFO', href: '/bvas-info', label: 'BVAS Information', icon: ShieldCheck },
  ];
  const isBvasActive = bvasItems.some((item) => item.id === activeView);
  const [bvasOpen, setBvasOpen] = useState(isBvasActive);
  const bvasMenuId = useId();

  useEffect(() => {
    if (isBvasActive) setBvasOpen(true);
  }, [activeView, isBvasActive]);

  const scopeType = currentUser.assigned_scope_type;
  const isWardSupervisor = scopeType === 'WARD' || currentUser.role === 'WARD_SUPERVISOR';
  const isLgaSupervisor = scopeType === 'LGA' || currentUser.role === 'LGA_SUPERVISOR';
  const isStateSupervisor = scopeType === 'STATE' || currentUser.role === 'STATE_SUPERVISOR';
  const isRegionalSupervisor = scopeType === 'REGION' || currentUser.role === 'REGIONAL_COORDINATOR';

  const dashboardLabel =
    isWardSupervisor
      ? 'Ward Collation Desk'
      : isLgaSupervisor
      ? 'LGA Collation Desk'
      : isStateSupervisor
      ? 'State Command Desk'
      : isRegionalSupervisor
      ? 'Zone by Zone Command Desk'
      : 'National Situation Room';

  const navItems: {
    id: DashboardViewMode;
    label: string;
    icon: React.ElementType;
    badge?: string;
    badgeColor?: string;
  }[] = isWardSupervisor
    ? [
        {
          id: 'COMPLETE_DASHBOARD',
          label: 'Ward Collation Desk',
          icon: LayoutDashboard,
        },
        {
          id: 'FORM_DOSSIER',
          label: 'INEC Forms EC8A & EC8B',
          icon: FileSpreadsheet,
          badge: 'Ward',
          badgeColor: 'bg-amber-500/20 text-amber-300 border border-amber-500/30',
        },
        {
          id: 'PARTICIPANTS',
          label: 'Ward PU Sentinels & PINs',
          icon: BadgeCheck,
        },
        {
          id: 'INCIDENTS',
          label: 'Ward Incident & SOS Desk',
          icon: AlertTriangle,
          badge: '3',
          badgeColor: 'bg-rose-500 text-white font-bold',
        },
        {
          id: 'TIMELINE',
          label: 'Ward Live Stream',
          icon: Layers,
        },
        {
          id: 'MOBILE_CENTER',
          label: 'Mobile PU App Center',
          icon: Smartphone,
        },
      ]
    : isLgaSupervisor
    ? [
        {
          id: 'COMPLETE_DASHBOARD',
          label: 'LGA Collation Desk',
          icon: LayoutDashboard,
        },
        {
          id: 'FORM_DOSSIER',
          label: 'INEC Forms EC8B & EC8C',
          icon: FileSpreadsheet,
          badge: 'LGA',
          badgeColor: 'bg-blue-500/20 text-blue-300 border border-blue-500/30',
        },
        {
          id: 'PARTICIPANTS',
          label: 'LGA Ward Officers & PINs',
          icon: BadgeCheck,
        },
        {
          id: 'INCIDENTS',
          label: 'LGA Incident & SOS Desk',
          icon: AlertTriangle,
          badge: '5',
          badgeColor: 'bg-rose-500 text-white font-bold',
        },
        {
          id: 'TIMELINE',
          label: 'LGA Live Stream',
          icon: Layers,
        },
        {
          id: 'MOBILE_CENTER',
          label: 'Mobile PU App Center',
          icon: Smartphone,
        },
      ]
    : isStateSupervisor
    ? [
        {
          id: 'COMPLETE_DASHBOARD',
          label: 'State Command Desk',
          icon: LayoutDashboard,
        },
        {
          id: 'STATE_BY_STATE',
          label: 'My State LGA Analysis',
          icon: Map,
          badge: 'State',
          badgeColor: 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/30',
        },
        {
          id: 'FORM_DOSSIER',
          label: 'INEC Forms EC8C & EC8D',
          icon: FileSpreadsheet,
          badge: 'State',
          badgeColor: 'bg-amber-500/20 text-amber-300 border border-amber-500/30',
        },
        {
          id: 'PARTICIPANTS',
          label: 'State LGA Officers & PINs',
          icon: BadgeCheck,
        },
        {
          id: 'INCIDENTS',
          label: 'State Incident & SOS Desk',
          icon: AlertTriangle,
          badge: '12',
          badgeColor: 'bg-rose-500 text-white font-bold',
        },
        {
          id: 'TIMELINE',
          label: 'State Live Stream',
          icon: Layers,
        },
        {
          id: 'MOBILE_CENTER',
          label: 'Mobile PU App Center',
          icon: Smartphone,
        },
      ]
    : isRegionalSupervisor
    ? [
        {
          id: 'COMPLETE_DASHBOARD',
          label: 'Zonal Command Desk',
          icon: LayoutDashboard,
        },
        {
          id: 'REGIONAL_SUMMARY',
          label: 'My Zone States Analysis',
          icon: Globe2,
          badge: 'Zone',
          badgeColor: 'bg-cyan-500/20 text-cyan-300 border border-cyan-500/30',
        },
        {
          id: 'FORM_DOSSIER',
          label: 'Zonal Forms & Collation',
          icon: FileSpreadsheet,
          badge: 'Zonal',
          badgeColor: 'bg-blue-500/20 text-blue-300 border border-blue-500/30',
        },
        {
          id: 'PARTICIPANTS',
          label: 'State Directors & Staff',
          icon: BadgeCheck,
        },
        {
          id: 'INCIDENTS',
          label: 'Zonal Incident & SOS Desk',
          icon: AlertTriangle,
          badge: '18',
          badgeColor: 'bg-rose-500 text-white font-bold',
        },
        {
          id: 'TIMELINE',
          label: 'Zonal Live Stream',
          icon: Layers,
        },
        {
          id: 'MOBILE_CENTER',
          label: 'Mobile PU App Center',
          icon: Smartphone,
        },
      ]
    : [
        {
          id: 'COMPLETE_DASHBOARD',
          label: dashboardLabel,
          icon: LayoutDashboard,
        },
        {
          id: 'VOTER_REGISTER',
          label: 'Oct 2026 Voter Register',
          icon: Users,
          badge: '103.4M',
          badgeColor: 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/30',
        },
        {
          id: 'STATE_BY_STATE',
          label: 'State Breakdown',
          icon: Map,
          badge: '36+FCT',
        },
        {
          id: 'REGIONAL_SUMMARY',
          label: 'Zone by Zone',
          icon: Globe2,
          badge: '6 Zones',
        },
        {
          id: 'FORM_DOSSIER',
          label: 'INEC Form EC8 Dossier',
          icon: FileSpreadsheet,
          badge: 'EC8A-E',
          badgeColor: 'bg-blue-500/20 text-blue-300 border border-blue-500/30',
        },
        {
          id: 'PARTICIPANTS',
          label: 'Agent Accreditation & PINs',
          icon: BadgeCheck,
        },
        {
          id: 'INCIDENTS',
          label: 'Incident & SOS Desk',
          icon: AlertTriangle,
          badge: '3',
          badgeColor: 'bg-rose-500 text-white font-bold',
        },
        {
          id: 'PVT_AUDIT',
          label: 'PVT Forensic Audit',
          icon: ShieldCheck,
          badge: 'Sec 51',
        },
        {
          id: 'COMMUNICATION',
          label: 'Press & Media Desk',
          icon: Radio,
        },
        {
          id: 'SIMULATION',
          label: 'Election Simulator',
          icon: Sparkles,
        },
        {
          id: 'TIMELINE',
          label: 'Live Activity Stream',
          icon: Layers,
        },
        {
          id: 'MOBILE_CENTER',
          label: 'Mobile PU App Center',
          icon: Smartphone,
        },
        {
          id: 'TECH_DESK',
          label: 'GetoCore Tech Desk',
          icon: Wrench,
        },
      ];

  if (canManageUsers(currentUser)) navItems.push({ id: 'USERS', label: 'User Management', icon: Users });

  return (
    <aside
      className={`h-full min-h-0 overflow-hidden bg-[#0B132B] text-slate-300 flex flex-col justify-between transition-all duration-300 z-30 shadow-xl border-r border-slate-800 ${
        isCollapsed ? 'w-20' : 'w-72'
      }`}
    >
      {/* Top Section */}
      <div className="flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain">
        {/* AA Movement Command Banner in Sidebar */}
        <div className="shrink-0 p-4 border-b border-slate-800/80 flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 rounded-xl bg-white p-0.5 shadow-md shrink-0 border border-slate-700/80 overflow-hidden flex items-center justify-center">
              <img
                src="/aa-movement-logo.jpg"
                alt="AA Movement 2027 Logo"
                className="w-full h-full object-contain"
              />
            </div>
            {!isCollapsed && (
              <div className="leading-tight">
                <span className="text-xs font-black text-white tracking-wider block">
                  AA SITUATION ROOM
                </span>
                <span className="text-[10px] text-emerald-400 font-semibold block">
                  Presidency 2027 Command
                </span>
              </div>
            )}
          </div>

          {onToggleCollapse && (
            <button
              onClick={onToggleCollapse}
              className="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition-colors"
              title={isCollapsed ? 'Expand Sidebar' : 'Collapse Sidebar'}
            >
              {isCollapsed ? (
                <ChevronRight className="w-4 h-4" />
              ) : (
                <ChevronLeft className="w-4 h-4" />
              )}
            </button>
          )}
        </div>

        {/* Navigation Items */}
        <nav aria-label="Dashboard navigation" className="shrink-0 p-3 space-y-1.5">
          <div>
            <button type="button" title="BVAS" aria-label="BVAS" aria-expanded={bvasOpen}
              aria-controls={bvasMenuId} onClick={() => setBvasOpen((open) => !open)}
              className={`flex min-h-11 w-full items-center gap-3 rounded-xl px-3 py-2.5 text-xs font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-400 ${isBvasActive ? 'bg-slate-800 text-emerald-300' : 'text-slate-400 hover:bg-slate-800/60 hover:text-slate-100'}`}>
              <ShieldCheck className="h-4 w-4 shrink-0" />
              {!isCollapsed && <><span className="flex-1 text-left">BVAS</span>
                <ChevronDown aria-hidden="true" className={`h-4 w-4 ${bvasOpen ? 'rotate-180' : ''}`} /></>}
            </button>
            <ul id={bvasMenuId} hidden={!bvasOpen} aria-label="BVAS" className={`mt-1 space-y-1 ${isCollapsed ? '' : 'ml-5 border-l border-slate-700 pl-2'}`}>
              {bvasItems.map((item) => {
                const Icon = item.icon;
                return <li key={item.id}>
                  <Link href={item.href} title={item.label} aria-label={item.label}
                    aria-current={activeView === item.id ? 'page' : undefined}
                    className={`flex min-h-11 w-full items-center gap-3 rounded-xl px-3 py-2.5 text-xs font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-400 ${activeView === item.id ? 'bg-emerald-600 text-white' : 'text-slate-400 hover:bg-slate-800/60 hover:text-slate-100'}`}>
                    <Icon className="h-4 w-4 shrink-0" />{!isCollapsed && <span>{item.label}</span>}
                  </Link>
                </li>;
              })}
            </ul>
          </div>
          <Link href="/registered-voters" title="Registered Voters" aria-label="Registered Voters"
            aria-current={activeView === 'REGISTERED_VOTERS' ? 'page' : undefined}
            className={`flex min-h-11 w-full items-center gap-3 rounded-xl px-3 py-2.5 text-xs font-semibold ${activeView === 'REGISTERED_VOTERS' ? 'bg-emerald-600 text-white' : 'text-slate-400 hover:bg-slate-800/60 hover:text-slate-100'}`}>
            <Users className="h-4 w-4 shrink-0" />
            {!isCollapsed && <span>Registered Voters</span>}
          </Link>
          {navItems.map((item) => {
            const Icon = item.icon;
            const isActive = activeView === item.id;

            if (navigationHref || item.id === 'USERS' || item.id === 'INCIDENTS') return <Link key={item.id} href={item.id === 'INCIDENTS' ? '/incidents' : item.id === 'USERS' ? '/users' : navigationHref!(item.id)} aria-label={item.label}
              title={isCollapsed ? item.label : undefined}
              aria-current={isActive ? 'page' : undefined}
              className={`flex min-h-11 w-full items-center gap-3 rounded-xl px-3 py-2.5 text-xs font-semibold ${isActive ? 'bg-emerald-600 text-white' : 'text-slate-400 hover:bg-slate-800/60 hover:text-slate-100'}`}>
              <Icon className="h-4 w-4 shrink-0" />
              {!isCollapsed && <span className="truncate">{item.label}</span>}
            </Link>;

            return (
              <button
                key={item.id}
                onClick={() => onViewChange(item.id)}
                title={isCollapsed ? item.label : undefined}
                aria-label={item.label}
                aria-current={isActive ? 'page' : undefined}
                className={`w-full flex items-center space-x-3 px-3 py-2.5 rounded-xl text-xs font-semibold transition-all ${
                  isActive
                    ? 'bg-emerald-600 text-white shadow-md shadow-emerald-900/40 font-bold'
                    : 'text-slate-400 hover:text-slate-100 hover:bg-slate-800/60'
                }`}
              >
                <Icon
                  className={`w-4 h-4 shrink-0 transition-transform ${
                    isActive ? 'text-white scale-110' : 'text-slate-400'
                  }`}
                />
                {!isCollapsed && (
                  <span className="truncate flex-1 text-left">{item.label}</span>
                )}
                {!isCollapsed && item.badge && (
                  <span
                    className={`text-[10px] px-2 py-0.5 rounded-full font-mono shrink-0 ${
                      item.badgeColor || 'bg-slate-800 text-slate-300 border border-slate-700'
                    }`}
                  >
                    {item.badge}
                  </span>
                )}
              </button>
            );
          })}
        </nav>

        {/* Bottom AA Movement 2027 Graphic Banner (matching mockup wave) */}
        {!isCollapsed && (
          <div className="shrink-0 p-3 mx-3 mb-3 rounded-xl bg-gradient-to-br from-emerald-950/70 via-slate-900 to-[#0F172A] border border-emerald-500/20 text-xs text-left relative overflow-hidden">
            <div className="relative z-10">
              <span className="text-[10px] uppercase font-bold text-emerald-400 tracking-wider block">
                Official Movement
              </span>
              <p className="text-xs font-black text-white mt-0.5">
                Atiku Abubakar 2027
              </p>
              <p className="text-[10px] text-slate-400 mt-1 leading-snug">
                African Democratic Congress (ADC) Presidential Coalition
              </p>
            </div>
            <div className="absolute -right-3 -bottom-3 w-16 h-16 rounded-full bg-emerald-500/10 blur-md pointer-events-none" />
          </div>
        )}
      </div>

      {/* Logout & User Info Footer */}
      <div className="shrink-0 p-3 border-t border-slate-800/80 bg-slate-950/40 space-y-1">
        <Link
          href="/"
          className="w-full flex items-center space-x-3 px-3 py-2 rounded-xl text-xs font-semibold text-emerald-400 hover:text-emerald-200 hover:bg-emerald-950/30 transition-colors"
          title="Return to Public Landing Page"
        >
          <Home className="w-4 h-4 shrink-0 text-emerald-400" />
          {!isCollapsed && <span className="truncate">Public Landing Page</span>}
        </Link>

        <button
          onClick={onLogout}
          aria-label="Sign Out of Situation Room"
          className="w-full flex items-center space-x-3 px-3 py-2 rounded-xl text-xs font-semibold text-rose-400 hover:text-rose-200 hover:bg-rose-950/30 transition-colors"
        >
          <LogOut className="w-4 h-4 shrink-0" />
          {!isCollapsed && <span className="truncate">Sign Out of Situation Room</span>}
        </button>
      </div>
    </aside>
  );
}