<script setup lang="ts">
import {
  LIFE_GENDER_OPTIONS,
  LIFE_COVERAGE_TERM_OPTIONS,
  LIFE_COVERAGE_AMOUNT_OPTIONS,
  LIFE_BENEFICIARY_RELATIONSHIP_OPTIONS
} from '~/data/life-quote-intake'
import type { LifeQuoteDraft, LifeQuoteMode, LifeQuoteSegment } from '~/types/life-quote-intake'

const props = defineProps<{
  draft: LifeQuoteDraft
  modeCards: { id: LifeQuoteMode; title: string; hint: string; icon: string }[]
  segmentCards: { id: LifeQuoteSegment; title: string; hint: string; icon: string }[]
}>()

function setMode(m: LifeQuoteMode) {
  props.draft.quoteMode = m
}

function setSegment(s: LifeQuoteSegment) {
  props.draft.segment = s
}

const inputPh =
  'w-full placeholder:text-[var(--text-muted)] placeholder:opacity-[0.55] text-[var(--text-primary)]'

const showOrganization = computed(
  () => props.draft.segment === 'corporate_keyman' || props.draft.segment === 'group'
)

/** Compute age from date of birth */
watch(
  () => props.draft.life.dateOfBirth,
  (dob) => {
    if (!dob) {
      props.draft.life.age = ''
      return
    }
    const birth = new Date(dob)
    const today = new Date()
    let age = today.getFullYear() - birth.getFullYear()
    const m = today.getMonth() - birth.getMonth()
    if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) age--
    props.draft.life.age = String(age)
  }
)

const showDetails = ref(false)
onMounted(() => {
  requestAnimationFrame(() => {
    showDetails.value = true
  })
})
</script>

