import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { AuthProvider } from './context/AuthContext';
import ProtectedRoute from './components/ProtectedRoute';
import PageLoader from './components/PageLoader';

import Login from './pages/Login';
import PayInvoice from './pages/PayInvoice';

const Settings = lazy(() => import('./pages/Settings'));
const Dashboard = lazy(() => import('./pages/team/Dashboard'));
const Companies = lazy(() => import('./pages/team/Companies'));
const CompanyDetail = lazy(() => import('./pages/team/CompanyDetail'));
const ProjectDetail = lazy(() => import('./pages/team/ProjectDetail'));
const TeamProjects = lazy(() => import('./pages/team/TeamProjects'));
const Requests = lazy(() => import('./pages/team/Requests'));
const Invoices = lazy(() => import('./pages/team/Invoices'));
const MeetingNotes = lazy(() => import('./pages/team/MeetingNotes'));
const TaskDetail = lazy(() => import('./pages/team/TaskDetail'));
const CreateInvoice = lazy(() => import('./pages/team/CreateInvoice'));
const CreateSubcontractorPO = lazy(() => import('./pages/team/CreateSubcontractorPO'));
const InvoiceDetail = lazy(() => import('./pages/team/InvoiceDetail'));
const SubcontractorPODetail = lazy(() => import('./pages/team/SubcontractorPODetail'));
const SurveyMaker = lazy(() => import('./pages/team/SurveyMaker'));
const BrandBook = lazy(() => import('./pages/team/BrandBook'));
const Converters = lazy(() => import('./pages/team/Converters'));
const ServerStatus = lazy(() => import('./pages/team/ServerStatus'));
const FileSharing = lazy(() => import('./pages/team/FileSharing'));
const FourgePasswords = lazy(() => import('./pages/team/FourgePasswords'));
const ExternalMyRequests = lazy(() => import('./pages/external/MyRequests'));
const MyPurchaseOrders = lazy(() => import('./pages/external/MyPurchaseOrders'));
const ExternalMyInvoices = lazy(() => import('./pages/external/MyInvoices'));
const ExternalProjects = lazy(() => import('./pages/external/ExternalProjects'));
const ExternalMyInvoiceDetail = lazy(() => import('./pages/external/MyInvoiceDetail'));
const ExternalMyInvoiceCreate = lazy(() => import('./pages/external/MyInvoiceCreate'));
const ClientDashboard = lazy(() => import('./pages/client/ClientDashboard'));
const MyCompany = lazy(() => import('./pages/client/MyCompany'));
const MyRequests = lazy(() => import('./pages/client/MyRequests'));
const MyProjects = lazy(() => import('./pages/client/MyProjects'));
const MyProjectDetail = lazy(() => import('./pages/client/MyProjectDetail'));
const MyInvoices = lazy(() => import('./pages/client/MyInvoices'));
const RequestDetail = lazy(() => import('./pages/client/RequestDetail'));
const NewRequest = lazy(() => import('./pages/client/NewRequest'));
const NewProject = lazy(() => import('./pages/client/NewProject'));

