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

import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createRoot } from 'react-dom/client';
import { 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 { Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';

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

// Initialize Stripe
const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || '');

createInertiaApp({
    title: (title) => title ? `${title} - ${appName}` : appName,
    resolve: (name) => resolvePageComponent(
      `./pages/${name}.tsx`,
      import.meta.glob('./pages/**/*.tsx')
    ).then((page) => {
      if (page) {
        const PageComponent = (page as any).default;
        return (props: any) => <AppLayout><PageComponent {...props} /></AppLayout>;
      }
      return null;
    }),
    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(
            <Elements stripe={stripePromise}>
                <I18nextProvider i18n={i18n}>
                    <App {...props} />
                    <Toaster position="top-right" toastOptions={{ duration: 4000 }} />
                </I18nextProvider>
            </Elements>
        );
    },
    progress: {
        color: '#4B5563',
    },
});

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