// frontend/src/components/Layout/Layout.jsx

import { useEffect, useState } from 'react';
import { Outlet } from 'react-router-dom';
import { getToken } from '../../services/api';
import ThemeButton from "../UI/ThemeButton";
import Navbar from './Navbar';

export default function Layout({ darkMode, setDarkMode }) {
    const [isAdmin, setIsAdmin] = useState(!!getToken());
    const [navTitle, setNavTitle] = useState('');
    const [navSubtitle, setNavSubtitle] = useState('');
    const [showSettings, setShowSettings] = useState(false);

    useEffect(() => {
        if (navTitle) {
            document.title = `${navTitle} | VolleyManager`;
        } else {
            document.title = 'VolleyManager';
        }
    }, [navTitle]);

    const handleLogout = () => {
        localStorage.removeItem('volleyToken');
        window.location.reload();
    };

    return (
        <div className="fixed inset-0 bg-zinc-50 dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 transition-colors selection:bg-orange-500/30 flex flex-col overflow-hidden print:static print:overflow-visible print:h-auto print:bg-white print:text-black">
            <div className="print:hidden shrink-0">
                <Navbar
                    title={navTitle}
                    subtitle={navSubtitle}
                    isAdmin={isAdmin}
                    onLogout={handleLogout}
                />
            </div>

            <main className="flex-1 overflow-hidden relative flex flex-col print:overflow-visible print:h-auto print:block">
                <Outlet context={{ setNavTitle, setNavSubtitle, isAdmin, showSettings, setShowSettings }} />
            </main>

            <ThemeButton darkMode={darkMode} setDarkMode={setDarkMode} />
        </div>
    );
}