export default function App() {
  return (
    <AuthProvider>
      <BrowserRouter>
        <Suspense fallback={<PageLoader />}>
        <Routes>
          <Route path="/" element={<Login />} />

          <Route path="/dashboard" element={<ProtectedRoute role={['team', 'external']}><Dashboard /></ProtectedRoute>} />
          <Route path="/projects/:id" element={<ProtectedRoute role={['team', 'external']}><ProjectDetail /></ProtectedRoute>} />
          <Route path="/tasks/:id" element={<ProtectedRoute role={['team', 'external']}><TaskDetail /></ProtectedRoute>} />
          <Route path="/companies" element={<ProtectedRoute role="team"><Companies /></ProtectedRoute>} />
          <Route path="/companies/:id" element={<ProtectedRoute role="team"><CompanyDetail /></ProtectedRoute>} />
          <Route path="/requests" element={<ProtectedRoute role="team"><Requests /></ProtectedRoute>} />
          <Route path="/team-projects" element={<ProtectedRoute role="team"><TeamProjects /></ProtectedRoute>} />
          <Route path="/meeting-notes" element={<ProtectedRoute role="team"><MeetingNotes /></ProtectedRoute>} />
          <Route path="/invoices" element={<ProtectedRoute role="team"><Invoices /></ProtectedRoute>} />
          <Route path="/invoices/new" element={<ProtectedRoute role="team"><CreateInvoice /></ProtectedRoute>} />
          <Route path="/subcontractor-pos/new" element={<ProtectedRoute role="team"><CreateSubcontractorPO /></ProtectedRoute>} />
          <Route path="/invoices/:id" element={<ProtectedRoute role="team"><InvoiceDetail /></ProtectedRoute>} />
          <Route path="/subcontractor-pos/:id" element={<ProtectedRoute role="team"><SubcontractorPODetail /></ProtectedRoute>} />
          <Route path="/survey-maker" element={<ProtectedRoute role={['team', 'external']}><SurveyMaker /></ProtectedRoute>} />
          <Route path="/brand-book" element={<ProtectedRoute role={['team', 'external']}><BrandBook /></ProtectedRoute>} />
          <Route path="/converters" element={<ProtectedRoute role={['team', 'external']}><Converters /></ProtectedRoute>} />
          <Route path="/file-sharing" element={<ProtectedRoute role={['team', 'external', 'client']}><FileSharing /></ProtectedRoute>} />
          <Route path="/file-uploads" element={<Navigate to="/file-sharing" replace />} />
          <Route path="/fourge-passwords" element={<ProtectedRoute role="team"><FourgePasswords /></ProtectedRoute>} />
          <Route path="/server-status" element={<ProtectedRoute role="team"><ServerStatus /></ProtectedRoute>} />
          <Route path="/assigned-requests" element={<ProtectedRoute role="external"><ExternalMyRequests /></ProtectedRoute>} />
          <Route path="/my-purchase-orders" element={<ProtectedRoute role="external"><MyPurchaseOrders /></ProtectedRoute>} />
          <Route path="/my-projects-sub" element={<ProtectedRoute role="external"><ExternalProjects /></ProtectedRoute>} />
          <Route path="/my-invoices-sub" element={<ProtectedRoute role="external"><ExternalMyInvoices /></ProtectedRoute>} />
          <Route path="/my-invoices-sub/new" element={<ProtectedRoute role="external"><ExternalMyInvoiceCreate /></ProtectedRoute>} />
          <Route path="/my-invoices-sub/:id" element={<ProtectedRoute role="external"><ExternalMyInvoiceDetail /></ProtectedRoute>} />

          <Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />

          <Route path="/my-dashboard" element={<ProtectedRoute role="client"><ClientDashboard /></ProtectedRoute>} />
          <Route path="/my-company" element={<ProtectedRoute role="client"><MyCompany /></ProtectedRoute>} />
          <Route path="/my-requests" element={<ProtectedRoute role="client"><MyRequests /></ProtectedRoute>} />
          <Route path="/my-requests/:id" element={<ProtectedRoute role="client"><RequestDetail /></ProtectedRoute>} />
          <Route path="/my-projects" element={<ProtectedRoute role="client"><MyProjects /></ProtectedRoute>} />
          <Route path="/my-projects/:id" element={<ProtectedRoute role="client"><MyProjectDetail /></ProtectedRoute>} />
          <Route path="/my-invoices" element={<ProtectedRoute role="client"><MyInvoices /></ProtectedRoute>} />
          <Route path="/new-request" element={<ProtectedRoute role="client"><NewRequest /></ProtectedRoute>} />
          <Route path="/new-project" element={<ProtectedRoute role="client"><NewProject /></ProtectedRoute>} />

          <Route path="/pay/:id" element={<PayInvoice />} />
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
        </Suspense>
      </BrowserRouter>
    </AuthProvider>
  );
}