'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  LayoutDashboard,
  BarChart2,
  AlertTriangle,
  Flag,
  FileText,
  MapPin,
  Users,
  Settings,
  ShieldCheck,
  DollarSign,
  Radio,
  FileCheck2
} from 'lucide-react';

interface AAMovementSidebarProps {
  activeTab?: string;
  onSelectTab?: (tab: string) => void;
  isOpenMobile?: boolean;
  onCloseMobile?: () => void;
}

export const AAMovementSidebar: React.FC<AAMovementSidebarProps> = ({
  activeTab = 'dashboard',
  onSelectTab,
  isOpenMobile = false,
  onCloseMobile
}) => {
  const pathname = usePathname();

  const navItems = [
    { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard, href: '/', badge: null },
    { id: 'results', label: 'Results & e-EC8A', icon: BarChart2, href: '/ec8a-verifier', badge: null },
    { id: 'incidents', label: 'Incidents', icon: AlertTriangle, href: '/incidents', badge: '3' },
    { id: 'issues', label: 'Issues & Flags', icon: Flag, href: '/canvassing', badge: '5' },
    { id: 'budget', label: 'Financial Budget', icon: DollarSign, href: '/budget', badge: 'NEW' },
    { id: 'reports', label: 'Reports & PVT', icon: FileText, href: '/', badge: null },
    { id: 'states', label: 'States & LGAs', icon: MapPin, href: '/', badge: null },
    { id: 'users', label: 'Users & Agents', icon: Users, href: '/agents', badge: null },
    { id: 'settings', label: 'Settings', icon: Settings, href: '/communication', badge: null },
  ];

  const handleNavClick = (id: string) => {
    if (onSelectTab) onSelectTab(id);
    if (onCloseMobile) onCloseMobile();
  };

  return (
    <aside
      className={`fixed lg:static top-0 bottom-0 left-0 z-40 w-64 bg-[#0A1424] text-slate-300 flex flex-col justify-between border-r border-slate-800/80 transition-transform duration-300 ${
        isOpenMobile ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
      }`}
    >
      {/* Brand Header */}
      <div className="p-5 border-b border-slate-800/80">
        <Link href="/" className="flex items-center space-x-3 group">
          {/* Stylized AA Movement Logo */}
          <div className="relative w-10 h-10 rounded-xl bg-gradient-to-tr from-emerald-600 via-teal-500 to-emerald-400 p-0.5 shadow-lg shadow-emerald-500/20 flex-shrink-0 flex items-center justify-center">
            <div className="w-full h-full bg-[#0A1424] rounded-[10px] flex items-center justify-center font-black text-emerald-400 text-lg tracking-tighter">
              AA
            </div>
          </div>

          <div>
            <div className="flex items-center space-x-1.5">
              <span className="font-black text-lg tracking-tight text-white group-hover:text-emerald-400 transition-colors">
                AAMovement
              </span>
            </div>
            <p className="text-[11px] text-slate-400 -mt-0.5 font-medium tracking-wide">
              Election Monitoring System
            </p>
          </div>
        </Link>
      </div>

      {/* Navigation Links */}
      <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
        {navItems.map((item) => {
          const Icon = item.icon;
          const isActive = activeTab === item.id || (item.href !== '/' && pathname === item.href);

          return (
            <Link
              key={item.id}
              href={item.href}
              onClick={() => handleNavClick(item.id)}
              className={`flex items-center justify-between px-3.5 py-2.5 rounded-xl text-xs font-bold transition-all ${
                isActive
                  ? 'bg-emerald-600 text-white shadow-md shadow-emerald-600/30'
                  : 'text-slate-400 hover:text-white hover:bg-slate-900/60'
              }`}
            >
              <div className="flex items-center space-x-3">
                <Icon className={`w-4 h-4 ${isActive ? 'text-white' : 'text-slate-400'}`} />
                <span>{item.label}</span>
              </div>

              {item.badge && (
                <span
                  className={`px-1.5 py-0.2 rounded-full text-[10px] font-black ${
                    isActive
                      ? 'bg-white text-emerald-700'
                      : item.badge === 'NEW'
                      ? 'bg-amber-400 text-slate-950'
                      : 'bg-rose-500 text-white'
                  }`}
                >
                  {item.badge}
                </span>
              )}
            </Link>
          );
        })}
      </nav>

      {/* Bottom Emblem Card: Nigeria Presidential Election 2027 */}
      <div className="p-4 border-t border-slate-800/80">
        <div className="relative overflow-hidden rounded-2xl bg-gradient-to-b from-[#0D1F38] to-[#081528] border border-emerald-500/30 p-4 shadow-xl">
          {/* Subtle green wave ambient glow */}
          <div className="absolute -bottom-8 -right-8 w-32 h-32 bg-emerald-500/20 rounded-full blur-2xl pointer-events-none" />

          <div className="relative z-10 space-y-1">
            <span className="text-[11px] font-medium text-slate-300 block">
              Nigeria
            </span>
            <span className="text-xs font-bold text-white block">
              Presidential Election
            </span>
            <div className="text-3xl font-black text-emerald-400 tracking-tight pt-1">
              2027
            </div>
            <p className="text-[10px] text-slate-400 pt-1 flex items-center space-x-1">
              <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
              <span>Free • Fair • Credible Elections</span>
            </p>
          </div>
        </div>
      </div>
    </aside>
  );
};