<script setup lang="ts">
const router = useRouter()
const submitting = ref(false)
const toast = useToast()
const { $providers } = useNuxtApp()

const form = ref({
  provider_id: '', name: '', email: '', phone: '', contact_name: '', ruc: '', address: ''
})

const isValid = computed(() => form.value.provider_id && form.value.name && form.value.email)

async function submit() {
  submitting.value = true
  try {
    const data = await $providers('/providers', { method: 'POST', body: form.value }) as any
    toast.add({ title: 'Provider created', color: 'green' })
    router.push(`/providers/${data.provider_id}`)
  } catch (e: any) {
    toast.add({ title: 'Failed to create provider', description: e?.data?.error ?? e.message, color: 'red' })
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <div class="p-8 space-y-8 bg-gray-50 min-h-screen">
    <div class="flex items-center gap-4">
      <NuxtLink to="/providers">
        <UButton icon="i-heroicons-arrow-left" color="gray" variant="ghost">Back</UButton>
      </NuxtLink>
      <div>
        <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">New Provider</h1>
        <p class="text-[13px] text-[var(--text-muted)]">Register a new insurance carrier</p>
      </div>
    </div>

    <UCard class="max-w-2xl">
      <template #header>
        <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
          <UIcon name="i-heroicons-building-office" class="w-4 h-4" /> Provider Information
        </p>
      </template>

      <div class="space-y-4">
        <div class="grid grid-cols-2 gap-4">
          <UFormField label="Provider ID" required>
            <UInput v-model="form.provider_id" placeholder="seguros-abc" class="w-full" />
            <p class="text-xs text-gray-500 mt-1">Alphanumeric identifier (letters and numbers only)</p>
          </UFormField>
          <UFormField label="Company Name" required class="col-span-2">
            <UInput v-model="form.name" placeholder="Seguros Panama S.A." class="w-full" />
          </UFormField>
          <UFormField label="Email" required>
            <UInput v-model="form.email" type="email" placeholder="cotizaciones@seguros.com" class="w-full" />
          </UFormField>
          <UFormField label="Phone">
            <UInput v-model="form.phone" placeholder="+507 300-0000" class="w-full" />
          </UFormField>
          <UFormField label="Contact Name">
            <UInput v-model="form.contact_name" placeholder="María García" class="w-full" />
          </UFormField>
          <UFormField label="RUC">
            <UInput v-model="form.ruc" placeholder="1234567-1-123456" class="w-full" />
          </UFormField>
          <UFormField label="Address" class="col-span-2">
            <UInput v-model="form.address" placeholder="Av. Balboa, Panama City" class="w-full" />
          </UFormField>
        </div>
      </div>

      <template #footer>
        <div class="flex justify-end gap-3">
          <NuxtLink to="/providers"><UButton color="gray" variant="soft">Cancel</UButton></NuxtLink>
          <UButton color="primary" icon="i-heroicons-check" :loading="submitting" :disabled="!isValid" @click="submit">
            Create Provider
          </UButton>
        </div>
      </template>
    </UCard>
  </div>
</template>

<style scoped>
/* Prevent width expansion when dropdowns open */
:deep(.grid) {
  min-width: 0;
  width: 100%;
}

:deep(.UFormField) {
  min-width: 0;
  width: 100%;
}

:deep(.UInput) {
  min-width: 0;
  width: 100%;
}

:deep(.USelect) {
  min-width: 0;
  width: 100%;
}

/* Prevent dropdown menus from expanding container */
:deep([role="listbox"]) {
  position: fixed !important;
  z-index: 50;
  min-width: 200px;
  max-width: 300px;
}

/* Ensure form fields don't cause expansion */
:deep(.space-y-4) {
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

/* Prevent any element from expanding beyond container */
:deep(*) {
  max-width: 100%;
}

/* Specific fix for dropdown positioning */
:deep(.USelectMenuPopover) {
  position: fixed !important;
  z-index: 100;
}

/* Ensure form stability */
:deep(.UCard) {
  width: 100%;
  min-width: 0;
}
</style>
