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

{% block title %}{{ ad.title }} · Analytics · Admin{% endblock %}
{% block admin_title %}{{ ad.title }}{% endblock %}
{% block admin_subtitle %}Advertisement performance and rewarded engagement.{% endblock %}

{% block admin_actions %}
  <a class="btn btn-outline-secondary" href="{{ url_for('admin.ad_list') }}"><i class="bi bi-arrow-left me-1"></i> All advertisements</a>
  <a class="btn btn-outline-secondary" href="{{ url_for('admin.ad_preview', public_id=ad.public_id) }}"><i class="bi bi-eye me-1"></i> View</a>
  <a class="btn btn-primary" href="{{ url_for('admin.ad_edit', public_id=ad.public_id) }}"><i class="bi bi-pencil me-1"></i> Edit</a>
{% endblock %}

{% macro metric(label, value, icon, color) %}
  <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>
{% endmacro %}

{% block admin_content %}
<div class="d-flex flex-wrap align-items-center gap-2 mb-4">
  {% with status = status %}{% include "admin/advertisements/_status_badge.html" %}{% endwith %}
  <span class="ad-tag ad-tag--{{ ad.advertisement_type.value }}">{{ ad.advertisement_type.value|title }}</span>
  <span class="ad-tag ad-tag--{{ ad.placement.value }}">{{ ad.placement.display_name }}</span>
  <span class="ad-media-badge ad-media-badge--{{ ad.media_type.value }}">
    <i class="bi {{ 'bi-camera-video' if ad.is_video else 'bi-image' }}"></i> {{ 'Video' if ad.is_video else 'Image' }}
  </span>
</div>

<div class="row g-3 mb-4">
  {{ metric('Impressions', '{:,}'.format(ad.impression_count), 'bi-eye', 'primary') }}
  {{ metric('Clicks', '{:,}'.format(ad.click_count), 'bi-hand-index-thumb', 'success') }}
  {{ metric('CTR', ('0%' if ctr == 0 else '%.1f%%'|format(ctr)), 'bi-percent', 'info') }}
</div>

{% if ad.placement.value == 'chat' %}
  <h2 class="admin-section-title">Rewarded engagement</h2>
  <div class="row g-3 mb-4">
    {{ metric('Rewarded impressions', rewarded.impressions, 'bi-eye', 'primary') }}
    {{ metric('Video starts', rewarded.video_starts, 'bi-play-btn', 'info') }}
    {{ metric('Rewarded views', rewarded.rewarded_views, 'bi-check2-circle', 'success') }}
    {{ metric('Completion rate', ('0%' if rewarded.completion_rate == 0 else '%.1f%%'|format(rewarded.completion_rate)), 'bi-percent', 'success') }}
    {{ metric('Rewards granted', rewarded.rewards_granted, 'bi-gift', 'success') }}
    {{ metric('Rejected claims', rewarded.rejections, 'bi-shield-exclamation', 'danger') }}
    {{ metric('Video failures', rewarded.video_failures, 'bi-camera-video-off', 'danger') }}
    {{ metric('Image fallbacks', rewarded.image_fallbacks, 'bi-image', 'warning') }}
  </div>

  {% if rewarded.has_activity %}
    <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">
          <h3 class="h6 mb-3">Reward funnel</h3>
          <div class="chart-container chart-container-md">
            <canvas id="chartAdFunnel" role="img"
                    aria-label="Reward funnel: {{ rewarded.impressions }} impressions, {{ rewarded.video_starts }} video starts, {{ rewarded.rewards_granted }} rewards granted."></canvas>
          </div>
          <p class="visually-hidden">Reward funnel — impressions {{ rewarded.impressions }}, video starts {{ rewarded.video_starts }}, rewards granted {{ rewarded.rewards_granted }}.</p>
        </div></div>
      </div>
    </div>
  {% else %}
    <div class="card border-0 shadow-sm"><div class="card-body text-center text-muted py-5">
      <i class="bi bi-gift fs-2 d-block mb-2"></i> No rewarded activity yet for this advertisement.
    </div></div>
  {% endif %}
{% endif %}
{% endblock %}

{% block scripts %}
{% if ad.placement.value == 'chat' and rewarded.has_activity %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
  (function () {
    if (!window.createChart) return;
    window.createChart('chartAdFunnel', {
      type: 'bar',
      data: {
        labels: ['Impressions', 'Video starts', 'Rewards granted'],
        datasets: [{
          data: [{{ rewarded.impressions }}, {{ rewarded.video_starts }}, {{ rewarded.rewards_granted }}],
          backgroundColor: ['#2563eb', '#f59e0b', '#22c55e'], borderRadius: 6
        }]
      },
      options: { plugins: { legend: { display: false } } }
    });
  })();
</script>
{% endif %}
{% endblock %}