<script setup lang="ts">
import type { AutoQuoteDraft, AutoQuoteMode, AutoQuoteSegment } from '~/types/auto-quote-intake'

const props = defineProps<{
  draft: AutoQuoteDraft
  modeCards: { id: AutoQuoteMode; title: string; hint: string; icon: string }[]
  segmentCards: { id: AutoQuoteSegment; title: string; hint: string; icon: string }[]
}>()

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

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

/** Mount vehicle + selects after first paint — avoids blocking the main thread when the route opens */
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 — same workflow; comparative opens the comparison sheet after you send requests.</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)]">Who is this policy for?</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 class="border-t border-[var(--sidebar-border)] pt-10">
      <QuotesAutoCustomerVehicleStep v-if="showDetails" :draft="draft" :segment="draft.segment" />
      <div
        v-else
        class="min-h-[14rem] rounded-xl bg-[var(--sidebar-border)]/25 animate-pulse"
        aria-busy="true"
        aria-label="Loading form"
      />
    </section>
  </div>
</template>
