import { lazy, Suspense } from 'react';
import { Route, Routes, Navigate } from 'react-router-dom';
import { PrafrotLayout } from './layout/PrafrotLayout';
import { Zap } from 'lucide-react';

// Lazy loading views
const VehiclesView = lazy(() => import('./views/VehiclesView'));
const MaintenanceView = lazy(() => import('./views/MaintenanceView'));
const AvailabilityView = lazy(() => import('./views/AvailabilityView'));
const MokiView = lazy(() => import('./views/MokiView'));
const StatusView = lazy(() => import('./views/StatusView'));
const MonitoringView = lazy(() => import('./views/MonitoringView'));
const WorkshopsView = lazy(() => import('./views/WorkshopsView'));
const ClaimsView = lazy(() => import('./views/ClaimsView'));
const DriversView = lazy(() => import('./views/DriversView'));
const LoginView = lazy(() => import('./views/LoginView'));
const StatisticsView = lazy(() => import('./views/StatisticsView'));
const DispatcherView = lazy(() => import('./views/DispatcherView'));

// Loading component matching Prafrot theme
const PrafrotLoader = () => (
  <div className="flex h-screen w-screen items-center justify-center bg-[#141414]">
    <div className="flex flex-col items-center gap-6">
      <div className="relative">
        <div className="w-16 h-16 bg-emerald-500 rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-500/20 animate-bounce">
          <Zap size={32} className="text-[#1c1c1c]" strokeWidth={2.5} />
        </div>
        <div className="absolute -inset-4 border-2 border-emerald-500/20 border-t-emerald-500 rounded-full animate-spin" />
      </div>
      <div className="flex flex-col items-center gap-1">
        <span className="text-emerald-500 text-[10px] font-black uppercase tracking-[0.3em] animate-pulse">Prafrot System</span>
        <span className="text-slate-600 text-[8px] font-bold uppercase tracking-widest">Carregando...</span>
      </div>
    </div>
  </div>
);

export const PrafrotRoutes = () => {
  return (
    <Suspense fallback={<PrafrotLoader />}>
      <Routes>
        <Route element={<PrafrotLayout />}>
          <Route path="veiculos" element={<VehiclesView />} />
          <Route path="manutencao" element={<MaintenanceView />} />
          <Route path="disponibilidade" element={<AvailabilityView />} />
          <Route path="moki" element={<MokiView />} />
          <Route path="status" element={<StatusView />} />
          <Route path="monitoramento" element={<MonitoringView />} />
          <Route path="oficinas" element={<WorkshopsView />} />
          <Route path="sinistros" element={<ClaimsView />} />
          <Route path="motoristas" element={<DriversView />} />
          <Route path="estatisticas" element={<StatisticsView />} />
          <Route path="dispatcher" element={<DispatcherView />} />
          
          <Route index element={<Navigate to="/plataforma/prafrot/estatisticas" replace />} />
          <Route path="*" element={<Navigate to="/plataforma/prafrot/estatisticas" replace />} />
        </Route>
      </Routes>
    </Suspense>
  );
};

// Export LoginView separately for use in App.jsx
export { LoginView };
