import { useState, useEffect } from 'react';
import { Outlet, useNavigate } from '@tanstack/react-router';
import { useAuth } from '@/contexts/auth-context';
import { Sidebar } from '@/components/layout/Sidebar';
import { MobileBar } from '@/components/layout/MobileBar';
import { SidebarOverlay } from '@/components/layout/SidebarOverlay';

export function AppLayout() {
    const { isAuthenticated, status } = useAuth();
    const navigate = useNavigate();
    const [isMenuOpen, setIsMenuOpen] = useState(false);

    useEffect(() => {
        if (status === 'guest') {
            void navigate({ to: '/login' });
        }
    }, [status, navigate]);

    if (!isAuthenticated) {
        return null;
    }

    return (
        <div className="flex min-h-svh">
            <div className="hidden md:flex">
                <Sidebar />
            </div>
            {isMenuOpen && <SidebarOverlay onClose={() => setIsMenuOpen(false)} />}
            <div className="flex flex-1 flex-col">
                <MobileBar onMenuOpen={() => setIsMenuOpen(true)} />
                <main className="flex-1 p-6" data-testid="app-main">
                    <Outlet />
                </main>
            </div>
        </div>
    );
}