<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { useIntegrationStore } from '@KTXC/stores/integrationStore'
import { useL10n } from '@KTXC'

const integrationStore = useIntegrationStore()
const { t } = useL10n('user_profile')

// Get all registered security panel components from modules
const securityPanels = computed(() => {
  return integrationStore.getItems('user_settings_security')
})

// Store resolved components
const resolvedComponents = ref<Array<{ id: string; label: string; priority: number; component: any }>>([])

// Load components on mount
onMounted(async () => {
  // Resolve all component loaders
  const components = []
  for (const panel of securityPanels.value) {
    try {
      if (panel.component) {
        const module = await panel.component()
        components.push({
          id: panel.id,
          label: panel.label || panel.id,
          priority: panel.priority ?? 100,
          component: module.default
        })
      }
    } catch (error) {
      console.error('[ProfileSecurity] Failed to load component for', panel.id, ':', error)
    }
  }
  
  // Sort by priority and store
  resolvedComponents.value = components.sort((a, b) => a.priority - b.priority)
})
</script>

<template>
  <VRow dense>
    <!-- Render all registered security panel components from modules -->
    <component 
      v-for="panel in resolvedComponents" 
      :key="panel.id"
      :is="panel.component"
    />

    <!-- Fallback message if no panels are registered -->
    <VCol 
      v-if="resolvedComponents.length === 0" 
      cols="12"
    >
      <VCard>
        <VCardText class="text-center pa-8">
          <VIcon
            icon="mdi-shield-lock-outline"
            size="48"
            class="mb-4"
            color="grey"
          />
          <p class="text-h6 mb-2">
            {{ t('security.emptyTitle', 'No Security Settings Available') }}
          </p>
          <p class="text-body-2 text-medium-emphasis">
            {{ t('security.emptyDescription', 'No security modules are currently enabled or installed.') }}
          </p>
        </VCardText>
      </VCard>
    </VCol>
  </VRow>
</template>
