<script setup lang="ts">
definePageMeta({ ssr: false })
usePageTitle('Emissions review')

const toast = useToast()
const { items, approve, sendToInsurer, markInForce } = useEmissionsQueue()

const pending = computed(() => items.value.filter((x) => x.status === 'pending_review'))
const rest = computed(() => items.value.filter((x) => x.status !== 'pending_review'))

function onApprove(id: string) {
  approve(id)
  toast.add({ title: 'Marked approved', color: 'success' })
}

function onSend(id: string) {
  sendToInsurer(id)
  toast.add({ title: 'Marked sent to insurer', color: 'success' })
}

function onInForce(id: string) {
  markInForce(id)
  toast.add({ title: 'Marked in force', color: 'success' })
}

/* ── Mock pipeline data for when queue is empty ── */
const mockEmissions = [
  { id: 'EM-2025-0041', customer: 'María Elena Pérez', insurer: 'ASSA', line: 'Auto', product: '2023 Toyota RAV4 — Comprehensive', premium: '$1,840', status: 'pending_review' as const, submitted: '2025-04-03', agent: 'Ana R.', docs: 3, docsTotal: 3 },
  { id: 'EM-2025-0040', customer: 'Roberto Jiménez Mora', insurer: 'Pan-American Life', line: 'Life', product: 'Whole life — $150K', premium: '$1,440', status: 'approved' as const, submitted: '2025-04-02', agent: 'Ana R.', docs: 4, docsTotal: 4 },
  { id: 'EM-2025-0039', customer: 'Luis Andrés Solís', insurer: 'Blue Cross', line: 'Health', product: 'Family health — Platinum', premium: '$8,400', status: 'sent_to_insurer' as const, submitted: '2025-04-01', agent: 'Ana R.', docs: 5, docsTotal: 5 },
  { id: 'EM-2025-0038', customer: 'Sofía Campos Rojas', insurer: 'INS', line: 'Auto', product: '2024 Mazda CX-30 — Comprehensive', premium: '$1,380', status: 'pending_review' as const, submitted: '2025-03-30', agent: 'Marco V.', docs: 2, docsTotal: 3 },
  { id: 'EM-2025-0037', customer: 'Carolina Fallas Vargas', insurer: 'ASSA', line: 'Renter', product: "Renter's insurance — Paraíso apt", premium: '$320', status: 'in_force' as const, submitted: '2025-03-28', agent: 'Marco V.', docs: 2, docsTotal: 2 },
  { id: 'EM-2025-0036', customer: 'Roberto Jiménez Mora', insurer: 'ASSA', line: 'Home', product: 'Homeowner — Belén residence', premium: '$890', status: 'in_force' as const, submitted: '2025-03-25', agent: 'Ana R.', docs: 4, docsTotal: 4 },
]

type EmissionStatus = 'pending_review' | 'approved' | 'sent_to_insurer' | 'in_force'

const statusMeta: Record<EmissionStatus, { label: string; class: string; icon: string }> = {
  pending_review:   { label: 'Pending review', class: 'em-status-pending', icon: 'i-heroicons-clock' },
  approved:         { label: 'Approved', class: 'em-status-approved', icon: 'i-heroicons-check' },
  sent_to_insurer:  { label: 'Sent to insurer', class: 'em-status-sent', icon: 'i-heroicons-paper-airplane' },
  in_force:         { label: 'In force', class: 'em-status-force', icon: 'i-heroicons-shield-check' },
}

const activeFilter = ref<EmissionStatus | 'all'>('all')
const filterTabs: { id: EmissionStatus | 'all'; label: string; count: number }[] = [
  { id: 'all', label: 'All', count: mockEmissions.length },
  { id: 'pending_review', label: 'Pending', count: mockEmissions.filter(e => e.status === 'pending_review').length },
  { id: 'approved', label: 'Approved', count: mockEmissions.filter(e => e.status === 'approved').length },
  { id: 'sent_to_insurer', label: 'Sent', count: mockEmissions.filter(e => e.status === 'sent_to_insurer').length },
  { id: 'in_force', label: 'In force', count: mockEmissions.filter(e => e.status === 'in_force').length },
]

const filteredEmissions = computed(() => {
  if (activeFilter.value === 'all') return mockEmissions
  return mockEmissions.filter(e => e.status === activeFilter.value)
})

/* ── KPI summary ── */
const kpis = [
  { label: 'Pending review', value: mockEmissions.filter(e => e.status === 'pending_review').length.toString(), sub: 'Awaiting QA', dot: 'background: #c27b1a' },
  { label: 'Approved', value: mockEmissions.filter(e => e.status === 'approved').length.toString(), sub: 'Ready to send', dot: 'background: #01696f' },
  { label: 'Sent to insurer', value: mockEmissions.filter(e => e.status === 'sent_to_insurer').length.toString(), sub: 'Awaiting response', dot: 'background: #7c3aed' },
  { label: 'In force', value: mockEmissions.filter(e => e.status === 'in_force').length.toString(), sub: 'This month', dot: 'background: #0f7b5f' },
]
</script>

