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

// Lazy loading views
const RegistrationsView = lazy(() => import('./views/RegistrationsView'));
const ContractsView = lazy(() => import('./views/ContractsView'));
const ArchivedRegistrationsView = lazy(() => import('./views/ArchivedRegistrationsView'));
const ArchivedContractsView = lazy(() => import('./views/ArchivedContractsView'));
const SettingsView = lazy(() => import('./views/SettingsView'));
const LoginView = lazy(() => import('./views/LoginView'));
const InternalRegistrationView = lazy(() => import('./views/InternalDriverRegistrationView').then(m => ({ default: m.InternalDriverRegistrationView })));
const ResetPasswordView = lazy(() => import('./views/ResetPasswordView'));

// GR Operações Views
const GrDashboardView = lazy(() => import('./views/GrDashboardView'));
const GrOutlookView = lazy(() => import('./views/GrOutlookView'));
const GrFiscalView = lazy(() => import('./views/GrFiscalView'));
const GrCteView = lazy(() => import('./views/GrCteView'));
const GrChecklistView = lazy(() => import('./views/GrChecklistView'));
const GrOpsCadastrosView = lazy(() => import('./views/GrOpsCadastrosView'));
const GrDocumentosView = lazy(() => import('./views/GrDocumentosView'));
const GrPlanilhasView = lazy(() => import('./views/GrPlanilhasView'));
const GrUsersAdminView = lazy(() => import('./views/GrUsersAdminView'));
const GrOpsConfigView = lazy(() => import('./views/GrOpsConfigView'));
const GrMonitoringView = lazy(() => import('./views/GrMonitoringView'));
const GrTelemetryView = lazy(() => import('./views/GrTelemetryView'));

// Loading component
const GrLoader = () => (
  <div className="flex h-screen w-screen items-center justify-center bg-[var(--gr-panel-empty)]">
    <div className="flex flex-col items-center gap-6">
      <div className="relative">
        <div className="w-16 h-16 bg-[var(--gr-primary)] rounded-2xl flex items-center justify-center shadow-lg animate-pulse">
           <span className="text-white font-bold text-xl">GR</span>
        </div>
      </div>
      <div className="flex flex-col items-center gap-1">
        <span className="text-[var(--gr-primary)] text-[10px] font-bold uppercase tracking-[0.3em]">Cockpit GR</span>
        <span className="text-slate-600 text-[8px] font-bold uppercase tracking-widest">Carregando...</span>
      </div>
    </div>
  </div>
);

export const GrRoutes = () => {
  return (
    <Suspense fallback={<GrLoader />}>
      <Routes>
        <Route element={<GrLayout />}>
          <Route path="cadastros" element={<RegistrationsView />} />
          <Route path="cadastros/arquivados" element={<ArchivedRegistrationsView />} />
          <Route path="cadastros/novo" element={<InternalRegistrationView />} />
          <Route path="contratos" element={<ContractsView />} />
          <Route path="contratos/arquivados" element={<ArchivedContractsView />} />
          <Route path="configuracoes" element={<SettingsView />} />
          
          {/* GR Operações Routes */}
          <Route path="operacoes">
            <Route path="dashboard" element={<GrDashboardView />} />
            <Route path="monitoramento" element={<GrMonitoringView />} />
            <Route path="telemetria" element={<GrTelemetryView />} />
            <Route path="outlook" element={<GrOutlookView />} />
            <Route path="fiscal" element={<GrFiscalView />} />
            <Route path="cte" element={<GrCteView />} />
            <Route path="checklist" element={<GrChecklistView />} />
            <Route path="cadastros" element={<GrOpsCadastrosView />} />
            <Route path="documentos" element={<GrDocumentosView />} />
            <Route path="planilhas" element={<GrPlanilhasView />} />
            {/* <Route path="usuarios" element={<GrUsersAdminView />} />
            <Route path="config" element={<GrOpsConfigView />} /> */}
            <Route index element={<Navigate to="dashboard" replace />} />
          </Route>
          
          <Route index element={<Navigate to="/plataforma/gr/cadastros" replace />} />
          <Route path="*" element={<Navigate to="/plataforma/gr/cadastros" replace />} />
        </Route>
      </Routes>
    </Suspense>
  );
};

// Export LoginView separately
export { LoginView };
