{% extends "base.html" %}
{% load static %}

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

{% block page_header %}
<div class="flex flex-wrap items-center justify-between gap-3 mb-4 lg:mb-[25px]">
    <h1 class="text-xl sm:text-2xl font-semibold text-stone-900" style="letter-spacing: -0.01em;">Publish</h1>

    <div class="flex items-center gap-3">
        <!-- List / Calendar toggle -->
        <div class="flex items-center bg-stone-50 rounded-full p-0.5" x-data="{ activeMode: '{{ mode|default:'calendar' }}' }">
            <button class="view-btn{% if mode == 'list' %} active{% endif %}" :class="{ active: activeMode === 'list' }"
                    @click="activeMode = 'list'"
                    hx-get="{% url 'calendar:calendar' workspace_id=workspace.id %}?mode=list&tab={{ active_tab|default:'queue' }}&_switch_mode=1"
                    hx-target="#publish-body"
                    hx-swap="innerHTML"
                    hx-push-url="{% url 'calendar:calendar' workspace_id=workspace.id %}?mode=list&tab={{ active_tab|default:'queue' }}">
                <svg class="w-3.5 h-3.5 inline -mt-px mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
                List
            </button>
            <button class="view-btn{% if mode == 'calendar' %} active{% endif %}" :class="{ active: activeMode === 'calendar' }"
                    @click="activeMode = 'calendar'"
                    hx-get="{% url 'calendar:calendar' workspace_id=workspace.id %}?mode=calendar&view={{ view_type|default:'month' }}&_switch_mode=1"
                    hx-target="#publish-body"
                    hx-swap="innerHTML"
                    hx-push-url="{% url 'calendar:calendar' workspace_id=workspace.id %}?mode=calendar&view={{ view_type|default:'month' }}">
                <svg class="w-3.5 h-3.5 inline -mt-px mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                Calendar
            </button>
        </div>

    </div>
</div>
{% endblock %}

