{% extends "django_meta_whatsapp/base.html" %}
{% block title %}{{ campaign.name }}{% endblock %}
{% block page_title %}{{ campaign.name }}{% endblock %}
{% block topbar_actions %}
{% if campaign.status in "draft,scheduled,failed" %}
<form method="post" action="{% url 'django_meta_whatsapp:campaign_run' campaign.pk %}">
  {% csrf_token %}
  <button type="submit" class="inline-flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors">
    <i data-lucide="play" class="w-4 h-4"></i> Run Campaign
  </button>
</form>
{% endif %}
<a href="{% url 'django_meta_whatsapp:campaign_update' campaign.pk %}" class="inline-flex items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium px-4 py-2 rounded-lg transition-colors">
  <i data-lucide="pencil" class="w-4 h-4"></i> Edit
</a>
{% endblock %}
{% block content %}
<div class="space-y-6">
  <!-- Stats -->
  <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
      <p class="text-xs text-gray-500 font-semibold uppercase tracking-wider mb-2">Total</p>
      <p class="text-3xl font-bold text-gray-900">{{ campaign.total_count }}</p>
    </div>
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
      <p class="text-xs text-gray-500 font-semibold uppercase tracking-wider mb-2">Sent</p>
      <p class="text-3xl font-bold text-emerald-600">{{ campaign.sent_count }}</p>
    </div>
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
      <p class="text-xs text-gray-500 font-semibold uppercase tracking-wider mb-2">Read</p>
      <p class="text-3xl font-bold text-blue-600">{{ campaign.read_count }}</p>
    </div>
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
      <p class="text-xs text-gray-500 font-semibold uppercase tracking-wider mb-2">Failed</p>
      <p class="text-3xl font-bold text-red-500">{{ campaign.failed_count }}</p>
    </div>
  </div>

  <!-- Meta -->
  <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5 grid grid-cols-2 gap-4 text-sm">
    <div><span class="text-gray-400">Status</span><p class="font-medium text-gray-900 mt-0.5">{{ campaign.get_status_display }}</p></div>
    <div><span class="text-gray-400">Template</span><p class="font-medium text-gray-900 font-mono mt-0.5">{{ campaign.template.name|default:"—" }}</p></div>
    <div><span class="text-gray-400">Audience Type</span><p class="font-medium text-gray-900 mt-0.5">{{ campaign.audience_type }}</p></div>
    <div><span class="text-gray-400">Scheduled</span><p class="font-medium text-gray-900 mt-0.5">{{ campaign.scheduled_at|default:"Immediate" }}</p></div>
    <div><span class="text-gray-400">Started</span><p class="font-medium text-gray-900 mt-0.5">{{ campaign.started_at|default:"—" }}</p></div>
    <div><span class="text-gray-400">Completed</span><p class="font-medium text-gray-900 mt-0.5">{{ campaign.completed_at|default:"—" }}</p></div>
  </div>

  <!-- Recipients -->
  <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100">
      <h2 class="text-sm font-semibold text-gray-900">Recipients (showing latest 100)</h2>
    </div>
    <table class="w-full">
      <thead class="bg-gray-50 border-b border-gray-100">
        <tr>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Phone</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Name</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Sent At</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Error</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-50">
        {% for r in recipients %}
        <tr class="hover:bg-gray-50">
          <td class="px-4 py-3 text-sm font-mono text-gray-700">{{ r.phone_number }}</td>
          <td class="px-4 py-3 text-sm text-gray-700">{{ r.name|default:"—" }}</td>
          <td class="px-4 py-3">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
              {% if r.status == 'read' %}bg-blue-100 text-blue-700
              {% elif r.status == 'delivered' %}bg-emerald-100 text-emerald-700
              {% elif r.status == 'sent' %}bg-gray-100 text-gray-700
              {% elif r.status == 'failed' %}bg-red-100 text-red-700
              {% else %}bg-gray-100 text-gray-500{% endif %}">
              {{ r.get_status_display }}
            </span>
          </td>
          <td class="px-4 py-3 text-sm text-gray-400">{{ r.sent_at|default:"—" }}</td>
          <td class="px-4 py-3 text-xs text-red-500 max-w-xs truncate">{{ r.error_message|default:"" }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="5" class="px-4 py-8 text-center text-sm text-gray-400">No recipients yet</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}