{% extends "base.html" %}
{% block page_title %}Select Account{% endblock %}
{% block content %}
<div class="max-w-2xl">
    <!-- Header -->
    <div class="mb-8">
        <div class="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center mb-4">
            {% include "social_accounts/partials/_platform_icon.html" with platform=platform size="6" %}
        </div>
        <h2 class="text-xl font-semibold text-stone-900">Select Account{{ pages|length|pluralize }}</h2>
        <p class="text-sm text-stone-500 mt-1">Your {{ platform|title }} login has access to multiple accounts. Select which one{{ pages|length|pluralize }} to connect.</p>
    </div>

    <form method="post" action="{% url 'social_accounts:select_account' %}">
        {% csrf_token %}

        <div class="flex items-center justify-between mb-3">
            <p class="text-xs text-stone-500"><span id="selected-count">0</span> selected</p>
            <div class="flex items-center gap-3">
                <button type="button" id="select-all-btn" class="text-xs font-semibold text-orange-600 hover:text-orange-700">Select all publishable</button>
                <button type="button" id="clear-all-btn" class="text-xs font-semibold text-stone-500 hover:text-stone-700">Clear</button>
            </div>
        </div>

        <div class="space-y-3 mb-8">
            {% for page in pages %}
            <label class="flex items-center gap-4 p-4 bg-white rounded-xl border border-stone-200 transition-all duration-200 {% if page.can_publish %}cursor-pointer hover:shadow-md hover:border-orange-200 has-[:checked]:border-orange-400 has-[:checked]:ring-2 has-[:checked]:ring-orange-100 has-[:checked]:bg-orange-50/30{% else %}opacity-60 cursor-not-allowed{% endif %}">
                {% comment %}
                Never pre-checked, including for an account that is already
                connected. Submitting re-runs the full connect for every ticked
                row — resetting its webhook state and queueing a fresh
                subscription — so ticking has to stay something the person did
                on purpose. It also keeps the checkbox meaning one thing:
                "connect or refresh this", never "this is connected", which
                unticking could not undo anyway.
                {% endcomment %}
                <input type="checkbox" name="selected_pages" value="{{ page.id }}"
                       {% if not page.can_publish %}disabled{% endif %}
                       class="w-4 h-4 rounded border-stone-300 text-orange-500 focus:ring-orange-500 focus:ring-offset-0 {% if page.can_publish %}cursor-pointer{% else %}cursor-not-allowed{% endif %}">

                {% if page.picture %}
                <img src="{{ page.picture }}" alt="{{ page.name }}" class="w-10 h-10 rounded-full object-cover ring-2 ring-stone-100">
                {% else %}
                <div class="w-10 h-10 rounded-full bg-stone-100 flex items-center justify-center text-stone-400">
                    {% include "social_accounts/partials/_platform_icon.html" with platform=platform size="5" %}
                </div>
                {% endif %}

                <div class="flex-1 min-w-0">
                    <h3 class="text-sm font-semibold text-stone-900 truncate">{{ page.name }}</h3>
                    {% if page.category %}
                    <p class="text-xs text-stone-400">{{ page.category }}</p>
                    {% endif %}
                    {% if not page.can_publish %}
                    <p class="text-xs text-amber-600 mt-0.5">Missing Facebook content publishing access</p>
                    {% elif page.already_connected %}
                    <p class="text-xs text-emerald-600 mt-0.5">Already connected &middot; select to refresh</p>
                    {% endif %}
                </div>

                {% if page.followers_count %}
                <span class="text-xs text-stone-400">{{ page.followers_count }} followers</span>
                {% endif %}
            </label>
            {% endfor %}
        </div>

        <div class="flex items-center gap-3">
            <button type="submit" id="connect-btn" class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold text-white bg-orange-500 rounded-full shadow-[0_4px_14px_rgba(249,115,22,0.28)] hover:bg-orange-600 transition-all duration-200 cursor-pointer">
                <span id="connect-btn-text">Connect Selected</span>
                <svg id="connect-btn-check" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                <svg id="connect-btn-spinner" class="w-4 h-4 animate-spin hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
            </button>
            <a href="{% url 'social_accounts:list' workspace_id=workspace_id %}" class="px-4 py-2.5 text-sm font-semibold text-stone-600 hover:text-stone-800 transition-colors">
                Cancel
            </a>
        </div>
    </form>
</div>

<script nonce="{{ request.csp_nonce }}">
    const accountForm = document.getElementById('connect-btn').closest('form');
    const accountCheckboxes = [...accountForm.querySelectorAll('input[name="selected_pages"]')];
    const updateSelectedCount = () => {
        document.getElementById('selected-count').textContent = accountCheckboxes.filter(input => input.checked && !input.disabled).length;
    };
    accountCheckboxes.forEach(input => input.addEventListener('change', updateSelectedCount));
    document.getElementById('select-all-btn').addEventListener('click', () => {
        accountCheckboxes.forEach(input => { if (!input.disabled) input.checked = true; });
        updateSelectedCount();
    });
    document.getElementById('clear-all-btn').addEventListener('click', () => {
        accountCheckboxes.forEach(input => { input.checked = false; });
        updateSelectedCount();
    });
    updateSelectedCount();

    accountForm.addEventListener('submit', function(e) {
        const btn = document.getElementById('connect-btn');
        if (btn.disabled) {
            e.preventDefault();
            return;
        }
        btn.disabled = true;
        btn.classList.add('opacity-75');
        document.getElementById('connect-btn-text').textContent = 'Connecting\u2026';
        document.getElementById('connect-btn-check').classList.add('hidden');
        document.getElementById('connect-btn-spinner').classList.remove('hidden');
    });
</script>
{% endblock %}