{% extends "base.html" %}

{% block title %}Queues - {{ workspace.name }} - Redea Social{% endblock %}

{% block page_header %}
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-base font-semibold text-stone-900" style="letter-spacing: -0.01em;">Publishing Queues</h1>
        <p class="text-sm text-stone-500 mt-1">Auto-schedule posts into time slots by category and channel.</p>
    </div>
    <a href="{% url 'calendar:calendar' workspace_id=workspace.id %}" class="text-sm text-stone-500 hover:text-stone-700 flex items-center gap-1">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
        Back to Calendar
    </a>
</div>
{% endblock %}

{% block content %}
<div class="max-w-3xl" x-data="{ showForm: false }">

    <!-- Create Queue -->
    <div class="mb-6">
        <button @click="showForm = !showForm" class="btn-brand text-sm py-2 px-4 flex items-center gap-1.5">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
            Create Queue
        </button>

        <form x-show="showForm" x-cloak
              hx-post="{% url 'calendar:queue_create' workspace_id=workspace.id %}"
              hx-swap="none"
              @htmx:after-request="if(event.detail.successful) { showForm = false; this.reset(); }"
              class="mt-3 p-4 bg-stone-50 rounded-xl border border-stone-200 space-y-3">
            {% csrf_token %}

            <div>
                <label class="block text-xs font-semibold text-stone-700 mb-1">Queue Name</label>
                <input type="text" name="name" placeholder="e.g., Educational - MWF 9am" required class="form-input w-full text-sm">
            </div>

            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs font-semibold text-stone-700 mb-1">Channel</label>
                    <select name="social_account_id" required class="form-input w-full text-sm">
                        <option value="">Select channel...</option>
                        {% for acc in accounts %}
                        <option value="{{ acc.id }}">{{ acc.account_name|default:acc.account_handle }} ({{ acc.get_platform_display }})</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-stone-700 mb-1">Category (optional)</label>
                    <select name="category_id" class="form-input w-full text-sm">
                        <option value="">Any category</option>
                        {% for cat in categories %}
                        <option value="{{ cat.id }}">{{ cat.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="flex items-center gap-2 pt-1">
                <button type="submit" class="btn-brand text-sm py-2 px-4">Create</button>
                <button type="button" @click="showForm = false" class="text-sm text-stone-500 hover:text-stone-700 py-2 px-3">Cancel</button>
            </div>
        </form>
    </div>

    <!-- Queue List -->
    <div id="queue-list"
         hx-get="{% url 'calendar:queue_list' workspace_id=workspace.id %}"
         hx-trigger="queueChanged from:body"
         hx-select="#queue-items"
         hx-target="#queue-items"
         hx-swap="outerHTML">
        <div id="queue-items" class="space-y-3">
            {% for queue in queues %}
            <div class="bg-white rounded-xl border border-stone-200 p-4 hover:border-stone-300 transition-colors group">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="w-9 h-9 rounded-lg flex items-center justify-center text-white text-sm font-bold"
                             style="background: {% if queue.category %}{{ queue.category.color }}{% else %}var(--primary){% endif %};">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                        </div>
                        <div>
                            <a href="{% url 'calendar:queue_detail' workspace_id=workspace.id queue_id=queue.id %}"
                               class="text-sm font-semibold text-stone-800 hover:text-stone-900">{{ queue.name }}</a>
                            <div class="flex items-center gap-2 mt-0.5">
                                <span class="text-xs text-stone-500">{{ queue.social_account.account_name|default:queue.social_account.account_handle }}</span>
                                {% if queue.category %}
                                <span class="inline-flex items-center gap-1 text-[10px] font-semibold px-1.5 py-0.5 rounded-full border border-stone-200">
                                    <span class="w-2 h-2 rounded-full" style="background: {{ queue.category.color }};"></span>
                                    {{ queue.category.name }}
                                </span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="text-xs text-stone-400">{{ queue.entries.count }} post{{ queue.entries.count|pluralize }}</span>
                        <a href="{% url 'calendar:queue_detail' workspace_id=workspace.id queue_id=queue.id %}"
                           class="text-xs font-semibold py-1.5 px-3 rounded-full border border-stone-200 hover:border-stone-300 text-stone-600 hover:text-stone-800 transition-colors">
                            View
                        </a>
                        <form x-data hx-post="{% url 'calendar:queue_delete' workspace_id=workspace.id queue_id=queue.id %}" hx-swap="none"
                              class="opacity-0 group-hover:opacity-100 transition-all"
                              @submit="if(!confirm('Delete this queue?')) $event.preventDefault()">
                            {% csrf_token %}
                            <button type="submit" class="text-stone-400 hover:text-red-500 p-1">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="text-center py-16">
                <div class="w-12 h-12 rounded-full bg-stone-100 flex items-center justify-center mx-auto mb-3">
                    <svg class="w-6 h-6 text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                </div>
                <p class="text-sm font-medium text-stone-700">No queues yet</p>
                <p class="text-xs text-stone-500 mt-1">Create a queue to auto-schedule posts into time slots.</p>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}