<template>
  <div class="space-y-10">
    <section class="space-y-4">
      <div>
        <h3 class="text-base font-semibold text-[var(--text-primary)]">How can I help?</h3>
        <p class="mt-1 text-sm text-[var(--text-muted)]">Single quote or comparative PDF — same steps; comparative opens the comparison sheet after acceptance.</p>
      </div>
      <div class="grid gap-3 sm:grid-cols-2">
        <button
          v-for="card in modeCards"
          :key="card.id"
          type="button"
          class="group rounded-xl border p-5 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
          :class="
            draft.quoteMode === card.id
              ? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30'
              : 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'
          "
          @click="setMode(card.id)"
        >
          <div class="flex items-start gap-3">
            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--brand-faint)] text-[var(--brand)]">
              <UIcon :name="card.icon" class="h-5 w-5" />
            </div>
            <div class="min-w-0">
              <p class="font-semibold text-[var(--text-primary)]">{{ card.title }}</p>
              <p class="mt-1 text-sm text-[var(--text-muted)]">{{ card.hint }}</p>
            </div>
          </div>
        </button>
      </div>
    </section>

    <section class="space-y-4 border-t border-[var(--sidebar-border)] pt-10">
      <div>
        <h3 class="text-base font-semibold text-[var(--text-primary)]">Policy type</h3>
        <p class="mt-1 text-sm text-[var(--text-muted)]">Individual, corporate / key person, or group policy.</p>
      </div>
      <div class="grid gap-3 sm:grid-cols-3">
        <button
          v-for="card in segmentCards"
          :key="card.id"
          type="button"
          class="rounded-xl border p-4 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
          :class="
            draft.segment === card.id
              ? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30'
              : 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'
          "
          @click="setSegment(card.id)"
        >
          <UIcon :name="card.icon" class="h-7 w-7 text-[var(--brand)]" />
          <p class="mt-2 font-semibold text-[var(--text-primary)]">{{ card.title }}</p>
          <p class="mt-0.5 text-xs text-[var(--text-muted)]">{{ card.hint }}</p>
        </button>
      </div>
    </section>

    <section v-if="showDetails" class="border-t border-[var(--sidebar-border)] pt-10">
      <!-- Insured basic info -->
      <h3 class="text-base font-semibold text-[var(--text-primary)]">Insured person</h3>
      <p class="mt-1 text-sm text-[var(--text-muted)]">Primary insured and notification email.</p>
      <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
        <UFormField label="Legal name" required>
          <UInput v-model="draft.client.fullName" :class="inputPh" placeholder="As on ID" />
        </UFormField>
        <UFormField label="Email" required>
          <UInput v-model="draft.client.email" type="email" :class="inputPh" placeholder="name@company.com" />
        </UFormField>
        <UFormField label="Phone">
          <UInput v-model="draft.client.phone" :class="inputPh" placeholder="+593 ..." />
        </UFormField>
        <UFormField label="Government ID">
          <UInput v-model="draft.client.documentId" :class="inputPh" placeholder="ID or RUC" />
        </UFormField>
        <UFormField v-if="showOrganization" label="Organization / group name" class="md:col-span-2" required>
          <UInput v-model="draft.client.organizationName" :class="inputPh" placeholder="Employer or group trust" />
        </UFormField>
      </div>

      <!-- Age & health screening -->
      <h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Age & health screening</h3>
      <p class="mt-1 text-sm text-[var(--text-muted)]">Basic underwriting inputs — carriers use these to determine eligibility and rate class.</p>
      <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-3">
        <UFormField label="Date of birth" required>
          <UInput v-model="draft.life.dateOfBirth" type="date" :class="inputPh" />
        </UFormField>
        <UFormField label="Age">
          <UInput :model-value="draft.life.age" disabled :class="inputPh" placeholder="Auto-calculated" />
        </UFormField>
        <UFormField label="Gender" required>
          <USelect
            v-model="draft.life.gender"
            :items="LIFE_GENDER_OPTIONS"
            value-key="value"
            label-key="label"
            placeholder="Select one"
            class="w-full"
          />
        </UFormField>
      </div>
      <div class="mt-5 space-y-4 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4">
        <UCheckbox v-model="draft.life.smoker" label="Smoker / tobacco user (within last 12 months)" />
        <UCheckbox v-model="draft.life.preexistingConditions" label="Preexisting medical conditions" />
        <div v-if="draft.life.preexistingConditions" class="ml-6">
          <UFormField label="Describe conditions" hint="Diabetes, hypertension, cardiac history, etc.">
            <UTextarea
              v-model="draft.life.preexistingDetails"
              :class="inputPh"
              placeholder="List conditions and approximate diagnosis dates"
              :rows="3"
            />
          </UFormField>
        </div>
      </div>

      <!-- Coverage parameters -->
      <h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Coverage intent</h3>
      <p class="mt-1 text-sm text-[var(--text-muted)]">Sum assured, term, and beneficiary details.</p>
      <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
        <UFormField label="Coverage amount" required>
          <USelect
            v-model="draft.life.coverageAmount"
            :items="LIFE_COVERAGE_AMOUNT_OPTIONS"
            value-key="value"
            label-key="label"
            placeholder="Select one"
            class="w-full"
          />
        </UFormField>
        <UFormField label="Coverage term" required>
          <USelect
            v-model="draft.life.coverageTerm"
            :items="LIFE_COVERAGE_TERM_OPTIONS"
            value-key="value"
            label-key="label"
            placeholder="Select one"
            class="w-full"
          />
        </UFormField>
        <UFormField label="Beneficiary name">
          <UInput v-model="draft.life.beneficiaryName" :class="inputPh" placeholder="Full legal name" />
        </UFormField>
        <UFormField label="Beneficiary relationship">
          <USelect
            v-model="draft.life.beneficiaryRelationship"
            :items="LIFE_BENEFICIARY_RELATIONSHIP_OPTIONS"
            value-key="value"
            label-key="label"
            placeholder="Select one"
            class="w-full"
          />
        </UFormField>
      </div>

      <!-- Forms -->
      <h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Forms</h3>
      <p class="mt-1 text-sm text-[var(--text-muted)]">
        Confirm required templates are completed (uploads wire to the forms library later).
      </p>
      <div class="mt-4 space-y-3 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4">
        <UCheckbox v-model="draft.forms.medicalQuestionnaire" label="Medical questionnaire (declaracion de salud)" />
        <UCheckbox v-model="draft.forms.beneficiaryDesignation" label="Beneficiary designation form" />
        <UCheckbox
          v-model="draft.forms.groupCensus"
          label="Group census / employee roster (required for group policies)"
          :disabled="draft.segment !== 'group'"
        />
      </div>
    </section>
    <div
      v-else
      class="mt-10 min-h-[8rem] rounded-xl bg-[var(--sidebar-border)]/25 animate-pulse"
      aria-busy="true"
      aria-label="Loading"
    />
  </div>
</template>