<template>
  <div class="em mx-auto max-w-5xl space-y-6 pb-12">
    <!-- Back -->
    <NuxtLink to="/onboarding" class="inline-flex">
      <UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-arrow-left">Pipeline</UButton>
    </NuxtLink>

    <!-- Sales flow indicator -->
    <SalesFlowIndicator current-stage="emission" />

    <!-- Header -->
    <div class="flex flex-wrap items-start justify-between gap-4">
      <div>
        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Emissions Review</h1>
        <p class="mt-1 max-w-2xl text-[13px] text-[var(--text-muted)]">
          Completed intakes land here for brokerage QA before submission to the carrier.
        </p>
      </div>
      <NuxtLink to="/onboarding/solicitud">
        <UButton size="sm" color="primary" icon="i-heroicons-plus">New solicitud</UButton>
      </NuxtLink>
    </div>

    <!-- KPI Strip -->
    <div class="em-kpi-strip">
      <div v-for="(kpi, i) in kpis" :key="kpi.label" class="em-kpi">
        <p class="em-kpi-label">{{ kpi.label }}</p>
        <p class="em-kpi-value">{{ kpi.value }}</p>
        <div class="mt-1 flex items-center gap-1.5">
          <span class="em-kpi-dot" :style="kpi.dot" />
          <p class="text-[11px] text-[var(--text-muted)]">{{ kpi.sub }}</p>
        </div>
      </div>
    </div>

    <!-- Filter tabs -->
    <div class="em-tabs">
      <button
        v-for="tab in filterTabs"
        :key="tab.id"
        type="button"
        class="em-tab"
        :class="activeFilter === tab.id ? 'em-tab-on' : 'em-tab-off'"
        @click="activeFilter = tab.id"
      >
        {{ tab.label }}
        <span class="em-tab-count" :class="activeFilter === tab.id ? 'em-tab-count-on' : ''">{{ tab.count }}</span>
      </button>
    </div>

    <!-- Emissions table -->
    <div class="em-card">
      <div class="em-card-head">
        <UIcon name="i-heroicons-document-check" style="width: 16px; height: 16px; color: #01696f;" />
        <span>Emissions queue</span>
        <span class="ml-auto text-[11px] text-[var(--text-muted)]">{{ filteredEmissions.length }} items</span>
      </div>

      <div v-if="filteredEmissions.length === 0" class="px-6 py-12 text-center">
        <UIcon name="i-heroicons-inbox-stack" style="width: 40px; height: 40px; color: #c0c0bc; margin: 0 auto 12px;" />
        <p class="text-[13px] text-[var(--text-muted)]">No emissions in this status</p>
      </div>

      <table v-else class="em-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Customer</th>
            <th>Insurer</th>
            <th>Product</th>
            <th>Premium</th>
            <th>Docs</th>
            <th>Status</th>
            <th>Submitted</th>
            <th class="text-right">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="em in filteredEmissions" :key="em.id">
            <td class="font-mono text-[11px] font-medium">{{ em.id }}</td>
            <td>
              <p class="text-[13px] font-medium text-[var(--text-primary)]">{{ em.customer }}</p>
              <p class="text-[11px] text-[var(--text-muted)]">{{ em.agent }}</p>
            </td>
            <td class="text-[13px]">{{ em.insurer }}</td>
            <td>
              <p class="text-[13px] text-[var(--text-primary)]">{{ em.line }}</p>
              <p class="text-[11px] text-[var(--text-muted)] max-w-[200px] truncate">{{ em.product }}</p>
            </td>
            <td class="text-[13px] font-medium tabular-nums">{{ em.premium }}</td>
            <td>
              <span class="em-doc-badge" :class="em.docs === em.docsTotal ? 'em-doc-complete' : 'em-doc-partial'">
                {{ em.docs }}/{{ em.docsTotal }}
              </span>
            </td>
            <td>
              <span :class="statusMeta[em.status].class">
                {{ statusMeta[em.status].label }}
              </span>
            </td>
            <td class="text-[12px] tabular-nums text-[var(--text-muted)]">{{ em.submitted }}</td>
            <td class="text-right">
              <div class="flex justify-end gap-1">
                <button v-if="em.status === 'pending_review'" type="button" class="em-action-btn em-action-approve" title="Approve">
                  <UIcon name="i-heroicons-check" style="width: 14px; height: 14px;" />
                </button>
                <button v-if="em.status === 'approved'" type="button" class="em-action-btn em-action-send" title="Send to insurer">
                  <UIcon name="i-heroicons-paper-airplane" style="width: 14px; height: 14px;" />
                </button>
                <button v-if="em.status === 'sent_to_insurer'" type="button" class="em-action-btn em-action-force" title="Mark in force">
                  <UIcon name="i-heroicons-shield-check" style="width: 14px; height: 14px;" />
                </button>
                <button type="button" class="em-action-btn" title="View details">
                  <UIcon name="i-heroicons-eye" style="width: 14px; height: 14px;" />
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Queue from composable (if any real items exist) -->
    <div v-if="items.length > 0" class="em-card">
      <div class="em-card-head">
        <UIcon name="i-heroicons-queue-list" style="width: 16px; height: 16px; color: #01696f;" />
        <span>Live queue (from solicitud intake)</span>
      </div>
      <table class="em-table">
        <thead>
          <tr>
            <th>Created</th>
            <th>Customer</th>
            <th>Insurer</th>
            <th>Sub-ramo</th>
            <th>Line</th>
            <th>Status</th>
            <th class="text-right">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in items" :key="row.id">
            <td class="font-mono text-[11px]">{{ row.createdAt.slice(0, 10) }}</td>
            <td class="text-[13px]">{{ row.customerLabel }}</td>
            <td class="text-[13px]">{{ row.insurerSlug }}</td>
            <td class="text-[13px]">{{ row.subRamoKey }}</td>
            <td class="text-[13px]">{{ row.productLine }}</td>
            <td>
              <span :class="statusMeta[row.status as EmissionStatus]?.class ?? 'em-status-pending'">
                {{ statusMeta[row.status as EmissionStatus]?.label ?? row.status }}
              </span>
            </td>
            <td class="text-right">
              <div class="flex justify-end gap-1">
                <button v-if="row.status === 'pending_review'" type="button" class="em-action-btn em-action-approve" @click="onApprove(row.id)">
                  <UIcon name="i-heroicons-check" style="width: 14px; height: 14px;" />
                </button>
                <button v-if="row.status === 'approved'" type="button" class="em-action-btn em-action-send" @click="onSend(row.id)">
                  <UIcon name="i-heroicons-paper-airplane" style="width: 14px; height: 14px;" />
                </button>
                <button v-if="row.status === 'sent_to_insurer'" type="button" class="em-action-btn em-action-force" @click="onInForce(row.id)">
                  <UIcon name="i-heroicons-shield-check" style="width: 14px; height: 14px;" />
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>
.em-section-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: #8a8a86; margin-bottom: 4px;
}

