'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  LayoutDashboard,
  Users,
  Shield,
  Coins,
  History,
  FileCheck2,
  Inbox,
  LifeBuoy,
  LogOut,
  ChevronLeft,
  ArrowLeft,
  Activity,
  Sliders,
  ShieldCheck,
} from 'lucide-react';

interface AdminSidebarProps {
  collapsed?: boolean;
  onToggleCollapse?: () => void;
}

export default function AdminSidebar({
  collapsed = false,
  onToggleCollapse,
}: AdminSidebarProps) {
  const pathname = usePathname();

  const navigation = [
    { name: 'Admin Overview', href: '/admin', icon: LayoutDashboard },
    { name: 'User Management', href: '/admin/users', icon: Users },
    { name: 'API Applications', href: '/admin/requests', icon: Inbox },
    { name: 'Dynamic Unit Pricing', href: '/admin/pricing', icon: Coins },
    { name: 'Provider Gateways', href: '/admin/providers', icon: Sliders },
    { name: 'Support Helpdesk', href: '/admin/tickets', icon: LifeBuoy },
    { name: 'Compliance Audit Logs', href: '/admin/audit', icon: History },
  ];

  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="/admin" className="flex items-center gap-2.5">
          <div className="w-8 h-8 rounded-xl bg-gradient-to-tr from-amber-600 to-amber-500 flex items-center justify-center text-white shadow-md shadow-amber-600/20">
            <Shield 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-amber-800 uppercase tracking-wider mt-0.5">
                Admin Command Center
              </span>
            </div>
          )}
        </Link>
      </div>

      {/* Nav Menu */}
      <nav className="flex-1 px-4 py-4 space-y-1.5 overflow-y-auto">
        <div className="pb-2">
          {!collapsed && (
            <span className="px-3 text-[10.5px] font-bold text-slate-400 uppercase tracking-wider font-mono">
              SYSTEM CONTROLS
            </span>
          )}
        </div>

        {navigation.map((item) => {
          const Icon = item.icon;
          const isActive = pathname === item.href;

          return (
            <Link
              key={item.name}
              href={item.href}
              className={`flex items-center justify-between px-3.5 py-2.5 rounded-xl text-xs font-semibold transition-all ${
                isActive
                  ? 'bg-amber-50 text-amber-900 font-bold border border-amber-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-amber-600' : 'text-slate-400'
                  }`}
                />
                {!collapsed && <span>{item.name}</span>}
              </div>
            </Link>
          );
        })}

        {/* Back to User Dashboard */}
        <div className="pt-4 mt-4 border-t border-slate-100">
          <Link
            href="/dashboard"
            className="flex items-center gap-2.5 px-3.5 py-2.5 rounded-xl text-xs font-semibold text-emerald-800 bg-emerald-50 hover:bg-emerald-100 transition-all"
          >
            <ArrowLeft className="w-4 h-4 text-emerald-600" />
            {!collapsed && <span>User Dashboard</span>}
          </Link>
        </div>
      </nav>

      {/* Bottom Panel */}
      <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>
  );
}