<template>
  <IntelligenceShell
    view-name="amazon-reviews"
    label="Amazon Reviews"
    title="Amazon evidence"
    subtitle="Only the useful Amazon picture for this SKU: what exact JV evidence exists, what is competitor context, and what raw review text we can actually inspect."
    count-key="themes"
  >
    <template #default="{ data }">
      <section v-if="data.aggregate" class="hero-grid">
        <div class="summary-card">
          <span class="summary-label">Coverage</span>
          <strong>{{ human(data.coverage) }}</strong>
          <p>Marketplace evidence state for this SKU.</p>
        </div>
        <div v-if="data.aggregate.asinCandidates?.length" class="summary-card">
          <span class="summary-label">ASINs seen</span>
          <strong>{{ data.aggregate.asinCandidates.join(', ') }}</strong>
          <p>Candidate listing IDs detected so far.</p>
        </div>
        <div v-if="data.aggregate.exactJvListingSeen === false" class="summary-card warning">
          <span class="summary-label">Exact JV listing</span>
          <strong>Not confirmed</strong>
          <p>Use Amazon only as context until the exact product listing is confirmed.</p>
        </div>
      </section>

      <section v-if="data.aggregate?.jvListingsSeen?.length || data.aggregate?.closestEffervescentCompetitorsSeen?.length" class="grid">
        <article v-for="listing in data.aggregate.jvListingsSeen || []" :key="listing.asin" class="listing-card">
          <span class="summary-label">JV listing</span>
          <h2>{{ listing.asin }}</h2>
          <p>{{ listing.pack }}</p>
          <div class="rating-line">
            <strong>{{ listing.rating }}/5</strong>
            <span>{{ listing.votes }} votes</span>
          </div>
        </article>

        <article v-for="listing in data.aggregate.closestEffervescentCompetitorsSeen || []" :key="listing.title" class="listing-card competitor">
          <span class="summary-label">Competitor/category</span>
          <h2>{{ listing.title }}</h2>
          <div class="rating-line">
            <strong>{{ listing.rating }}/5</strong>
            <span>{{ listing.votes }} votes</span>
          </div>
        </article>
      </section>

      <p v-if="data.aggregate?.competitorRangeSeen || data.aggregate?.publicSnippetCategory" class="evidence-note">
        {{ data.aggregate.competitorRangeSeen || data.aggregate.publicSnippetCategory }}
      </p>

      <section v-if="rawReviews.length" class="raw-review-panel">
        <div class="raw-review-head">
          <div>
            <span class="summary-label">Raw scraped Amazon reviews</span>
            <h2>{{ rawReviews.length }} review rows visible</h2>
          </div>
          <span class="status ready_for_pdp_improvement">raw_text_captured</span>
        </div>
        <div class="review-list">
          <article v-for="review in rawReviews" :key="review.reviewId || review.reviewUrl" class="raw-review-card">
            <div class="raw-review-meta">
              <strong>{{ review.ratingScore }}/5</strong>
              <span>{{ review.date }}</span>
              <span v-if="review.isVerified">Verified</span>
              <span v-if="review.matchContext">{{ human(review.matchContext) }}</span>
              <span v-if="review.matchedAsin || review.productAsin">{{ review.matchedAsin || review.productAsin }}</span>
            </div>
            <h3>{{ review.reviewTitle }}</h3>
            <p>{{ review.reviewDescription }}</p>
            <small v-if="review.variant">{{ review.variant }}</small>
            <a v-if="review.reviewUrl" :href="review.reviewUrl" target="_blank" rel="noopener">Open raw review source</a>
          </article>
        </div>
      </section>

      <section class="insight-panel">
        <h2>How to use Amazon evidence</h2>
        <div class="theme-list">
          <article v-for="row in data.themes" :key="row.rank" class="theme-card">
            <div class="theme-top">
              <span class="rank-pill">#{{ row.rank }}</span>
              <span class="status" :class="row.status">{{ row.status }}</span>
            </div>
            <h3>{{ row.theme }}</h3>
            <p>{{ row.evidence || row.jvPublicSignal || row.jvFeefoSignal }}</p>
            <small>{{ row.contentUse || row.expectedAmazonCheck }}</small>
          </article>
        </div>
      </section>
    </template>
  </IntelligenceShell>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import IntelligenceShell from './IntelligenceShell.vue'

const route = useRoute()
const rawEvidence = ref(null)
const rawReviews = computed(() => {
  const specialist = rawEvidence.value?.sections?.find(section => section.key === 'apify_specialists')
  return (specialist?.items || [])
    .filter(row => String(row.job || '').includes('amazon-reviews'))
    .map(row => row.item || row)
    .filter(item => item.reviewDescription || item.reviewTitle)
})

function human(value) { return String(value || '').replace(/[-_]/g, ' ') }

async function loadRawEvidence(sku) {
  if (!sku) return
  const res = await fetch(`/api/raw-evidence/${sku}`)
  rawEvidence.value = res.ok ? await res.json() : null
}

onMounted(() => loadRawEvidence(route.params.sku))
watch(() => route.params.sku, loadRawEvidence)
</script>

<style scoped src="../views/view.css" />
<style scoped>
.hero-grid,.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}.summary-card,.listing-card,.raw-review-panel,.insight-panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm)}.summary-card.warning{background:#fff7ed;border-color:#fed7aa}.summary-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:6px}.summary-card strong,.listing-card h2,.raw-review-head h2,.insight-panel h2{font-size:16px;margin:0}.summary-card p,.listing-card p,.evidence-note,.raw-review-card p,.theme-card p,.theme-card small{font-size:12px;line-height:1.55;color:var(--text-secondary)}.listing-card.competitor h2{font-size:14px;line-height:1.4}.rating-line{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--text-secondary);margin-top:10px}.rating-line strong{color:var(--positive)}.evidence-note{background:#f8fafc;border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin:0 0 14px}.status{padding:3px 8px;border-radius:999px;font-size:11px;background:#fff7ed;color:#c2410c;white-space:nowrap}.status.ready_for_pdp_improvement,.status.usable_aggregate_not_review_text{background:var(--positive-bg);color:var(--positive)}.status.contamination_filter,.status.compliance_guardrail,.status.guardrail_exact_listing_missing{background:var(--negative-bg);color:var(--negative)}.raw-review-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}.review-list{display:grid;gap:10px}.raw-review-card{border:1px solid var(--border);border-radius:var(--radius);padding:12px;background:#fafaf9}.raw-review-card h3{font-size:14px;margin:6px 0}.raw-review-card small{display:block;color:var(--text-muted);margin-bottom:6px}.raw-review-card a{font-size:12px;color:var(--accent);font-weight:700}.raw-review-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:11px;color:var(--text-muted)}.raw-review-meta strong{color:var(--positive)}.insight-panel{margin-top:14px}.theme-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}.theme-card{border:1px solid var(--border);border-radius:var(--radius);padding:12px;background:#fafaf9}.theme-top{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:8px}.rank-pill{font-size:11px;color:var(--text-muted);background:#f1f1ef;border-radius:999px;padding:3px 8px}.theme-card h3{font-size:14px;margin:0 0 6px}.theme-card small{display:block;margin-top:8px}@media(max-width:1000px){.hero-grid,.grid,.theme-list{grid-template-columns:1fr}}
</style>
