<template>
  <UDashboardPanel id="home">
    <template #header>
      <UDashboardNavbar :title="$t('common.home')" :ui="{ right: 'gap-3' }">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>
      </UDashboardNavbar>

      <UDashboardToolbar>
        <div class="flex-1" />
        <USeparator orientation="vertical" class="h-8 mx-2" />
        <FormValidationIndicator :status="validationStatus" />
      </UDashboardToolbar>
    </template>

    <template #body>
      <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-4xl mx-auto">
        <div v-if="!canWriteApplicationForms" class="text-center py-12">
          <UIcon name="i-lucide-shield-x" class="w-16 h-16 mx-auto text-red-400 mb-4" />
          <h2 class="text-2xl font-semibold text-gray-700 mb-2">{{ $t('applicationForms.noPermission') }}</h2>
          <p class="text-gray-500 mb-4">{{ $t('applicationForms.noPermissionDescription') }}</p>
          <UButton to="/" class="mt-4"> {{ $t('applicationForms.backToOverview') }} </UButton>
        </div>
        <div v-else-if="applicationFormTemplate">
          <FormStepperWithNavigation
            :form-element-sections="applicationFormTemplate.formElementSections"
            @save="onSave"
            @submit="onSubmit"
            @add-input-form="handleAddInputForm"
            @update:form-element-sections="handleFormElementSectionsUpdate"
          >
            <UFormField :label="$t('common.name')" class="mb-4">
              <UInput v-model="applicationFormTemplate.name" class="w-full" />
            </UFormField>
          </FormStepperWithNavigation>
        </div>
      </div>
    </template>
  </UDashboardPanel>
</template>

<script setup lang="ts">
import {
  ComplianceStatus,
  type FormElementDto,
  type FormElementSectionDto,
  type PagedApplicationFormDto
} from '~~/.api-client'
import { useApplicationFormValidator } from '~/composables/useApplicationFormValidator'
import type { FormElementId } from '~~/types/formElement'
import { useUserStore } from '~~/stores/useUserStore'

const { getAllApplicationFormTemplates } = await useApplicationFormTemplate()
const { createApplicationForm, submitApplicationForm } = useApplicationForm()
const { validateFormElements, getHighestComplianceStatus } = useApplicationFormValidator()
const { evaluateVisibility } = useFormElementVisibility()
const { canWriteApplicationForms } = usePermissions()
const userStore = useUserStore()
const { selectedOrganization } = storeToRefs(userStore)
const toast = useToast()
const { t: $t } = useI18n()

const { data, error } = await useAsyncData<PagedApplicationFormDto>(
  'create-application-form',
  async () => {
    return await getAllApplicationFormTemplates()
  },
  { deep: true }
)

if (error.value) {
  throw createError({ statusText: error.value.message })
}

const applicationFormTemplate = computed(
  // TODO: Don't select always the first item, allow user to select a template
  () => data?.value?.content[0] ?? undefined
)

const validationMap = ref<Map<FormElementId, ComplianceStatus> | undefined>()
const validationStatus = ref<ComplianceStatus>(ComplianceStatus.NonCritical)

const allFormElements = computed(() => {
  return (
    applicationFormTemplate.value?.formElementSections?.flatMap((section: FormElementSectionDto) =>
      section.formElementSubSections.flatMap((subsection) => subsection.formElements)
    ) ?? []
  )
})

const visibilityMap = computed(() => {
  return evaluateVisibility(allFormElements.value)
})

watch(
  () => allFormElements.value,
  (updatedFormElements: FormElementDto[]) => {
    validationMap.value = validateFormElements(updatedFormElements, visibilityMap.value)
    validationStatus.value = getHighestComplianceStatus()
  },
  { deep: true }
)

async function onSave() {
  const applicationForm = await prepareAndCreateApplicationForm()
  if (applicationForm) {
    toast.add({ title: $t('common.success'), description: $t('applicationForms.saved'), color: 'success' })
  }
}

async function onSubmit() {
  const applicationForm = await prepareAndCreateApplicationForm()
  if (applicationForm?.id) {
    await submitApplicationForm(applicationForm.id)
    await navigateTo('/')
    toast.add({ title: $t('common.success'), description: $t('applicationForms.submitted'), color: 'success' })
  }
}

function handleAddInputForm() {
  // In create mode (no applicationFormId), addInputFormToApplicationForm returns undefined
  // The form element is added locally to the template sections, which are reactive
  // No action needed here
}

function handleFormElementSectionsUpdate(sections: FormElementSectionDto[]) {
  if (applicationFormTemplate.value) {
    applicationFormTemplate.value.formElementSections = sections
  }
}

async function prepareAndCreateApplicationForm() {
  if (!applicationFormTemplate.value) {
    console.error('Application form data is undefined')
    return null
  }

  console.log('selectedOrganization', selectedOrganization.value)
  applicationFormTemplate.value.organizationId = selectedOrganization.value?.id ?? ''

  return await createApplicationForm(applicationFormTemplate.value)
}
</script>
