{% extends "admin/_admin_base.html" %}

{% block title %}Advertisement analytics · Admin{% endblock %}
{% block admin_title %}Advertisement analytics{% endblock %}
{% block admin_subtitle %}Impressions, clicks and click-through performance across placements.{% endblock %}

{% block admin_actions %}
  <a class="btn btn-outline-secondary" href="{{ url_for('admin.ad_list') }}"><i class="bi bi-card-list me-1"></i> All advertisements</a>
{% endblock %}

{% block admin_content %}
<!-- Summary cards -->
<div class="row g-3 mb-4">
  {% set cards = [
    ('Total', overview.total, 'bi-megaphone', 'primary'),
    ('Active', overview.status_counts.active, 'bi-broadcast', 'success'),
    ('Scheduled', overview.status_counts.scheduled, 'bi-clock', 'info'),
    ('Expired', overview.status_counts.expired, 'bi-hourglass-bottom', 'warning'),
    ('Disabled', overview.status_counts.disabled, 'bi-slash-circle', 'secondary'),
  ] %}
  {% for label, value, icon, color in cards %}
    <div class="col-6 col-md-4 col-xl">
      <div class="card admin-metric-card h-100 border-0 shadow-sm">
        <div class="card-body">
          <span class="admin-metric-icon text-bg-{{ color }}-subtle text-{{ color }}"><i class="bi {{ icon }}"></i></span>
          <div class="admin-metric-value">{{ value }}</div>
          <div class="admin-metric-label">{{ label }}</div>
        </div>
      </div>
    </div>
  {% endfor %}
</div>

