"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { 
  LayoutDashboard, 
  Users, 
  BookOpen, 
  Settings, 
  LogOut, 
  Link as LinkIcon,
  MessageSquare,
  BarChart3,
  FileText,
  ShieldCheck
} from "lucide-react";

export function AdminSidebar() {
  const pathname = usePathname();
  const router = useRouter();

  const handleLogout = async () => {
    await fetch("/api/auth/logout", { method: "POST" });
    router.push("/admin/login");
    router.refresh();
  };

  const links = [
    { name: "Command Center", href: "/admin/dashboard", icon: LayoutDashboard },
    { name: "Operatives", href: "/admin/practitioners", icon: Users },
    { name: "Mission Logs", href: "/admin/sessions", icon: MessageSquare },
    { name: "Mission Assets", href: "/admin/curriculum", icon: BookOpen },
    { name: "Access Protocols", href: "/admin/access-links", icon: LinkIcon },
    { name: "Intelligence", href: "/admin/analytics", icon: BarChart3 },
    { name: "Dossiers", href: "/admin/reports", icon: FileText },
    { name: "Core Config", href: "/admin/settings", icon: Settings },
  ];

  return (
    <div className="w-64 bg-[#044f54] text-white flex flex-col h-full relative overflow-hidden">
      {/* Scanline overlay */}
      <div className="absolute inset-0 pointer-events-none bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.03) 4px)]"></div>
      
      <nav className="flex-1 px-4 space-y-1 pt-6 relative z-10">
        <div className="text-[10px] font-mono text-white/30 uppercase tracking-[0.3em] mb-4 pl-3">Navigation</div>
        {links.map((link) => {
          const isActive = pathname.startsWith(link.href);
          const Icon = link.icon;
          return (
            <Link 
              key={link.name} 
              href={link.href}
              className={`flex items-center gap-3 px-3 py-2.5 rounded transition-all group ${
                isActive 
                  ? "bg-white text-[#044f54] font-bold shadow-lg" 
                  : "text-white/60 hover:text-white hover:bg-white/10"
              }`}
            >
              <Icon size={18} className={isActive ? "text-[#044f54]" : "text-white/40 group-hover:text-white/80"} />
              <span className="text-xs uppercase tracking-widest">{link.name}</span>
            </Link>
          );
        })}
      </nav>

      <div className="p-4 border-t border-white/10 relative z-10">
        <div className="mb-4 px-3 py-2 rounded bg-white/5 border border-white/5 flex items-center gap-2">
           <ShieldCheck size={14} className="text-green-400" />
           <span className="text-[9px] font-mono uppercase tracking-widest text-white/60">Connection Secure</span>
        </div>
        <button 
          onClick={handleLogout}
          className="flex items-center gap-3 px-3 py-2 w-full text-left rounded hover:bg-red-500/20 hover:text-red-200 transition-colors text-white/40 group"
        >
          <LogOut size={18} className="group-hover:text-red-400" />
          <span className="text-xs uppercase tracking-widest">Terminate Session</span>
        </button>
      </div>
    </div>
  );
}