import { lazy, Suspense, type ReactNode } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import { AuthProvider, useAuth, Toaster, ForgotPasswordPage, ResetPasswordPage, RegistrationWithOtp } from '@ump/shared';

import { LoginPage } from './pages/LoginPage';
import { PublishablePapersList } from './pages/PublishablePapersList';
import { PaperComposerPage } from './pages/PaperComposerPage';
import { GovernancePage } from './pages/GovernancePage';
import { ComingSoonPage } from './pages/ComingSoonPage';
import { DashboardLayout } from './layouts/DashboardLayout';

// PDF-heavy (@react-pdf/renderer ~3 MB) — lazy so its chunk loads only on the preview route.
const PaperPreviewPage = lazy(() =>
  import('./pages/PaperPreviewPage').then((m) => ({ default: m.PaperPreviewPage })),
);

const queryClient = new QueryClient();

function RequireAuth({ children }: { children: ReactNode }) {
  const { isAuthenticated, loading } = useAuth();
  if (loading) return <div style={{ padding: 24 }}>Đang tải…</div>;
  return isAuthenticated ? <>{children}</> : <Navigate to="/login" replace />;
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
        <BrowserRouter>
          <Routes>
            <Route path="/login" element={<LoginPage />} />
            <Route path="/forgot-password" element={<ForgotPasswordPage />} />
            <Route path="/reset-password" element={<ResetPasswordPage />} />
            <Route path="/register" element={<RegistrationWithOtp variant="applicant" loginPath="/login" />} />

            {/* Authed publisher shell: sidebar + header wrap the routed content. */}
            <Route
              element={
                <RequireAuth>
                  <DashboardLayout />
                </RequireAuth>
              }
            >
              {/* Publish journey: publishable projects → compose a paper → human-approve & publish → preview/export. */}
              <Route path="/dashboard" element={<Navigate to="/dashboard/papers" replace />} />
              <Route path="/dashboard/papers" element={<PublishablePapersList />} />
              <Route path="/dashboard/governance" element={<GovernancePage />} />
              {/* "compose" is a static segment so it outranks the dynamic :paperId route below. */}
              <Route path="/dashboard/papers/:projectId/compose" element={<PaperComposerPage />} />
              <Route
                path="/dashboard/papers/:projectId/:paperId"
                element={
                  <Suspense fallback={<div style={{ padding: 24 }}>Đang tải…</div>}>
                    <PaperPreviewPage />
                  </Suspense>
                }
              />
              {/* Sidebar targets whose feature pages are not built yet → ComingSoon. */}
              <Route path="/dashboard/notifications" element={<ComingSoonPage />} />
              <Route path="/dashboard/help" element={<ComingSoonPage />} />
            </Route>

            <Route path="/" element={<Navigate to="/dashboard" replace />} />
            <Route path="*" element={<Navigate to="/dashboard" replace />} />
          </Routes>
        </BrowserRouter>
        <Toaster />
      </AuthProvider>
    </QueryClientProvider>
  );
}
