import { NavLink } from 'react-router-dom';
import {
  LayoutDashboard,
  Wrench,
  Stethoscope,
  Package,
  Truck,
  FileText,
  Settings,
  LogOut,
  Users,
  Building2,
} from 'lucide-react';
import { useAuthStore } from '../../store/authStore';
import { useTallerStore } from '../../store/tallerStore';

const navigation = [
  { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
  { name: 'Ordenes de Servicio', href: '/orders', icon: Wrench },
  { name: 'Clientes', href: '/customers', icon: Building2 },
  { name: 'Vehiculos', href: '/vehicles', icon: Truck },
  { name: 'Inventario', href: '/inventory', icon: Package },
  { name: 'Cotizaciones', href: '/quotes', icon: FileText },
  { name: 'Diagnosticos', href: '/diagnostics', icon: Stethoscope },
];

const secondaryNavigation = [
  { name: 'Usuarios', href: '/users', icon: Users },
  { name: 'Configuracion', href: '/settings', icon: Settings },
];

export function Sidebar() {
  const { logout, user } = useAuthStore();
  const { currentTaller } = useTallerStore();

  return (
    <div className="flex h-full w-64 flex-col bg-gray-900">
      {/* Logo */}
      <div className="flex h-16 shrink-0 items-center px-6">
        <div className="flex items-center gap-2">
          <div className="h-8 w-8 rounded-lg bg-diesel-500 flex items-center justify-center">
            <Wrench className="h-5 w-5 text-white" />
          </div>
          <span className="text-xl font-bold text-white">Mecanicas</span>
        </div>
      </div>

      {/* Taller info */}
      {currentTaller && (
        <div className="px-4 py-2">
          <div className="rounded-lg bg-gray-800 px-3 py-2">
            <p className="text-xs text-gray-400">Taller</p>
            <p className="text-sm font-medium text-white truncate">
              {currentTaller.name}
            </p>
          </div>
        </div>
      )}

      {/* Navigation */}
      <nav className="flex flex-1 flex-col px-4 py-4">
        <ul role="list" className="flex flex-1 flex-col gap-1">
          {navigation.map((item) => (
            <li key={item.name}>
              <NavLink
                to={item.href}
                className={({ isActive }) =>
                  `group flex gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
                    isActive
                      ? 'bg-diesel-600 text-white'
                      : 'text-gray-300 hover:bg-gray-800 hover:text-white'
                  }`
                }
              >
                <item.icon className="h-5 w-5 shrink-0" />
                {item.name}
              </NavLink>
            </li>
          ))}
        </ul>

        {/* Secondary navigation */}
        <ul role="list" className="mt-auto space-y-1">
          {secondaryNavigation.map((item) => (
            <li key={item.name}>
              <NavLink
                to={item.href}
                className={({ isActive }) =>
                  `group flex gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
                    isActive
                      ? 'bg-gray-800 text-white'
                      : 'text-gray-400 hover:bg-gray-800 hover:text-white'
                  }`
                }
              >
                <item.icon className="h-5 w-5 shrink-0" />
                {item.name}
              </NavLink>
            </li>
          ))}

          {/* Logout */}
          <li>
            <button
              onClick={() => logout()}
              className="group flex w-full gap-3 rounded-lg px-3 py-2 text-sm font-medium text-gray-400 transition-colors hover:bg-gray-800 hover:text-white"
            >
              <LogOut className="h-5 w-5 shrink-0" />
              Cerrar Sesion
            </button>
          </li>
        </ul>

        {/* User info */}
        {user && (
          <div className="mt-4 border-t border-gray-800 pt-4">
            <div className="flex items-center gap-3 px-3">
              <div className="h-8 w-8 rounded-full bg-gray-700 flex items-center justify-center">
                <span className="text-sm font-medium text-white">
                  {user.full_name.charAt(0).toUpperCase()}
                </span>
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-white truncate">
                  {user.full_name}
                </p>
                <p className="text-xs text-gray-400 truncate">{user.role}</p>
              </div>
            </div>
          </div>
        )}
      </nav>
    </div>
  );
}