import React from 'react';
import { createBrowserRouter, Outlet, useParams } from 'react-router-dom';
import Header from './components/Header';
import BottomNav from './components/BottomNav';
import LandingPage from './pages/LandingPage';
import ProfileSetupPage from './pages/ProfileSetupPage';
import HomePage from './pages/HomePage';
import TaskPickerPage from './pages/TaskPickerPage';
import TaskDetailPage from './pages/TaskDetailPage';
import UploadPage from './pages/UploadPage';
import UploadQueuePage from './pages/UploadQueuePage';
import GalleryPage from './pages/GalleryPage';
import PhotoLightbox from './pages/PhotoLightbox';
import AchievementsPage from './pages/AchievementsPage';
import SlideshowPage from './pages/SlideshowPage';
import SettingsPage from './pages/SettingsPage';
import LegalPage from './pages/LegalPage';
import NotFoundPage from './pages/NotFoundPage';

function HomeLayout() {
  const { slug } = useParams();
  return (
    <div className="pb-16">
      <Header title={slug ? `Event: ${slug}` : 'Fotospiel'} />
      <div className="px-4 py-3">
        <Outlet />
      </div>
      <BottomNav />
    </div>
  );
}

export const router = createBrowserRouter([
  { path: '/', element: <SimpleLayout title="Fotospiel"><LandingPage /></SimpleLayout> },
  { path: '/setup', element: <SimpleLayout title="Profil"><ProfileSetupPage /></SimpleLayout> },
  {
    path: '/e/:slug',
    element: <HomeLayout />,
    children: [
      { index: true, element: <HomePage /> },
      { path: 'tasks', element: <TaskPickerPage /> },
      { path: 'tasks/:taskId', element: <TaskDetailPage /> },
      { path: 'upload', element: <UploadPage /> },
      { path: 'queue', element: <UploadQueuePage /> },
      { path: 'gallery', element: <GalleryPage /> },
      { path: 'photo/:photoId', element: <PhotoLightbox /> },
      { path: 'achievements', element: <AchievementsPage /> },
      { path: 'slideshow', element: <SlideshowPage /> },
    ],
  },
  { path: '/settings', element: <SimpleLayout title="Einstellungen"><SettingsPage /></SimpleLayout> },
  { path: '/legal/:page', element: <SimpleLayout title="Rechtliches"><LegalPage /></SimpleLayout> },
  { path: '*', element: <NotFoundPage /> },
]);

function SimpleLayout({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="pb-16">
      <Header title={title} />
      <div className="px-4 py-3">
        {children}
      </div>
      <BottomNav />
    </div>
  );
}