{% block extra_head %}
<style>
    /* Fix parent overflow clipping the calendar */
    main:has(#publish-body) > div { overflow: visible !important; }

    /* Calendar-specific styles */
    .cal-day {
        min-height: 80px;
        border-right: 1px solid var(--color-stone-200);
        border-bottom: 1px solid var(--color-stone-200);
        padding: 6px;
        transition: background 150ms ease;
        background: var(--color-surface);
    }
    @media (min-width: 768px) {
        .cal-day { min-height: 130px; padding: 8px; }
    }
    .cal-day:hover { background: var(--color-stone-50); }
    .cal-day.past { background: var(--color-stone-100); }
    .cal-day.past:hover { background: #EEEEEC; }
    .cal-day.today { background: #FFF7ED; }
    .cal-day.other-month { opacity: 0.4; }
    .cal-day .day-num {
        font-size: 13px; font-weight: 600;
        width: 28px; height: 28px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 4px;
        color: var(--color-stone-700);
    }
    .cal-day.past .day-num { color: var(--color-stone-500); }
    .cal-day.today .day-num {
        background: #F97316; color: white;
    }

    .post-chip {
        display: flex; align-items: center; gap: 4px;
        padding: 3px 6px; border-radius: 6px;
        font-size: 11px; font-weight: 500;
        margin-bottom: 2px; cursor: pointer;
        transition: all 150ms ease;
        text-decoration: none;
        max-width: 100%; overflow: hidden;
    }
    .post-chip:hover { transform: translateX(1px); }
    .post-chip .chip-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

    /* Status colors */
    .status-draft      { background: var(--color-stone-100); color: var(--color-stone-600); border: 1px solid var(--color-stone-200); }
    .status-draft .chip-dot { background: var(--color-stone-400); }
    .status-pending_review, .status-pending_client { background: #FFF7ED; color: #C2410C; border: 1px solid #FED7AA; }
    .status-pending_review .chip-dot, .status-pending_client .chip-dot { background: #F97316; }
    .status-scheduled  { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
    .status-scheduled .chip-dot { background: #3B82F6; }
    .status-published  { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }
    .status-published .chip-dot { background: #22C55E; }
    .status-approved   { background: #F0FDFA; color: #0F766E; border: 1px solid #99F6E4; }
    .status-approved .chip-dot { background: #14B8A6; }
    .status-changes_requested { background: #FFF7ED; color: #C2410C; border: 1px solid #FED7AA; }
    .status-changes_requested .chip-dot { background: #F97316; }
    .status-rejected   { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
    .status-rejected .chip-dot { background: #EF4444; }
    .status-publishing { background: #EEF2FF; color: #4338CA; border: 1px solid #C7D2FE; }
    .status-publishing .chip-dot { background: #6366F1; }
    .status-partially_published { background: #FEFCE8; color: #A16207; border: 1px solid #FEF08A; }
    .status-partially_published .chip-dot { background: #EAB308; }
    .status-failed     { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
    .status-failed .chip-dot { background: #EF4444; }
    .status-on_hold    { background: #F5F3FF; color: #6D28D9; border: 1px solid #DDD6FE; }
    .status-on_hold .chip-dot { background: #7C3AED; }

    /* View switcher */
    .view-btn {
        padding: 6px 14px; border-radius: 9999px;
        font-size: 12px; font-weight: 600;
        color: var(--color-stone-500); border: none; background: transparent;
        cursor: pointer; transition: all 150ms ease;
    }
    .view-btn:hover { color: var(--color-stone-900); background: var(--color-stone-100); }
    .view-btn.active { color: #C2410C; background: #FFF7ED; border: 1px solid #FDBA74; box-shadow: 0 1px 2px rgba(194, 65, 12, 0.08); }

    /* Filter chips */
    .filter-chip {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 4px 10px; border-radius: 9999px;
        font-size: 11px; font-weight: 600;
        background: #FFF7ED; color: #C2410C;
        border: 1px solid #FED7AA;
    }
    .filter-chip button {
        width: 14px; height: 14px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: transparent; border: none; cursor: pointer;
        color: #EA580C; font-size: 10px;
    }
    .filter-chip button:hover { background: #FFEDD5; }

    /* Publish tab styles */
    .publish-tab {
        padding: 10px 16px; border-radius: 0;
        font-size: 13px; font-weight: 600;
        color: var(--color-stone-500); background: transparent;
        border: none; cursor: pointer;
        transition: all 150ms ease;
        position: relative;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
    }
    .publish-tab:hover { color: var(--color-stone-900); border-bottom-color: var(--color-stone-300); }
    .publish-tab.active { color: var(--brand-700); border-bottom-color: #F97316; }

    /* Hide scrollbar on filter containers */
    .cal-filters-scroll::-webkit-scrollbar { display: none; }

    /* Filter dropdowns (shared by list and calendar modes) */
    .publish-filter-select,
    .cal-filter-select {
        padding: 6px 28px 6px 10px; border-radius: 8px;
        font-size: 12px; font-weight: 600;
        color: var(--color-stone-600); background: var(--color-surface);
        border: 1px solid var(--color-stone-200);
        cursor: pointer; transition: all 150ms ease;
        appearance: none;
        white-space: nowrap;
        flex-shrink: 0;
        background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2378716C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
    }
    .publish-filter-select.has-icon,
    .cal-filter-select.has-icon { padding-left: 28px; }
    .publish-filter-select:hover,
    .cal-filter-select:hover { border-color: var(--color-stone-300); }
    .publish-filter-select:focus,
    .cal-filter-select:focus { outline: none; border-color: #F97316; box-shadow: 0 0 0 2px rgba(249,115,22,0.15); }
    .publish-filter-icon,
    .cal-filter-icon {
        position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
        width: 14px; height: 14px; color: var(--color-stone-500); pointer-events: none;
    }

    /* Platform icon badges */
    .pi-facebook   { background: #1877F2; }
    .pi-instagram  { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF); }
    .pi-linkedin   { background: #0A66C2; }
    .pi-linkedin_personal { background: #0A66C2; }
    .pi-linkedin_company  { background: #0A66C2; }
    .pi-tiktok     { background: #010101; }
    .pi-youtube    { background: #FF0000; }
    .pi-pinterest  { background: #E60023; }
    .pi-threads    { background: #000000; }
    .pi-bluesky    { background: #0085FF; }
    .pi-google_business { background: #4285F4; }
    .pi-mastodon   { background: #6364FF; }

    /* Add-post button on calendar cells - default (has posts): small top-right */
    .cal-add-btn {
        display: none;
        position: absolute; top: 6px; right: 6px;
        width: 22px; height: 22px; border-radius: 50%;
        background: #F97316; color: white; border: none;
        align-items: center; justify-content: center;
        cursor: pointer; font-size: 14px; line-height: 1;
        box-shadow: 0 2px 6px rgba(249,115,22,0.35);
        transition: transform 100ms ease, background 100ms ease;
        z-index: 5;
    }
    .cal-add-btn:hover { background: #EA580C; transform: scale(1.1); }
    .cal-add-cell { position: relative; }
    .cal-add-cell.has-posts:hover .cal-add-btn { display: flex; }

    /* Empty cells: larger centered button */
    .cal-add-cell:not(.has-posts) .cal-add-btn {
        top: 50%; left: 50%; right: auto;
        transform: translate(-50%, -50%);
        width: 32px; height: 32px;
        background: #F97316; color: white;
        box-shadow: 0 2px 6px rgba(249,115,22,0.35);
        border: none;
    }
    .cal-add-cell:not(.has-posts) .cal-add-btn svg { width: 16px; height: 16px; }
    .cal-add-cell:not(.has-posts):hover .cal-add-btn {
        display: flex;
    }
    .cal-add-cell:not(.has-posts) .cal-add-btn:hover {
        background: #EA580C;
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 6px 20px rgba(249,115,22,0.35);
    }

    /* Day/week grids (non-month cells): hide add button entirely when cell has posts */
    .cal-add-cell.has-posts:not(.cal-day) .cal-add-btn,
    .cal-add-cell.has-posts:not(.cal-day):hover .cal-add-btn { display: none; }

    /* Inline variant (day/week grid): flow in normal layout, no translate centering */
    .cal-add-cell:not(.has-posts) .cal-add-btn.cal-add-btn--inline,
    .cal-add-cell:not(.has-posts) .cal-add-btn.cal-add-btn--inline:hover {
        top: auto; left: auto; right: auto;
        transform: none;
    }
    .cal-add-cell:not(.has-posts) .cal-add-btn.cal-add-btn--inline:hover {
        transform: scale(1.1);
    }

    .calendar-channel-slot {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        max-width: 100%;
        min-height: 24px;
        padding: 3px 5px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 600;
        border: 1px dashed var(--color-stone-200);
        background: var(--color-surface);
        color: var(--color-stone-500);
    }
    .calendar-channel-slot--week {
        width: 100%;
        font-size: 10px;
        gap: 4px;
    }
    .calendar-channel-slot.is-past-open {
        opacity: 0.45;
        background: var(--color-stone-50);
    }
    .calendar-slot-platform-icon {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        border-radius: 9999px;
        background: var(--color-stone-100);
        color: var(--color-stone-500);
    }
    .calendar-slot-add {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 9999px;
        background: #FFEDD5;
        color: #C2410C;
    }
    .calendar-slot-add:hover {
        background: #FED7AA;
        transform: scale(1.05);
    }
    .calendar-post-slot-check {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        border-radius: 9999px;
        background: rgba(255,255,255,0.72);
        color: #15803D;
        margin-left: auto;
    }

    /* Drag-and-drop (SortableJS) feedback */
    .post-chip.is-draggable { cursor: grab; }
    .post-chip.is-draggable:active { cursor: grabbing; }
    /* Hide the source-cell placeholder entirely: for a day-granularity calendar
       the only feedback that matters is which day cell is targeted, so we don't
       want a translucent chip trailing into every cell the cursor passes. Only
       the cursor-following drag clone stays visible. */
    .chip-ghost { display: none !important; }
    /* Highlight the day cell currently under the drag (toggled in onMove). */
    .cal-drop.cal-drop-active { background: #FFF7ED; box-shadow: inset 0 0 0 2px #F97316; }
    /* While dragging, suppress the per-cell "+" add buttons that would otherwise
       flicker under the cursor as it crosses cells. */
    body.cal-dragging .cal-add-btn { display: none !important; }

    /* Bulk-selection checkbox (chips + list rows). Hover-reveal on chips; always
       shown once checked or when a selection is active. */
    .cal-select-box {
        width: 15px; height: 15px; flex-shrink: 0; border: 1.5px solid var(--color-stone-400);
        border-radius: 4px; background: var(--color-surface); cursor: pointer; color: #fff;
        display: inline-flex; align-items: center; justify-content: center;
        opacity: 0; transition: opacity 120ms ease, background 120ms ease;
    }
    .post-chip:hover .cal-select-box,
    .cal-select-box.is-checked,
    body.has-selection .cal-select-box { opacity: 1; }
    .cal-select-box.is-checked { background: #F97316; border-color: #F97316; }
    .cal-select-box:hover { border-color: #F97316; }
    /* In list rows the checkbox is always visible (there's room). */
    .row-select-box { opacity: 1; }
    /* The shared toast host and the selection bar both sit bottom-centre. Lift
       the toasts clear while a selection is active, so a rejected bulk action
       doesn't render its own explanation on top of the bar it came from. */
    body.has-selection #bb-toast-host { bottom: 5rem; }

    @keyframes slideUp {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Play slideUp only on HTMX-swapped tab content, not initial server render */
    .tab-slide-in { animation: slideUp 200ms cubic-bezier(0.16,1,0.3,1) both; }
</style>
{% endblock %}

{% block content %}
<div id="publish-body" class="flex-1 flex flex-col min-h-0">
    {% if mode == 'list' %}
        {% include "calendar/partials/publish_list_shell.html" %}
    {% else %}
        {% include "calendar/partials/publish_calendar_shell.html" %}
    {% endif %}
</div>
{# Toast host — outside #tab-content so an approval action's list refresh doesn't tear down the toast #}
{% include "approvals/partials/_toasts.html" %}

{% comment %}Floating bulk-selection bar — outside the swapped regions so the
selection survives grid reloads / tab switches. Shown when ≥1 chip/row is
ticked (see the `sel` Alpine store).{% endcomment %}
<div x-data="bulkBar()">
    {# Floating action bar #}
    <div x-cloak x-show="$store.sel.count > 0"
         x-effect="document.body.classList.toggle('has-selection', $store.sel.count > 0)"
         class="fixed bottom-6 left-1/2 -translate-x-1/2 z-[60] flex items-center gap-1 bg-stone-900 text-white rounded-full shadow-2xl pl-4 pr-2 py-2">
        <span class="text-sm font-medium whitespace-nowrap" x-text="$store.sel.count + ' selected'"></span>
        <span class="w-px h-5 bg-white/20 mx-1.5"></span>
        <button @click="ask('draft')" :disabled="busy" class="px-3 py-1.5 text-xs font-semibold rounded-full hover:bg-white/10 transition-colors disabled:opacity-50">Draft</button>
        <button @click="ask('publish')" :disabled="busy" class="px-3 py-1.5 text-xs font-semibold rounded-full bg-emerald-500 hover:bg-emerald-600 transition-colors disabled:opacity-50">Publish</button>
        <button @click="ask('delete')" :disabled="busy" class="px-3 py-1.5 text-xs font-semibold rounded-full text-red-300 hover:bg-red-500/20 transition-colors disabled:opacity-50">Delete</button>
        <button @click="$store.sel.clear()" class="w-7 h-7 rounded-full hover:bg-white/10 flex items-center justify-center transition-colors" title="Clear selection">
            <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="M6 18L18 6M6 6l12 12"/></svg>
        </button>
    </div>

    {% comment %}Confirmation dialog for impactful actions (publish / delete).
    Draft is reversible so it runs without a prompt.{% endcomment %}
    <div x-cloak x-show="confirmAction" @keydown.escape.window="confirmAction = null"
         class="fixed inset-0 z-[70] flex items-center justify-center bg-black/40 px-4" @click.self="confirmAction = null">
        <div class="bg-white rounded-2xl shadow-2xl p-6 w-full max-w-xs text-center">
            <div class="w-11 h-11 mx-auto rounded-full flex items-center justify-center mb-3"
                 :class="confirmAction === 'delete' ? 'bg-red-50 text-red-500' : 'bg-emerald-50 text-emerald-600'">
                <svg x-show="confirmAction === 'delete'" class="w-5 h-5" 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>
                <svg x-show="confirmAction === 'publish'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
            </div>
            <h3 class="text-base font-bold text-stone-900" x-text="confirmAction === 'delete' ? 'Delete posts?' : 'Publish now?'"></h3>
            <p class="text-sm text-stone-500 mt-1 leading-relaxed"
               x-text="confirmAction === 'delete'
                   ? ('Permanently delete ' + $store.sel.count + ' selected post' + ($store.sel.count === 1 ? '' : 's') + '. This can\'t be undone.')
                   : ('Publish ' + $store.sel.count + ' selected post' + ($store.sel.count === 1 ? '' : 's') + ' now — they go out on their platforms shortly.')"></p>
            <div class="flex gap-2 mt-5">
                <button @click="confirmAction = null" class="flex-1 px-4 py-2 text-sm font-semibold rounded-full border border-stone-200 text-stone-600 hover:bg-stone-50 transition-colors">Cancel</button>
                <button @click="exec(confirmAction)" :disabled="busy"
                        :class="confirmAction === 'delete' ? 'bg-red-500 hover:bg-red-600' : 'bg-emerald-500 hover:bg-emerald-600'"
                        class="flex-1 px-4 py-2 text-sm font-semibold rounded-full text-white transition-colors disabled:opacity-50"
                        x-text="confirmAction === 'delete' ? 'Delete' : 'Publish'"></button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script nonce="{{ request.csp_nonce }}">
/* Surface a rejected request through the shared toast host
   (approvals/partials/_toasts.html), which listens for a `showToast` event on
   document.body. These endpoints are called with fetch(), not htmx, so the
   usual HX-Trigger route isn't available — dispatch the event directly. */
function bbFailureToast(res, fallback) {
    res.json().catch(() => ({})).then((data) => {
        document.body.dispatchEvent(new CustomEvent('showToast', {
            detail: { tone: 'error', title: (data && data.error) || fallback },
        }));
    });
}

/* Bulk-selection store (survives HTMX grid/tab swaps) + floating-bar controller. */
document.addEventListener('alpine:init', () => {
    Alpine.store('sel', {
        ids: [],
        has(id) { return this.ids.includes(id); },
        toggle(id) { const i = this.ids.indexOf(id); if (i >= 0) this.ids.splice(i, 1); else this.ids.push(id); },
        clear() { this.ids = []; },
        get count() { return this.ids.length; },
    });
});
function bulkBar() {
    return {
        busy: false,
        confirmAction: null, // 'publish' | 'delete' pending confirmation, else null
        // Draft is reversible → run straight away. Publish/Delete open the dialog.
        ask(action) {
            if (!Alpine.store('sel').count || this.busy) return;
            if (action === 'publish' || action === 'delete') { this.confirmAction = action; return; }
            this.exec(action);
        },
        exec(action) {
            this.confirmAction = null;
            const store = Alpine.store('sel');
            if (!store.count || this.busy) return;
            this.busy = true;
            const csrf = (document.querySelector('[name=csrfmiddlewaretoken]') || {}).value
                || (document.cookie.match(/(?:^|;\s*)csrftoken=([^;]+)/) || [])[1] || '';
            const body = new URLSearchParams();
            body.set('action', action);
            store.ids.forEach(id => body.append('platform_post_ids', id));
            fetch('{% url "calendar:bulk_platform_action" workspace_id=workspace.id %}', {
                method: 'POST',
                headers: { 'X-CSRFToken': csrf, 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/x-www-form-urlencoded' },
                body,
            }).then((res) => {
                this.busy = false;
                if (!res.ok) {
                    // e.g. the publish_directly gate. Keep the selection so the
                    // user can retry with an action they are allowed to take.
                    bbFailureToast(res, 'Could not complete that action.');
                    return;
                }
                store.clear();
                // Refresh whichever view is mounted: the calendar shell reloads
                // its grid on `calendarRefresh` (from body); publishList reloads
                // the active tab on the `post-deleted` window event.
                if (window.htmx) htmx.trigger(document.body, 'calendarRefresh');
                window.dispatchEvent(new CustomEvent('post-deleted'));
            }).catch(() => { this.busy = false; });
        },
    };
}
function calendarApp() {
    return {
        activeView: '{{ view_type }}',
        draggedPlatformPostId: null,
        calendarFilters: {
            status: '{{ active_filters.statuses.0|default:"" }}',
            channels: [],
            tag: '{{ active_filters.tags.0|default:"" }}',
            tz: '{{ display_timezone|default:"UTC" }}',
        },

        reloadCalendar() {
            // The selection bar acts on ids, not on what's rendered, so a
            // filter change would otherwise leave rows ticked that the new grid
            // doesn't show — and Delete would hit them.
            Alpine.store('sel').clear();
            const params = new URLSearchParams();
            params.set('mode', 'calendar');
            params.set('view', this.activeView);
            params.set('date', '{{ target_date|date:"Y-m-d" }}');
            if (this.calendarFilters.status) params.set('status', this.calendarFilters.status);
            this.calendarFilters.channels.forEach(c => params.append('channel', c));
            if (this.calendarFilters.tag) params.set('tag', this.calendarFilters.tag);
            if (this.calendarFilters.tz) params.set('tz', this.calendarFilters.tz);
            {% if show_holidays %}params.set('holidays', '1');{% endif %}
            const url = '{% url "calendar:calendar" workspace_id=workspace.id %}?' + params.toString();
            htmx.ajax('GET', url, {target: '#calendar-content', swap: 'innerHTML'});
        },

        init() {
            // SortableJS drag-and-drop. Wire on first load and re-wire after
            // every HTMX swap of the calendar grid (nav, view change, filters).
            this.$nextTick(() => this.initCalendarDnD());
            document.body.addEventListener('htmx:afterSettle', (e) => {
                const t = e.detail && e.detail.target;
                if (t && (t.id === 'calendar-content' || (t.querySelector && t.querySelector('.cal-drop')))) {
                    this.$nextTick(() => this.initCalendarDnD());
                }
            });
            // A drag on an <a> chip would otherwise fire a trailing click and
            // navigate to the editor. Swallow that click while a drag is in
            // flight; genuine clicks (no drag) still open the post.
            document.body.addEventListener('click', (e) => {
                if (this._draggingChip && e.target.closest('.post-chip.is-draggable')) {
                    e.preventDefault();
                    e.stopPropagation();
                }
            }, true);
        },

        // Sortable instances bound to cells an HTMX swap threw away. They hold
        // listeners and detached DOM, so they're destroyed before rewiring
        // rather than left to accumulate across every filter/nav reload.
        _sortables: [],

        initCalendarDnD() {
            if (typeof Sortable === 'undefined') return;
            this._sortables = this._sortables.filter((s) => {
                if (s.el && s.el.isConnected) return true;
                s.destroy();
                return false;
            });
            document.querySelectorAll('#calendar-content .cal-drop').forEach((cell) => {
                if (Sortable.get(cell)) return; // already wired this cell
                this._sortables.push(Sortable.create(cell, {
                    group: 'calendar',
                    draggable: '.post-chip.is-draggable',
                    animation: 150,
                    ghostClass: 'chip-ghost',
                    // Native HTML5 drag: the browser renders a drag image that
                    // reliably follows the cursor (a forceFallback clone did
                    // not — it appeared stuck near the origin). We set that image
                    // explicitly to the chip and clear the drag data so an <a>
                    // chip never drags its URL instead of itself.
                    setData: (dataTransfer, dragEl) => {
                        try { dataTransfer.setDragImage(dragEl, 20, 12); } catch (e) {}
                        dataTransfer.setData('text/plain', '');
                    },
                    // Touch: short hold before a drag begins so it doesn't
                    // hijack a scroll. Desktop mouse is unaffected (immediate).
                    delay: 150,
                    delayOnTouchOnly: true,
                    onStart: () => {
                        this._draggingChip = true;
                        // Suppress the per-cell "+" add buttons while dragging.
                        document.body.classList.add('cal-dragging');
                    },
                    onMove: (evt) => {
                        // Highlight only the day cell currently under the drag.
                        document.querySelectorAll('.cal-drop.cal-drop-active').forEach(c => c.classList.remove('cal-drop-active'));
                        if (evt.to) evt.to.classList.add('cal-drop-active');
                        return true;
                    },
                    onEnd: (evt) => {
                        document.body.classList.remove('cal-dragging');
                        document.querySelectorAll('.cal-drop.cal-drop-active').forEach(c => c.classList.remove('cal-drop-active'));
                        setTimeout(() => { this._draggingChip = false; }, 60);
                        if (evt.to === evt.from) return; // dropped back in place
                        const ppId = evt.item.getAttribute('data-platform-post-id');
                        const date = evt.to.getAttribute('data-date');
                        const time = evt.to.getAttribute('data-time') || '09:00';
                        if (!ppId || !date) return;
                        this.rescheduleChip(ppId, date + 'T' + time + ':00');
                    },
                }));
            });
        },

        rescheduleChip(platformPostId, newDatetime) {
            // newDatetime is the target cell's workspace-tz wall date/time (see
            // _cell_compose_params); reschedule_post interprets the naive value
            // in the workspace timezone, so the drop lands on the right instant.
            const csrfToken =
                (document.querySelector('[name=csrfmiddlewaretoken]') || {}).value ||
                (document.cookie.match(/(?:^|;\s*)csrftoken=([^;]+)/) || [])[1] ||
                '';
            fetch('{% url "calendar:reschedule" workspace_id=workspace.id %}', {
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams({
                    platform_post_id: platformPostId,
                    new_datetime: newDatetime,
                }),
            }).then((res) => {
                if (!res.ok) {
                    // Snap the grid back to the server truth, and say why — a
                    // drop rejected by the publish gate would otherwise look
                    // like the chip just sprang back for no reason.
                    this.reloadCalendar();
                    bbFailureToast(res, 'Could not reschedule that post.');
                    return;
                }
                // Re-render on success too. SortableJS drops the chip at the
                // cursor's index, so the target cell is left out of time order
                // and — in month view, which renders only the first three posts
                // plus a "+N more" count — one chip over the cap it was
                // rendered with. It's a partial swap of #calendar-content, not
                // a page load.
                this.reloadCalendar();
            }).catch(() => this.reloadCalendar());
        }
    };
}

function publishList() {
    return {
        activeTab: '{{ active_tab|default:"queue" }}',
        selectedChannels: [],
        activeTag: '',
        displayTimezone: '{{ display_timezone|default:"UTC" }}',

        tabUrls: {
            queue: '{% url "calendar:publish_tab_queue" workspace_id=workspace.id %}',
            drafts: '{% url "calendar:publish_tab_drafts" workspace_id=workspace.id %}',
            approvals: '{% url "calendar:publish_tab_approvals" workspace_id=workspace.id %}',
            sent: '{% url "calendar:publish_tab_sent" workspace_id=workspace.id %}',
        },

        init() {
            window.addEventListener('post-deleted', () => this.reloadTab());
        },

        switchTab(tab) {
            this.activeTab = tab;
            this.reloadTab();
        },

        reloadTab() {
            // Drop the selection whenever the visible set changes (tab switch,
            // channel/tag/tz filter). The bar acts on stored ids regardless of
            // what's rendered, so a stale tick would let Delete hit a row the
            // user can no longer see.
            Alpine.store('sel').clear();
            const params = new URLSearchParams();
            this.selectedChannels.forEach(c => params.append('channel', c));
            if (this.activeTag) params.set('tag', this.activeTag);
            if (this.displayTimezone) params.set('tz', this.displayTimezone);
            const url = this.tabUrls[this.activeTab] + '?' + params.toString();
            htmx.ajax('GET', url, {target: '#tab-content', swap: 'innerHTML'});
        }
    };
}
</script>
{% endblock %}