import React, { lazy, Suspense } from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { AdminSessionProvider } from './contexts/AdminSessionContext.jsx';
import { getHostConfig } from './Utils/hostDetection.js';
import ErrorBoundary from './Components/ComponentUtils/ErrorBoundary.js';

// Always loaded (public + internal)
import MultiUploadPage from './Components/Pages/MultiUploadPage';
import ManagementPortalPage from './Components/Pages/ManagementPortalPage';
import ErrorPage from './Components/Pages/ErrorPage.js';

// Lazy loaded (internal only) - Code Splitting für Performance
const SlideshowPage = lazy(() => import('./Components/Pages/SlideshowPage'));
const GroupsOverviewPage = lazy(() => import('./Components/Pages/GroupsOverviewPage'));
const PublicGroupImagesPage = lazy(() => import('./Components/Pages/PublicGroupImagesPage'));
const ModerationGroupsPage = lazy(() => import('./Components/Pages/ModerationGroupsPage'));
const ModerationGroupImagesPage = lazy(() => import('./Components/Pages/ModerationGroupImagesPage'));

/**
 * Protected Route Component
 * Shows 403 page if accessed from public host
 */
const ProtectedRoute = ({ children }) => {
  const hostConfig = getHostConfig();
  
  if (hostConfig.isPublic) {
    // Show 403 - feature not available on public
    return <ErrorPage errorCode="403" />;
  }
  
  return children;
};

/**
 * Loading Fallback für Code Splitting
 */
const LoadingFallback = () => (
  <div style={{ 
    display: 'flex', 
    justifyContent: 'center', 
    alignItems: 'center', 
    height: '100vh',
    flexDirection: 'column',
    gap: '1rem'
  }}>
    <div className="spinner"></div>
    <p>Lädt...</p>
  </div>
);

function App() {
  const hostConfig = getHostConfig();

  return (
    <ErrorBoundary>
      <AdminSessionProvider>
        <Router>
          <Suspense fallback={<LoadingFallback />}>
            <Routes>
              {/* Public Routes - immer verfügbar */}
              <Route path="/" element={<MultiUploadPage />} />
              <Route path="/manage/:token" element={<ManagementPortalPage />} />

              {/* Error Pages */}
              <Route path="/error/403" element={<ErrorPage errorCode="403" />} />
              <Route path="/error/404" element={<ErrorPage errorCode="404" />} />
              <Route path="/error/500" element={<ErrorPage errorCode="500" />} />
              <Route path="/error/502" element={<ErrorPage errorCode="502" />} />
              <Route path="/error/503" element={<ErrorPage errorCode="503" />} />

            {/* Internal Only Routes - geschützt durch ProtectedRoute */}
            <Route 
              path="/slideshow" 
              element={
                <ProtectedRoute>
                  <SlideshowPage />
                </ProtectedRoute>
              } 
            />
            <Route 
              path="/groups/:groupId" 
              element={
                <ProtectedRoute>
                  <PublicGroupImagesPage />
                </ProtectedRoute>
              } 
            />
            <Route 
              path="/groups" 
              element={
                <ProtectedRoute>
                  <GroupsOverviewPage />
                </ProtectedRoute>
              } 
            />
            <Route 
              path="/moderation" 
              element={
                <ProtectedRoute>
                  <ModerationGroupsPage />
                </ProtectedRoute>
              } 
            />
            <Route 
              path="/moderation/groups/:groupId" 
              element={
                <ProtectedRoute>
                  <ModerationGroupImagesPage />
                </ProtectedRoute>
              } 
            />

            {/* 404 / Not Found */}
            <Route path="*" element={<ErrorPage errorCode="404" />} />
          </Routes>
        </Suspense>
      </Router>
    </AdminSessionProvider>
    </ErrorBoundary>
  );
}

export default App;