'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import Image from 'next/image';
import { useAuth } from '../lib/authContext';

interface SidebarProps {
  mobileOpen?: boolean;
  onClose?: () => void;
}

export default function Sidebar({ mobileOpen, onClose }: SidebarProps) {
  const pathname = usePathname();
  const { user } = useAuth();
  const dashboardHref = user?.role === 'admin'
    ? '/admin'
    : user?.role === 'hr'
    ? '/hr'
    : user?.role === 'hod'
    ? '/hod'
    : user?.role === 'hos'
    ? '/hos'
    : user?.role === 'finance'
    ? '/finance'
    : user?.role === 'employee'
    ? user.isIntern
      ? '/intern'
      : '/employee'
    : '/dashboard';

  const basePath = pathname?.startsWith('/hr') ? '/hr' : user?.role === 'admin' ? '/hr' : '';

  const navItems = [
    { href: dashboardHref, icon: 'ri-dashboard-line', label: 'Dashboard' },
    { href: `${basePath}/employees`, icon: 'ri-team-line', label: 'Employees' },
    { href: `${basePath}/leave`, icon: 'ri-calendar-check-line', label: 'Leave Management' },
    { href: `${basePath}/training`, icon: 'ri-graduation-cap-line', label: 'Training & Development' },
    { href: `${basePath}/payroll`, icon: 'ri-money-dollar-circle-line', label: 'Payroll' },
    { href: `${basePath}/performance`, icon: 'ri-bar-chart-line', label: 'Performance Appraisals' },
    { href: `${basePath}/recruitment`, icon: 'ri-briefcase-line', label: 'Recruitment Management' },
    { href: `${basePath}/analytics`, icon: 'ri-pie-chart-2-line', label: 'Analytics & Alerts' },
  ];

  const handleNavClick = () => {
    if (onClose) onClose();
  };

  const isActive = (href: string) => href === '/' ? pathname === '/' : pathname.startsWith(href);

  const sidebarContent = (
    <aside className="h-full w-64 flex flex-col" style={{ background: '#B22698', minHeight: '100vh' }}>
      <div className="flex flex-col items-center py-6 px-4 border-b border-white/20">
        <Image src="https://static.readdy.ai/image/724ebe353b2be7ddbcbd1af9bf145acb/1129a928a47473f2ca8ce9477fd8f692.png" alt="Uwezo Fund Logo" width={64} height={64} className="rounded-full mb-2 bg-white p-1 shadow-lg" />
        <span className="text-white font-bold text-base leading-tight text-center">Uwezo Fund</span>
        <span className="text-pink-200 text-xs mt-1">HR Management System</span>
      </div>
      <nav className="flex-1 overflow-y-auto py-4 px-3">
        {navItems.map((item) => {
          const active = isActive(item.href);
          return (
            <Link key={item.href} href={item.href} onClick={handleNavClick}
              className={`flex items-center gap-3 px-3 py-2.5 rounded-lg mb-1 transition-all cursor-pointer whitespace-nowrap ${active ? 'bg-white/25 text-white font-semibold border-l-[3px] border-yellow-300 pl-2.5' : 'text-pink-100 hover:bg-white/15 hover:text-white'}`}>
              <div className="w-5 h-5 flex items-center justify-center">
                <i className={`${item.icon} text-lg`}></i>
              </div>
              <span className="text-sm">{item.label}</span>
            </Link>
          );
        })}
      </nav>
      <div className="p-4 border-t border-white/20">
        <Link href="/profile" onClick={handleNavClick} className="flex items-center gap-3 cursor-pointer hover:bg-white/10 rounded-xl px-2 py-2 transition-all">
          <div className="w-9 h-9 rounded-full bg-white/20 border border-white/40 flex items-center justify-center text-white font-bold text-sm flex-shrink-0">
            {user?.avatar || 'AD'}
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-white text-sm font-semibold truncate">{user?.name || 'Admin User'}</p>
            <p className="text-pink-200 text-xs truncate capitalize">{user?.role === 'admin' ? 'System Administrator' : 'HR Manager'}</p>
          </div>
        </Link>
      </div>
    </aside>
  );

  return (
    <>
      <div className="hidden lg:block fixed left-0 top-0 h-screen w-64 z-40">
        {sidebarContent}
      </div>
      {mobileOpen && (
        <div className="lg:hidden fixed inset-0 z-50 flex">
          <div className="fixed inset-0 bg-black/50" onClick={onClose}></div>
          <div className="relative w-64 h-full shadow-2xl">
            {sidebarContent}
          </div>
        </div>
      )}
    </>
  );
}