{% extends "base.j2" -%}

{%- block append_to_head_tag_section %}
  <title>Analytics - {{ product.title }} - {{ request.shop.name }}</title>
{%- endblock append_to_head_tag_section -%}

{% block content -%}

<section class="analytics-page">

  <p><a href="/s/{{ request.shop.uuid_str }}/analytics">&larr; Shop Analytics</a> &middot; <a href="{{ product_url }}">View Product</a></p>

  <h3>{{ product.title }}</h3>

  {# --- Overview Strip --- #}
  <div class="analytics-overview well">
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ overview.views_7d }}</span>
      <span class="analytics-overview-label">Views (7d)</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ overview.avg_session }}</span>
      <span class="analytics-overview-label">Avg Session</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ overview.bounce_rate }}</span>
      <span class="analytics-overview-label">Bounce Rate</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ overview.lifetime_views }}</span>
      <span class="analytics-overview-label">Lifetime Views</span>
    </div>
  </div>

  {# --- Views Over Time --- #}
  <h4>Views Over Time</h4>
  <div class="analytics-overview well">
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ views_over_time['7d'] }}</span>
      <span class="analytics-overview-label">7 days</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ views_over_time['14d'] }}</span>
      <span class="analytics-overview-label">14 days</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ views_over_time['21d'] }}</span>
      <span class="analytics-overview-label">21 days</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ views_over_time['28d'] }}</span>
      <span class="analytics-overview-label">28 days</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ views_over_time['365d'] }}</span>
      <span class="analytics-overview-label">Year</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ views_over_time['lifetime'] }}</span>
      <span class="analytics-overview-label">Lifetime</span>
    </div>
  </div>

  {# --- Video Watch Metrics --- #}
  {% if video %}
  <h4>Video Watch Metrics (last 21 days)</h4>
  <p class="analytics-hint">Based on {{ video.sessions }} media sessions.</p>
  <div class="analytics-overview well">
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ video.avg_pct_played }}</span>
      <span class="analytics-overview-label">Avg % Played</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ video.completion_rate }}</span>
      <span class="analytics-overview-label">Completion Rate</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ video.avg_seeks }}</span>
      <span class="analytics-overview-label">Avg Seeks</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ video.avg_rewinds }}</span>
      <span class="analytics-overview-label">Avg Rewinds</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ video.avg_pauses }}</span>
      <span class="analytics-overview-label">Avg Pauses</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ video.avg_speed }}</span>
      <span class="analytics-overview-label">Avg Speed</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ video.play_duration_ratio }}</span>
      <span class="analytics-overview-label">Play/Duration</span>
    </div>
  </div>
  {% endif %}

  {# --- Traffic Sources & Devices (side by side) --- #}
  {% if traffic or devices %}
  <div class="analytics-pair">
    {% if traffic %}
    <div>
      <h4>Traffic Sources (last 21 days)</h4>
      <table class="analytics-table">
        <thead>
          <tr>
            <th>Source</th>
            <th class="analytics-num">Sessions</th>
            <th class="analytics-num">%</th>
          </tr>
        </thead>
        <tbody>
          {% for t in traffic %}
          <tr>
            <td>{{ t.source }}</td>
            <td class="analytics-num">{{ t.count }}</td>
            <td class="analytics-num">{{ t.pct }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}

    {% if devices %}
    <div>
      <h4>Device Split (last 21 days)</h4>
      <table class="analytics-table">
        <thead>
          <tr>
            <th>Device</th>
            <th class="analytics-num">Sessions</th>
            <th class="analytics-num">%</th>
          </tr>
        </thead>
        <tbody>
          {% for d in devices %}
          <tr>
            <td>{{ d.device }}</td>
            <td class="analytics-num">{{ d.count }}</td>
            <td class="analytics-num">{{ d.pct }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}
  </div>
  {% endif %}

  {# --- Ring Entries --- #}
  {% if ring_entry_count > 0 %}
  <h4>Ring Entry Sessions (last 21 days)</h4>
  <div class="analytics-overview well">
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ ring_entry_count }}</span>
      <span class="analytics-overview-label">Ring Entries</span>
    </div>
  </div>
  {% endif %}

  {# --- Engagement --- #}
  {% if engagement %}
  <h4>Engagement (last 21 days)</h4>
  <p class="analytics-hint">Based on {{ engagement.sessions }} sessions with 7s+ wall clock.</p>
  <div class="analytics-overview well">
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ engagement.active_ratio }}</span>
      <span class="analytics-overview-label">Active / Wall</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ engagement.visible_ratio }}</span>
      <span class="analytics-overview-label">Visible / Wall</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ engagement.avg_scroll_depth }}</span>
      <span class="analytics-overview-label">Avg Scroll Depth</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ engagement.avg_direction_changes }}</span>
      <span class="analytics-overview-label">Direction Changes</span>
    </div>
  </div>
  {% endif %}

  {# --- Comment Sentiment --- #}
  {% if sentiment and sentiment.total > 0 %}
  <h4>Comment Sentiment (last 21 days)</h4>
  <div class="analytics-overview well">
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ sentiment.positive }}</span>
      <span class="analytics-overview-label">Positive ({{ (sentiment.positive / sentiment.total * 100) | round | int }}%)</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ sentiment.neutral }}</span>
      <span class="analytics-overview-label">Neutral ({{ (sentiment.neutral / sentiment.total * 100) | round | int }}%)</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ sentiment.negative }}</span>
      <span class="analytics-overview-label">Negative ({{ (sentiment.negative / sentiment.total * 100) | round | int }}%)</span>
    </div>
    <div class="analytics-overview-item">
      <span class="analytics-overview-value">{{ sentiment.total }}</span>
      <span class="analytics-overview-label">Total</span>
    </div>
  </div>
  {% endif %}

  {# --- Price History --- #}
  {% if price_changes %}
  <h4>Price History (last 21 changes)</h4>
  <div class="analytics-table-wrap">
    <table class="analytics-table">
      <thead>
        <tr>
          <th class="analytics-num">Price</th>
          <th>When</th>
        </tr>
      </thead>
      <tbody>
        {% for pc in price_changes %}
        <tr>
          <td class="analytics-num">{{ pc.price }}</td>
          <td>{{ pc.ago }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}

  <p class="analytics-privacy">All data is anonymous. No individual viewer can be identified. Counts represent aggregate sessions, not people.</p>

</section>

{%- endblock -%}
