{% extends "django_meta_whatsapp/base.html" %}
{% block title %}Flows{% endblock %}
{% block page_title %}WhatsApp Flows{% endblock %}
{% block page_subtitle %}<p class="text-xs text-gray-400">Create multi-step forms that open natively inside WhatsApp</p>{% endblock %}

{% block topbar_actions %}
<a href="{% url 'django_meta_whatsapp:flow_create' %}" 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="plus" class="w-4 h-4"></i> New Flow
</a>
{% endblock %}

{% block content %}
<div class="space-y-4">
  <!-- Filters -->
  <form method="get" class="flex gap-3">
    <div class="relative flex-1 max-w-sm">
      <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"></i>
      <input name="q" value="{{ search_q }}" placeholder="Search flows…" class="w-full pl-9 pr-4 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500"/>
    </div>
    <select name="status" onchange="this.form.submit()" class="text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500">
      <option value="">All statuses</option>
      {% for val, label in status_choices %}<option value="{{ val }}" {% if active_status == val %}selected{% endif %}>{{ label }}</option>{% endfor %}
    </select>
  </form>

  <!-- Flow Table -->
  <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
    <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">Name</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Categories</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">Type</th>
          <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Sent</th>
          <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Completions</th>
          <th class="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-50">
        {% for flow in flows %}
        <tr class="hover:bg-gray-50">
          <td class="px-4 py-3">
            <a href="{% url 'django_meta_whatsapp:flow_detail' flow.pk %}" class="text-sm font-medium text-gray-900 hover:text-emerald-600">{{ flow.name }}</a>
            {% if flow.meta_flow_id %}
            <p class="text-xs text-gray-400 font-mono">{{ flow.meta_flow_id }}</p>
            {% endif %}
          </td>
          <td class="px-4 py-3">
            <div class="flex flex-wrap gap-1">
              {% for cat in flow.categories %}
              <span class="inline-flex px-1.5 py-0.5 rounded text-xs bg-blue-50 text-blue-700 font-medium">{{ cat }}</span>
              {% endfor %}
            </div>
          </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 flow.status == 'PUBLISHED' %}bg-emerald-100 text-emerald-700
              {% elif flow.status == 'DRAFT' %}bg-amber-100 text-amber-700
              {% elif flow.status == 'DEPRECATED' %}bg-gray-100 text-gray-500
              {% elif flow.status == 'BLOCKED' %}bg-red-100 text-red-700
              {% else %}bg-gray-100 text-gray-600{% endif %}">
              {% if flow.status == 'PUBLISHED' %}<i data-lucide="check-circle" class="w-3 h-3 mr-1"></i>{% endif %}
              {{ flow.get_status_display }}
            </span>
          </td>
          <td class="px-4 py-3 text-sm text-gray-500">
            {% if flow.is_dynamic %}
            <span class="inline-flex items-center gap-1 text-purple-600 text-xs font-medium"><i data-lucide="zap" class="w-3 h-3"></i> Dynamic</span>
            {% else %}
            <span class="text-xs text-gray-400">Static</span>
            {% endif %}
          </td>
          <td class="px-4 py-3 text-center text-sm text-gray-700 font-medium">{{ flow.sent_count }}</td>
          <td class="px-4 py-3 text-center text-sm text-gray-700 font-medium">
            <a href="{% url 'django_meta_whatsapp:flow_responses' flow.pk %}" class="text-emerald-600 hover:underline">{{ flow.completion_count }}</a>
          </td>
          <td class="px-4 py-3 text-right">
            <div class="flex items-center justify-end gap-2">
              <a href="{% url 'django_meta_whatsapp:flow_detail' flow.pk %}" class="text-gray-400 hover:text-blue-600" title="Detail / Edit JSON"><i data-lucide="pencil" class="w-4 h-4"></i></a>
              <a href="{% url 'django_meta_whatsapp:flow_responses' flow.pk %}" class="text-gray-400 hover:text-emerald-600" title="View Responses"><i data-lucide="inbox" class="w-4 h-4"></i></a>
              {% if flow.can_publish %}
              <form method="post" action="{% url 'django_meta_whatsapp:flow_publish' flow.pk %}" class="inline">
                {% csrf_token %}
                <button type="submit" class="text-gray-400 hover:text-emerald-600" title="Publish"><i data-lucide="upload-cloud" class="w-4 h-4"></i></button>
              </form>
              {% endif %}
              {% if flow.can_deprecate %}
              <form method="post" action="{% url 'django_meta_whatsapp:flow_deprecate' flow.pk %}" class="inline">
                {% csrf_token %}
                <button type="submit" class="text-gray-400 hover:text-amber-500" title="Deprecate" onclick="return confirm('Deprecate this flow? It can no longer be sent to new users.')"><i data-lucide="archive" class="w-4 h-4"></i></button>
              </form>
              {% endif %}
              <form method="post" action="{% url 'django_meta_whatsapp:flow_clone' flow.pk %}" class="inline">
                {% csrf_token %}
                <button type="submit" class="text-gray-400 hover:text-indigo-600" title="Clone"><i data-lucide="copy" class="w-4 h-4"></i></button>
              </form>
              {% if flow.can_delete %}
              <form method="post" action="{% url 'django_meta_whatsapp:flow_delete' flow.pk %}" class="inline">
                {% csrf_token %}
                <button type="submit" class="text-gray-400 hover:text-red-600" title="Delete" onclick="return confirm('Delete this flow? This cannot be undone.')"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
              </form>
              {% endif %}
            </div>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="7" class="px-4 py-16 text-center">
            <i data-lucide="layout-list" class="w-10 h-10 text-gray-300 mx-auto mb-3"></i>
            <p class="text-sm text-gray-500 font-medium">No flows yet</p>
            <p class="text-xs text-gray-400 mt-1">Create a flow to collect information from your WhatsApp customers.</p>
            <a href="{% url 'django_meta_whatsapp:flow_create' %}" class="mt-4 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="plus" class="w-4 h-4"></i> Create First Flow
            </a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Info Banner -->
  <div class="bg-blue-50 border border-blue-100 rounded-xl p-4 flex gap-3">
    <i data-lucide="info" class="w-5 h-5 text-blue-500 flex-shrink-0 mt-0.5"></i>
    <div class="text-sm text-blue-700">
      <strong>Flow Lifecycle:</strong> Create → Upload JSON → Publish → Send to customers.
      Once published, flows cannot be edited on Meta — use <strong>Clone</strong> to make a new version.
    </div>
  </div>
</div>
{% endblock %}