import { AppContent } from '@admin/components/app-content';
import { AppShell } from '@admin/components/app-shell';
import { AdminSidebar } from '@admin/components/admin-sidebar';
import { type BreadcrumbItem } from '@admin/types';
import { usePage } from '@inertiajs/react';
import { type PropsWithChildren, useEffect } from 'react';
import AdminHeader from './admin-header';
import FlashToaster from '@admin/components/FlashToaster';
import useAdminAuthorization from '@admin/hooks/useAdminAuthorization';

export default function AdminLayout({ children, breadcrumbs = [] }: PropsWithChildren<{ breadcrumbs?: BreadcrumbItem[] }>) {
    // Make permission helper available globally for admin routes
    // Admin users have wildcard '*' permission which grants all access
    window.can = useAdminAuthorization().can;

    const { personalizer } = usePage().props as any;
    const branding = personalizer?.branding ?? {};

    // Sync brand colors from DB personalizer settings to CSS variables
    useEffect(() => {
        const primary = branding.primary_color;
        const secondary = branding.secondary_color;

        if (primary) {
            document.documentElement.style.setProperty('--color-primary', primary);
            document.documentElement.style.setProperty('--primary', primary);
            document.documentElement.style.setProperty('--color-brand', primary);
            document.documentElement.style.setProperty('--brand', primary);
        }
        if (secondary) {
            document.documentElement.style.setProperty('--color-secondary', secondary);
            document.documentElement.style.setProperty('--secondary', secondary);
            document.documentElement.style.setProperty('--color-brand-secondary', secondary);
            document.documentElement.style.setProperty('--brand-secondary', secondary);
        }
    }, [branding.primary_color, branding.secondary_color]);

    // Update favicon from personalizer settings
    useEffect(() => {
        const faviconUrl = branding.default_favicon;
        if (!faviconUrl) return;

        // Update or create favicon link tags
        const updateFavicon = (rel: string, type?: string) => {
            let link = document.querySelector<HTMLLinkElement>(`link[rel="${rel}"]`);
            if (!link) {
                link = document.createElement('link');
                link.rel = rel;
                document.head.appendChild(link);
            }
            link.href = faviconUrl;
            if (type) link.type = type;
        };

        updateFavicon('icon');
        updateFavicon('shortcut icon');
    }, [branding.default_favicon]);

    return (
        <>
            <FlashToaster />
            <AppShell variant="sidebar">
                <AppContent variant="sidebar" className="flex h-screen flex-col overflow-hidden">
                    {/* Main Content Area */}
                    <div className="flex flex-1 overflow-hidden transition-all duration-200">
                        <div className="hidden md:block">
                            <AdminSidebar />
                        </div>

                        {/* Right: header + page content */}
                        <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background">
                            {/* Header */}
                            <AdminHeader breadcrumbs={breadcrumbs} />

                            {/* Content area */}
                            <div className="flex flex-1 overflow-hidden border-t bg-background">
                                {/* Main content */}
                                <div className="relative w-full flex-1">
                                    <div className="no-scrollbar h-full overflow-y-auto">
                                        {children}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </AppContent>
            </AppShell>
        </>
    );
}