JML/src/components/Sidebar.tsx

'use client';

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

const ROLE_LABELS: Record<string, string> = {
  super_admin: 'Super Admin',
  admin_manager: 'Admin Manager',
  staff: 'Front Desk',
  accountant: 'Accountant',
  investor: 'Investor',
  biker: 'Biker',
  'swap-station': 'Swap Station',
  merchant: 'Merchant',
};

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: 'Merchants (P2)', href: '/admin/merchants', icon: Store },
  { label: 'Swap Stations (P3)', href: '/admin/swap-stations', icon: Zap },

  { 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 },
  { label: 'Users Management', href: '/admin/users', icon: Users },
  { label: 'Roles & Permissions', href: '/admin/roles', icon: Shield },
  { label: 'Settings', href: '/admin/settings', icon: Settings },

];

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: BarChart3 },
  { label: 'My Investments', href: '/investor/plans', icon: Target },
  { label: 'Withdraw', href: '/investor/withdraw', icon: CreditCard },
  { label: 'My Profile', href: '/investor/profile', icon: User },
];

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 [userName, setUserName] = useState('User');
  const [userRole, setUserRole] = useState('admin');

  useEffect(() => {
    setUserName(getUserName() || 'User');
    setUserRole(getUserRole() || 'staff');
  }, []);

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

  const roleLabel = ROLE_LABELS[userRole] || userRole;

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

  const bottomNavItems = isAdmin ? [
    { label: 'Home', href: '/admin', icon: BarChart3 },
    { label: 'Fleet', href: '/admin/fleet', icon: Bike },
    { label: 'Users', href: '/admin/users', icon: Users },
  ] : isInvestor ? [
    { label: 'Home', href: '/investor', icon: BarChart3 },
    { label: 'Investments', href: '/investor/plans', icon: Target },
    { label: 'Withdraw', href: '/investor/withdraw', icon: CreditCard },
  ] : isShop ? [
    { label: 'Home', href: '/shop', icon: Store },
    { label: 'Deliveries', href: '/shop/deliveries', icon: Truck },
    { label: 'Fleet', href: '/shop/fleet', icon: Bike },
  ] : [
    { label: 'Home', href: '/', icon: Bike },
    { label: 'Rent', href: '/rent', icon: Zap },
    { label: 'EVs', href: '/bikes', icon: Battery },
  ];

  return (
    <>
      <aside className={`
        fixed left-0 top-0 h-screen w-64 bg-white border-r border-slate-200 shadow-sm z-50
        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="flex items-center gap-2">
              <div className="px-2 py-1 bg-accent-light rounded text-xs font-semibold text-accent">
                {roleLabel}
              </div>
              <button
                onClick={() => setMobileOpen(false)}
                className="lg:hidden p-1 text-slate-400 hover:text-slate-600 rounded-lg hover:bg-slate-100"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
          </div>
        </div>

        <nav className="p-3 space-y-1 overflow-y-auto h-[calc(100vh-140px)] pb-24 lg:pb-3">
          {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">
          <Link href="/admin/users/USR-001" className="flex items-center gap-3 px-3 py-2 hover:bg-slate-50 rounded-lg -mx-1">
            <div className="w-8 h-8 rounded-full bg-accent-light flex items-center justify-center">
              <span className="text-sm font-bold text-accent">{userName.charAt(0).toUpperCase()}</span>
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-slate-700 truncate">{userName}</p>
              <p className="text-xs text-slate-400">{roleLabel}</p>
            </div>
            <button
              onClick={() => {
                logout();
                window.location.href = '/login';
              }}
              className="p-1.5 hover:bg-slate-100 rounded-lg"
            >
              <LogOut className="w-4 h-4 text-slate-400" />
            </button>
          </Link>
          <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>

      {/* Bottom Navigation for Mobile */}
      <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-slate-200 flex justify-around items-center h-16 z-30 pb-safe shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
        {bottomNavItems.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}
              className={`
                flex flex-col items-center justify-center w-full h-full gap-1 transition-colors
                ${isActive ? 'text-accent' : 'text-slate-500 hover:text-slate-900'}
              `}
            >
              <Icon className={`w-5 h-5 ${isActive ? 'text-accent' : ''}`} />
              <span className="text-[10px] font-medium">{item.label}</span>
            </Link>
          );
        })}
        <button
          onClick={() => setMobileOpen(true)}
          className="flex flex-col items-center justify-center w-full h-full gap-1 text-slate-500 hover:text-slate-900 transition-colors"
        >
          <Menu className="w-5 h-5" />
          <span className="text-[10px] font-medium">Menu</span>
        </button>
      </nav>

      {mobileOpen && (
        <div
          className="lg:hidden fixed inset-0 bg-black/40 backdrop-blur-sm z-40 transition-opacity"
          onClick={() => setMobileOpen(false)}
        />
      )}
    </>
  );
}