'use client';

import Link from 'next/link';
import Image from 'next/image';
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, History, Bell,
  Building2
} 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',
};

type NavItem = { label: string; href: string; icon: any; isNotification?: boolean };

const adminNavItems: NavItem[] = [
  { label: 'Dashboard', href: '/admin', icon: BarChart3 },
  { label: 'Notifications', href: '/admin/notifications', icon: Bell, isNotification: true },
  { 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: 'Battery Management', href: '/admin/batteries', icon: Battery },
  { 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: 'Service Centers', href: '/admin/service-centers', icon: Building2 },
  { 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: NavItem[] = [
  { label: 'Biker Dashboard', href: '/', icon: Bike },
  { label: 'Rent Bike', href: '/rent', icon: Zap },
  { label: 'Browse EVs', href: '/bikes', icon: Battery },
];

const investorNavItems: NavItem[] = [
  { label: 'Dashboard', href: '/investor/dashboard', icon: Bike },
  { label: 'My Investments', href: '/investor/plans', icon: Target },
  { label: 'Rental History', href: '/investor/rental-history', icon: History },
  { label: 'Withdraw', href: '/investor/withdraw', icon: CreditCard },
  { label: 'Notifications', href: '/investor/notifications', icon: Bell },
  { label: 'My Profile', href: '/investor/profile', icon: User },
];

const shopNavItems: NavItem[] = [
  { 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');

  const [adminUnreadCount, setAdminUnreadCount] = useState(5);
  const [investorUnreadCount, setInvestorUnreadCount] = useState(2);

  useEffect(() => {
    setUserName(getUserName() || 'User');
    setUserRole(getUserRole() || 'staff');

    const updateCounts = () => {
      const adminNotifs = localStorage.getItem('jaiben_admin_notifications');
      if (adminNotifs) {
        try {
          const parsed = JSON.parse(adminNotifs);
          setAdminUnreadCount(parsed.filter((n: any) => !n.read).length);
        } catch (e) { }
      }
      const invNotifs = localStorage.getItem('jaiben_investor_notifications');
      if (invNotifs) {
        try {
          const parsed = JSON.parse(invNotifs);
          setInvestorUnreadCount(parsed.filter((n: any) => !n.read).length);
        } catch (e) { }
      }
    };

    updateCounts();

    window.addEventListener('storage', updateCounts);
    window.addEventListener('jaiben_notifications_update', updateCounts);

    return () => {
      window.removeEventListener('storage', updateCounts);
      window.removeEventListener('jaiben_notifications_update', updateCounts);
    };
  }, []);

  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/dashboard', icon: Bike },
    { label: 'Investments', href: '/investor/plans', icon: Target },
    { label: 'History', href: '/investor/rental-history', icon: History },
    { label: 'Withdraw', href: '/investor/withdraw', icon: CreditCard },
    { label: 'Profile', href: '/investor/profile', icon: User },
  ] : 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 className="flex items-center gap-2">
              <Image src="/jaiben.png" alt="JAIBEN Logo" width={40} height={40} className="object-contain h-8 w-auto" priority />
              <div>
                <h1 className="text-xl font-extrabold text-accent leading-tight">JAIBEN</h1>
                <p className="text-xs text-slate-500 leading-none">Mobility Ltd</p>
              </div>
            </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 isExact = pathname === item.href;
            const isChild = item.href !== '/' && pathname.startsWith(item.href + '/');
            const isActive = isExact || isChild;
            const Icon = item.icon;
            const isNotification = item.label === 'Notifications';

            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>
                {isNotification && (
                  <span className="ml-auto px-2 py-0.5 bg-red-500 text-white text-xs font-bold rounded-full">
                    {isAdmin ? adminUnreadCount : investorUnreadCount}
                  </span>
                )}
              </Link>
            );
          })}
        </nav>

        <div className="absolute bottom-0 left-0 right-0 p-3 border-t border-slate-100 bg-white">
          <Link href={isInvestor ? '/investor/profile' : '/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 items-center h-16 z-30 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
        {bottomNavItems.map((item) => {
          const isExact = pathname === item.href;
          const isChild = item.href !== '/' && pathname.startsWith(item.href + '/');
          const isActive = isExact || isChild;
          const Icon = item.icon;
          return (
            <Link
              key={item.href}
              href={item.href}
              className={`
                flex flex-col items-center justify-center flex-1 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>
          );
        })}
        {isAdmin && (
          <button
            onClick={() => setMobileOpen(true)}
            className="flex flex-col items-center justify-center flex-1 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)}
        />
      )}
    </>
  );
}