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

{% block title %}Contact Leads{% endblock %}

{% block content %}
<div class="section">
  <div class="container">
    <div style="display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: 0.5rem;">
      <h1 class="section-title" style="margin-bottom: 0;">Contact Leads</h1>
      <a href="{% url 'utm_dashboard' %}" style="color: var(--text-muted); font-size: 0.9rem;">UTM Analytics →</a>
    </div>
    <p style="color: var(--text-muted); margin-bottom: 1.5rem; max-width: 42rem;">
      Inquiries from the contact form, with message details and any UTM attribution. Staff only.
    </p>

    <form method="get" 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>
          <option value="0" {% if days == 0 %}selected{% endif %}>All time</option>
        </select>
      </label>
      <label style="display: flex; flex-direction: column; gap: 0.35rem; color: var(--text-muted); font-size: 0.85rem;">
        Status
        <select name="status" 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="" {% if not status %}selected{% endif %}>All</option>
          <option value="new" {% if status == "new" %}selected{% endif %}>New</option>
          <option value="contacted" {% if status == "contacted" %}selected{% endif %}>Contacted</option>
        </select>
      </label>
      <label style="display: flex; flex-direction: column; gap: 0.35rem; color: var(--text-muted); font-size: 0.85rem; flex: 1; min-width: 12rem;">
        Search
        <input type="search" name="q" value="{{ q }}" placeholder="Name, email, subject…"
          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;">
      </label>
      <label style="display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: 0.9rem; padding-bottom: 0.55rem;">
        <input type="checkbox" name="utm" value="1" {% if utm_only %}checked{% endif %}>
        UTM only
      </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: 2.5rem;">
      <div class="card">
        <span class="card-title">{{ total }}</span>
        <p class="card-text">Total in period</p>
      </div>
      <div class="card">
        <span class="card-title">{{ new_count }}</span>
        <p class="card-text">New (not contacted)</p>
      </div>
      <div class="card">
        <span class="card-title">{{ contacted_count }}</span>
        <p class="card-text">Contacted</p>
      </div>
      <div class="card">
        <span class="card-title">{{ with_utm }}</span>
        <p class="card-text">With UTM attribution</p>
      </div>
    </div>

    <p style="color: var(--text-muted); margin-bottom: 1rem; font-size: 0.9rem;">
      Showing {{ lead_count }} lead{% if lead_count != 1 %}s{% endif %}{% if lead_count > 200 %} (first 200){% endif %}.
    </p>

    <div class="table-responsive">
      {% if leads %}
      <table class="table">
        <thead>
          <tr>
            <th>When</th>
            <th>Name</th>
            <th>Email</th>
            <th>Subject</th>
            <th>Status</th>
            <th>Source</th>
            <th>Campaign</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for lead in leads %}
          <tr>
            <td>{{ lead.created|date:"Y-m-d H:i" }}</td>
            <td>{{ lead.name }}</td>
            <td><a href="mailto:{{ lead.email }}">{{ lead.email }}</a></td>
            <td>{{ lead.subject|truncatechars:40 }}</td>
            <td>{% if lead.contacted %}Contacted{% else %}<span style="color: var(--primary-color);">New</span>{% endif %}</td>
            <td>{{ lead.utm_source|default:"—" }}</td>
            <td>{{ lead.utm_campaign|default:"—" }}</td>
            <td><a href="{% url 'lead_detail' lead.pk %}">Details</a></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <p style="color: var(--text-muted);">No leads match these filters.</p>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}