<script setup lang="ts">
import type { DecisionCreate } from '~/stores/decisions'

const decisions = useDecisionsStore()

const formData = ref<DecisionCreate>({
  title: '',
  description: '',
  context: '',
  decision_type: 'other',
  voting_protocol_id: null,
})

const submitting = ref(false)

async function onSubmit() {
  submitting.value = true
  try {
    const decision = await decisions.create(formData.value)
    if (decision) {
      navigateTo(`/decisions/${decision.id}`)
    }
  } catch {
    // Error is handled by the store
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <div class="space-y-6">
    <!-- Back link -->
    <div>
      <UButton
        to="/decisions"
        variant="ghost"
        color="neutral"
        icon="i-lucide-arrow-left"
        label="Retour aux decisions"
        size="sm"
      />
    </div>

    <!-- Header -->
    <div>
      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
        Nouvelle decision
      </h1>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
        Cadrage d'un nouveau processus de decision collectif
      </p>
    </div>

    <!-- Error -->
    <UCard v-if="decisions.error">
      <div class="flex items-center gap-3 text-red-500">
        <UIcon name="i-lucide-alert-circle" class="text-xl" />
        <p>{{ decisions.error }}</p>
      </div>
    </UCard>

    <!-- Form -->
    <UCard>
      <DecisionCadrage
        v-model="formData"
        :submitting="submitting"
        @submit="onSubmit"
      />
    </UCard>
  </div>
</template>
