import '../css/app.css';

import { createInertiaApp, router } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createRoot } from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { TooltipProvider } from '@/components/ui/tooltip';
import { Toaster } from '@/components/ui/toaster';
import { Toaster as Sonner } from '@/components/ui/sonner';
import { TenantProvider } from '@/contexts/TenantContext';
import { CartProvider } from '@/contexts/CartContext';
import { captureReferralFromUrl } from '@/lib/referral';

const appName = import.meta.env.VITE_APP_NAME || 'UTC';
const queryClient = new QueryClient();

// Trailing brand segment for document titles — must match the server-side
// format in App\Support\Seo ("{page} | {site name}"). On tenant storefronts
// the segment is the tenant company's name, read from the initial page props
// (the tenant is fixed per host, so reading it once at boot is safe).
const siteName = (() => {
    try {
        const page = JSON.parse(document.getElementById('app')?.dataset.page || '{}');
        return page?.props?.tenant?.name || appName;
    } catch {
        return appName;
    }
})();

// Scroll to top on every Inertia navigation (matches lovable's <ScrollToTop /> behavior).
router.on('navigate', () => {
    window.scrollTo(0, 0);
    captureReferralFromUrl();
});

// Capture ?ref= on initial page load before any navigation happens.
captureReferralFromUrl();

createInertiaApp({
    title: (title) => (title ? `${title} | ${siteName}` : siteName),
    resolve: (name) =>
        resolvePageComponent(
            `./pages/${name}.tsx`,
            import.meta.glob('./pages/**/*.tsx'),
        ),
    setup({ el, App, props }) {
        const root = createRoot(el);
        // Server-resolved tenant (or null) shared by HandleInertiaRequests.
        const initialTenant =
            (props.initialPage?.props as { tenant?: import('@/contexts/TenantContext').ServerTenant | null })?.tenant ??
            null;
        root.render(
            <QueryClientProvider client={queryClient}>
                <TooltipProvider>
                    <TenantProvider initialTenant={initialTenant}>
                        <CartProvider>
                            <Toaster />
                            <Sonner />
                            <App {...props} />
                        </CartProvider>
                    </TenantProvider>
                </TooltipProvider>
            </QueryClientProvider>,
        );
    },
    progress: {
        color: 'hsl(24 95% 53%)',
    },
});