import { createInertiaApp } from '@inertiajs/vue3';
import { initializeTheme } from '@/composables/useAppearance';
import AppLayout from '@/layouts/AppLayout.vue';
import AuthLayout from '@/layouts/AuthLayout.vue';
import SettingsLayout from '@/layouts/settings/Layout.vue';
import AdminLayout from '@/layouts/AdminLayout.vue'; // Import the new AdminLayout
import { createApp, h } from 'vue';

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

createInertiaApp({
    title: (title) => (title ? `${title} - ${appName}` : appName),
    resolve: (name) => {
        const pages = import.meta.glob('./pages/**/*.vue', { eager: true });
        let page: any = pages[`./pages/${name}.vue`];

        if (page && page.default) {
            if (name.startsWith('auth/')) {
                page.default.layout = page.default.layout || AuthLayout;
            } else if (name.startsWith('settings/')) {
                page.default.layout = page.default.layout || [
                    AppLayout,
                    SettingsLayout,
                ];
            } else if (name.startsWith('Admin/')) {
                page.default.layout = page.default.layout || AdminLayout; // Use AdminLayout for admin pages
            } else if (
                [
                    'Welcome',
                    'Datenschutz',
                    'AGB',
                    'Impressum',
                    'ResponsibleGaming',
                    'Dashboard',
                ].includes(name)
            ) {
                // For Dashboard and public pages, let's explicitly use the AppLayout if it's Dashboard
                if (name === 'Dashboard') {
                    page.default.layout = page.default.layout || AdminLayout; // Dashboard also uses AdminLayout
                }
            } else {
                page.default.layout = page.default.layout || AppLayout;
            }
        }
        return page;
    },
    setup({ el, App, props, plugin }) {
        const app = createApp({ render: () => h(App, props) }).use(plugin);

        // Nur im Browser mounten (wenn el vorhanden ist)
        if (el) {
            app.mount(el);
        }

        return app;
    },
    progress: {
        color: '#4B5563',
    },
});

// Theme-Initialisierung nur im Browser
if (typeof window !== 'undefined') {
    initializeTheme();
}