/**
 * KBX Foundation v4 App Initialization
 * Bootstraps screen registry, permissions, and UI adapter
 */

import type { App } from 'vue'
import type { KbxScreenDefinition, KbxPermissionDefinition, KbxDensity } from '@shared/contracts/kbx-types'

// Global state
let screenRegistry: Map<string, KbxScreenDefinition> = new Map()
let permissionRegistry: Map<string, KbxPermissionDefinition> = new Map()
let userPermissions: Set<string> = new Set()
let currentDensity: KbxDensity = 'compact'

/**
 * Register screen definitions from all modules
 */
export function registerScreens(screens: KbxScreenDefinition[]) {
  screens.forEach(screen => {
    screenRegistry.set(screen.screenId, screen)
  })
}

/**
 * Register permission definitions
 */
export function registerPermissions(permissions: KbxPermissionDefinition[]) {
  permissions.forEach(perm => {
    permissionRegistry.set(perm.permissionId, perm)
  })
}

/**
 * Set user permissions (called after auth)
 */
export function setUserPermissions(permissions: string[]) {
  userPermissions.clear()
  permissions.forEach(p => userPermissions.add(p))
}

/**
 * Check if user has permission
 */
export function hasPermission(permissionId: string): boolean {
  return userPermissions.has(permissionId)
}

/**
 * Check if user has all permissions
 */
export function hasAllPermissions(permissionIds: string[]): boolean {
  return permissionIds.every(id => userPermissions.has(id))
}

/**
 * Get screen by ID
 */
export function getScreen(screenId: string): KbxScreenDefinition | undefined {
  return screenRegistry.get(screenId)
}

/**
 * Get all screens
 */
export function getAllScreens(): KbxScreenDefinition[] {
  return Array.from(screenRegistry.values())
}

/**
 * Set density (compact, comfortable, touch)
 */
export function setDensity(density: KbxDensity) {
  currentDensity = density
  // Apply to DOM
  document.documentElement.style.setProperty('--kbx-density', density)

  // Update tokens based on density
  const tokens = {
    compact: {
      inputHeight: '34px',
      gridRowHeight: '34px',
      touchTarget: '44px',
      fontSize: '12px',
    },
    comfortable: {
      inputHeight: '36px',
      gridRowHeight: '36px',
      touchTarget: '48px',
      fontSize: '14px',
    },
    touch: {
      inputHeight: '48px',
      gridRowHeight: '48px',
      touchTarget: '52px',
      fontSize: '16px',
    },
  }

  Object.entries(tokens[density]).forEach(([key, value]) => {
    document.documentElement.style.setProperty(`--kbx-${key}`, value)
  })
}

/**
 * Vue plugin install
 */
export function installKbx(app: App) {
  // Provide global registry access
  app.provide('kbx-screens', screenRegistry)
  app.provide('kbx-permissions', permissionRegistry)

  // Global methods
  app.config.globalProperties.$kbx = {
    hasPermission,
    hasAllPermissions,
    getScreen,
    getAllScreens,
    setDensity,
  }

  // Initialize default density
  setDensity('compact')

  // Apply theme colors
  document.documentElement.style.setProperty('--kbx-color-primary', '#3b82f6')
  document.documentElement.style.setProperty('--kbx-color-danger', '#ef4444')
  document.documentElement.style.setProperty('--kbx-color-success', '#10b981')
  document.documentElement.style.setProperty('--kbx-color-border', '#e5e7eb')
  document.documentElement.style.setProperty('--kbx-color-text', '#000000')
  document.documentElement.style.setProperty('--kbx-color-text-muted', '#6b7280')
  document.documentElement.style.setProperty('--kbx-color-background', '#ffffff')
  document.documentElement.style.setProperty('--kbx-color-surface', '#ffffff')
  document.documentElement.style.setProperty('--kbx-color-shell-chrome', '#f9fafb')
}

// Composable for component usage
export function useKbx() {
  return {
    hasPermission,
    hasAllPermissions,
    getScreen,
    getAllScreens,
    setDensity,
    screenRegistry: () => getAllScreens(),
  }
}
