import 'element-plus/dist/index.css';
import '../css/app.css';
import '../css/tiptap.css';

import { createInertiaApp } from '@inertiajs/vue3';
import ElementPlus from 'element-plus';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import type { DefineComponent } from 'vue';
import { createApp, h } from 'vue';
import { ZiggyVue } from 'ziggy-js';
import { initializeTheme } from './composables/useAppearance';
import { vAllPermissions, vAllRoles, vAnyPermission, vAnyRole, vPermissions, vRoles } from './directives/permissions';

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

createInertiaApp({
  title: (title) => (title ? `${title}` : appName),
  resolve: (name) => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob<DefineComponent>('./pages/**/*.vue')),
  setup({ el, App, props, plugin }) {
    const app = createApp({ render: () => h(App, props) });

    app.use(plugin).use(ZiggyVue).use(ElementPlus);

    // Register permission directives
    app.directive('roles', vRoles);
    app.directive('permissions', vPermissions);
    app.directive('any-role', vAnyRole);
    app.directive('all-roles', vAllRoles);
    app.directive('any-permission', vAnyPermission);
    app.directive('all-permissions', vAllPermissions);

    // Add global translation helper
    app.config.globalProperties.$t = (key: string, fallback?: string) => {
      const page = app.config.globalProperties.$page || props.initialPage;
      const translations = page.props?.translations || {};
      const keyParts = key.split('.');

      if (keyParts.length >= 2) {
        const translationGroup = keyParts[0];
        const translationKey = keyParts.slice(1).join('.');
        if (translations[translationGroup] && translations[translationGroup][translationKey]) {
          return translations[translationGroup][translationKey];
        }
      }

      const keys = key.split('.');
      let value = translations;

      for (const k of keys) {
        if (value && typeof value === 'object' && k in value) {
          value = value[k];
        } else {
          return fallback || key;
        }
      }

      return value || fallback || key;
    };

    app.mount(el);
  },
  progress: {
    color: '#4B5563',
  },
});

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