import React from 'react';
import { Routes, Route, Navigate, useNavigate } from 'react-router-dom';
import { AppLayout } from '@/components/layout/AppLayout';
import { FleetV2Sidebar } from './components/FleetV2Sidebar';
import { DashboardView } from './views/DashboardView';
import { FleetManagementView } from './views/FleetManagementView';
import { FuelingView } from './views/FuelingView';
import { MaintenanceView } from './views/MaintenanceView';
import { QualityControlView } from './views/QualityControlView';
import { ClaimsView } from './views/ClaimsView';
import { PartnerListView } from './views/PartnerListView';
import { useAuthContext } from '@/components/shared/AuthProvider';
import { Plus, Fuel, Wrench, Truck } from 'lucide-react';
import { Button } from '@/components/ui/button';

/**
 * HeaderActions - Botões de ação rápida no topo
 */
const HeaderActions = () => {
  return (
    <div className="flex items-center gap-3">
      <Button className="bg-primary hover:bg-primary/90 text-white font-bold h-10 px-4 rounded-xl shadow-lg shadow-primary/20">
        <Plus size={18} className="mr-2" /> Novo Veículo
      </Button>
      <Button className="bg-emerald-600 hover:bg-emerald-500 text-white font-bold h-10 px-4 rounded-xl shadow-lg shadow-emerald-600/20">
        <Fuel size={18} className="mr-2" /> Abastecer
      </Button>
      <Button className="bg-rose-500/90 hover:bg-rose-500 text-white font-bold h-10 px-4 rounded-xl shadow-lg shadow-rose-500/10 border border-rose-400/20">
        <Wrench size={18} className="mr-2" /> Manutenção
      </Button>
    </div>
  );
};

export const FleetV2App = () => {
  const { logout, user } = useAuthContext();
  const navigate = useNavigate();

  const handleLogout = () => {
    logout();
    navigate('/plataforma/auth/login');
  };

  return (
    <div className="theme-frota">
      <AppLayout 
        brandIcon={Truck}
        brandName={<span>Pralog<span className="text-primary ml-1">Frota</span></span>}
        brandColorClass="bg-primary shadow-primary/20"
        title="Pralog Frota" 
        subtitle="Ecossistema de Gestão Integrada"
        headerExtras={<HeaderActions />}
        contentClassName="bg-[#f8fafc]"
        metadataType="fleet"
        onLogout={handleLogout}
        sidebar={<FleetV2Sidebar />}
      >
        <div className="relative min-h-[calc(100vh-160px)]">
          {/* Global Background Glow Frota */}
          <div className="absolute top-0 right-1/4 w-[600px] h-[600px] bg-primary/[0.03] rounded-full blur-[120px] pointer-events-none" />
          
          <div className="relative z-10 transition-all duration-500">
            <Routes>
              <Route path="dashboard" element={<DashboardView />} />
              <Route path="frota" element={<FleetManagementView />} />
              <Route path="abastecimento" element={<FuelingView />} />
              <Route path="manutencoes" element={<MaintenanceView />} />
              <Route path="checklists" element={<QualityControlView initialTab="checklists" />} />
              <Route path="monitoramento" element={<QualityControlView initialTab="monitoramento" />} />
              <Route path="sinistros" element={<ClaimsView />} />
              <Route path="listas" element={<PartnerListView />} />
              <Route path="estatisticas" element={<div className="p-10 text-center text-slate-400 font-bold uppercase tracking-widest">Relatórios Gerenciais em Desenvolvimento</div>} />
              <Route path="/" element={<Navigate to="dashboard" replace />} />
            </Routes>
          </div>
        </div>
      </AppLayout>
    </div>
  );
};

export default FleetV2App;
