import {Link, Route, Routes, useLocation, useNavigate} from 'react-router-dom';
import {useTranslation} from 'react-i18next';
import {useEffect, useState} from 'react';

import LandingPage from './pages/LandingPage';
import LoginPage from './pages/LoginPage';
import ImprintPage from './pages/ImprintPage';
import Dashboard from "./pages/Dashboard.jsx";
import RegistrationPage from './pages/RegistrationPage.jsx';
import SettingsPage from './pages/SettingsPage.jsx';
import AdminHintsPage from './pages/AdminHintsPage.jsx';
import AdminUsersPage from './pages/AdminUsersPage.jsx';
import GameLibrary from './pages/GameLibrary.jsx';
import GameDetail from './pages/GameDetail.jsx';
import WishlistPage from './pages/WishlistPage.jsx';
import PlayNextPage from './pages/PlayNextPage.jsx';
import StatsPage from './pages/StatsPage.jsx';
import ImportPage from './pages/ImportPage.jsx';
import PublicProfilePage from './pages/PublicProfilePage.jsx';
import AppHeader from './components/AppHeader.jsx';
import {Toaster} from '@/components/ui/sonner';
import {TooltipProvider} from '@/components/ui/tooltip';
import PageBackground from './components/PageBackground.jsx';
import {usePreferences} from './context/PreferencesContext.jsx';
import {clearSession, hasSession} from './utils/auth.js';
import {logout} from './utils/api.js';

function App() {
    const {t} = useTranslation();
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const {appearance, syncPreferences, resetAppearance} = usePreferences();

    // Hooks for routing
    const navigate = useNavigate();
    const location = useLocation();

    useEffect(() => {
        // No local expiry check here: a 401 from the backend ends the session (useSessionExpired), and a browser
        // clock that runs ahead would otherwise end it silently.
        setIsAuthenticated(hasSession());
    }, [location]);

    // On login and on page load; the cached look shows until Auth answers.
    useEffect(() => {
        if (isAuthenticated) syncPreferences();
    }, [isAuthenticated, syncPreferences]);

    // Waits for Auth: a late logout answer would clear the cookies of a login that came after it.
    const handleLogout = async () => {
        await logout();
        clearSession();
        resetAppearance();
        setIsAuthenticated(false);
        navigate('/login');
    };

    return (
        <TooltipProvider>
            {/* isolate: the background layer sits behind the content but in front of this div's own background. */}
            <div className="isolate min-h-screen flex flex-col bg-background text-foreground font-sans">
                {/* A public profile shows the owner's background instead. */}
                {isAuthenticated && !location.pathname.startsWith('/u/') && <PageBackground appid={appearance.backgroundAppid}/>}
                <AppHeader isAuthenticated={isAuthenticated} onLogout={handleLogout}/>

                <main className="grow flex flex-col">
                    <Routes>
                        <Route path="/" element={<LandingPage/>}/>
                        <Route path="/login" element={<LoginPage/>}/>
                        <Route path="/register" element={<RegistrationPage/>}/>
                        <Route path="/dashboard" element={<Dashboard/>}/>
                        <Route path="/library" element={<GameLibrary/>}/>
                        <Route path="/library/:appid" element={<GameDetail/>}/>
                        <Route path="/wishlist" element={<WishlistPage/>}/>
                        <Route path="/play-next" element={<PlayNextPage/>}/>
                        <Route path="/stats" element={<StatsPage/>}/>
                        <Route path="/import" element={<ImportPage/>}/>
                        <Route path="/u/:name" element={<PublicProfilePage/>}/>
                        <Route path="/settings" element={<SettingsPage/>}/>
                        <Route path="/admin/users" element={<AdminUsersPage/>}/>
                        <Route path="/admin/hints" element={<AdminHintsPage/>}/>
                        <Route path="/impressum" element={<ImprintPage/>}/>
                    </Routes>
                </main>

                <footer className="border-t py-6 text-center text-sm text-muted-foreground">
                    <Link to="/impressum" className="font-medium hover:text-foreground transition-colors">
                        {t('IMPRINT.TITLE')}
                    </Link>
                </footer>
            </div>
            <Toaster richColors position="bottom-right"/>
        </TooltipProvider>
    );
}

export default App;