'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useState } from 'react';
import {
  Bike,
  Settings,
  Wallet,
  Store,
  Zap,
  Battery,
  Menu,
  X,
  Users,
  FileText,
  BarChart3,
  CreditCard,
  MapPin,
  Shield,
  Truck,
  ChevronDown,
  LogOut,
  Calculator,
  Wrench
} from 'lucide-react';

const adminNavItems = [
  { label: 'Dashboard', href: '/admin', icon: BarChart3 },
  { label: 'KYC Requests', href: '/admin/kyc', icon: Shield },
  { label: 'Rentals', href: '/admin/rentals', icon: FileText },
  { label: 'Bikers', href: '/admin/bikers', icon: Users },
  { label: 'Investors', href: '/admin/investors', icon: Wallet },
  { label: 'Fleet Management', href: '/admin/fleet', icon: Bike },
  { label: 'Damage & Maintenance', href: '/admin/maintenance', icon: Wrench },
  { label: 'Accounting', href: '/admin/accounting', icon: Calculator },
  { label: 'Hubs', href: '/admin/hub', icon: MapPin },
  { label: 'Reports', href: '/admin/reports', icon: BarChart3 },
];

const bikerNavItems = [
  { label: 'Biker Dashboard', href: '/', icon: Bike },
  { label: 'Rent Bike', href: '/rent', icon: Zap },
  { label: 'Browse EVs', href: '/bikes', icon: Battery },
];

const investorNavItems = [
  { label: 'Dashboard', href: '/investor', icon: Wallet },
  { label: 'Portfolio', href: '/investor/portfolio', icon: BarChart3 },
  { label: 'Withdraw', href: '/investor/withdraw', icon: CreditCard },
];

const shopNavItems = [
  { label: 'Dashboard', href: '/shop', icon: Store },
  { label: 'Deliveries', href: '/shop/deliveries', icon: Truck },
  { label: 'Fleet', href: '/shop/fleet', icon: Bike },
];

export default function Sidebar() {
  const pathname = usePathname();
  const [mobileOpen, setMobileOpen] = useState(false);
  const [expandedMenu, setExpandedMenu] = useState<string | null>(null);

  const isAdmin = pathname.startsWith('/admin');
  const isInvestor = pathname.startsWith('/investor');
  const isShop = pathname.startsWith('/shop');

  const navItems = isAdmin ? adminNavItems :
    isInvestor ? investorNavItems :
      isShop ? shopNavItems : bikerNavItems;

  const toggleMenu = (label: string) => {
    setExpandedMenu(expandedMenu === label ? null : label);
  };

  return (
    <>
      <button
        onClick={() => setMobileOpen(!mobileOpen)}
        className="lg:hidden fixed top-4 left-4 z-50 p-2 bg-white rounded-lg shadow-md"
      >
        {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
      </button>

      <aside className={`
        fixed left-0 top-0 h-screen w-64 bg-white border-r border-slate-200 shadow-sm z-40
        transform transition-transform duration-300 ease-in-out
        ${mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
      `}>
        <div className="p-4 border-b border-slate-100">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-xl font-extrabold text-accent">JAIBEN</h1>
              <p className="text-xs text-slate-500">Mobility Ltd</p>
            </div>
            <div className="px-2 py-1 bg-accent-light rounded text-xs font-semibold text-accent">
              {isAdmin ? 'Admin' : isInvestor ? 'Investor' : isShop ? 'Shop' : 'Biker'}
            </div>
          </div>
        </div>

        <nav className="p-3 space-y-1 overflow-y-auto h-[calc(100vh-140px)]">
          {navItems.map((item) => {
            const isActive = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href));
            const Icon = item.icon;
            return (
              <Link
                key={item.href}
                href={item.href}
                onClick={() => setMobileOpen(false)}
                className={`
                  flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200
                  ${isActive
                    ? 'bg-accent text-white shadow-sm'
                    : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
                  }
                `}
              >
                <Icon className={`w-5 h-5 ${isActive ? 'text-white' : ''}`} />
                <span>{item.label}</span>
              </Link>
            );
          })}
        </nav>

        <div className="absolute bottom-0 left-0 right-0 p-3 border-t border-slate-100 bg-white">
          <div className="flex items-center gap-3 px-3 py-2">
            <div className="w-8 h-8 rounded-full bg-accent-light flex items-center justify-center">
              <span className="text-sm font-bold text-accent">A</span>
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-slate-700 truncate">Admin User</p>
              <p className="text-xs text-slate-400">admin@jaiben.com</p>
            </div>
            <button className="p-1.5 hover:bg-slate-100 rounded-lg">
              <LogOut className="w-4 h-4 text-slate-400" />
            </button>
          </div>
          <div className="mt-2 text-xs text-slate-400 text-center">
            <p>Phase 1 - Core EV Rental</p>
            <p className="mt-1">v1.0.0</p>
          </div>
        </div>
      </aside>

      {mobileOpen && (
        <div
          className="lg:hidden fixed inset-0 bg-black/30 z-30"
          onClick={() => setMobileOpen(false)}
        />
      )}
    </>
  );
}