{% extends "base.html" %}
{% load static %}

{% block title %}UTM & Traffic Analytics{% endblock %}

{% block content %}
<div class="section">
  <div class="container">
    <h1 class="section-title">UTM &amp; Traffic Analytics</h1>
    <p style="color: var(--text-muted); margin-bottom: 1.5rem; max-width: 42rem;">
      First-party page views with campaign tags and traffic classification
      (human, AI bots, search indexers, and more). Staff only.
    </p>

    <form method="get" class="utm-filters" style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-bottom: 2rem;">
      <label style="display: flex; flex-direction: column; gap: 0.35rem; color: var(--text-muted); font-size: 0.85rem;">
        Period
        <select name="days" style="background: var(--surface-color); color: var(--text-color); border: 1px solid rgba(255,255,255,0.15); padding: 0.5rem 0.75rem; border-radius: 4px;">
          <option value="7" {% if days == 7 %}selected{% endif %}>Last 7 days</option>
          <option value="30" {% if days == 30 %}selected{% endif %}>Last 30 days</option>
          <option value="90" {% if days == 90 %}selected{% endif %}>Last 90 days</option>
          <option value="365" {% if days == 365 %}selected{% endif %}>Last year</option>
        </select>
      </label>
      <label style="display: flex; flex-direction: column; gap: 0.35rem; color: var(--text-muted); font-size: 0.85rem;">
        Traffic type
        <select name="traffic" style="background: var(--surface-color); color: var(--text-color); border: 1px solid rgba(255,255,255,0.15); padding: 0.5rem 0.75rem; border-radius: 4px;">
          <option value="">All types</option>
          {% for value, label in traffic_choices %}
          <option value="{{ value }}" {% if traffic_filter == value %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </label>
      <button type="submit" class="btn" style="border: 1px solid var(--primary-color); padding: 0.5rem 1.25rem; border-radius: 4px; color: var(--primary-color); background: transparent; cursor: pointer;">
        Apply
      </button>
    </form>

    <div class="card-grid" style="margin-bottom: 3rem;">
      <div class="card">
        <span class="card-title">{{ total_visits }}</span>
        <p class="card-text">Total page views</p>
      </div>
      <div class="card">
        <span class="card-title">{{ human_count }}</span>
        <p class="card-text">Human traffic</p>
      </div>
      <div class="card">
        <span class="card-title">{{ ai_count }}</span>
        <p class="card-text">AI bot / AI search</p>
      </div>
      <div class="card">
        <span class="card-title">{{ indexer_count }}</span>
        <p class="card-text">Search indexing</p>
      </div>
      <div class="card">
        <span class="card-title">{{ utm_landings }}</span>
        <p class="card-text">UTM landings</p>
      </div>
      <div class="card">
        <span class="card-title">{{ attributed_visits }}</span>
        <p class="card-text">Views with UTM attribution</p>
      </div>
    </div>

    <h2 class="section-title" style="font-size: 1.75rem; margin-bottom: 1rem;">Traffic mix</h2>
    <div class="table-responsive" style="margin-bottom: 3rem;">
      {% if type_counts %}
      <table class="table">
        <thead>
          <tr>
            <th>Type</th>
            <th>Views</th>
            <th>Share</th>
          </tr>
        </thead>
        <tbody>
          {% for row in type_counts %}
          <tr>
            <td>{{ row.label }}</td>
            <td>{{ row.total }}</td>
            <td>{% widthratio row.total total_visits 100 %}%</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <p style="color: var(--text-muted);">No visits in this period yet.</p>
      {% endif %}
    </div>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; margin-bottom: 3rem;">
      <div>
        <h2 class="section-title" style="font-size: 1.35rem; margin-bottom: 1rem;">Top sources</h2>
        <div class="table-responsive">
          {% if top_sources %}
          <table class="table">
            <thead><tr><th>utm_source</th><th>Views</th></tr></thead>
            <tbody>
              {% for row in top_sources %}
              <tr><td>{{ row.utm_source }}</td><td>{{ row.total }}</td></tr>
              {% endfor %}
            </tbody>
          </table>
          {% else %}
          <p style="color: var(--text-muted);">No UTM sources yet. Share links like <code>?utm_source=linkedin&amp;utm_medium=social&amp;utm_campaign=spring</code>.</p>
          {% endif %}
        </div>
      </div>
      <div>
        <h2 class="section-title" style="font-size: 1.35rem; margin-bottom: 1rem;">Top mediums</h2>
        <div class="table-responsive">
          {% if top_mediums %}
          <table class="table">
            <thead><tr><th>utm_medium</th><th>Views</th></tr></thead>
            <tbody>
              {% for row in top_mediums %}
              <tr><td>{{ row.utm_medium }}</td><td>{{ row.total }}</td></tr>
              {% endfor %}
            </tbody>
          </table>
          {% else %}
          <p style="color: var(--text-muted);">No UTM mediums yet.</p>
          {% endif %}
        </div>
      </div>
      <div>
        <h2 class="section-title" style="font-size: 1.35rem; margin-bottom: 1rem;">Top campaigns</h2>
        <div class="table-responsive">
          {% if top_campaigns %}
          <table class="table">
            <thead><tr><th>utm_campaign</th><th>Views</th></tr></thead>
            <tbody>
              {% for row in top_campaigns %}
              <tr><td>{{ row.utm_campaign }}</td><td>{{ row.total }}</td></tr>
              {% endfor %}
            </tbody>
          </table>
          {% else %}
          <p style="color: var(--text-muted);">No UTM campaigns yet.</p>
          {% endif %}
        </div>
      </div>
    </div>

    <h2 class="section-title" style="font-size: 1.75rem; margin-bottom: 1rem;">Top pages{% if traffic_filter %} (filtered){% endif %}</h2>
    <div class="table-responsive" style="margin-bottom: 3rem;">
      {% if top_pages %}
      <table class="table">
        <thead>
          <tr><th>Path</th><th>Views</th></tr>
        </thead>
        <tbody>
          {% for row in top_pages %}
          <tr><td><code>{{ row.path }}</code></td><td>{{ row.total }}</td></tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <p style="color: var(--text-muted);">No page data for this filter.</p>
      {% endif %}
    </div>

    {% if contacts_with_utm %}
    <div style="display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: 1rem;">
      <h2 class="section-title" style="font-size: 1.75rem; margin-bottom: 0;">Contact leads with UTM</h2>
      <a href="{% url 'leads_list' %}?utm=1" style="color: var(--text-muted); font-size: 0.9rem;">All leads →</a>
    </div>
    <div class="table-responsive" style="margin-bottom: 3rem;">
      <table class="table">
        <thead>
          <tr>
            <th>When</th>
            <th>Name</th>
            <th>Email</th>
            <th>Source</th>
            <th>Medium</th>
            <th>Campaign</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for c in contacts_with_utm %}
          <tr>
            <td>{{ c.created|date:"Y-m-d H:i" }}</td>
            <td>{{ c.name }}</td>
            <td>{{ c.email }}</td>
            <td>{{ c.utm_source|default:"—" }}</td>
            <td>{{ c.utm_medium|default:"—" }}</td>
            <td>{{ c.utm_campaign|default:"—" }}</td>
            <td><a href="{% url 'lead_detail' c.pk %}">Details</a></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}

    <h2 class="section-title" style="font-size: 1.75rem; margin-bottom: 1rem;">Recent visits</h2>
    <div class="table-responsive">
      {% if recent_visits %}
      <table class="table">
        <thead>
          <tr>
            <th>When</th>
            <th>Path</th>
            <th>Type</th>
            <th>Source</th>
            <th>Medium</th>
            <th>Campaign</th>
            <th>Landing</th>
            <th>Referrer</th>
          </tr>
        </thead>
        <tbody>
          {% for v in recent_visits %}
          <tr>
            <td>{{ v.created|date:"Y-m-d H:i" }}</td>
            <td><code>{{ v.path }}</code></td>
            <td>{{ v.get_traffic_type_display }}</td>
            <td>{{ v.utm_source|default:"—" }}</td>
            <td>{{ v.utm_medium|default:"—" }}</td>
            <td>{{ v.utm_campaign|default:"—" }}</td>
            <td>{% if v.is_landing %}Yes{% else %}—{% endif %}</td>
            <td style="max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ v.referrer }}">{{ v.referrer|default:"—"|truncatechars:40 }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <p style="color: var(--text-muted);">No visits recorded yet. Browse the public site (optionally with UTM query params) and refresh this page.</p>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}