import React from 'react';
import { useLocation, Link } from 'react-router-dom';
import { 
  Gauge, 
  Truck, 
  Wrench, 
  Fuel, 
  ClipboardCheck, 
  Satellite, 
  BookUser, 
  PieChart, 
  ChevronRight,
  FileWarning
} from 'lucide-react';
import { cn } from '@/lib/utils';

/**
 * Sidebar customizada para o ambiente Fleet V2.
 * Agora utiliza navegação baseada em rotas para persistência.
 */
export const FleetV2Sidebar = ({ isCollapsed }) => {
  const location = useLocation();
  const currentPath = location.pathname;

  const sections = [
    {
      label: 'Principal',
      items: [
        { id: 'dashboard', path: '/plataforma/fleet-v2/dashboard', label: 'Dashboard', icon: Gauge },
        { id: 'frota', path: '/plataforma/fleet-v2/frota', label: 'Veículos & Bases', icon: Truck },
      ]
    },
    {
      label: 'Operação',
      items: [
        { id: 'manutencoes', path: '/plataforma/fleet-v2/manutencoes', label: 'Manutenções', icon: Wrench },
        { id: 'abastecimento', path: '/plataforma/fleet-v2/abastecimento', label: 'Abastecimento', icon: Fuel },
        { id: 'sinistros', path: '/plataforma/fleet-v2/sinistros', label: 'Sinistros & Devoluções', icon: FileWarning },
      ]
    },
    {
      label: 'Controle de Qualidade',
      items: [
        { id: 'checklists', path: '/plataforma/fleet-v2/checklists', label: 'Checklists & Inspeções', icon: ClipboardCheck },
        { id: 'monitoramento', path: '/plataforma/fleet-v2/monitoramento', label: 'Monitoramento Integrado', icon: Satellite },
      ]
    },
    {
      label: 'Administrativo',
      items: [
        { id: 'listas', path: '/plataforma/fleet-v2/listas', label: 'Cadastro Prestadores', icon: BookUser },
        { id: 'estatisticas', path: '/plataforma/fleet-v2/estatisticas', label: 'Relatórios Gerenciais', icon: PieChart },
      ]
    }
  ];

  return (
    <nav className="space-y-6">
      {sections.map((section) => (
        <div key={section.label} className="space-y-1">
          {!isCollapsed && (
            <h3 className="px-3 text-[11px] uppercase font-bold text-slate-400 tracking-widest mb-3">
              {section.label}
            </h3>
          )}
          <div className="space-y-0.5">
            {section.items.map((item) => {
              const Icon = item.icon;
              const isActive = currentPath === item.path;
              
              return (
                <Link
                  key={item.id}
                  to={item.path}
                  title={isCollapsed ? item.label : undefined}
                  className={cn(
                    "w-full flex items-center transition-all group relative duration-200",
                    isCollapsed ? "justify-center px-0 py-2.5 rounded-lg" : "gap-3 px-3 py-2.5 rounded-xl",
                    isActive 
                      ? "bg-primary text-primary-foreground shadow-md shadow-primary/20" 
                      : "text-slate-500 hover:bg-slate-100/50 hover:text-slate-900"
                  )}
                >
                  <Icon 
                    size={isActive && !isCollapsed ? 18 : 20} 
                    className={cn("transition-colors shrink-0", isActive ? "text-white" : "text-slate-400 group-hover:text-primary")} 
                  />
                  {!isCollapsed && (
                    <>
                      <span className="text-sm font-semibold flex-1 text-left">{item.label}</span>
                      {isActive && <ChevronRight size={14} className="opacity-50" />}
                    </>
                  )}
                </Link>
              );
            })}
          </div>
        </div>
      ))}
    </nav>
  );
};