<template>
  <div class="view">
    <div class="view-label">Compliance Trail</div>
    <div class="view-header">
      <h1>Clinical claims gate</h1>
      <p class="subtitle">Every <code>pdp.clinically_shown_to</code> value must trace to source-backed clinical evidence and a human compliance decision before Matrixify handoff.</p>
    </div>

    <div v-if="loading" class="loading">Loading...</div>
    <template v-else-if="status">
      <div class="summary">
        <div><strong>{{ status.summary.total }}</strong><span>SKUs checked</span></div>
        <div class="bad"><strong>{{ status.summary.blocked_source || 0 }}</strong><span>source blocked</span></div>
        <div><strong>{{ status.summary.sourceBackedClaims }}</strong><span>source-backed claims</span></div>
        <div><strong>{{ status.summary.candidateThemes }}</strong><span>VoC themes not clinical</span></div>
      </div>

      <div class="gate-note">
        <strong>Rule:</strong> Feefo/customer language can support benefit copy, FAQs, and audience framing, but it cannot populate <code>clinically_shown_to</code>. Rows only become ready when claims-evidence.json contains source-backed claims, the product metafield references a clinical metaobject, and compliance is reviewed.
      </div>

      <div class="table-wrap">
        <table class="data-table">
          <thead>
            <tr><th>SKU</th><th>Status</th><th>Claim ref</th><th>Evidence</th><th>Source trail</th><th>Blockers</th></tr>
          </thead>
          <tbody>
            <tr v-for="row in rows" :key="row.sku">
              <td><div class="sku">{{ row.sku }}</div><small>{{ row.name }}</small></td>
              <td><span class="badge" :class="row.status">{{ label(row.status) }}</span><small>{{ row.approval }}</small></td>
              <td class="claim-ref">{{ row.claimRef || 'BLOCKED' }}</td>
              <td>
                <strong>{{ row.sourceBackedClaimCount }}</strong> source-backed
                <small>{{ row.candidateThemeCount }} candidate VoC themes</small>
              </td>
              <td class="trail">
                <div>{{ row.complianceGate }}</div>
                <ul v-if="row.citations?.length">
                  <li v-for="citation in row.citations" :key="citation.path + citation.source">{{ citation.source }} — {{ citation.note }}</li>
                </ul>
                <ul v-else-if="row.candidateThemes?.length">
                  <li v-for="theme in row.candidateThemes.slice(0, 3)" :key="theme.rank">{{ theme.theme }} <em>({{ theme.allowedUse }})</em></li>
                </ul>
              </td>
              <td><ul class="blockers"><li v-for="b in row.blockers" :key="b">{{ b }}</li><li v-if="!row.blockers.length">None</li></ul></td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
const status = ref(null)
const loading = ref(false)
const rows = computed(() => (status.value?.rows || []).slice().sort((a, b) => statusRank(a) - statusRank(b) || a.sku.localeCompare(b.sku)))
function statusRank(row) {
  return { blocked_source: 0, blocked_mapping: 1, needs_review: 2, pending_intelligence: 3, ready: 4 }[row.status] ?? 9
}
function label(value) {
  return String(value || '').replace(/_/g, ' ')
}
onMounted(async () => {
  loading.value = true
  try {
    const res = await fetch('/api/compliance/status')
    status.value = res.ok ? await res.json() : null
  } finally {
    loading.value = false
  }
})
</script>

<style scoped src="../views/view.css" />
<style scoped>
.summary { display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:12px; margin-bottom:16px; }
.summary>div, .gate-note { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; }
.summary strong { display:block; font-size:24px; }
.summary span { font-size:12px; color:var(--text-muted); }
.summary .bad strong { color:var(--negative); }
.gate-note { color:var(--text-secondary); font-size:13px; line-height:1.55; margin-bottom:16px; }
.gate-note code { color:var(--accent); }
.sku { font-family:monospace; font-size:12px; font-weight:700; }
small { display:block; color:var(--text-muted); margin-top:3px; font-size:11px; }
.badge { display:inline-block; padding:3px 9px; border-radius:999px; font-size:11px; text-transform:capitalize; background:#f3f4f6; color:#555; }
.badge.ready { background:var(--positive-bg); color:var(--positive); }
.badge.blocked_source, .badge.blocked_mapping { background:var(--negative-bg); color:var(--negative); }
.badge.needs_review { background:#fff7ed; color:#c2410c; }
.badge.pending_intelligence { background:#eef2ff; color:#4338ca; }
.claim-ref { font-family:monospace; font-size:12px; color:var(--text-secondary); }
.trail { min-width:280px; font-size:12px; color:var(--text-secondary); line-height:1.45; }
ul { margin:6px 0 0; padding-left:18px; }
.blockers { font-size:12px; color:var(--negative); line-height:1.45; }
em { color:var(--text-muted); }
@media (max-width:900px){ .summary{grid-template-columns:1fr 1fr;} }
</style>
