import '../css/app.css';
import '@tabler/icons-webfont/dist/tabler-icons.min.css';
import './bootstrap';

import { createApp, h, Fragment } from 'vue';
import PwaInstallBanner from '@/Components/PwaInstallBanner.vue';
import { createPinia } from 'pinia';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';
import { createI18n } from 'vue-i18n';
import { initPwaInstallListener, registerServiceWorker } from '@/composables/usePwaInstall';

// ══════════════════════════════════════════════════════════════════
//  InPractice — Main JS Entry Point
//
//  Boots the Vue application with:
//    - Inertia.js  → connects Vue to Laravel
//    - Pinia       → global state management
//    - ZiggyVue    → Laravel named routes in Vue
//    - vue-i18n    → English / Arabic language switching
//    - PWA prompt  → captures install event for the install banner
// ══════════════════════════════════════════════════════════════════

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

// ── Apply theme and locale before Vue boots ────────────────────
// All imports are resolved first (Vite hoisting), then this runs.
// Prevents flash of wrong theme on every Inertia navigation.
const savedTheme  = localStorage.getItem('ip_theme')  ?? 'navy';
const savedLocale = localStorage.getItem('ip_locale') ?? 'en';
document.documentElement.setAttribute('data-theme', savedTheme);
document.documentElement.setAttribute('lang', savedLocale);
document.documentElement.setAttribute('dir', savedLocale === 'ar' ? 'rtl' : 'ltr');

// ── PWA — service worker + install prompt (before Vue mounts) ───
registerServiceWorker();

window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    window.__inpractice_pwa_prompt = e;
    window.dispatchEvent(new CustomEvent('inpractice-pwa-installable'));
});

initPwaInstallListener();

// ── i18n Setup ─────────────────────────────────────────────────
const i18n = createI18n({
    legacy: false,
    locale: savedLocale,
    fallbackLocale: 'en',
    messages: {},
});

// ── Inertia App ────────────────────────────────────────────────
createInertiaApp({
    title: (title) => `${title} — ${appName}`,

    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob('./Pages/**/*.vue'),
        ),

    setup({ el, App, props, plugin }) {
        const pinia = createPinia();

        return createApp({
            render: () => h(Fragment, null, [
                h(App, props),
                h(PwaInstallBanner),
            ]),
        })
            .use(plugin)
            .use(ZiggyVue)
            .use(pinia)
            .use(i18n)
            .mount(el);
    },

    // Progress bar color — InPractice teal
    progress: {
        color: '#1D9E75',
    },
});