import type { Component } from 'vue'
import { IVYFORMS_GLOBAL_SETTINGS } from '@/constants/pages'
import GoogleSheetsSettings from '@/integrations/google-sheets/views/admin/settings/GoogleSheetsSettings.vue'
import GoogleSheetsIntegrationSettings from '@/integrations/google-sheets/views/form-builder/GoogleSheetsIntegrationSettings.vue'
import GoogleSheetsForm from '@/integrations/google-sheets/views/form-builder/components/GoogleSheetsForm.vue'
import GoogleSheetsEmptyState from '@/integrations/google-sheets/views/form-builder/components/GoogleSheetsEmptyState.vue'
import GoogleSheetsList from '@/integrations/google-sheets/views/form-builder/components/GoogleSheetsList.vue'

interface SubMenuItem {
  index: string
  label: string
  iconConfig?: {
    name: string
    type: 'fill' | 'outline'
    category: string
    size: 'd' | 's' | 'm' | 'l'
  }
}

const INTEGRATION_ID = 'google_sheets'
let isRegistered = false

export function registerGoogleSheetsIntegration(): void {
  if (isRegistered) {
    return
  }

  const w = window.IvyForms
  if (!w?.hooks) {
    return
  }

  isRegistered = true

  const { hooks } = w

  if (w.registerComponent) {
    w.registerComponent('GoogleSheetsSettings', GoogleSheetsSettings as Component)
    w.registerComponent(
      'GoogleSheetsIntegrationSettings',
      GoogleSheetsIntegrationSettings as Component,
    )
    w.registerComponent('GoogleSheetsForm', GoogleSheetsForm as Component)
    w.registerComponent('GoogleSheetsEmptyState', GoogleSheetsEmptyState as Component)
    w.registerComponent('GoogleSheetsList', GoogleSheetsList as Component)
  }

  if (w.components) {
    w.components.GoogleSheetsIntegrationSettings = GoogleSheetsIntegrationSettings as Component
    w.components.GoogleSheetsForm = GoogleSheetsForm as Component
    w.components.GoogleSheetsEmptyState = GoogleSheetsEmptyState as Component
    w.components.GoogleSheetsList = GoogleSheetsList as Component
  }

  hooks.addFilter('ivyforms/settings/add_integration_subitem', (subItems: unknown) => {
    const items = (subItems as SubMenuItem[]) || []
    const menuIndex = `integrations/${INTEGRATION_ID}`
    if (!items.find((item) => item.index === menuIndex)) {
      items.push({
        index: menuIndex,
        label: w.getLabel?.('google_sheets') || 'Google Sheet',
        iconConfig: {
          name: 'google_sheets',
          type: 'fill',
          category: 'integrations',
          size: 'd',
        },
      })
    }
    return items
  })

  const registerRoutes = () => {
    const router = w._router as
      | {
          addRoute: (parent: string, route: Record<string, unknown>) => void
          push: (path: string) => void
        }
      | undefined

    if (!router?.addRoute) {
      return
    }

    try {
      router.addRoute(IVYFORMS_GLOBAL_SETTINGS, {
        path: `/integrations/${INTEGRATION_ID}`,
        name: `integrations-${INTEGRATION_ID}`,
        component: GoogleSheetsSettings,
      })

      const currentPath = window.location.hash.replace('#', '')
      if (currentPath.includes(`/integrations/${INTEGRATION_ID}`)) {
        router.push(currentPath)
      }
    } catch {
      // Parent route may not exist yet on non-settings pages
    }
  }

  if (w._router) {
    registerRoutes()
  } else {
    window.addEventListener('ivyforms:ready', registerRoutes, { once: true })
  }

  window.dispatchEvent(
    new CustomEvent('ivyforms:pro:component-registered', {
      detail: { componentName: 'GoogleSheetsIntegrationSettings' },
    }),
  )

  hooks.triggerUpdate?.()
}