import { AppContent } from '@/components/app-content';
import { AppShell } from '@/components/app-shell';
import { AppSidebar } from '@/components/app-sidebar';
import { AppSidebarHeader } from '@/components/app-sidebar-header';
import { Spinner } from '@/components/ui/spinner';
import { type BreadcrumbItem } from '@/types';
import { router } from '@inertiajs/react';
import { type PropsWithChildren, useEffect, useRef, useState } from 'react';

export default function AppSidebarLayout({
    children,
    breadcrumbs = [],
}: PropsWithChildren<{ breadcrumbs?: BreadcrumbItem[] }>) {
    const [navigating, setNavigating] = useState(false);
    const timeout = useRef<ReturnType<typeof setTimeout>>(undefined);

    useEffect(() => {
        const offStart = router.on('start', () => {
            timeout.current = setTimeout(() => setNavigating(true), 150);
        });
        const offFinish = router.on('finish', () => {
            clearTimeout(timeout.current);
            setNavigating(false);
        });
        return () => {
            clearTimeout(timeout.current);
            offStart();
            offFinish();
        };
    }, []);

    return (
        <AppShell variant="sidebar">
            <AppSidebar />
            <AppContent variant="sidebar" className="overflow-x-hidden">
                <AppSidebarHeader breadcrumbs={breadcrumbs} />
                <div className="relative flex-1">
                    {navigating && (
                        <div className="absolute inset-0 z-10 flex items-start justify-center bg-background/60 pt-32 backdrop-blur-[1px]">
                            <Spinner className="size-8 text-foreground/50" />
                        </div>
                    )}
                    {children}
                </div>
            </AppContent>
        </AppShell>
    );
}