import { Link, Navigate, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import SearchResults from "./pages/SearchResults";
import TechniquePage from "./pages/TechniquePage";
import CreatorsBrowse from "./pages/CreatorsBrowse";
import CreatorDetail from "./pages/CreatorDetail";
import TopicsBrowse from "./pages/TopicsBrowse";
import ReviewQueue from "./pages/ReviewQueue";
import MomentDetail from "./pages/MomentDetail";
import AdminReports from "./pages/AdminReports";
import ModeToggle from "./components/ModeToggle";

export default function App() {
  return (
    <div className="app">
      <header className="app-header">
        <Link to="/" className="app-header__brand">
          <h1>Chrysopedia</h1>
        </Link>
        <div className="app-header__right">
          <nav className="app-nav">
            <Link to="/">Home</Link>
            <Link to="/topics">Topics</Link>
            <Link to="/creators">Creators</Link>
            <Link to="/admin/review">Review</Link>
            <Link to="/admin/reports">Reports</Link>
          </nav>
          <ModeToggle />
        </div>
      </header>

      <main className="app-main">
        <Routes>
          {/* Public routes */}
          <Route path="/" element={<Home />} />
          <Route path="/search" element={<SearchResults />} />
          <Route path="/techniques/:slug" element={<TechniquePage />} />

          {/* Browse routes */}
          <Route path="/creators" element={<CreatorsBrowse />} />
          <Route path="/creators/:slug" element={<CreatorDetail />} />
          <Route path="/topics" element={<TopicsBrowse />} />

          {/* Admin routes */}
          <Route path="/admin/review" element={<ReviewQueue />} />
          <Route path="/admin/review/:momentId" element={<MomentDetail />} />
          <Route path="/admin/reports" element={<AdminReports />} />

          {/* Fallback */}
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </main>
    </div>
  );
}