<div class="row g-3 mb-4">
  <div class="col-6 col-xl-3">
    <div class="card admin-metric-card h-100 border-0 shadow-sm">
      <div class="card-body">
        <span class="admin-metric-icon text-bg-primary-subtle text-primary"><i class="bi bi-eye"></i></span>
        <div class="admin-metric-value">{{ overview.total_impressions }}</div>
        <div class="admin-metric-label">Total impressions</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-xl-3">
    <div class="card admin-metric-card h-100 border-0 shadow-sm">
      <div class="card-body">
        <span class="admin-metric-icon text-bg-success-subtle text-success"><i class="bi bi-hand-index-thumb"></i></span>
        <div class="admin-metric-value">{{ overview.total_clicks }}</div>
        <div class="admin-metric-label">Total clicks</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-xl-3">
    <div class="card admin-metric-card h-100 border-0 shadow-sm">
      <div class="card-body">
        <span class="admin-metric-icon text-bg-info-subtle text-info"><i class="bi bi-percent"></i></span>
        <div class="admin-metric-value">{{ '0%' if overview.average_ctr == 0 else '%.1f%%'|format(overview.average_ctr) }}</div>
        <div class="admin-metric-label">Average CTR</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-xl-3">
    <div class="card admin-metric-card h-100 border-0 shadow-sm">
      <div class="card-body">
        <span class="admin-metric-icon text-bg-warning-subtle text-warning"><i class="bi bi-trophy"></i></span>
        {% if overview.most_clicked %}
          <div class="admin-metric-value fs-5 text-truncate">
            <a class="text-decoration-none" href="{{ url_for('admin.ad_preview', public_id=overview.most_clicked.public_id) }}">{{ overview.most_clicked.title }}</a>
          </div>
          <div class="admin-metric-label">Most clicked · {{ overview.most_clicked.click_count }} clicks</div>
        {% else %}
          <div class="admin-metric-value fs-5">—</div>
          <div class="admin-metric-label">Most clicked</div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% if overview.total == 0 %}
  <div class="empty-state empty-state-premium text-center mx-auto py-5" style="max-width: 620px;">
    <div class="empty-state-icon mb-4"><i class="bi bi-graph-up"></i></div>
    <h2 class="h4 fw-bold mb-2">No data yet</h2>
    <p class="text-muted mb-4">Analytics appear once advertisements start collecting impressions and clicks.</p>
    <a class="btn btn-primary btn-lg" href="{{ url_for('admin.ad_create') }}"><i class="bi bi-plus-lg me-2"></i>Create advertisement</a>
  </div>
{% else %}
<!-- Charts -->
<div class="row g-4">
  <div class="col-xl-6">
    <div class="card border-0 shadow-sm h-100"><div class="card-body p-4">
      <h2 class="h6 mb-3">Impressions by advertisement</h2>
      <div class="chart-container chart-container-md"><canvas id="chartImpressions" role="img" aria-label="Bar chart of impressions per advertisement."></canvas></div>
    </div></div>
  </div>
  <div class="col-xl-6">
    <div class="card border-0 shadow-sm h-100"><div class="card-body p-4">
      <h2 class="h6 mb-3">Clicks by advertisement</h2>
      <div class="chart-container chart-container-md"><canvas id="chartClicks" role="img" aria-label="Bar chart of clicks per advertisement."></canvas></div>
    </div></div>
  </div>
  <div class="col-xl-6">
    <div class="card border-0 shadow-sm h-100"><div class="card-body p-4">
      <h2 class="h6 mb-3">CTR comparison</h2>
      <div class="chart-container chart-container-md"><canvas id="chartCtr" role="img" aria-label="Bar chart comparing click-through rate per advertisement."></canvas></div>
    </div></div>
  </div>
  <div class="col-xl-6 col-xxl-3">
    <div class="card border-0 shadow-sm h-100"><div class="card-body p-4">
      <h2 class="h6 mb-3">Placement distribution</h2>
      <div class="chart-container chart-container-md"><canvas id="chartPlacement" role="img" aria-label="Doughnut chart of campaigns by placement."></canvas></div>
    </div></div>
  </div>
  <div class="col-xl-6 col-xxl-3">
    <div class="card border-0 shadow-sm h-100"><div class="card-body p-4">
      <h2 class="h6 mb-3">Active vs expired</h2>
      <div class="chart-container chart-container-md"><canvas id="chartActive" role="img" aria-label="Pie chart of active versus expired advertisements."></canvas></div>
    </div></div>
  </div>
  <div class="col-12">
    <div class="card border-0 shadow-sm"><div class="card-body p-4">
      <h2 class="h6 mb-3">New advertisements — last 30 days</h2>
      <div class="chart-container"><canvas id="chartCreated" role="img" aria-label="Line chart of new advertisements created over the last 30 days."></canvas></div>
    </div></div>
  </div>
</div>
{% endif %}

<!-- ===================== Rewarded advertisement analytics ===================== -->
<hr class="admin-divider my-4">
<div class="d-flex align-items-center gap-2 mb-3">
  <span class="admin-metric-icon text-bg-success-subtle text-success"><i class="bi bi-gift"></i></span>
  <div>
    <h2 class="h5 fw-bold mb-0">Rewarded advertisement analytics</h2>
    <p class="text-muted small mb-0">Watch-to-unlock performance: impressions, completion rate, rewards and rejected claims.</p>
  </div>
</div>

<div class="row g-3 mb-4">
  {% set rcards = [
    ('Total impressions', rewarded.impressions, 'bi-eye', 'primary'),
    ('Rewarded views', rewarded.completed_views, 'bi-check2-circle', 'success'),
    ('Completion rate', ('0%' if rewarded.completion_rate == 0 else '%.1f%%'|format(rewarded.completion_rate)), 'bi-percent', 'info'),
    ('Rewards granted', rewarded.rewards_granted, 'bi-unlock', 'success'),
    ('Video failures', rewarded.video_failures, 'bi-camera-video-off', 'danger'),
    ('Image fallbacks', rewarded.image_fallbacks, 'bi-image', 'warning'),
    ('Rejected claims', rewarded.rejections, 'bi-shield-exclamation', 'danger'),
  ] %}
  {% for label, value, icon, color in rcards %}
    <div class="col-6 col-md-4 col-xl">
      <div class="card admin-metric-card h-100 border-0 shadow-sm">
        <div class="card-body">
          <span class="admin-metric-icon text-bg-{{ color }}-subtle text-{{ color }}"><i class="bi {{ icon }}"></i></span>
          <div class="admin-metric-value">{{ value }}</div>
          <div class="admin-metric-label">{{ label }}</div>
        </div>
      </div>
    </div>
  {% endfor %}
