<template>
  <div class="view">
    <div class="view-label">Competitor Analysis</div>
    <div class="view-header">
      <h1>Competitive Landscape <span class="count-badge">{{ data?.competitors?.length || 0 }}</span></h1>
      <p class="subtitle">How {{ data?.name }} stacks up against the market. Scraped from competitor PDPs — pricing, positioning, review signals, and what JV can learn.</p>
    </div>

    <div v-if="loading" class="loading">Loading…</div>
    <div v-else-if="!data" class="empty">No competitor data available for this product yet.</div>
    <template v-else>

      <!-- JV position summary -->
      <div class="position-row">
        <div class="position-card">
          <div class="position-icon">★</div>
          <div>
            <div class="position-title">Review Leader</div>
            <div class="position-body">{{ data.jvPosition?.reviewsNote }}</div>
          </div>
        </div>
        <div class="position-card formula">
          <div class="position-icon">⬆</div>
          <div>
            <div class="position-title">Formula Advantage</div>
            <div class="position-body">{{ data.jvPosition?.formulaAdvantage }}</div>
          </div>
        </div>
        <div class="position-card price">
          <div class="position-icon">£</div>
          <div>
            <div class="position-title">Price Position</div>
            <div class="position-body">{{ data.jvPosition?.pricePosition }}</div>
          </div>
        </div>
      </div>

      <!-- Competitor table -->
      <div class="table-actions">
        <button class="export-btn primary">↑ Export</button>
      </div>
      <div class="table-wrap">
        <table class="data-table">
          <thead>
            <tr>
              <th style="width:40px">#</th>
              <th>Brand / Product</th>
              <th style="width:90px">Type</th>
              <th style="width:70px">Price</th>
              <th style="width:100px">Rating</th>
              <th style="width:90px">Reviews</th>
              <th style="width:70px">Supply</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="c in data.competitors"
              :key="c.rank"
              class="competitor-row"
              :class="{ active: selected === c.rank }"
              @click="selected = selected === c.rank ? null : c.rank"
            >
              <td class="rank">{{ c.rank }}</td>
              <td class="brand-cell">
                <div class="brand-name">{{ c.brand }}</div>
                <div class="product-name">{{ c.product }}</div>
              </td>
              <td><span class="type-badge" :class="c.type">{{ typeLabel(c.type) }}</span></td>
              <td class="price-cell">{{ c.price }}</td>
              <td>
                <div class="rating-row">
                  <span class="rating-num">{{ c.rating }}</span>
                  <span class="rating-star">★</span>
                </div>
              </td>
              <td class="reviews-cell">{{ c.reviews?.toLocaleString() }}</td>
              <td class="supply-cell">{{ c.supplyDays }}d</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Expanded detail -->
      <transition name="fade">
        <div v-if="selectedComp" class="detail-card">
          <div class="detail-header">
            <div>
              <div class="detail-brand">{{ selectedComp.brand }} — {{ selectedComp.product }}</div>
              <div class="detail-headline">"{{ selectedComp.headline }}"</div>
            </div>
            <span class="type-badge" :class="selectedComp.type">{{ typeLabel(selectedComp.type) }}</span>
          </div>

          <div class="detail-cols">
            <div class="detail-col">
              <div class="detail-col-title strength-title">Their Strengths</div>
              <ul class="detail-list">
                <li v-for="s in selectedComp.strengths" :key="s">{{ s }}</li>
              </ul>
            </div>
            <div class="detail-col">
              <div class="detail-col-title weakness-title">Their Weaknesses</div>
              <ul class="detail-list">
                <li v-for="w in selectedComp.weaknesses" :key="w">{{ w }}</li>
              </ul>
            </div>
          </div>

          <div class="learning-banner">
            <span class="learning-icon">💡</span>
            <div>
              <div class="learning-title">What JV Can Learn</div>
              <div class="learning-body">{{ selectedComp.jvLearning }}</div>
            </div>
          </div>

          <div class="differentiators-row">
            <div class="diff-title">Key Differentiators</div>
            <div class="diff-list">
              <span v-for="d in selectedComp.differentiators" :key="d" class="diff-pill">{{ d }}</span>
            </div>
          </div>
        </div>
      </transition>

      <!-- Gaps & Opportunities -->
      <div class="two-col-section">
        <div class="two-col-card">
          <div class="section-title danger-title">Competitive Gaps</div>
          <div class="gap-list">
            <div v-for="(gap, i) in data.jvPosition?.gaps" :key="i" class="gap-item">
              <span class="gap-icon">✗</span>
              <span>{{ gap }}</span>
            </div>
          </div>
        </div>
        <div class="two-col-card">
          <div class="section-title success-title">Opportunities</div>
          <div class="gap-list">
            <div v-for="(opp, i) in data.jvPosition?.opportunities" :key="i" class="opp-item">
              <span class="opp-icon">→</span>
              <span>{{ opp }}</span>
            </div>
          </div>
        </div>
      </div>

    </template>
  </div>
