<template>
  <div class="view">
    <div class="view-label">Product Insights</div>
    <div class="view-header">
      <h1>What customers love/dislike</h1>
      <p class="subtitle">Key insights derived from customer feedback and market analysis to understand your product's position.</p>
    </div>

    <div v-if="loading" class="loading">Loading…</div>
    <div v-else-if="!data" class="empty">No data available for this product yet.</div>
    <template v-else>
      <!-- Market Fit Score card -->
      <div class="score-row">
        <div class="score-card">
          <div class="score-num">{{ data.marketFitScore?.value?.toFixed(1) ?? '—' }}</div>
          <div class="score-label">out of 10</div>
          <div class="score-verdict">"{{ data.verdict?.split('.')[0] }}."</div>
        </div>
        <div class="score-bar-card">
          <div class="score-bar-label">Market Fit Score</div>
          <div class="score-bar-track">
            <div class="score-bar-fill" :style="{ width: ((data.marketFitScore?.value || 0) / 10 * 100) + '%' }"></div>
          </div>
          <div class="score-bar-sub" :class="scoreClass">{{ scoreLabel }}</div>
        </div>
        <div class="score-desc">{{ data.verdict }}</div>
      </div>

      <!-- S&W table -->
      <div class="section-title">
        Product Strengths &amp; Weaknesses <span class="count-badge">{{ data.items?.length }}</span>
      </div>
      <p class="subtitle" style="margin-bottom:12px">What customers love and dislike about your product based on customer feedback.</p>
      <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 style="width:80px">Reviews</th>
              <th>Product Insights</th>
              <th style="width:120px">Sentiment Ratio</th>
              <th style="width:160px">Classification</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="item in data.items" :key="item.rank">
              <tr class="aspect-row" :class="{ expandable: hasSupport(item), expanded: expanded.has(item.rank) }" @click="toggle(item)">
                <td class="rank">{{ item.rank }}</td>
                <td><span class="review-pill">{{ item.supportingReviewIndices?.length ?? item.reviews }}×</span></td>
                <td class="aspect-cell">{{ item.insight }}</td>
                <td>
                  <div class="ratio-bars">
                    <div class="ratio-pos" :style="{ width: item.sentimentRatio?.positive + '%' }"></div>
                    <div class="ratio-neg" :style="{ width: item.sentimentRatio?.negative + '%' }"></div>
                  </div>
                  <div class="ratio-labels">
                    <span class="pos-text">{{ item.sentimentRatio?.positive }}%</span>
                    <span class="neg-text">{{ item.sentimentRatio?.negative }}%</span>
                  </div>
                </td>
                <td>
                  <ClassificationBadge :label="item.classification" />
                  <span v-if="hasSupport(item)" class="caret">{{ expanded.has(item.rank) ? ' ▾' : ' ▸' }}</span>
                </td>
              </tr>
              <tr v-if="expanded.has(item.rank)" class="reviews-row">
                <td colspan="5">
                  <SupportingReviews :reviews="reviews" :indices="item.supportingReviewIndices" />
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
    </template>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import ClassificationBadge from '../primitives/ClassificationBadge.vue'
import SupportingReviews from '../primitives/SupportingReviews.vue'
import { useSupporting } from '../../composables/useSupporting.js'

const { data, reviews, loading, expanded, hasSupport, toggle } = useSupporting('strengths-weaknesses')

const scoreLabel = computed(() => {
  const v = data.value?.marketFitScore?.value || 0
  if (v >= 8) return 'Excellent'
  if (v >= 6) return 'Good'
  if (v >= 4) return 'Fair'
  return 'Needs work'
})
const scoreClass = computed(() => {
  const v = data.value?.marketFitScore?.value || 0
  return v >= 8 ? 'excellent' : v >= 6 ? 'good' : 'fair'
})
</script>

<style scoped src="../views/view.css" />
<style scoped>
.score-row {
  display: flex;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.score-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  text-align: center;
  min-width: 160px;
}
.score-num { font-size: 56px; font-weight: 300; line-height: 1; color: var(--text-primary); }
.score-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.score-verdict { font-size: 11px; color: var(--text-muted); margin-top: 8px; font-style: italic; }

.score-bar-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 24px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.score-bar-label { font-size: 13px; font-weight: 500; }
.score-bar-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.score-bar-fill { height: 100%; background: #f59e0b; border-radius: 3px; transition: width 0.5s; }
.score-bar-sub { font-size: 12px; }
.excellent { color: var(--positive); }
.good { color: #f59e0b; }
.fair { color: var(--negative); }

.score-desc {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  min-width: 200px;
}

.ratio-bars {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--border);
  margin-bottom: 4px;
}
.ratio-pos { background: var(--positive); height: 100%; }
.ratio-neg { background: var(--negative); height: 100%; }
.ratio-labels { display: flex; justify-content: space-between; }
.pos-text { font-size: 10px; color: var(--positive); font-weight: 500; }
.neg-text { font-size: 10px; color: var(--negative); font-weight: 500; }
.section-title { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.aspect-row.expandable { cursor: pointer; }
.aspect-row.expandable:hover { background: rgba(0,0,0,0.025); }
.aspect-row.expanded { background: rgba(0,0,0,0.03); }
.caret { font-size: 11px; color: #888; }
.reviews-row > td { padding: 12px 16px 20px; background: #fafafa; border-top: none; }
</style>
