import '../css/app.css';
import axios from 'axios';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { StrictMode, useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import 'dayjs/locale/en-sg';
import { initializeTheme } from '@/hooks/use-appearance';

axios.defaults.withCredentials = true;
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
const csrfToken = document.head?.querySelector('meta[name="csrf-token"]');
if (csrfToken instanceof HTMLMetaElement && csrfToken.content) {
    axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken.content;
}

// Mantine imports
import {
    MantineProvider,
    ColorSchemeProvider,
    type ColorScheme,
} from '@mantine/core';
import { Notifications } from '@mantine/notifications';
import { ModalsProvider } from '@mantine/modals';

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

if (typeof window !== 'undefined') {
    initializeTheme();
}

const getInitialScheme = (): ColorScheme => {
    if (typeof window === 'undefined') {
        return 'light';
    }

    const stored = window.localStorage.getItem('appearance');
    if (stored === 'dark' || stored === 'light') {
        return stored;
    }

    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        return 'dark';
    }

    return 'light';
};

const setAppearanceCookie = (value: ColorScheme) => {
    if (typeof window === 'undefined') {
        return;
    }

    const maxAge = 365 * 24 * 60 * 60; // 1 year
    document.cookie = `appearance=${value};path=/;max-age=${maxAge};SameSite=Lax`;
};

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

        function Main() {
            const [colorScheme, setColorScheme] = useState<ColorScheme>(() =>
                getInitialScheme()
            );

            useEffect(() => {
                try {
                    document.documentElement.classList.toggle(
                        'dark',
                        colorScheme === 'dark'
                    );
                    document.documentElement.style.colorScheme = colorScheme;
                    window.localStorage.setItem('appearance', colorScheme);
                    setAppearanceCookie(colorScheme);
                } catch {}
            }, [colorScheme]);

            const toggleColorScheme = (value?: ColorScheme) =>
                setColorScheme(
                    value ?? (colorScheme === 'light' ? 'dark' : 'light')
                );

            return (
                <StrictMode>
                    <ColorSchemeProvider
                        colorScheme={colorScheme}
                        toggleColorScheme={toggleColorScheme}
                    >
                        <MantineProvider
                            withGlobalStyles
                            withNormalizeCSS
                            theme={{ colorScheme }}
                        >
                            <ModalsProvider>
                                <Notifications position="bottom-right" />
                                <App {...props} />
                            </ModalsProvider>
                        </MantineProvider>
                    </ColorSchemeProvider>
                </StrictMode>
            );
        }

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