import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import ProtectedRoute from './shared/ProtectedRoute';
import BuilderLayout from './builder/components/layout/BuilderLayout';

// Lazy load builder pages (code-split to avoid loading in public sites)
const WizardPage = lazy(() => import('./builder/pages/wizard/WizardPage'));
const PreviewCanvas = lazy(() => import('./builder/pages/preview/PreviewCanvas'));
const SiteDashboard = lazy(() => import('./builder/pages/dashboard/SiteDashboard'));

// Renderer pages (load immediately for public sites)
const SiteRenderer = lazy(() => import('./pages/SiteRenderer'));

// Loading component
const LoadingFallback = () => (
  <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
    <div>Loading...</div>
  </div>
);

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<LoadingFallback />}>
        <Routes>
          {/* Public Site Renderer Routes (No Auth) */}
          <Route path="/:siteId/*" element={<SiteRenderer />} />
          <Route path="/" element={<div>IGNY8 Sites Renderer</div>} />
          
          {/* Builder Routes (Auth Required) */}
          <Route
            path="/builder/*"
            element={
              <ProtectedRoute>
                <BuilderLayout>
                  <Routes>
                    <Route path="/" element={<WizardPage />} />
                    <Route path="preview" element={<PreviewCanvas />} />
                    <Route path="dashboard" element={<SiteDashboard />} />
                    <Route path="*" element={<Navigate to="/builder" replace />} />
                  </Routes>
                </BuilderLayout>
              </ProtectedRoute>
            }
          />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

export default App;