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

import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createRoot } from 'react-dom/client';
import { AppearanceProvider, initializeTheme } from './hooks/use-appearance';
import AppLayout from './layouts/app/AppLayout';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
import { Toaster } from 'react-hot-toast';
import { ConsentProvider } from './contexts/consent';
import CookieBanner from '@/components/consent/CookieBanner';
import React from 'react';
import { usePage } from '@inertiajs/react';
import { useEffect } from 'react';
import { Sentry, initSentry } from './lib/sentry';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
const InertiaFallback: React.FC = () => (
    <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
        Oberfläche konnte nicht geladen werden.
    </div>
);

const LoadingFallback: React.FC = () => (
    <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
        Lade...
    </div>
);

initSentry('inertia');

const LocaleSync: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    // usePage is only available inside Inertia-provided tree; guard for SSR/raw mounts
    try {
        const { props } = usePage<{ locale?: string }>();

        useEffect(() => {
            if (props.locale && i18n.language !== props.locale) {
                i18n.changeLanguage(props.locale);
            }
        }, [props.locale]);
    } catch (error) {
        // noop – will be hydrated once Inertia provides context
    }

    return <>{children}</>;
};

createInertiaApp({
    title: (title) => title ? `${title} - ${appName}` : appName,
    resolve: (name) =>
        resolvePageComponent(
            `./pages/${name}.tsx`,
            import.meta.glob('./pages/**/*.tsx')
        ).then((page) => {
            const resolved = page as { default?: { layout?: (page: React.ReactNode) => React.ReactNode } };
            if (resolved?.default) {
                const Component = resolved.default;
                if (!Component.layout) {
                    Component.layout = (node: React.ReactNode) => <AppLayout>{node}</AppLayout>;
                }
            }

            return resolved;
        }),
    setup({ el, App, props }) {
        const root = createRoot(el);

        // Sync i18n with initial locale from props
        if (
            props.initialPage &&
            props.initialPage.props &&
            typeof props.initialPage.props.locale === 'string'
        ) {
            i18n.changeLanguage(props.initialPage.props.locale);
        }

        root.render(
            <Sentry.ErrorBoundary fallback={<InertiaFallback />}>
                <AppearanceProvider>
                    <ConsentProvider>
                        <I18nextProvider i18n={i18n}>
                            <React.Suspense fallback={<LoadingFallback />}>
                                <LocaleSync>
                                    <App {...props} />
                                </LocaleSync>
                                <CookieBanner />
                                <Toaster position="top-right" toastOptions={{ duration: 4000 }} />
                            </React.Suspense>
                        </I18nextProvider>
                    </ConsentProvider>
                </AppearanceProvider>
            </Sentry.ErrorBoundary>
        );
    },
    progress: {
        color: '#4B5563',
    },
});

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