import { useEffect } from 'react';
import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
import { useAuth } from './store/AuthContext';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Protected from './components/Protected';
import { BadgeCelebration } from './components/BadgeCelebration';

import Home from './pages/Home';
import Login from './pages/Login';
import Register from './pages/Register';
import Games from './pages/Games';
import GamePage from './pages/GamePage';
import Account from './pages/Account';
import Nations from './pages/Nations';
import AvatarPage from './pages/AvatarPage';
import Leaderboard from './pages/Leaderboard';
import Support from './pages/Support';
import Admin from './pages/Admin';
import NotFound from './pages/NotFound';

// Tüm alt sayfaların üzerinde navbar + footer
function Layout({ children }) {
  const { pathname } = useLocation();
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);
  return (
    <>
      <Navbar />
      <div className="page">{children}</div>
      <Footer />
    </>
  );
}

export default function App() {
  const { badgeEvent, avatarEvent } = useAuth();

  return (
    <>
      <div className="bg-fx" aria-hidden="true" />
      <Routes>
        <Route path="/" element={<Layout><Home /></Layout>} />
        <Route path="/login" element={<Layout><Login /></Layout>} />
        <Route path="/register" element={<Layout><Register /></Layout>} />
        <Route path="/games" element={<Layout><Games /></Layout>} />
        <Route path="/game/:slug" element={<Layout><GamePage /></Layout>} />
        <Route
          path="/account"
          element={
            <Layout>
              <Protected>
                <Account />
              </Protected>
            </Layout>
          }
        />
        <Route path="/nations" element={<Layout><Nations /></Layout>} />
        <Route
          path="/nations/avatar"
          element={
            <Layout>
              <Protected>
                <AvatarPage />
              </Protected>
            </Layout>
          }
        />
        <Route path="/leaderboard" element={<Layout><Leaderboard /></Layout>} />
        <Route path="/support" element={<Layout><Support /></Layout>} />
        <Route path="/admin" element={<Admin />} />
        <Route path="*" element={<Layout><NotFound /></Layout>} />
      </Routes>
      {/* Socket rozet/avatar kutlamaları */}
      <BadgeCelebration badgeEvent={badgeEvent} avatarEvent={avatarEvent} />
    </>
  );
}