import { createInertiaApp } from '@inertiajs/react';
import createServer from '@inertiajs/react/server';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import ReactDOMServer from 'react-dom/server';
import { ErrorBoundary } from 'react-error-boundary';
import { Toaster } from 'sonner';
import { type RouteName, route } from 'ziggy-js';
import { AxiosProvider } from './plugins/AxiosContext';
import { GA4Provider } from './plugins/GA4Context';
import { MittProvider } from './plugins/MittContext';

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

createServer((page) =>
    createInertiaApp({
        page,
        render: ReactDOMServer.renderToString,
        title: (title) => `${title} - ${appName}`,
        resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
        setup: ({ App, props }) => {
            /* eslint-disable */
            // @ts-expect-error
            global.route<RouteName> = (name, params, absolute) =>
                route(name, params as any, absolute, {
                    // @ts-expect-error
                    ...page.props.ziggy,
                    // @ts-expect-error
                    location: new URL(page.props.ziggy.location),
                });
            /* eslint-enable */

            const app = (
                <ErrorBoundary
                    FallbackComponent={DetailedErrorFallback}
                    onError={(error, errorInfo) => {
                        // Log to console for debugging
                        console.error('Error caught by boundary:', error, errorInfo);

                        // You could also send to an error reporting service here
                        // e.g., Sentry, LogRocket, etc.
                    }}
                    onReset={() => {
                        // Optional: Clear any error state in your app
                        console.log('Error boundary reset');
                    }}
                >
                    <GA4Provider>
                        <MittProvider>
                            <AxiosProvider>
                                <Toaster position="top-right" />
                                {/*  <AuthDialog /> */}
                                <App {...props} />
                            </AxiosProvider>
                        </MittProvider>
                    </GA4Provider>
                </ErrorBoundary>
            );

            return app;
        },
    }),
);