<template>
  <div class="view">
    <div class="view-label">Conversion Blockers</div>
    <div class="view-header">
      <h1>What shoppers don't see, but care about</h1>
      <p class="subtitle">Identify exactly what your images aren't communicating that customers want to know. These gaps represent your biggest opportunities to improve conversions.</p>
    </div>

    <div v-if="loading" class="loading">Loading…</div>
    <div v-else-if="!data" class="empty">No conversion blocker data available for this product yet.</div>
    <template v-else>
      <div class="section-title">
        Conversion Blockers <span class="count-badge">{{ data.blockers?.length }}</span>
      </div>
      <p class="subtitle" style="margin-bottom:4px">{{ data.summary }}</p>
      <p v-if="data.estimatedCvrLift" class="cvr-lift">{{ data.estimatedCvrLift }}</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:120px">Relevance</th>
              <th>Conversion Blocker</th>
              <th style="width:280px">Suggested Fix</th>
              <th style="width:30px"></th>
            </tr>
          </thead>
          <tbody>
            <template v-for="item in data.blockers" :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><DotRating :value="item.relevance" :max="5" color="negative" /></td>
                <td>
                  <div class="blocker-text">{{ item.blocker }}</div>
                  <div class="evidence-text">{{ item.evidence }}</div>
                  <div v-if="hasSupport(item)" class="supporting-count">{{ item.supportingReviewIndices.length }} supporting reviews</div>
                </td>
                <td class="fix-cell">{{ item.fix }}</td>
                <td class="caret-cell"><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 DotRating from '../primitives/DotRating.vue'
import SupportingReviews from '../primitives/SupportingReviews.vue'
import { useSupporting } from '../../composables/useSupporting.js'

const { data, reviews, loading, expanded, hasSupport, toggle } = useSupporting('conversion-blockers')
</script>

<style scoped src="../views/view.css" />
<style scoped>
.section-title { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.cvr-lift { font-size: 12px; color: var(--positive); font-weight: 500; margin: 0 0 12px; }
.blocker-text { font-size: 13px; color: var(--text-primary); margin-bottom: 3px; }
.evidence-text { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.supporting-count { font-size: 10px; color: #1976d2; margin-top: 4px; font-weight: 500; }
.fix-cell { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.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-cell { text-align: center; color: #888; }
.caret { font-size: 11px; }
.reviews-row > td { padding: 12px 16px 20px; background: #fafafa; border-top: none; }
</style>
