<template>
  <div class="view">
    <div class="view-label">Collagen NPD</div>
    <div class="view-header">
      <h1>Collagen market report</h1>
      <p class="subtitle">Final reverse-engineering brief for flavour, mixability, subscription retention, positioning and customer psychology.</p>
    </div>

    <div v-if="loading" class="loading">Loading collagen report...</div>
    <div v-else-if="!report" class="empty">No collagen report generated for this SKU.</div>
    <template v-else>
      <section class="report-hero">
        <div>
          <span class="eyebrow">Recommended decision</span>
          <h2>{{ report.executiveDecision?.recommendation }}</h2>
          <p>{{ report.executiveDecision?.reason }}</p>
        </div>
        <div class="metrics">
          <div><strong>{{ report.sourceBase?.latestVisibleItems || 0 }}</strong><span>scraped items</span></div>
          <div><strong>${{ money(report.sourceBase?.cumulativeApifySpendUsd) }}</strong><span>Apify spend</span></div>
          <div><strong>{{ report.flavourIntelligence?.length || 0 }}</strong><span>flavour routes</span></div>
        </div>
      </section>

      <section class="panel-card final-answer">
        <h2>Answer for Umar</h2>
        <p>{{ report.finalAnswerForUmar }}</p>
      </section>

      <section class="flavour-grid">
        <article v-for="flavour in report.flavourIntelligence" :key="flavour.flavour" class="panel-card flavour-card">
          <div class="flavour-top">
            <h2>{{ flavour.flavour }}</h2>
            <span>{{ flavour.verdict }}</span>
          </div>
          <h3>Why it can win</h3>
          <ul><li v-for="item in flavour.whyItCanWin" :key="item">{{ item }}</li></ul>
          <h3>Risks to engineer out</h3>
          <ul class="risk"><li v-for="item in flavour.risksToEngineerOut" :key="item">{{ item }}</li></ul>
          <p class="requirement"><strong>Requirement:</strong> {{ flavour.productRequirement }}</p>
        </article>
      </section>

      <section class="grid">
        <article class="panel-card">
          <h2>Mixability and texture</h2>
          <p>{{ report.mixabilityAndTexture?.marketRule }}</p>
          <ul><li v-for="item in report.mixabilityAndTexture?.requiredProofPoints" :key="item">{{ item }}</li></ul>
        </article>
        <article class="panel-card">
          <h2>Retention and subscription</h2>
          <p>{{ report.retentionAndSubscription?.finding }}</p>
          <ul><li v-for="item in report.retentionAndSubscription?.buildIntoOffer" :key="item">{{ item }}</li></ul>
        </article>
      </section>

      <section class="grid">
        <article class="panel-card">
          <h2>Customer psychology</h2>
          <ul><li v-for="item in report.customerPsychology" :key="item">{{ item }}</li></ul>
        </article>
        <article class="panel-card">
          <h2>Next actions</h2>
          <ul><li v-for="item in report.recommendedNextActions" :key="item">{{ item }}</li></ul>
        </article>
      </section>

      <section class="panel-card">
        <h2>Source signal counts</h2>
        <div class="chip-row">
          <span v-for="(value, key) in report.sourceBase?.signalCounts" :key="key" class="chip">{{ human(key) }}: {{ value }}</span>
        </div>
      </section>
    </template>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const report = ref(null)
const loading = ref(false)
function money(value) { return Number(value || 0).toFixed(2) }
function human(value) { return String(value || '').replace(/_/g, ' ') }
async function load(sku) {
  if (!sku) return
  loading.value = true
  try {
    const res = await fetch(`/api/intelligence/${sku}/collagen-market-report`)
    report.value = res.ok ? await res.json() : null
  } finally { loading.value = false }
}
onMounted(() => load(route.params.sku))
watch(() => route.params.sku, load)
</script>

<style scoped src="../views/view.css" />
<style scoped>
.report-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;background:linear-gradient(135deg,#111827,#243044);color:#fff;border-radius:var(--radius-lg);padding:20px;margin-bottom:14px}.report-hero h2{font-size:24px;line-height:1.25;margin:6px 0 10px}.report-hero p{color:#d1d5db;line-height:1.55}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#93c5fd;font-weight:800}.metrics{display:grid;grid-template-columns:1fr;gap:10px}.metrics div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:12px}.metrics strong{display:block;font-size:24px}.metrics span{font-size:11px;color:#d1d5db;text-transform:uppercase;letter-spacing:.06em}.panel-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm);margin-bottom:14px}.panel-card h2{font-size:16px;margin:0 0 10px}.panel-card p,.panel-card li{font-size:13px;line-height:1.55;color:var(--text-secondary)}.final-answer p{font-size:15px;color:var(--text-primary)}.flavour-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.flavour-card h3{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:12px 0 6px}.flavour-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.flavour-top span{font-size:11px;font-weight:800;color:var(--accent);background:var(--accent-light);border-radius:999px;padding:5px 8px}.risk li{color:#9f1239}.requirement{background:#fafaf9;border:1px solid var(--border);border-radius:var(--radius);padding:10px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.chip-row{display:flex;flex-wrap:wrap;gap:8px}.chip{font-size:12px;border:1px solid var(--border);background:#fafaf9;border-radius:999px;padding:6px 10px;color:var(--text-secondary)}@media(max-width:1000px){.report-hero,.flavour-grid,.grid{grid-template-columns:1fr}}
</style>
