import { createInertiaApp, router } from '@inertiajs/react';
import { Toaster } from '@/components/ui/sonner';
import { TooltipProvider } from '@/components/ui/tooltip';
import { initializeTheme } from '@/hooks/use-appearance';
import AppLayout from '@/layouts/app-layout';
import AuthLayout from '@/layouts/auth-layout';
import SettingsLayout from '@/layouts/settings/layout';
import SiteLayout from '@/layouts/site-layout';

const appName = import.meta.env.VITE_APP_NAME || 'JanjiMy';

// Public JanjiMy pages use the ported design; auth/settings/admin keep the starter-kit shell.
const SITE_PAGES = [
    'welcome',
    'home',
    'catalog',
    'template',
    'legal',
    'builder',
    'documents',
    'draft',
    'support',
    'error',
];

// Keep <html lang> in sync with the UI language (admin pages are always Bahasa Melayu).
router.on('navigate', (e) => {
    const p = e.detail.page;

    document.documentElement.lang =
        p.component.startsWith('admin/') || p.props.lang !== 'en' ? 'ms' : 'en';
});

// Back/Forward to the builder: never mount it from stale history props (edits made before a
// re-fetch landed were wiped by the remount). Registered before createInertiaApp, so this runs
// ahead of Inertia's own popstate handler and stops it; the current page stays until the fresh
// builder arrives. Relies on unencrypted history (state.page is a plain object).
window.addEventListener('popstate', (e) => {
    if (e.state?.page?.component !== 'builder') {
        return;
    }
    e.stopImmediatePropagation();
    router.visit(window.location.href, { replace: true, preserveState: false });
});

void createInertiaApp({
    title: (title) => (title ? `${title} - ${appName}` : appName),
    layout: (name) => {
        switch (true) {
            case SITE_PAGES.includes(name):
                return SiteLayout;
            case name.startsWith('auth/'):
                return AuthLayout;
            case name.startsWith('settings/'):
                return [AppLayout, SettingsLayout];
            default:
                return AppLayout;
        }
    },
    strictMode: true,
    withApp(app) {
        return (
            <TooltipProvider delayDuration={0}>
                {app}
                <Toaster />
            </TooltipProvider>
        );
    },
    progress: {
        color: '#4B5563',
    },
});

// This will set light / dark mode on load...
initializeTheme();