import React from 'react';
import {
  LayoutDashboard,
  KanbanSquare,
  Package,
  Users,
  Truck,
  Wallet,
  Sparkles,
  Building2,
  X,
  LogOut,
  LogIn,
} from 'lucide-react';

export type View =
  | 'dashboard'
  | 'dispatch'
  | 'loads'
  | 'drivers'
  | 'fleet'
  | 'financials'
  | 'ai'
  | 'brokers';

const nav: { id: View; label: string; icon: React.ElementType }[] = [
  { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
  { id: 'dispatch', label: 'Dispatch Board', icon: KanbanSquare },
  { id: 'loads', label: 'Loads', icon: Package },
  { id: 'drivers', label: 'Drivers', icon: Users },
  { id: 'fleet', label: 'Fleet', icon: Truck },
  { id: 'financials', label: 'Financials', icon: Wallet },
  { id: 'brokers', label: 'Broker CRM', icon: Building2 },
  { id: 'ai', label: 'AI Dispatcher', icon: Sparkles },
];

interface Props {
  active: View;
  setActive: (v: View) => void;
  open: boolean;
  close: () => void;
  allowedViews: string[];
  userName: string | null;
  userRole: string | null;
  onSignOut: () => void;
  onSignIn: () => void;
}

const Sidebar: React.FC<Props> = ({
  active,
  setActive,
  open,
  close,
  allowedViews,
  userName,
  userRole,
  onSignOut,
  onSignIn,
}) => {
  const visibleNav = nav.filter((n) => allowedViews.includes(n.id));
  const initials = userName
    ? userName.split(' ').map((p) => p[0]).join('').slice(0, 2).toUpperCase()
    : 'GU';

  return (
    <>
      {open && (
        <div className="fixed inset-0 z-30 bg-black/50 lg:hidden" onClick={close} />
      )}
      <aside
        className={`fixed z-40 inset-y-0 left-0 w-64 bg-[#0B3D91] text-white flex flex-col transition-transform duration-300 lg:translate-x-0 lg:static lg:z-auto ${
          open ? 'translate-x-0' : '-translate-x-full'
        }`}
      >
        <div className="flex items-center justify-between h-16 px-5 border-b border-white/10">
          <div className="flex items-center gap-2">
            <div className="w-9 h-9 rounded-lg bg-[#00C853] flex items-center justify-center">
              <Truck className="w-5 h-5 text-white" />
            </div>
            <div className="leading-tight">
              <p className="font-bold text-base">FleetFlow</p>
              <p className="text-[10px] tracking-widest text-blue-200 uppercase">Dispatch</p>
            </div>
          </div>
          <button onClick={close} className="lg:hidden text-blue-200">
            <X className="w-5 h-5" />
          </button>
        </div>

        <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
          {visibleNav.map((item) => {
            const Icon = item.icon;
            const isActive = active === item.id;
            return (
              <button
                key={item.id}
                onClick={() => {
                  setActive(item.id);
                  close();
                }}
                className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
                  isActive ? 'bg-white/15 text-white' : 'text-blue-100 hover:bg-white/10'
                }`}
              >
                <Icon className="w-5 h-5" />
                {item.label}
              </button>
            );
          })}
        </nav>

        <div className="p-3 border-t border-white/10">
          {userRole ? (
            <div className="flex items-center gap-3 px-3 py-2.5 rounded-lg">
              <div className="w-9 h-9 rounded-full bg-[#5A6673] flex items-center justify-center font-semibold text-sm">
                {initials}
              </div>
              <div className="flex-1 leading-tight min-w-0">
                <p className="text-sm font-medium truncate">{userName || 'User'}</p>
                <p className="text-[11px] text-blue-200">{userRole}</p>
              </div>
              <button onClick={onSignOut} title="Sign out" className="text-blue-200 hover:text-white">
                <LogOut className="w-4 h-4" />
              </button>
            </div>
          ) : (
            <button
              onClick={onSignIn}
              className="w-full flex items-center justify-center gap-2 px-3 py-2.5 rounded-lg bg-white/10 hover:bg-white/20 text-sm font-medium"
            >
              <LogIn className="w-4 h-4" /> Sign In
            </button>
          )}
        </div>
      </aside>
    </>
  );
};

export default Sidebar;