import { LicenseManager } from 'ag-grid-enterprise'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
import { createApp } from 'vue'
import Vue3Signature from 'vue3-signature'
import { registerPlugins } from '@core/utils/plugins'
import App from '@/App.vue'

// Styles
import '@core/scss/template/index.scss'
import '@styles/styles.scss'
import '@/styles/tokens.css' // Design tokens from Project B
import '@/plugins/iconify/icons.css'

interface MonacoEnvironment {
  getWorker: (moduleId: string, label: string) => Worker
}

declare global {
  interface Window {
    MonacoEnvironment: MonacoEnvironment
  }
}

const AG_GRID_LICENSE = 'LICENSE-KEY[v26.1.0][TRIAL][TRIAL][TRIAL]_MTczNTY3ODgwMDAwMA==7781e7e15d6ae1deac0ed4697e6b0718'

LicenseManager.setLicenseKey(AG_GRID_LICENSE)

const createMonacoEnvironment = (): MonacoEnvironment => ({
  getWorker: (_: string, label: string): Worker => {
    const workerMap: Record<string, () => Worker> = {
      json: () => new jsonWorker(),
      css: () => new cssWorker(),
      scss: () => new cssWorker(),
      less: () => new cssWorker(),
      html: () => new htmlWorker(),
      handlebars: () => new htmlWorker(),
      razor: () => new htmlWorker(),
      typescript: () => new tsWorker(),
      javascript: () => new tsWorker(),
    }

    return workerMap[label]?.() ?? new editorWorker()
  },
})

const initializeApp = (): void => {
  self.MonacoEnvironment = createMonacoEnvironment()

  const app = createApp(App)

  registerPlugins(app)
  app.component('Vue3Signature', Vue3Signature)

  app.mount('#app')
}

initializeApp()