<template>
  <div class="view">
    <div class="view-label">Improve Product</div>
    <div class="view-header">
      <h1>How to build a better product</h1>
      <p class="subtitle">Prioritised recommendations to enhance product performance and customer satisfaction based on customer feedback and market analysis.</p>
    </div>

    <div v-if="loading" class="loading">Loading…</div>
    <div v-else-if="!data" class="empty">No improvement data available for this product yet.</div>
    <template v-else>
      <div class="section-title">
        Product Improvements <span class="count-badge">{{ data.improvements?.length }}</span>
      </div>
      <p class="subtitle" style="margin-bottom:12px">Prioritised recommendations to enhance product performance and customer satisfaction.</p>
      <div class="table-actions">
        <button class="export-btn primary">↑ Export Product Improvements</button>
      </div>
      <div class="table-wrap">
        <table class="data-table">
          <thead>
            <tr>
              <th style="width:40px">#</th>
              <th style="width:100px">Impact</th>
              <th style="width:90px">Difficulty</th>
              <th>Product Improvements</th>
              <th style="width:220px">Product Weakness</th>
              <th style="width:30px"></th>
            </tr>
          </thead>
          <tbody>
            <template v-for="item in data.improvements" :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.impact" :max="5" /></td>
                <td><DifficultyBadge :label="item.difficulty" /></td>
                <td class="aspect-cell">
                  <div class="improvement-text">{{ item.improvement }}</div>
                  <div v-if="item.suggestedCopy" class="suggested-copy">{{ item.suggestedCopy }}</div>
                  <div v-if="hasSupport(item)" class="supporting-count">{{ item.supportingReviewIndices.length }} supporting reviews</div>
                </td>
                <td><span class="weakness-pill">{{ item.productWeakness }}</span></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="6">
                  <SupportingReviews :reviews="reviews" :indices="item.supportingReviewIndices" />
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
    </template>
  </div>
</template>

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

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

<style scoped src="../views/view.css" />
<style scoped>
.section-title { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.improvement-text { font-size: 13px; color: var(--text-primary); margin-bottom: 4px; }
.suggested-copy {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.4;
  margin-top: 4px;
  display: none;
}
tr:hover .suggested-copy { display: block; }
.supporting-count { font-size: 10px; color: #1976d2; margin-top: 4px; font-weight: 500; }
.weakness-pill {
  display: inline-block;
  padding: 3px 10px;
  background: #fff7ed;
  color: #c2410c;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  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>
