import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { Toaster } from 'react-hot-toast';

import HomePage from './pages/HomePage';
import LoginPage from './pages/LoginPage';
import AuthCallbackPage from './pages/AuthCallbackPage';
import Api60sPage from './pages/Api60sPage';
import Api60sItemPage from './pages/Api60sItemPage';
import SmallGamePage from './pages/SmallGamePage';
import AiModelPage from './pages/AiModelPage';
import UserProfilePage from './pages/UserProfilePage';
import AdminPage from './pages/AdminPage';
import ToolboxPage from './pages/ToolboxPage';

import Header from './components/Header';
import Navigation from './components/Navigation';
import Footer from './components/Footer';
import ParticleEffect from './components/ParticleEffect';
import RandomSiteBackground from './components/RandomSiteBackground';
import ScrollToTop from './components/ScrollToTop';

import { UserProvider } from './contexts/UserContext';

import './styles/index.css';

function App() {
  return (
    <UserProvider>
      <Router>
        <ScrollToTop />
        <RandomSiteBackground />
        <div className="relative z-[1] min-h-screen flex flex-col bg-transparent">
          <Header />
          <main className="flex-1 p-0 m-0">
            <Routes>
              <Route path="/" element={<HomePage />} />
              <Route path="/login" element={<LoginPage />} />
              <Route path="/auth/callback" element={<AuthCallbackPage />} />
              <Route path="/60sapi" element={<Api60sPage />} />
              <Route path="/60sapi/:itemId" element={<Api60sItemPage />} />
              <Route path="/smallgame" element={<SmallGamePage />} />
              <Route path="/aimodel" element={<AiModelPage />} />
              <Route path="/toolbox" element={<ToolboxPage />} />
              <Route path="/profile" element={<UserProfilePage />} />
              <Route path="/admin" element={<AdminPage />} />
              <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
          </main>
          <Navigation />
          <Footer />

          <Toaster
            position="top-center"
            toastOptions={{
              duration: 3000,
              style: {
                background: '#333',
                color: '#fff',
                borderRadius: '10px',
                padding: '16px',
                fontSize: '14px',
              },
              success: { iconTheme: { primary: '#4ade80', secondary: '#fff' } },
              error: { iconTheme: { primary: '#ef4444', secondary: '#fff' } },
            }}
          />

          <ParticleEffect />
        </div>
      </Router>
    </UserProvider>
  );
}

export default App;
