<script setup lang="ts">
definePageMeta({ middleware: 'auth' })
const { t } = useI18n()
const { api } = useApi()
const toast = useToast()

const form = reactive({ name: '', description: '' })
const saving = ref(false)

async function save() {
  saving.value = true
  try {
    const res = await api<{ data: { id: number } }>('/api/routines', { method: 'POST', body: { name: form.name, description: form.description } })
    // Redirige vers le builder pour ajouter les exercices.
    await navigateTo(`/routines/${res.data.id}`)
  } catch {
    toast.add({ title: t('common.error'), color: 'error' })
    saving.value = false
  }
}
</script>

<template>
  <div class="space-y-4 max-w-md mx-auto">
    <UButton to="/routines" icon="i-lucide-arrow-left" color="neutral" variant="ghost" :label="t('common.back')" />
    <h1 class="text-2xl font-black tracking-tight">{{ t('routines.newRoutine') }}</h1>
    <form class="space-y-4" @submit.prevent="save">
      <UFormField :label="t('routines.name')">
        <UInput v-model="form.name" size="lg" class="w-full" required />
      </UFormField>
      <UFormField :label="t('routines.description')">
        <UTextarea v-model="form.description" class="w-full" :rows="3" />
      </UFormField>
      <UButton type="submit" block size="lg" color="primary" class="font-bold" :loading="saving" :label="t('common.save')" />
    </form>
    <p class="text-xs text-zinc-400 text-center">{{ t('routines.addLater') }}</p>
  </div>
</template>
