{% extends "admin/base_admin.html" %}
{% set admin_page = "affiliate_dashboard" %}

{% block title %}Affiliate Dashboard - Admin - {{ config.APP_NAME }}{% endblock %}

{% block admin_content %}
  <header class="flex justify-between items-center mb-6">
    <h1 class="text-2xl">Affiliate Dashboard</h1>
    <div class="flex gap-2">
      {% for d in [7, 30, 90] %}
      <a href="?days={{ d }}" class="btn-outline btn-sm {% if days_count == d %}active{% endif %}">{{ d }}d</a>
      {% endfor %}
    </div>
  </header>

  {# ── Stats strip ── #}
  <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem;">

    <div class="card" style="padding:1.25rem;">
      <div class="text-xs font-semibold text-slate" style="text-transform:uppercase;letter-spacing:.06em;margin-bottom:.375rem;">Clicks ({{ days_count }}d)</div>
      <div class="mono" style="font-size:1.75rem;font-weight:700;color:#0F172A;">{{ stats.total_clicks | int }}</div>
    </div>

    <div class="card" style="padding:1.25rem;">
      <div class="text-xs font-semibold text-slate" style="text-transform:uppercase;letter-spacing:.06em;margin-bottom:.375rem;">Products</div>
      <div class="mono" style="font-size:1.75rem;font-weight:700;color:#0F172A;">{{ stats.active_products or 0 }}</div>
      <div class="text-xs text-slate">{{ stats.draft_products or 0 }} draft</div>
    </div>

    <div class="card" style="padding:1.25rem;">
      <div class="text-xs font-semibold text-slate" style="text-transform:uppercase;letter-spacing:.06em;margin-bottom:.375rem;">Articles (clicked)</div>
      <div class="mono" style="font-size:1.75rem;font-weight:700;color:#0F172A;">{{ article_count }}</div>
    </div>

    <div class="card" style="padding:1.25rem;">
      <div class="text-xs font-semibold text-slate" style="text-transform:uppercase;letter-spacing:.06em;margin-bottom:.375rem;">Est. Revenue</div>
      <div class="mono" style="font-size:1.75rem;font-weight:700;color:#0F172A;">~€{{ est_revenue }}</div>
      <div class="text-xs text-slate">3% CR × €80 basket</div>
    </div>

  </div>

  {# ── Daily bar chart ── #}
  {% if stats.daily_bars %}
  <div class="card mb-6" style="padding:1.5rem;">
    <div class="text-xs font-semibold text-slate mb-4" style="text-transform:uppercase;letter-spacing:.06em;">Clicks · Last {{ days_count }} Days</div>
    <div style="display:flex;align-items:flex-end;gap:2px;height:120px;overflow-x:auto;">
      {% for bar in stats.daily_bars %}
      <div title="{{ bar.day }}: {{ bar.click_count }} clicks"
           style="flex-shrink:0;width:8px;background:#1D4ED8;border-radius:3px 3px 0 0;min-height:2px;height:{{ bar.pct }}%;transition:opacity .15s;"
           onmouseover="this.style.opacity='.7'" onmouseout="this.style.opacity='1'">
      </div>
      {% endfor %}
    </div>
    <div style="display:flex;justify-content:space-between;margin-top:.375rem;">
      <span class="text-xs text-slate">{{ stats.daily_bars[0].day if stats.daily_bars else '' }}</span>
      <span class="text-xs text-slate">{{ stats.daily_bars[-1].day if stats.daily_bars else '' }}</span>
    </div>
  </div>
  {% endif %}

  <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem;">

    {# ── Top products ── #}
    <div class="card" style="padding:1.5rem;">
      <div class="text-xs font-semibold text-slate mb-4" style="text-transform:uppercase;letter-spacing:.06em;">Top Products</div>
      {% if stats.top_products %}
      {% for p in stats.top_products %}
      <div style="display:flex;align-items:center;gap:.75rem;padding:.5rem 0;{% if not loop.last %}border-bottom:1px solid #F1F5F9;{% endif %}">
        <span class="mono text-xs text-slate" style="width:1.5rem;text-align:right;">{{ loop.index }}</span>
        <span style="flex:1;font-size:.8125rem;color:#0F172A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
          <a href="{{ url_for('admin.affiliate_edit', product_id=p.id) }}" style="color:inherit;text-decoration:none;">{{ p.name }}</a>
        </span>
        <span class="mono" style="font-weight:600;font-size:.875rem;color:#0F172A;">{{ p.click_count }}</span>
      </div>
      {% endfor %}
      {% else %}
      <p class="text-slate text-sm">No clicks yet.</p>
      {% endif %}
    </div>

    {# ── Top articles ── #}
    <div class="card" style="padding:1.5rem;">
      <div class="text-xs font-semibold text-slate mb-4" style="text-transform:uppercase;letter-spacing:.06em;">Top Articles</div>
      {% if stats.top_articles %}
      {% for a in stats.top_articles %}
      <div style="display:flex;align-items:center;gap:.75rem;padding:.5rem 0;{% if not loop.last %}border-bottom:1px solid #F1F5F9;{% endif %}">
        <span class="mono text-xs text-slate" style="width:1.5rem;text-align:right;">{{ loop.index }}</span>
        <span style="flex:1;font-size:.8125rem;color:#0F172A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
              title="{{ a.article_slug }}">{{ a.article_slug }}</span>
        <span class="mono" style="font-weight:600;font-size:.875rem;color:#0F172A;">{{ a.click_count }}</span>
      </div>
      {% endfor %}
      {% else %}
      <p class="text-slate text-sm">No clicks with article source yet.</p>
      {% endif %}
    </div>

  </div>

  {# ── Clicks by retailer ── #}
  {% if stats.by_retailer %}
  <div class="card" style="padding:1.5rem;">
    <div class="text-xs font-semibold text-slate mb-4" style="text-transform:uppercase;letter-spacing:.06em;">Clicks by Retailer</div>
    {% for r in stats.by_retailer %}
    <div style="display:flex;align-items:center;gap:1rem;margin-bottom:.75rem;">
      <span style="width:140px;font-size:.8125rem;color:#0F172A;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
        {{ r.retailer or 'Unknown' }}
      </span>
      <div style="flex:1;background:#F1F5F9;border-radius:4px;height:24px;overflow:hidden;">
        <div style="width:{{ r.pct }}%;background:#1D4ED8;height:100%;border-radius:4px;min-width:2px;"></div>
      </div>
      <span class="mono" style="font-size:.8125rem;font-weight:600;width:60px;text-align:right;flex-shrink:0;">
        {{ r.click_count }} <span class="text-slate" style="font-weight:400;">({{ r.share_pct }}%)</span>
      </span>
    </div>
    {% endfor %}
  </div>
  {% endif %}

{% endblock %}
