<script setup lang="ts">
import { LIFE_COVERAGE_PLANS, LIFE_QUOTE_CARRIERS } from '~/data/life-quote-intake'
import type { LifeQuoteDraft, LifeQuoteMode } from '~/types/life-quote-intake'

const props = defineProps<{
  draft: LifeQuoteDraft
  quoteMode: LifeQuoteMode
}>()

function setCarrier(id: string, checked: boolean) {
  const xs = props.draft.solicit.carrierIds
  if (checked && !xs.includes(id)) xs.push(id)
  if (!checked) {
    const i = xs.indexOf(id)
    if (i !== -1) xs.splice(i, 1)
  }
}

function carrierChecked(id: string) {
  return props.draft.solicit.carrierIds.includes(id)
}

function setPlan(id: string, checked: boolean) {
  const xs = props.draft.solicit.planIds
  if (checked && !xs.includes(id)) xs.push(id)
  if (!checked) {
    const i = xs.indexOf(id)
    if (i !== -1) xs.splice(i, 1)
  }
}

function planChecked(id: string) {
  return props.draft.solicit.planIds.includes(id)
}
</script>

<template>
  <div class="space-y-6">
    <div>
      <p class="text-sm text-[var(--text-muted)]">
        Choose carriers and plan shells to request. Quoting contacts live per provider in Settings.
      </p>
      <UAlert
        v-if="quoteMode === 'comparative_pdf'"
        color="info"
        variant="soft"
        class="mt-4"
        title="Comparative quote"
        description="We'll align columns to your selected plan mix. Enter premiums from email, rate tables, or AI-assisted pricing when available."
      />
      <UAlert v-else color="neutral" variant="soft" class="mt-4" title="Single quote" description="We'll package one request per carrier with the same insured and coverage intent." />
    </div>

    <div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4 ring-1 ring-black/[0.04]">
      <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Carriers</p>
      <ul class="mt-3 divide-y divide-[var(--sidebar-border)]">
        <li
          v-for="c in LIFE_QUOTE_CARRIERS"
          :key="c.id"
          class="flex flex-wrap items-start justify-between gap-3 py-3 first:pt-0"
        >
          <UCheckbox
            :model-value="carrierChecked(c.id)"
            :label="c.name"
            @update:model-value="(v: boolean) => setCarrier(c.id, v)"
          />
          <span class="text-xs text-[var(--text-muted)]">{{ c.detail }}</span>
        </li>
      </ul>
    </div>

    <div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4 ring-1 ring-black/[0.04]">
      <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Plans / coverage shells</p>
      <ul class="mt-3 space-y-3">
        <li
          v-for="p in LIFE_COVERAGE_PLANS"
          :key="p.id"
          class="flex flex-col gap-1 rounded-lg border border-[var(--sidebar-border)]/80 bg-[var(--page-bg)]/50 p-3 sm:flex-row sm:items-center sm:justify-between"
        >
          <UCheckbox
            :model-value="planChecked(p.id)"
            :label="p.label"
            @update:model-value="(v: boolean) => setPlan(p.id, v)"
          />
          <span class="text-xs text-[var(--text-muted)] sm:text-right">{{ p.hint }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