/* ── KPI strip ── */
.em-kpi-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.06); box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  overflow: hidden;
}
.em-kpi {
  padding: 16px 20px; background: #ffffff;
}
.em-kpi:first-child { border-radius: 12px 0 0 12px; }
.em-kpi:last-child { border-radius: 0 12px 12px 0; }
.em-kpi-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: #8a8a86;
}
.em-kpi-value {
  margin-top: 4px; font-size: 22px; font-weight: 600;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.em-kpi-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
@media (max-width: 640px) {
  .em-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tabs ── */
.em-tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 10px; background: rgba(0,0,0,0.04);
}
.em-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  border: none; cursor: pointer; transition: all 150ms ease;
}
.em-tab-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.em-tab-off { background: transparent; color: var(--text-muted); }
.em-tab-off:hover { color: var(--text-primary); }
.em-tab-count {
  font-size: 10px; font-weight: 600; padding: 1px 5px;
  border-radius: 9999px; background: rgba(0,0,0,0.06); color: var(--text-muted);
}
.em-tab-count-on { background: rgba(1,105,111,0.1); color: #01696f; }

/* ── Card ── */
.em-card {
  border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
  background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  overflow: hidden;
}
.em-card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px; border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 13px; font-weight: 600; color: var(--text-primary);
}

/* ── Table ── */
.em-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.em-table th {
  text-align: left; padding: 10px 16px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: #8a8a86;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.em-table td {
  padding: 12px 16px; color: var(--text-primary);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  vertical-align: top;
}
.em-table tr:last-child td { border-bottom: none; }
.em-table tr:hover td { background: rgba(0,0,0,0.015); }

/* ── Status badges ── */
.em-status-pending {
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 9999px;
  background: rgba(194,123,26,0.08); color: #964219;
  white-space: nowrap;
}
.em-status-approved {
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 9999px;
  background: rgba(1,105,111,0.08); color: #01696f;
  white-space: nowrap;
}
.em-status-sent {
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 9999px;
  background: rgba(124,58,237,0.08); color: #7c3aed;
  white-space: nowrap;
}
.em-status-force {
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 9999px;
  background: rgba(15,123,95,0.08); color: #0f7b5f;
  white-space: nowrap;
}

/* ── Doc badge ── */
.em-doc-badge {
  font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px;
}
.em-doc-complete { background: rgba(15,123,95,0.08); color: #0f7b5f; }
.em-doc-partial { background: rgba(194,123,26,0.08); color: #964219; }

/* ── Action buttons ── */
.em-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  border: none; cursor: pointer;
  background: rgba(0,0,0,0.03); color: #8a8a86;
  transition: all 150ms ease;
}
.em-action-btn:hover { background: rgba(0,0,0,0.06); color: var(--text-primary); }
.em-action-approve:hover { background: rgba(15,123,95,0.1); color: #0f7b5f; }
.em-action-send:hover { background: rgba(1,105,111,0.1); color: #01696f; }
.em-action-force:hover { background: rgba(15,123,95,0.1); color: #0f7b5f; }
</style>
