'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  LayoutDashboard,
  FileText,
  CreditCard,
  Users,
  Code2,
  Settings,
  ChevronLeft,
  Shield,
  Layers,
  Sparkles,
  Terminal,
  KeyRound,
  Inbox,
  UserCheck,
  Send,
  BookOpen,
  Coins,
  ShieldCheck,
  User,
  LifeBuoy,
  BarChart3,
  Activity,
} from 'lucide-react';

interface SidebarProps {
  collapsed?: boolean;
  onToggleCollapse?: () => void;
  userRole?: 'SUPER_ADMIN' | 'ADMIN' | 'API_USER' | 'STANDARD_USER' | 'VERIFICATION_USER' | string;
}

export default function NINAuthSidebar({
  collapsed = false,
  onToggleCollapse,
  userRole = 'STANDARD_USER',
}: SidebarProps) {
  const pathname = usePathname();

  const isStandardUser = userRole === 'STANDARD_USER' || userRole === 'VERIFICATION_USER';
  const isApiUser = userRole === 'API_USER' || userRole === 'ADMIN' || userRole === 'SUPER_ADMIN';
  const isAdminOrSuper = userRole === 'ADMIN' || userRole === 'SUPER_ADMIN';

  // Navigation Items
  let navigation: any[] = [];

  if (isStandardUser) {
    navigation = [
      { name: 'Overview', href: '/dashboard', icon: LayoutDashboard },
      { name: 'Verification Service', href: '/dashboard/verification', icon: Terminal },
      { name: 'Units & Balance', href: '/dashboard/transactions', icon: Coins },
      { name: 'Activity Logs', href: '/dashboard/logs', icon: Activity },
      { name: 'Request API Access', href: '/dashboard/request-api', icon: Send, badge: 'UPGRADE' },
      { name: 'My Profile', href: '/dashboard/profile', icon: User },
      { name: 'Settings', href: '/dashboard/settings', icon: Settings },
      { name: 'Support', href: '/dashboard/support', icon: LifeBuoy },
    ];
  } else {
    // API User & Admin
    navigation = [
      { name: 'Overview', href: '/dashboard', icon: LayoutDashboard },
      { name: 'Verification Service', href: '/dashboard/verification', icon: Terminal },
      { name: 'API Documentation', href: '/docs', icon: BookOpen },
      { name: 'API Management', href: '/dashboard/developers', icon: KeyRound },
      { name: 'API Usage', href: '/dashboard/usage', icon: BarChart3 },
      { name: 'Webhooks', href: '/dashboard/webhooks', icon: Layers },
      { name: 'Units & Transactions', href: '/dashboard/transactions', icon: Coins },
      { name: 'Members & Team', href: '/dashboard/team', icon: Users },
      { name: 'My Profile', href: '/dashboard/profile', icon: User },
      { name: 'Settings', href: '/dashboard/settings', icon: Settings },
      { name: 'Support', href: '/dashboard/support', icon: LifeBuoy },
    ];
  }

  return (
    <aside
      className={`${
        collapsed ? 'w-20' : 'w-72'
      } bg-white border-r border-slate-200/90 flex flex-col shrink-0 min-h-screen transition-all duration-300 z-40 font-sans`}
    >
      {/* Brand Header */}
      <div className="p-6 pb-5 flex items-center justify-between border-b border-slate-100">
        <Link href="/dashboard" className="flex items-center gap-2.5">
          <div className="w-8 h-8 rounded-xl bg-gradient-to-tr from-emerald-600 to-teal-500 flex items-center justify-center text-white shadow-md shadow-emerald-500/20">
            <ShieldCheck className="w-5 h-5" />
          </div>
          {!collapsed && (
            <div className="flex flex-col">
              <span className="text-xl font-extrabold text-slate-900 tracking-tight leading-none">
                Smart<span className="text-emerald-700">Auth</span>
              </span>
              <span className="text-[9.5px] font-mono font-bold text-slate-400 uppercase tracking-wider mt-0.5">
                {isStandardUser ? 'Verification Portal' : 'API & Identity Platform'}
              </span>
            </div>
          )}
        </Link>
      </div>

      {/* Nav Menu */}
      <nav className="flex-1 px-4 py-3 space-y-1.5 overflow-y-auto">
        {navigation.map((item: any) => {
          const Icon = item.icon;
          const isActive =
            pathname === item.href ||
            (item.href === '/dashboard/developers' &&
              (pathname === '/dashboard/keys' || pathname === '/dashboard/developers'));

          return (
            <Link
              key={item.name}
              href={item.href}
              className={`flex items-center justify-between px-3.5 py-2.5 rounded-xl text-[13px] font-medium transition-all ${
                isActive
                  ? 'bg-emerald-50 text-emerald-800 font-bold border border-emerald-200 shadow-sm'
                  : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
              }`}
            >
              <div className="flex items-center gap-3">
                <Icon
                  className={`w-4 h-4 shrink-0 ${
                    isActive ? 'text-emerald-600' : 'text-slate-400'
                  }`}
                />
                {!collapsed && <span>{item.name}</span>}
              </div>

              {!collapsed && item.badge && (
                <span
                  className={`px-2 py-0.5 text-[9px] font-extrabold text-white rounded-md font-mono leading-none ${
                    item.badge === 'UPGRADE' ? 'bg-emerald-700' : 'bg-rose-500'
                  }`}
                >
                  {item.badge}
                </span>
              )}
            </Link>
          );
        })}

        {/* Super Admin & Admin Shortcuts */}
        {isAdminOrSuper && !collapsed && (
          <div className="pt-4 mt-4 border-t border-slate-100 space-y-1.5">
            <span className="px-3 text-[10px] font-bold text-amber-800 uppercase tracking-wider block mb-1">
              Administration
            </span>
            <Link
              href="/admin/requests"
              className={`flex items-center justify-between px-3.5 py-2.5 rounded-xl text-xs font-semibold transition-all ${
                pathname === '/admin/requests'
                  ? 'bg-amber-100 text-amber-900 font-bold'
                  : 'text-amber-800 bg-amber-50/70 hover:bg-amber-100'
              }`}
            >
              <div className="flex items-center gap-2.5">
                <Inbox className="w-4 h-4 text-amber-600" />
                <span>API Applications</span>
              </div>
            </Link>

            <Link
              href="/admin"
              className="flex items-center gap-2.5 px-3.5 py-2.5 rounded-xl text-xs font-semibold text-amber-800 bg-amber-50/70 hover:bg-amber-100 transition-all"
            >
              <Shield className="w-4 h-4 text-amber-600" />
              <span>Admin Portal</span>
            </Link>
          </div>
        )}
      </nav>

      {/* Collapse Panel Button at Bottom */}
      <div className="p-4 border-t border-slate-100">
        <button
          onClick={onToggleCollapse}
          className="w-full flex items-center gap-2.5 px-3 py-2 rounded-xl border border-slate-200 hover:bg-slate-50 text-xs font-semibold text-slate-700 transition-all"
        >
          <div className="w-4 h-4 rounded border border-slate-300 flex items-center justify-center">
            <ChevronLeft className={`w-3 h-3 transition-transform ${collapsed ? 'rotate-180' : ''}`} />
          </div>
          {!collapsed && <span>Collapse menu</span>}
        </button>
      </div>
    </aside>
  );
}