import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
import { type BreadcrumbItem } from '@/types';
import { type ReactNode } from 'react';
import FlashToaster from '@/components/FlashToaster';
import { usePage } from "@inertiajs/react";
import useAuthorization, { type CanFunction } from '@/hooks/useAuthorization';
import useTranslation, { type TranslateFunction } from '@/hooks/useTranslation';
import { SocketProviderBridge } from '@/components/SocketProviderBridge';
import useTenantAccess, { type TenantAccessFunction } from '@/hooks/useTenantAccess';
import { AddOnProvider } from '@/hooks/use-addons';

interface PageProps {
    translations: Record<string, string>;
    current_locale: string;
    [key: string]: any;
}

declare global {
    interface Window {
        can: CanFunction;
        tenantAccess: TenantAccessFunction;
        __: TranslateFunction;
    }
}

interface AppLayoutProps {
    children: ReactNode;
    breadcrumbs?: BreadcrumbItem[];
    title?: string;
}

export default function AppLayout({ children, breadcrumbs, ...props }: AppLayoutProps) {
    const { can } = useAuthorization();
    const { __ } = useTranslation();
    const { tenantAccess } = useTenantAccess();

    // Set up global functions for use in non-React code
    if (typeof window !== 'undefined') {
        window.can = can;
        window.__ = __;
        window.tenantAccess = tenantAccess;
    }

    return (
        <AddOnProvider>
            <SocketProviderBridge>
                <FlashToaster />
                <AppLayoutTemplate breadcrumbs={breadcrumbs} {...props}>
                    {children}
                </AppLayoutTemplate>
            </SocketProviderBridge>
        </AddOnProvider>
    );
}