</template>

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

const route = useRoute()
const data = ref(null)
const loading = ref(false)
const selected = ref(null)

const selectedComp = computed(() => {
  if (selected.value === null) return null
  return data.value?.competitors?.find(c => c.rank === selected.value) || null
})

function typeLabel(type) {
  const map = { direct: 'Direct', 'category-leader': 'Category Leader', 'premium-segment': 'Premium', adjacent: 'Adjacent' }
  return map[type] || type
}

async function load(sku) {
  if (!sku) return
  loading.value = true
  selected.value = null
  try {
    const res = await fetch(`/api/intelligence/${sku}/competitor-analysis`)
    data.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>
/* Position row */
.position-row { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.position-card {
  flex: 1; min-width: 200px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 18px;
  display: flex; align-items: flex-start; gap: 12px;
}
.position-card.formula { background: #f0f9ff; border-color: #bae6fd; }
.position-card.price   { background: #f0fdf4; border-color: #bbf7d0; }
.position-icon { font-size: 18px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--accent-light); border-radius: 8px; flex-shrink: 0; }
.position-title { font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.position-body  { font-size: 11px; color: var(--text-secondary); line-height: 1.4; }

/* Table */
.brand-cell { padding: 10px 12px; }
.brand-name  { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.product-name{ font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.price-cell  { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.rating-row  { display: flex; align-items: center; gap: 3px; }
.rating-num  { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.rating-star { font-size: 11px; color: #f59e0b; }
.reviews-cell{ font-size: 12px; color: var(--text-secondary); }
.supply-cell { font-size: 12px; color: var(--text-muted); }
.competitor-row { cursor: pointer; }
.competitor-row.active { background: var(--accent-light); }

/* Type badge */
.type-badge {
  display: inline-block; padding: 2px 9px; border-radius: 10px;
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.type-badge.direct           { background: #fef2f2; color: var(--negative); }
.type-badge.category-leader  { background: var(--accent-light); color: var(--accent); }
.type-badge.premium-segment  { background: #fef9c3; color: #a16207; }
.type-badge.adjacent         { background: var(--bg); color: var(--text-muted); }

/* Detail card */
.detail-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px 24px; margin-bottom: 24px;
}
.detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 12px; }
.detail-brand   { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.detail-headline{ font-size: 12px; color: var(--text-muted); font-style: italic; line-height: 1.4; max-width: 600px; }
.detail-cols { display: flex; gap: 20px; margin-bottom: 16px; }
.detail-col { flex: 1; }
.detail-col-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.strength-title { color: var(--positive); }
.weakness-title { color: var(--negative); }
.detail-list { padding-left: 16px; }
.detail-list li { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 4px; }

/* Learning banner */
.learning-banner {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 16px;
}
.learning-icon { font-size: 16px; flex-shrink: 0; }
.learning-title { font-size: 12px; font-weight: 600; color: #92400e; margin-bottom: 3px; }
.learning-body  { font-size: 12px; color: #78350f; line-height: 1.5; }

/* Differentiators */
.differentiators-row { }
.diff-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px; }
.diff-list { display: flex; flex-wrap: wrap; gap: 6px; }
.diff-pill {
  font-size: 11px; color: var(--text-secondary);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 10px;
}

/* Gaps & Opportunities */
.two-col-section { display: flex; gap: 16px; flex-wrap: wrap; }
.two-col-card { flex: 1; min-width: 240px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; }
.section-title { font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.danger-title  { color: var(--negative); }
.success-title { color: var(--positive); }
.gap-list { display: flex; flex-direction: column; gap: 10px; }
.gap-item, .opp-item { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.gap-icon { color: var(--negative); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.opp-icon { color: var(--positive); font-weight: 700; flex-shrink: 0; margin-top: 1px; }

/* Fade */
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
</style>
