<script setup lang="ts">
import * as z from 'zod'
import type { FormSubmitEvent } from '@nuxt/ui'

const schema = z.object({
  first_name: z.string().min(1, 'First name is required'),
  last_name: z.string().min(1, 'Last name is required'),
  email: z.string().email('Invalid email'),
  phone: z.string().min(1, 'Phone is required'),
  birth_date: z.string().min(1, 'Birth date is required'),
  gender: z.enum(['male', 'female'])
})

type Schema = z.output<typeof schema>

const state = reactive<Partial<Schema>>({
  first_name: '',
  last_name: '',
  email: '',
  phone: '',
  birth_date: '',
  gender: 'male'
})

const toast = useToast()
const router = useRouter()

async function onSubmit(event: FormSubmitEvent<Schema>) {
  try {
    await useCustomer('/', {
      method: 'POST',
      body: event.data
    })

    toast.add({
      title: 'Customer created',
      description: 'The customer was successfully created.',
      color: 'success'
    })

    router.push('/customers')
  } catch (err: any) {
    toast.add({
      title: 'Error',
      description: err?.message || 'Failed to create customer',
      color: 'error'
    })
  }
}
</script>

<template>
  <div class="min-h-screen bg-gray-50 p-10">
    <div class="max-w-5xl mx-auto space-y-8">

      <!-- Header -->
      <div>
        <h1 class="text-3xl font-bold text-gray-900">New Customer</h1>
        <p class="text-gray-500 mt-1">Create a new customer profile</p>
      </div>

      <!-- Form Card -->
      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
        <UForm
          :schema="schema"
          :state="state"
          class="space-y-6"
          @submit="onSubmit"
        >
          <!-- Grid -->
          <div class="grid md:grid-cols-2 gap-6">

            <UFormField label="First Name" name="first_name">
              <UInput v-model="state.first_name" />
            </UFormField>

            <UFormField label="Last Name" name="last_name">
              <UInput v-model="state.last_name" />
            </UFormField>

            <UFormField label="Email" name="email">
              <UInput v-model="state.email" />
            </UFormField>

            <UFormField label="Phone" name="phone">
              <UInput v-model="state.phone" />
            </UFormField>

            <UFormField label="Birth Date" name="birth_date">
              <UInput v-model="state.birth_date" type="date" />
            </UFormField>

            <UFormField label="Gender" name="gender">
              <USelect
                v-model="state.gender"
                :items="[
                  { label: 'Male', value: 'male' },
                  { label: 'Female', value: 'female' }
                ]"
              />
            </UFormField>

          </div>


          <!-- Actions -->
          <div class="flex justify-end gap-4 pt-4">
            <UButton
              color="neutral"
              variant="ghost"
              @click="$router.push('/customers')"
            >
              Cancel
            </UButton>

            <UButton type="submit" color="primary">
              Create Customer
            </UButton>
          </div>

        </UForm>
      </div>

    </div>
  </div>
</template>