</div>

{% if rewarded.impressions == 0 and rewarded.rejections == 0 %}
  <div class="card border-0 shadow-sm mb-2"><div class="card-body text-center text-muted py-5">
    <i class="bi bi-gift fs-2 d-block mb-2"></i>
    No rewarded-advertisement activity yet.
  </div></div>
{% else %}
<div class="row g-4">
  <div class="col-xl-4">
    <div class="card border-0 shadow-sm h-100"><div class="card-body p-4">
      <h3 class="h6 mb-3">Reward funnel</h3>
      <div class="chart-container chart-container-md">
        <canvas id="chartRewFunnel" role="img"
                aria-label="Reward funnel: {{ rewarded.impressions }} impressions, {{ rewarded.video_starts }} video starts, {{ rewarded.rewards_granted }} rewards granted."></canvas>
      </div>
    </div></div>
  </div>
  <div class="col-xl-4">
    <div class="card border-0 shadow-sm h-100"><div class="card-body p-4">
      <h3 class="h6 mb-3">Rejected claims by reason</h3>
      <div class="chart-container chart-container-md">
        <canvas id="chartRewReject" role="img" aria-label="Doughnut chart of rejected reward claims broken down by reason. Total rejections {{ rewarded.rejections }}."></canvas>
      </div>
    </div></div>
  </div>
  <div class="col-xl-4">
    <div class="card border-0 shadow-sm h-100"><div class="card-body p-4">
      <h3 class="h6 mb-3">Video playback</h3>
      <div class="chart-container chart-container-md">
        <canvas id="chartRewVideo" role="img" aria-label="Doughnut chart of video playback outcomes: successful {{ rewarded.video_success }}, image fallback {{ rewarded.image_fallbacks }}, load failure {{ rewarded.video_failures }}."></canvas>
      </div>
    </div></div>
  </div>
  {% if rewarded_breakdown %}
  <div class="col-12">
    <div class="card border-0 shadow-sm"><div class="card-body p-0">
      <div class="table-responsive">
        <table class="table align-middle mb-0">
          <thead><tr>
            <th class="ps-4">Advertisement</th>
            <th class="text-end">Impressions</th>
            <th class="text-end">Rewards</th>
            <th class="text-end pe-4">Completion</th>
          </tr></thead>
          <tbody>
            {% for r in rewarded_breakdown %}
              <tr>
                <td class="ps-4"><a class="text-decoration-none fw-semibold" href="{{ url_for('admin.ad_preview', public_id=r.public_id) }}">{{ r.title }}</a></td>
                <td class="text-end">{{ r.impressions }}</td>
                <td class="text-end">{{ r.rewards }}</td>
                <td class="text-end pe-4">{{ '%.1f%%'|format(r.completion_rate) }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div></div>
  </div>
  {% endif %}
</div>
{% endif %}
{% endblock %}

{% block scripts %}
{% set has_rewarded = rewarded.impressions > 0 or rewarded.rejections > 0 %}
{% if overview.total > 0 or has_rewarded %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
{% endif %}
{% if overview.total > 0 %}
<script>
  (function () {
    if (!window.Chart) return;
    var C = {
      labels: {{ charts.labels|tojson }},
      impressions: {{ charts.impressions|tojson }},
      clicks: {{ charts.clicks|tojson }},
      ctrs: {{ charts.ctrs|tojson }},
      placementLabels: {{ charts.placement_labels|tojson }},
      placementCounts: {{ charts.placement_counts|tojson }},
      activeLabels: {{ charts.active_expired_labels|tojson }},
      activeCounts: {{ charts.active_expired_counts|tojson }},
      createdLabels: {{ charts.created_labels|tojson }},
      createdSeries: {{ charts.created_series|tojson }}
    };
    var BLUE = '#2563eb', GREEN = '#22c55e', ORANGE = '#f59e0b', GRAY = '#94a3b8', CYAN = '#06b6d4', VIOLET = '#8b5cf6';
    // Typography, colours, animation, legend, tooltip and grid come from the
    // shared CampusChart standard (main.js); this only sets per-chart extras.
    var base = { plugins: { legend: { display: false } } };

    window.createChart('chartImpressions', { type: 'bar',
      data: { labels: C.labels, datasets: [{ data: C.impressions, backgroundColor: BLUE, borderRadius: 6 }] },
      options: base });
    window.createChart('chartClicks', { type: 'bar',
      data: { labels: C.labels, datasets: [{ data: C.clicks, backgroundColor: GREEN, borderRadius: 6 }] },
      options: base });
    window.createChart('chartCtr', { type: 'bar',
      data: { labels: C.labels, datasets: [{ data: C.ctrs, backgroundColor: ORANGE, borderRadius: 6 }] },
      options: Object.assign({}, base, { scales: { y: { ticks: { callback: function (v) { return v + '%'; } } } } }) });
    window.createChart('chartPlacement', { type: 'doughnut',
      data: { labels: C.placementLabels, datasets: [{ data: C.placementCounts, backgroundColor: [BLUE, GREEN, ORANGE, VIOLET] }] },
      options: Object.assign({}, base, { plugins: { legend: { display: true, position: 'bottom' } } }) });
    window.createChart('chartActive', { type: 'pie',
      data: { labels: C.activeLabels, datasets: [{ data: C.activeCounts, backgroundColor: [GREEN, ORANGE] }] },
      options: Object.assign({}, base, { plugins: { legend: { display: true, position: 'bottom' } } }) });
    window.createChart('chartCreated', { type: 'line',
      data: { labels: C.createdLabels, datasets: [{ data: C.createdSeries, borderColor: BLUE,
        backgroundColor: 'rgba(37,99,235,0.12)', fill: true, tension: 0.35, pointRadius: 3 }] },
      options: base });
  })();
</script>
{% endif %}
{% if has_rewarded %}
<script>
  (function () {
    if (!window.createChart) return;
    var R = {
      funnelLabels: {{ rewarded_charts.funnel_labels|tojson }},
      funnelCounts: {{ rewarded_charts.funnel_counts|tojson }},
      rejectLabels: {{ rewarded_charts.reject_labels|tojson }},
      rejectCounts: {{ rewarded_charts.reject_counts|tojson }},
      videoLabels: {{ rewarded_charts.video_labels|tojson }},
      videoCounts: {{ rewarded_charts.video_counts|tojson }}
    };
    var GREEN = '#22c55e', RED = '#ef4444', ORANGE = '#f59e0b', BLUE = '#2563eb', GRAY = '#94a3b8';
    var base = { plugins: { legend: { display: false } } };
    var legendBottom = { plugins: { legend: { display: true, position: 'bottom' } } };

    window.createChart('chartRewFunnel', { type: 'bar',
      data: { labels: R.funnelLabels, datasets: [{ data: R.funnelCounts, backgroundColor: [BLUE, ORANGE, GREEN], borderRadius: 6 }] },
      options: base });
    window.createChart('chartRewReject', { type: 'doughnut',
      data: { labels: R.rejectLabels, datasets: [{ data: R.rejectCounts, backgroundColor: [RED, ORANGE, '#8b5cf6', '#06b6d4', GRAY, '#0ea5e9', '#64748b'] }] },
      options: legendBottom });
    window.createChart('chartRewVideo', { type: 'doughnut',
      data: { labels: R.videoLabels, datasets: [{ data: R.videoCounts, backgroundColor: [GREEN, ORANGE, RED] }] },
      options: legendBottom });
  })();
</script>
{% endif %}
{% endblock %}