<template>
  <main class="mx-auto flex w-full max-w-4xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
    <header class="space-y-2">
      <div class="flex items-center justify-between gap-4">
        <div>
          <h1 class="text-3xl font-bold text-base-content">Nouvelle catégorie de composant</h1>
          <p class="text-base text-base-content/70">
            Configurez le squelette canonique qui sera appliqué lors de la création des composants appartenant à cette catégorie.
          </p>
        </div>
        <NuxtLink class="btn btn-ghost" to="/component-category">
          Retour au catalogue
        </NuxtLink>
      </div>
    </header>

    <section class="rounded-xl border border-base-300 bg-base-100 p-6 shadow-sm">
      <ModelTypeForm
        mode="create"
        initial-category="COMPONENT"
        :lock-category="true"
        :saving="saving"
        @submit="handleSubmit"
        @cancel="handleCancel"
      />
    </section>
  </main>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useHead, useRouter } from '#imports'
import ModelTypeForm from '~/components/model-types/ModelTypeForm.vue'
import { createModelType } from '~/services/modelTypes'
import { useToast } from '~/composables/useToast'

useHead(() => ({
  title: 'Nouvelle catégorie de composant',
}))

const router = useRouter()
const { showError, showSuccess } = useToast()
const saving = ref(false)

const handleCancel = () => {
  router.push('/component-category').catch(() => {
    showError("Navigation impossible vers la liste des catégories.")
  })
}

const handleSubmit = async (payload: Parameters<typeof createModelType>[0]) => {
  saving.value = true
  try {
    const enrichedPayload = {
      ...payload,
      description: payload.notes ?? null,
    }
    await createModelType(enrichedPayload)
    showSuccess('Catégorie de composant créée avec succès.')
    await router.push('/component-category')
  } catch (error: any) {
    const message = error?.data?.message || error?.message || 'Une erreur est survenue lors de la création.'
    showError(Array.isArray(message) ? message[0] : message)
  } finally {
    saving.value = false
  }
}
</script>
