'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  ShieldCheck,
  LayoutDashboard,
  Terminal,
  Key,
  ListOrdered,
  Coins,
  Webhook,
  BarChart3,
  LifeBuoy,
  Settings,
  ShieldAlert,
  Sparkles,
  ExternalLink,
  BookOpen,
} from 'lucide-react';

interface SidebarProps {
  userRole?: string;
}

export default function Sidebar({ userRole }: SidebarProps) {
  const pathname = usePathname();

  const navigation = [
    { name: 'Overview', href: '/dashboard', icon: LayoutDashboard },
    { name: 'Verification Service', href: '/dashboard/verification', icon: Terminal },
    { name: 'API Keys', href: '/dashboard/keys', icon: Key },
    { name: 'Request Logs', href: '/dashboard/logs', icon: ListOrdered },
    { name: 'Units & Activity', href: '/dashboard/transactions', icon: Coins },
    { name: 'Webhooks', href: '/dashboard/webhooks', icon: Webhook },
    { name: 'Usage Analytics', href: '/dashboard/usage', icon: BarChart3 },
    { name: 'Support', href: '/dashboard/support', icon: LifeBuoy },
    { name: 'Settings', href: '/dashboard/settings', icon: Settings },
  ];

  return (
    <aside className="w-64 bg-[#070b14] border-r border-slate-800 flex flex-col shrink-0 min-h-screen">
      {/* Brand Header */}
      <div className="p-5 border-b border-slate-800/80">
        <Link href="/" className="flex items-center gap-2.5 group">
          <div className="w-9 h-9 rounded-xl bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center">
            <ShieldCheck className="w-5 h-5 text-emerald-400" />
          </div>
          <div className="flex flex-col">
            <span className="text-lg font-bold text-white tracking-tight">
              NIN<span className="text-emerald-400">Auth</span>
            </span>
            <span className="text-[10px] text-emerald-400/80 font-mono -mt-1 font-semibold uppercase">
              Identity Platform
            </span>
          </div>
        </Link>
      </div>

      {/* Mode Badge */}
      <div className="px-4 pt-4 pb-2">
        <div className="p-2.5 rounded-xl bg-emerald-500/10 border border-emerald-500/25 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
            <span className="text-xs font-bold text-emerald-300 font-mono">SANDBOX MODE</span>
          </div>
          <span className="text-[10px] px-1.5 py-0.5 bg-emerald-500/20 text-emerald-400 rounded font-semibold uppercase">
            Test
          </span>
        </div>
      </div>

      {/* Main Nav Links */}
      <nav className="flex-1 px-3 py-3 space-y-1 overflow-y-auto">
        {navigation.map((item) => {
          const Icon = item.icon;
          const isActive = pathname === item.href;
          return (
            <Link
              key={item.name}
              href={item.href}
              className={`flex items-center gap-3 px-3 py-2.5 rounded-xl text-xs font-medium transition-all ${
                isActive
                  ? 'bg-emerald-500/15 text-emerald-400 border border-emerald-500/30 font-semibold'
                  : 'text-slate-400 hover:text-slate-100 hover:bg-slate-900/60'
              }`}
            >
              <Icon className={`w-4 h-4 ${isActive ? 'text-emerald-400' : 'text-slate-400'}`} />
              <span>{item.name}</span>
            </Link>
          );
        })}

        {/* Super Admin Access Link if user is Super Admin */}
        {(userRole === 'SUPER_ADMIN' || userRole === 'ADMIN') && (
          <div className="pt-4 mt-4 border-t border-slate-800/80">
            <span className="px-3 text-[10px] font-bold text-amber-400 uppercase tracking-wider block mb-1">
              Administration
            </span>
            <Link
              href="/admin"
              className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-xs font-semibold text-amber-400 bg-amber-500/10 border border-amber-500/30 hover:bg-amber-500/20 transition-all"
            >
              <ShieldAlert className="w-4 h-4" />
              <span>Admin Management</span>
            </Link>
          </div>
        )}
      </nav>

      {/* Documentation footer link */}
      <div className="p-4 border-t border-slate-800 bg-slate-950/40">
        <Link
          href="/docs"
          target="_blank"
          className="flex items-center justify-between p-2.5 rounded-xl bg-slate-900 border border-slate-800 text-xs text-slate-300 hover:text-white hover:border-slate-700 transition-all"
        >
          <div className="flex items-center gap-2">
            <BookOpen className="w-4 h-4 text-emerald-400" />
            <span>Interactive Docs</span>
          </div>
          <ExternalLink className="w-3.5 h-3.5 text-slate-400" />
        </Link>
      </div>
    </aside>
  );
}