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 { DatasetsListPage } from './pages/DatasetsListPage';
import { DatasetCreatePage } from './pages/DatasetCreatePage';
import { DatasetDetailPage } from './pages/DatasetDetailPage';
import { DatasetSettingsPage } from './pages/DatasetSettingsPage';
import { DataPage } from './features/project-workflow/presentation/DataPage';
import { NnunetOrganizerPage } from './features/data-import/presentation/nnunet/NnunetOrganizerPage';
import { ProjectsListPage } from './pages/ProjectsListPage';
import { CockpitPage } from './pages/CockpitPage';
import { ProposalFormPage } from './pages/ProposalFormPage';
import { ComingSoonPage } from './pages/ComingSoonPage';
import { VideoViewerDemoPage } from './pages/VideoViewerDemoPage';
import { ImageSequenceDemoPage } from './pages/ImageSequenceDemoPage';
import { DashboardLayout } from './layouts/DashboardLayout';

// VTK-heavy; lazy so the viewer chunk loads only when a task is opened.
const AnnotationTool = lazy(() => import('./features/project-workflow/presentation/AnnotationTool'));

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 PI shell: sidebar + header wrap the routed content. */}
            <Route
              element={
                <RequireAuth>
                  <DashboardLayout />
                </RequireAuth>
              }
            >
              <Route path="/dashboard" element={<DatasetsListPage />} />
              {/* Research-project journey: projects list → proposal → (admin approve) → cockpit. */}
              <Route path="/dashboard/projects" element={<ProjectsListPage />} />
              <Route path="/dashboard/projects/:id" element={<CockpitPage />} />
              <Route path="/dashboard/proposals/new" element={<ProposalFormPage />} />
              <Route path="/dashboard/proposals/:id" element={<ProposalFormPage />} />
              <Route path="/dashboard/datasets/new" element={<DatasetCreatePage />} />
              <Route path="/dashboard/datasets/:id" element={<DatasetDetailPage />} />
              <Route path="/dashboard/datasets/:id/settings" element={<DatasetSettingsPage />} />
              <Route path="/dashboard/datasets/:id/organize" element={<NnunetOrganizerPage />} />
              <Route path="/dashboard/datasets/:id/tasks" element={<DataPage />} />
              <Route
                path="/dashboard/datasets/:id/tasks/:taskId"
                element={
                  <Suspense fallback={<div style={{ padding: 24 }}>Đang tải trình chú thích…</div>}>
                    <AnnotationTool />
                  </Suspense>
                }
              />
              {/* Sidebar targets whose feature pages are not built yet → ComingSoon. */}
              <Route path="/dashboard/data/text" element={<ComingSoonPage />} />
              <Route path="/dashboard/data/audio" element={<ComingSoonPage />} />
              <Route path="/dashboard/video-viewer" element={<VideoViewerDemoPage />} />
              <Route path="/dashboard/image-viewer" element={<ImageSequenceDemoPage />} />
              <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>
  );
}
