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

import i18n from '@/lib/i18n';
import { createInertiaApp } from '@inertiajs/react';
import { configureEcho } from '@laravel/echo-react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createRoot } from 'react-dom/client';
import { Toaster } from 'sonner';
import { ThemeProvider } from './context/theme-context';
import { initializeTheme } from './hooks/use-appearance';
import AdminLayout from './layouts/admin/admin-layout';
import AppLayout from './layouts/app-layout';
import { userThemes, type UserThemeName } from './themes';
import { SharedData } from './types';
import { setThemeScope } from './utils/theme-manager';

let appName = import.meta.env.VITE_APP_NAME || 'Predixio';

createInertiaApp({
  title: (title) => (title ? `${title} - ${appName}` : appName),
  resolve: async (name) => {
    const page = (await resolvePageComponent(
      `./pages/${name}.tsx`,
      import.meta.glob('./pages/**/*.tsx'),
    )) as unknown as {
      default: {
        layout?: (page: React.ReactNode) => React.ReactNode;
        title?: string;
      };
    };
    const pageTitle = page?.default?.title || '';
    if (name.startsWith('admin/')) {
      page.default.layout =
        page?.default?.layout ||
        ((page: React.ReactNode) => (
          <AdminLayout title={pageTitle} children={page} />
        ));
    }
    if (name.startsWith('user/')) {
      page.default.layout =
        page?.default?.layout ||
        ((page: React.ReactNode) => (
          <AppLayout title={pageTitle} children={page} />
        ));
    }
    return page;
  },
  setup({ el, App, props }) {
    const root = createRoot(el);
    const branding: SharedData = props.initialPage
      .props as unknown as SharedData;
    appName =
      branding?.branding?.branding?.app_name ||
      import.meta.env.VITE_APP_NAME ||
      'Predixio';

    const initialLocale = (props.initialPage.props.locale as string) ?? 'en';
    const initialLanguage =
      (props.initialPage.props.language as Record<string, string>) ?? {};
    i18n.addResourceBundle(
      initialLocale,
      'translation',
      initialLanguage,
      true,
      true,
    );
    i18n.changeLanguage(initialLocale);

    // Apply theme synchronously before first render to prevent FOUC on reload.
    // On Inertia navigation, useLayoutEffect in app/auth-layout handles updates.
    const pageName = props.initialPage.component;
    const rawVariant = branding?.branding?.site_theme;
    const variant: UserThemeName =
      rawVariant && rawVariant in userThemes
        ? (rawVariant as UserThemeName)
        : 'default';
    if (pageName.startsWith('admin/')) {
      setThemeScope('admin');
    } else {
      setThemeScope('user', variant);
    }

    const tawk = branding?.branding?.tawk_to;
    if (
      tawk?.enabled &&
      tawk.property_id &&
      tawk.widget_id &&
      !pageName.startsWith('admin/')
    ) {
      const s1 = document.createElement('script');
      s1.async = true;
      s1.src = `https://embed.tawk.to/${tawk.property_id}/${tawk.widget_id}`;
      s1.charset = 'UTF-8';
      s1.setAttribute('crossorigin', '*');
      document.head.appendChild(s1);
    }

    const ga = branding?.branding?.google_analytics;
    if (ga?.enabled && ga.tracking_id) {
      const gtagScript = document.createElement('script');
      gtagScript.async = true;
      gtagScript.src = `https://www.googletagmanager.com/gtag/js?id=${ga.tracking_id}`;
      document.head.appendChild(gtagScript);

      const inlineScript = document.createElement('script');
      inlineScript.text = `window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','${ga.tracking_id}');`;
      document.head.appendChild(inlineScript);
    }

    configureEcho({
      broadcaster: branding?.branding?.notification?.provider,
      key: branding?.branding?.notification?.pusher?.app_key,
      cluster: branding?.branding?.notification?.pusher?.app_cluster,
      forceTLS: true,
      wsHost: import.meta.env.VITE_PUSHER_HOST,
      wsPort: import.meta.env.VITE_PUSHER_PORT,
      wssPort: import.meta.env.VITE_PUSHER_PORT,
      enabledTransports: ['ws', 'wss'],
    });

    root.render(
      <ThemeProvider>
        <Toaster richColors />
        <App {...props} />
      </ThemeProvider>,
    );
  },
  progress: {
    color: '#8c45ff',
  },
});

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