import { Icons } from '../icons/Icons';
import ThemeToggle from './ThemeToggle';

const ALL_NAVS = [
  { id: 'dashboard', label: 'Dashboard', icon: Icons.Dashboard, roles: ['master_admin', 'cashier', 'supplier'] },
  { id: 'inventory', label: 'Inventory', icon: Icons.Box, roles: ['master_admin', 'cashier', 'supplier'] },
  { id: 'clients', label: 'Clients', icon: Icons.Users, roles: ['master_admin', 'cashier'] },
  { id: 'orders', label: 'Orders', icon: Icons.Cart, roles: ['master_admin', 'cashier'] },
  { id: 'followups', label: 'Follow-ups', icon: Icons.Cal, roles: ['master_admin', 'cashier'] },
  { id: 'stock-reports', label: 'Stock Reports', icon: Icons.Clipboard, roles: ['master_admin', 'supplier', 'cashier'] },
  { id: 'notifications', label: 'Notifications', icon: Icons.Bell, roles: ['master_admin', 'cashier', 'supplier'] },
  { id: 'reports', label: 'Reports', icon: Icons.Dollar, roles: ['master_admin'] },
  { id: 'settings', label: 'Settings', icon: Icons.Gear, roles: ['master_admin', 'cashier', 'supplier'] },
];

const HamburgerIcon = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <line x1="3" y1="6" x2="21" y2="6" />
    <line x1="3" y1="12" x2="21" y2="12" />
    <line x1="3" y1="18" x2="21" y2="18" />
  </svg>
);

export default function Sidebar({ page, onNav, pendingFU = 0, needShip = 0, pendingReports = 0, unreadNotifs = 0, collapsed, onToggle, role }) {
  const navs = ALL_NAVS.filter(n => n.roles.includes(role));

  return (
    <>
      {!collapsed && (
        <div
          className="fixed inset-0 bg-black/40 z-30 lg:hidden"
          onClick={onToggle}
        />
      )}

      <aside
        className={`bg-s1 border-r border-bd flex flex-col flex-shrink-0 z-40 transition-all duration-300 h-screen ${
          collapsed
            ? 'w-[56px]'
            : 'w-[220px] fixed lg:relative'
        }`}
      >
        <div className="border-b border-bd flex items-center gap-2.5 px-3 py-3.5">
          <button
            className="text-t2 hover:text-t1 p-1 rounded-md hover:bg-s2 transition-colors flex-shrink-0"
            onClick={onToggle}
            title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
          >
            {collapsed ? <HamburgerIcon /> : <Icons.X />}
          </button>
          {!collapsed && (
            <div className="flex items-center gap-2 text-base font-bold flex-1">
              <span className="w-6 h-6 rounded-md bg-gradient-to-br from-ac to-purple-600 flex items-center justify-center text-xs">
                ⬡
              </span>
              PeptideOS
            </div>
          )}
        </div>

        <nav className="py-2 flex-1 overflow-y-auto">
          {navs.map((n) => {
            const Icon = n.icon;
            const active = page === n.id;
            return (
              <div
                key={n.id}
                className={`relative flex items-center gap-2.5 cursor-pointer rounded-md mx-1.5 my-0.5 text-[13px] transition-colors ${
                  collapsed ? 'px-2.5 py-2.5 justify-center' : 'px-4 py-2'
                } ${
                  active ? 'bg-acD text-white font-semibold' : 'text-t2 hover:bg-s2 hover:text-t1'
                }`}
                onClick={() => onNav(n.id)}
                title={collapsed ? n.label : undefined}
              >
                <span className="flex-shrink-0"><Icon /></span>
                {!collapsed && (
                  <>
                    {n.label}
                    {n.id === 'followups' && pendingFU > 0 && (
                      <span className="ml-auto bg-rd text-white rounded-full px-1.5 text-[10px] font-bold">
                        {pendingFU}
                      </span>
                    )}
                    {n.id === 'orders' && needShip > 0 && (
                      <span className="ml-auto bg-or text-white rounded-full px-1.5 text-[10px] font-bold">
                        {needShip}
                      </span>
                    )}
                    {n.id === 'stock-reports' && pendingReports > 0 && (
                      <span className="ml-auto bg-yl text-black rounded-full px-1.5 text-[10px] font-bold">
                        {pendingReports}
                      </span>
                    )}
                    {n.id === 'notifications' && unreadNotifs > 0 && (
                      <span className="ml-auto bg-rd text-white rounded-full px-1.5 text-[10px] font-bold">
                        {unreadNotifs > 99 ? '99+' : unreadNotifs}
                      </span>
                    )}
                  </>
                )}
                {collapsed && n.id === 'followups' && pendingFU > 0 && (
                  <span className="absolute top-0.5 right-0.5 w-2 h-2 bg-rd rounded-full pointer-events-none" />
                )}
                {collapsed && n.id === 'orders' && needShip > 0 && (
                  <span className="absolute top-0.5 right-0.5 w-2 h-2 bg-or rounded-full pointer-events-none" />
                )}
                {collapsed && n.id === 'stock-reports' && pendingReports > 0 && (
                  <span className="absolute top-0.5 right-0.5 w-2 h-2 bg-yl rounded-full pointer-events-none" />
                )}
                {collapsed && n.id === 'notifications' && unreadNotifs > 0 && (
                  <span className="absolute top-0.5 right-0.5 w-2 h-2 bg-rd rounded-full pointer-events-none" />
                )}
              </div>
            );
          })}
        </nav>

        <div className="border-t border-bd pt-1.5 pb-1">
          <ThemeToggle collapsed={collapsed} />
        </div>

        {!collapsed && (
          <div className="p-3 px-4 border-t border-bd text-[10px] text-t3">
            PeptideOS v2.0
          </div>
        )}
      </aside>
    </>
  );
}
