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

import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createRoot } from 'react-dom/client';
import { route as routeFn } from 'ziggy-js';
import { initializeTheme } from './hooks/use-appearance';

import './i18n';
import i18n from './i18n';

declare global {
    function route(name: string, params?: Record<string, unknown> | unknown, absolute?: boolean): string;
}

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

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
    setup({ el, App, props }) {
        const root = createRoot(el);

        // Initialise Ziggy avec le prop partagé par Inertia
        const ziggyConfig = (props.initialPage.props as any).ziggy;
        (window as any).route = (name: string, params?: Record<string, unknown>, absolute?: boolean) =>
            routeFn(name, params, absolute, ziggyConfig);

        // Sync language with backend
        const initialProps = props.initialPage.props as any;
        if (initialProps.locale) {
            i18n.changeLanguage(initialProps.locale);
            document.documentElement.dir = initialProps.locale === 'ar' ? 'rtl' : 'ltr';
        }

        root.render(<App {...props} />);
    },
    progress: {
        color: '#4B5563',
    },
});

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