import { createInertiaApp } from '@inertiajs/react';
import type { ComponentType } from '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 * as routes from '@/routes';
import { prefixUrl } from '@/lib/utils';

// Dynamic subfolder route alignment
Object.values(routes).forEach((route: any) => {
    if (route && route.definition && typeof route.definition.url === 'string') {
        route.definition.url = prefixUrl(route.definition.url);
    }
});

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
const pages = import.meta.glob<{ default: ComponentType }>('./pages/**/*.tsx', {
    eager: true,
});

const getLayout = (name: string) => {
    switch (true) {
        case name === 'welcome':
            return null;
        case name.startsWith('auth/'):
            return AuthLayout;
        case name.startsWith('settings/'):
            return [AppLayout, SettingsLayout];
        default:
            return AppLayout;
    }
};

const withApp = (app: React.ReactNode) => (
    <TooltipProvider delayDuration={0}>
        {app}
        <Toaster />
    </TooltipProvider>
);

createInertiaApp({
    title: (title) => (title ? `${title} - ${appName}` : appName),
    layout: getLayout,
    resolve: (name) => pages[`./pages/${name}.tsx`],
    strictMode: true,
    withApp,
    progress: {
        color: '#4B5563',
    },
});

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