<template>
  <div class="view">
    <div class="view-label">Source Readiness</div>
    <div class="view-header">
      <h1>Source coverage map</h1>
      <p class="subtitle">Only the evidence lanes that matter for research progress: raw source availability, competitor capture coverage, and what is still blocked.</p>
    </div>

    <div v-if="loading" class="loading">Loading...</div>
    <template v-else-if="status">
      <section class="hero">
        <div class="hero-stats">
          <div class="stat-card">
            <strong>{{ status.productCount }}</strong>
            <span>catalogue SKUs</span>
          </div>
          <div class="stat-card" :class="missingSourceCount ? 'warn' : 'ok'">
            <strong>{{ missingSourceCount }}</strong>
            <span>blocked source lanes</span>
          </div>
          <div class="stat-card">
            <strong>{{ pdpCompetitorCount }}/{{ status.competitorCoverage.length }}</strong>
            <span>competitor probes</span>
          </div>
          <div class="stat-card" :class="status.ready ? 'ok' : 'warn'">
            <strong>{{ status.ready ? 'Ready' : 'Blocked' }}</strong>
            <span>research state</span>
          </div>
        </div>
      </section>

      <section class="grid">
        <article class="panel-card">
          <h2>Raw source lanes</h2>
          <div class="lane-list">
            <div v-for="source in status.sourceKinds" :key="source.key" class="lane-row" :class="source.status">
              <span>{{ source.status }}</span>
              <div>
                <strong>{{ source.label }}</strong>
                <p>{{ source.requiredFor }}</p>
                <small>{{ source.fileCount }}/{{ source.expected }} · {{ source.note }}</small>
              </div>
            </div>
          </div>
        </article>

        <article class="panel-card">
          <h2>Competitor capture coverage</h2>
          <div class="lane-list">
            <div v-for="row in status.competitorCoverage" :key="row.brand" class="lane-row" :class="row.pdpProbe ? 'ready' : 'missing'">
              <span>{{ row.pdpProbe ? 'available' : 'missing' }}</span>
              <div>
                <strong>{{ row.brand }}</strong>
                <p>{{ row.domain }}</p>
                <small>{{ row.file || 'No probe file yet' }}</small>
              </div>
            </div>
          </div>
        </article>
      </section>

      <section class="panel-card wide">
        <h2>Intelligence file coverage</h2>
        <div class="coverage-list">
          <div v-for="row in status.coverage" :key="row.view" class="coverage-row">
            <div>
              <strong>{{ row.view }}.json</strong>
              <p>{{ row.count }}/{{ row.total }} ready · {{ row.missing }} missing</p>
            </div>
            <div class="bar-wrap">
              <div class="bar"><span :style="{ width: row.percent + '%' }"></span></div>
              <small>{{ row.percent }}%</small>
            </div>
          </div>
        </div>
      </section>
    </template>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
const status = ref(null)
const loading = ref(false)
const missingSourceCount = computed(() => (status.value?.sourceKinds || []).filter(s => s.status !== 'ready').length)
const pdpCompetitorCount = computed(() => (status.value?.competitorCoverage || []).filter(c => c.pdpProbe).length)
onMounted(async () => {
  loading.value = true
  try {
    const res = await fetch('/api/sources/status')
    status.value = res.ok ? await res.json() : null
  } finally { loading.value = false }
})
</script>

<style scoped src="../views/view.css" />
<style scoped>
.hero{margin-bottom:14px}.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.stat-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm)}.stat-card strong{display:block;font-size:24px}.stat-card span{font-size:12px;color:var(--text-muted)}.stat-card.ok strong{color:var(--positive)}.stat-card.warn strong{color:#c2410c}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.panel-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm)}.panel-card.wide{margin-top:14px}.panel-card h2{font-size:16px;margin:0 0 10px}.lane-list,.coverage-list{display:grid;gap:10px}.lane-row{display:grid;grid-template-columns:92px 1fr;gap:10px;border:1px solid var(--border);border-radius:var(--radius);padding:12px;background:#fafaf9}.lane-row>span{font-size:10px;text-transform:uppercase;font-weight:700;letter-spacing:.08em}.lane-row.ready>span{color:var(--positive)}.lane-row.partial>span{color:#c2410c}.lane-row.missing>span{color:var(--negative)}.lane-row strong,.coverage-row strong{font-size:13px;display:block}.lane-row p,.lane-row small,.coverage-row p,.coverage-row small{font-size:12px;line-height:1.5;color:var(--text-secondary)}.coverage-row{display:grid;grid-template-columns:1fr 220px;gap:12px;align-items:center;border:1px solid var(--border);border-radius:var(--radius);padding:12px;background:#fafaf9}.bar-wrap{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.bar{height:8px;background:#f1f1ef;border-radius:999px;overflow:hidden}.bar span{display:block;height:100%;background:var(--accent);border-radius:999px}@media (max-width:1000px){.hero-stats,.grid,.coverage-row{grid-template-columns:1fr}} 
</style>
