{#
  Premium Insights panel for the Seller Dashboard. Purely presentational — every
  number is precomputed by app/marketplace/analytics.get_dashboard_analytics().
  Expects `is_premium` and `analytics` (None for free members).
#}
{% from "components/premium_badge.html" import premium_badge_pill %}

<section class="seller-analytics mb-4" aria-label="Premium Insights">
  <div class="seller-insights-head">
    <span class="seller-insights-ico seller-insights-ico--premium" aria-hidden="true"><i class="bi bi-graph-up-arrow"></i></span>
    <div class="flex-grow-1">
      <h2 class="seller-insights-title">Premium Insights</h2>
      <p class="seller-insights-sub mb-0">Understand how your listings are performing.</p>
    </div>
    {% if is_premium %}{{ premium_badge_pill('Premium', 'sm') }}{% endif %}
  </div>

  {% if not is_premium %}
    {# ---------- Free: upgrade card ---------- #}
    <div class="sa-upgrade">
      <div class="sa-upgrade-body">
        <h3 class="sa-upgrade-title"><i class="bi bi-stars me-1"></i> Unlock Premium Insights</h3>
        <p class="sa-upgrade-text">See exactly how buyers engage with your listings.</p>
        <ul class="sa-upgrade-list">
          <li><i class="bi bi-check-circle-fill"></i> Performance analytics</li>
          <li><i class="bi bi-check-circle-fill"></i> Conversion rate</li>
          <li><i class="bi bi-check-circle-fill"></i> Listing trends</li>
          <li><i class="bi bi-check-circle-fill"></i> Best performing items</li>
        </ul>
      </div>
      <a class="btn btn-primary sa-upgrade-btn" href="{{ url_for('premium.index') }}">
        <i class="bi bi-star-fill me-1"></i> Upgrade to Premium
      </a>
    </div>

  {% elif not analytics.has_data %}
    {# ---------- Premium, but no listings yet ---------- #}
    <div class="sa-empty">
      <div class="sa-empty-icon" aria-hidden="true"><i class="bi bi-bar-chart"></i></div>
      <h3 class="h6 fw-bold mb-1">No analytics available yet.</h3>
      <p class="text-muted small mb-0">
        List an item to start tracking views, favorites and offers here.
        Add clear photos and a fair price to attract more buyers.
      </p>
    </div>

  {% else %}
    {% set s = analytics.summary %}
    {# ---------- Summary metrics (compact) ---------- #}
    <div class="sa-metric-grid">
      {% for label, value in [
        ('Listing Views', '{:,}'.format(s.listing_views)),
        ('Favorites', '{:,}'.format(s.favorites)),
        ('Messages', '{:,}'.format(s.messages)),
        ('Offers', '{:,}'.format(s.offers)),
        ('Completed Sales', '{:,}'.format(s.completed_sales)),
        ('Avg. Rating', ('%.1f ★'|format(s.average_rating)) if s.review_count else '—'),
        ('Conversion Rate', '%.0f%%'|format(s.conversion_rate)),
      ] %}
        <div class="sa-metric"><div class="sa-metric-value">{{ value }}</div><div class="sa-metric-label">{{ label }}</div></div>
      {% endfor %}
    </div>

    {# ---------- Weekly trends (no charts) ---------- #}
    <div class="sa-week">
      <span class="sa-week-title"><i class="bi bi-calendar-week me-1"></i> This Week</span>
      <div class="sa-week-metrics">
        {% for label, value in [('Views', analytics.weekly.views), ('Favorites', analytics.weekly.favorites),
                                ('Messages', analytics.weekly.messages), ('Offers', analytics.weekly.offers)] %}
          <div class="sa-week-item"><span class="sa-week-value">+{{ "{:,}".format(value) }}</span><span class="sa-week-label">{{ label }}</span></div>
        {% endfor %}
      </div>
    </div>

    <div class="row g-3 mt-0">
      {# ---------- Best performing listing ---------- #}
      {% if analytics.best_listing %}
        {% set b = analytics.best_listing %}
        <div class="col-lg-5">
          <div class="sa-best">
            <span class="sa-best-tag"><i class="bi bi-trophy-fill"></i> Best performer</span>
            <div class="sa-best-body">
              <div class="sa-best-thumb">
                {% if b.cover %}<img src="{{ url_for('marketplace.listing_image', filename=b.cover) }}" alt="">
                {% else %}<i class="bi bi-image" aria-hidden="true"></i>{% endif %}
              </div>
              <div class="min-w-0">
                <p class="sa-best-title text-truncate">{{ b.title }}</p>
                <ul class="sa-best-stats">
                  <li>{{ "{:,}".format(b.views) }} views</li>
                  <li>{{ "{:,}".format(b.favorites) }} saves</li>
                  <li>{{ "{:,}".format(b.offers) }} offers</li>
                  <li>{{ "%.0f%%"|format(b.conversion) }} conv.</li>
                </ul>
                <a class="btn btn-sm btn-outline-primary" href="{{ url_for('marketplace.listing_detail', public_id=b.public_id) }}">View Listing</a>
              </div>
            </div>
          </div>
        </div>
      {% endif %}

      {# ---------- Recommendations ---------- #}
      {% if analytics.recommendations %}
        <div class="col-lg-7">
          <div class="sa-recs">
            <span class="sa-recs-title"><i class="bi bi-lightbulb me-1"></i> Recommendations</span>
            <ul class="sa-recs-list">
              {% for rec in analytics.recommendations %}
                <li><i class="bi bi-arrow-right-short" aria-hidden="true"></i> {{ rec }}</li>
              {% endfor %}
            </ul>
          </div>
        </div>
      {% endif %}
    </div>

    {# ---------- Listing performance table (sorted by best performance) ---------- #}
    <div class="sa-table-wrap mt-3">
      <div class="sa-table-head"><i class="bi bi-list-ol me-1"></i> Listing performance</div>
      <div class="table-responsive">
        <table class="table sa-table align-middle mb-0">
          <thead>
            <tr>
              <th scope="col">Listing</th>
              <th scope="col" class="text-end">Views</th>
              <th scope="col" class="text-end">Favorites</th>
              <th scope="col" class="text-end">Messages</th>
              <th scope="col" class="text-end">Offers</th>
              <th scope="col">Status</th>
              <th scope="col" class="text-end">Rating</th>
              <th scope="col" class="text-center">Sold</th>
            </tr>
          </thead>
          <tbody>
            {% for row in analytics.listings %}
              <tr>
                <td>
                  <a class="sa-table-title text-truncate" href="{{ url_for('marketplace.listing_detail', public_id=row.public_id) }}">{{ row.title }}</a>
                </td>
                <td class="text-end">{{ "{:,}".format(row.views) }}</td>
                <td class="text-end">{{ "{:,}".format(row.favorites) }}</td>
                <td class="text-end">{{ "{:,}".format(row.messages) }}</td>
                <td class="text-end">{{ "{:,}".format(row.offers) }}</td>
                <td><span class="badge status-{{ row.status }}">{{ row.status|title }}</span></td>
                <td class="text-end">{{ ('%.0f ★'|format(row.rating)) if row.rating else '—' }}</td>
                <td class="text-center">
                  {% if row.completed_sale %}<i class="bi bi-check-circle-fill text-success" title="Yes"></i>
                  {% else %}<span class="text-muted">—</span>{% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  {% endif %}
</section>