import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
import { AuthProvider } from './contexts/AuthContext';
import { ProtectedRoute } from './components/shared/ProtectedRoute';
import { PublicLayout } from './components/layout/PublicLayout';
import { PageLoader } from './components/shared/PageLoader';

// ── Public Pages (lazy-loaded) ────────────────────────────────────────────────

const HomePage        = lazy(() => import('./pages/public/HomePage'));
const StudioPage      = lazy(() => import('./pages/public/StudioPage'));
const EventsPage      = lazy(() => import('./pages/public/EventsPage'));
const ForumPage       = lazy(() => import('./pages/public/ForumPage'));
const ThreadPage      = lazy(() => import('./pages/public/ThreadPage'));
const BugReportPage   = lazy(() => import('./pages/public/BugReportPage'));
const BugDetailPage   = lazy(() => import('./pages/public/BugDetailPage'));
const AccountPage     = lazy(() => import('./pages/public/AccountPage'));
const LoginPage       = lazy(() => import('./pages/public/LoginPage'));
const RegisterPage    = lazy(() => import('./pages/public/RegisterPage'));
const NotFoundPage    = lazy(() => import('./pages/public/NotFoundPage'));

// ── App ────────────────────────────────────────────────────────────────────────

export default function App() {
  return (
    <AuthProvider>
      <Suspense fallback={<PageLoader />}>
        <Routes>
          {/* Public Routes */}
          <Route element={<PublicLayout />}>
            <Route index element={<HomePage />} />
            <Route path="studio" element={<StudioPage />} />
            <Route path="events" element={<EventsPage />} />
            <Route path="forum" element={<ForumPage />} />
            <Route path="forum/thread/:id" element={<ThreadPage />} />
            <Route path="bugs" element={<BugReportPage />} />
            <Route path="bugs/:id" element={<BugDetailPage />} />
            <Route
              path="account"
              element={
                <ProtectedRoute>
                  <AccountPage />
                </ProtectedRoute>
              }
            />
            <Route path="login" element={<LoginPage />} />
            <Route path="register" element={<RegisterPage />} />
            <Route path="*" element={<NotFoundPage />} />
          </Route>
        </Routes>
      </Suspense>
    </AuthProvider>
  );
}