{% extends "django_meta_whatsapp/base.html" %}
{% block title %}Dashboard{% endblock %}
{% block page_title %}Dashboard{% endblock %}
{% block content %}
<div class="space-y-6">
  <!-- Stats row -->
  <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">
      <div class="flex items-center justify-between mb-3">
        <span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Contacts</span>
        <div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center"><i data-lucide="users" class="w-4 h-4 text-blue-600"></i></div>
      </div>
      <p class="text-3xl font-bold text-gray-900">{{ total_contacts }}</p>
    </div>
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
      <div class="flex items-center justify-between mb-3">
        <span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Conversations</span>
        <div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center"><i data-lucide="message-square" class="w-4 h-4 text-emerald-600"></i></div>
      </div>
      <p class="text-3xl font-bold text-gray-900">{{ total_conversations }}</p>
      {% if unread_count %}<p class="text-xs text-emerald-600 mt-1">{{ unread_count }} unread</p>{% endif %}
    </div>
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
      <div class="flex items-center justify-between mb-3">
        <span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Campaigns</span>
        <div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center"><i data-lucide="send" class="w-4 h-4 text-purple-600"></i></div>
      </div>
      <p class="text-3xl font-bold text-gray-900">{{ total_campaigns }}</p>
      {% if running_campaigns %}<p class="text-xs text-purple-600 mt-1">{{ running_campaigns }} running</p>{% endif %}
    </div>
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
      <div class="flex items-center justify-between mb-3">
        <span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Messages Today</span>
        <div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center"><i data-lucide="zap" class="w-4 h-4 text-amber-600"></i></div>
      </div>
      <p class="text-3xl font-bold text-gray-900">{{ messages_today }}</p>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Recent Conversations -->
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm">
      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
        <h2 class="text-sm font-semibold text-gray-900">Recent Conversations</h2>
        <a href="{% url 'django_meta_whatsapp:inbox' %}" class="text-xs text-emerald-600 hover:text-emerald-700 font-medium">View all →</a>
      </div>
      <div class="divide-y divide-gray-50">
        {% for conv in recent_conversations %}
        <a href="{% url 'django_meta_whatsapp:chat_room' conv.phone_number %}" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-50 transition-colors">
          <div class="w-9 h-9 rounded-full bg-emerald-100 flex items-center justify-center text-emerald-700 text-sm font-bold flex-shrink-0">
            {{ conv.contact.name|default:conv.phone_number|first|upper }}
          </div>
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium text-gray-900 truncate">{{ conv.contact.name|default:conv.phone_number }}</p>
            <p class="text-xs text-gray-400">{{ conv.last_message_at|timesince }} ago</p>
          </div>
          {% if conv.unread_count %}<span class="flex-shrink-0 w-5 h-5 rounded-full bg-emerald-500 text-white text-xs flex items-center justify-center font-bold">{{ conv.unread_count }}</span>{% endif %}
        </a>
        {% empty %}
        <div class="px-5 py-8 text-center text-sm text-gray-400">No conversations yet</div>
        {% endfor %}
      </div>
    </div>

    <!-- Recent Campaigns -->
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm">
      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
        <h2 class="text-sm font-semibold text-gray-900">Recent Campaigns</h2>
        <a href="{% url 'django_meta_whatsapp:campaign_list' %}" class="text-xs text-emerald-600 hover:text-emerald-700 font-medium">View all →</a>
      </div>
      <div class="divide-y divide-gray-50">
        {% for camp in recent_campaigns %}
        <div class="flex items-center justify-between px-5 py-3">
          <div>
            <p class="text-sm font-medium text-gray-900">{{ camp.name }}</p>
            <p class="text-xs text-gray-400">{{ camp.created_at|date:"d M Y" }}</p>
          </div>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
            {% if camp.status == 'completed' %}bg-emerald-100 text-emerald-700
            {% elif camp.status == 'running' %}bg-blue-100 text-blue-700
            {% elif camp.status == 'failed' %}bg-red-100 text-red-700
            {% elif camp.status == 'scheduled' %}bg-amber-100 text-amber-700
            {% else %}bg-gray-100 text-gray-600{% endif %}">
            {{ camp.get_status_display }}
          </span>
        </div>
        {% empty %}
        <div class="px-5 py-8 text-center text-sm text-gray-400">No campaigns yet</div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}