import {Link, Route, Routes} 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";

function App() {
    const {t, i18n} = useTranslation();
    const [isDarkMode, setIsDarkMode] = useState(true);

    // Sync React state with the HTML class required by Tailwind CSS
    useEffect(() => {
        if (isDarkMode) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    }, [isDarkMode]);

    const toggleLanguage = () => {
        if (i18n.language === 'de') {
            i18n.changeLanguage('en').then(r => console.log("Changed language to 'en'"));
        } else {
            i18n.changeLanguage('de').then(r => console.log("Changed language to 'de'"));
        }
    };

    return (
        <div className="min-h-screen flex flex-col bg-slate-50 dark:bg-slate-950 transition-colors duration-300 font-sans">
            <header className="p-4 flex justify-between items-center border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 sticky top-0 z-50">
                <Link to="/" className="font-black text-blue-600 dark:text-blue-500 text-2xl flex items-center tracking-tight">
                    <i className="mdi mdi-controller mr-2 text-3xl"></i> Game Log
                </Link>

                <div className="flex gap-5 items-center">
                    <button onClick={toggleLanguage} className="text-sm font-bold text-slate-600 dark:text-slate-300 hover:text-blue-500 transition-colors">
                        {i18n.language.toUpperCase()}
                    </button>
                    <button onClick={() => {
                        setIsDarkMode(!isDarkMode);
                    }} className="text-xl text-slate-600 dark:text-slate-300 hover:text-blue-500 transition-colors">
                        <i className={isDarkMode ? "mdi mdi-weather-sunny" : "mdi mdi-weather-night"}></i>
                    </button>
                    <Link to="/login" className="bg-blue-600 hover:bg-blue-500 text-white px-5 py-2 rounded-lg font-bold transition-all shadow-md shadow-blue-500/20">
                        {t('login')}
                    </Link>
                </div>
            </header>

            <main className="grow flex flex-col">
                <Routes>
                    <Route path="/" element={<LandingPage/>}/>
                    <Route path="/login" element={<LoginPage/>}/>
                    <Route path="/dashboard" element={<Dashboard/>}/>
                    <Route path="/impressum" element={<ImprintPage/>}/>
                </Routes>
            </main>

            <footer className="p-6 text-center border-t border-slate-200 dark:border-slate-800 text-slate-500 dark:text-slate-400 text-sm bg-white dark:bg-slate-900">
                <Link to="/impressum" className="hover:text-blue-500 font-semibold transition-colors">
                    {t('IMPRINT.TITLE')}
                </Link>
            </footer>
        </div>
    );
}

export default App;