<template>
  <div class="view">
    <div class="view-label">Product Catalog</div>
    <div class="view-header">
      <h1>Research targets <span class="count-badge">{{ products.length }}</span></h1>
      <p class="subtitle">Choose a product and move directly into scraping, research evidence, and PDP build work.</p>
    </div>

    <div v-if="loading" class="loading">Loading...</div>
    <template v-else>
      <div class="toolbar">
        <input v-model="search" class="search-input" placeholder="Search by product or SKU..." />
        <div class="toolbar-note">{{ readyCount }} ready for research</div>
      </div>

      <div class="catalog-grid">
        <article
          v-for="(p, i) in filtered"
          :key="p.sku"
          class="product-card"
          @click="go(p.sku)"
        >
          <div class="card-top">
            <div class="thumb-wrap">
              <img v-if="p.imageUrl" :src="p.imageUrl" class="product-thumb" :alt="p.name" @error="e => e.target.style.display='none'" />
              <div v-else class="thumb-placeholder"></div>
            </div>
            <div class="card-rank">#{{ i + 1 }}</div>
          </div>

          <div class="card-body">
            <span class="sku">{{ p.sku }}</span>
            <h2>{{ p.name }}</h2>
            <div class="meta-row">
              <span class="review-pill">{{ (p.totalReviews || 0).toLocaleString() }} reviews</span>
              <span class="intel-badge" :class="p.hasIntelligence ? 'ready' : 'pending'">
                {{ p.hasIntelligence ? 'Ready' : 'Pending' }}
              </span>
            </div>
          </div>

          <div class="card-actions">
            <span class="open-link">Open research</span>
            <a v-if="p.productUrl" :href="p.productUrl" target="_blank" rel="noopener" class="source-link" @click.stop>Source page</a>
          </div>
        </article>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const products = ref([])
const loading = ref(false)
const search = ref('')

const filtered = computed(() => {
  const q = search.value.toLowerCase()
  if (!q) return products.value
  return products.value.filter(p =>
    p.name?.toLowerCase().includes(q) || p.sku?.toLowerCase().includes(q)
  )
})

const readyCount = computed(() => products.value.filter(p => p.hasIntelligence).length)

function go(sku) {
  router.push(`/product/${sku}/research-profile`)
}

onMounted(async () => {
  loading.value = true
  try {
    const res = await fetch('/api/products')
    products.value = await res.json()
  } finally { loading.value = false }
})
</script>

<style scoped src="../views/view.css" />
<style scoped>
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.toolbar-note{font-size:12px;color:var(--text-secondary);background:#f6f6f4;border:1px solid var(--border);border-radius:999px;padding:6px 10px}.search-input{padding:8px 12px;border:1px solid var(--border);border-radius:999px;font-size:13px;background:#fff;width:280px}.search-input:focus{outline:none;border-color:var(--accent)}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.product-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}.product-card:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:var(--accent-border)}.card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.thumb-wrap{width:52px;height:52px;border-radius:12px;background:#f6f6f4;display:flex;align-items:center;justify-content:center;overflow:hidden}.product-thumb{width:100%;height:100%;object-fit:contain;background:#fff}.thumb-placeholder{width:100%;height:100%;background:#f3f4f6}.card-rank{font-size:11px;color:var(--text-muted);background:#fafaf9;border:1px solid var(--border);border-radius:999px;padding:4px 8px}.card-body .sku{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:6px}.card-body h2{font-size:15px;line-height:1.35;margin:0 0 12px}.meta-row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.review-pill{display:inline-block;padding:4px 9px;background:#f4f4f3;border-radius:999px;font-size:12px;font-weight:500;color:var(--text-secondary)}.intel-badge{display:inline-block;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:600}.ready{background:var(--positive-bg);color:var(--positive)}.pending{background:#f3f4f6;color:var(--text-muted)}.card-actions{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--border-light)}.open-link{font-size:12px;font-weight:600;color:var(--accent)}.source-link{font-size:12px;color:var(--text-secondary)}@media(max-width:1100px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.toolbar,.catalog-grid{grid-template-columns:1fr;display:grid}.search-input{width:100%}}
</style>
