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

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

{% block extra_head %}
<style>
    /* Inbox-specific layout: remove parent padding, fill height */
    .inbox-shell { margin: -0.75rem; display: flex; flex-direction: column; height: calc(100% + 1.5rem); }
    .inbox-shell { overflow: hidden; }
    :has(> .inbox-shell) { overflow: visible !important; }
    @media (min-width: 640px) {
        .inbox-shell { margin: -1rem; height: calc(100% + 2rem); }
    }
    @media (min-width: 1024px) {
        .inbox-shell { margin: -1.5rem; height: calc(100% + 3rem); }
    }

    /* Split panel */
    .inbox-split { display: flex; flex: 1; min-height: 0; }
    .inbox-list-pane { width: 100%; border-right: none; display: flex; flex-direction: column; }
    .inbox-detail-pane { display: none; flex-direction: column; overflow: hidden; }

    @media (min-width: 768px) {
        .inbox-list-pane { width: 40%; min-width: 320px; border-right: 1px solid var(--border); }
        .inbox-detail-pane { display: flex; flex: 1; }
        /* On desktop, always show both panels regardless of Alpine state */
        .inbox-list-pane[data-mobile-hidden] { display: flex; }
        .inbox-detail-pane[data-mobile-visible] { display: flex; }
    }

    /* Mobile panel switching */
    @media (max-width: 767px) {
        .inbox-list-pane[data-mobile-hidden] { display: none; }
        .inbox-detail-pane[data-mobile-visible] { display: flex; flex: 1; }
    }

    /* Message rows */
    .inbox-row {
        display: flex; gap: 10px; padding: 12px 16px;
        border-bottom: 1px solid var(--surface-2);
        cursor: pointer; transition: background var(--dur-fast) ease;
        position: relative;
    }
    .inbox-row:hover { background: var(--surface-1); }
    .inbox-row.is-active { background: var(--primary-soft); border-left: 3px solid var(--primary); padding-left: 13px; }
    .inbox-row.is-unread .inbox-row-sender { font-weight: 700; color: var(--text-primary); }
    .inbox-row.is-unread .inbox-row-preview { color: var(--text-primary); }
    .inbox-row.is-unread::before {
        content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
        width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
    }

    /* Badges */
    .badge-pill {
        display: inline-flex; align-items: center; gap: 3px;
        font-size: 10px; font-weight: 600; padding: 2px 7px;
        border-radius: var(--radius-full); letter-spacing: 0.01em;
        white-space: nowrap;
    }
    .badge-sentiment-positive { background: var(--success-50); color: var(--success-700); }
    .badge-sentiment-neutral  { background: var(--surface-2); color: var(--text-tertiary); }
    .badge-sentiment-negative { background: var(--error-50); color: var(--error-700); }
    .badge-type { background: var(--surface-2); color: var(--text-secondary); }
    .badge-status-unread  { background: var(--info-50); color: var(--info-700); }
    .badge-status-open    { background: var(--warning-50); color: var(--warning-700); }
    .badge-status-resolved { background: var(--success-50); color: var(--success-700); }
    .badge-status-archived { background: var(--surface-2); color: var(--text-ghost); }
    .badge-sla-overdue { background: var(--error-50); color: var(--error-700); animation: pulse-badge 2s ease infinite; }
    @keyframes pulse-badge { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }

    /* View tabs */
    .inbox-tab {
        font-size: 13px; font-weight: 500; padding: 6px 14px;
        border-radius: var(--radius-full); color: var(--text-secondary);
        transition: all var(--dur-fast) ease; cursor: pointer;
        text-decoration: none; white-space: nowrap;
    }
    .inbox-tab:hover { background: var(--surface-1); color: var(--text-primary); }
    .inbox-tab.active { background: var(--primary-soft); color: var(--brand-700); font-weight: 600; }

    /* Filter controls */
    .filter-select {
        font-size: 12px; font-weight: 500; color: var(--text-secondary);
        background: var(--surface-1); border: 1px solid var(--border);
        border-radius: var(--radius-md); padding: 4px 24px 4px 8px;
        transition: all var(--dur-fast) ease; cursor: pointer;
        appearance: none;
        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;
    }
    .filter-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-ring); }

    /* Bulk action bar */
    .bulk-bar {
        background: var(--neutral-900); color: white; padding: 8px 16px;
        display: flex; align-items: center; gap: 12px;
        font-size: 13px; font-weight: 500;
        animation: slideUp 200ms var(--ease-out);
    }
    .bulk-bar button {
        font-size: 12px; font-weight: 600; padding: 4px 12px;
        border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,0.2);
        background: transparent; color: white; cursor: pointer;
        transition: all var(--dur-fast) ease;
    }
    .bulk-bar button:hover { background: rgba(255,255,255,0.1); }
    @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

    /* SLA countdown */
    .sla-countdown { font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
    .sla-ok { color: var(--text-tertiary); }
    .sla-warn { color: var(--warning-700); }
    .sla-overdue { color: var(--error-700); }

    /* Empty detail placeholder */
    .inbox-empty-detail {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        color: var(--text-ghost); gap: 12px;
    }
</style>
{% endblock %}

{% block content %}
<div class="inbox-shell" x-data="inboxController()">

    <!-- Header -->
    <div class="flex flex-wrap items-center justify-between gap-2 px-3 sm:px-5 py-3 border-b border-stone-200 flex-shrink-0">
        <div class="flex items-center gap-3 sm:gap-4">
            <h1 class="text-base font-semibold text-stone-900" style="letter-spacing: -0.01em;">Inbox</h1>
            <div class="flex items-center gap-1 bg-stone-50 rounded-full p-0.5">
                <a href="{% url 'inbox:feed' workspace_id=workspace.id %}"
                   class="inbox-tab {% if current_view == 'all' %}active{% endif %}"
                   hx-get="{% url 'inbox:feed' workspace_id=workspace.id %}?view=all"
                   hx-target="#inbox-message-list"
                   hx-swap="innerHTML"
                   hx-push-url="true">All</a>
                <a href="{% url 'inbox:feed' workspace_id=workspace.id %}?view=mine"
                   class="inbox-tab {% if current_view == 'mine' %}active{% endif %}"
                   hx-get="{% url 'inbox:feed' workspace_id=workspace.id %}?view=mine"
                   hx-target="#inbox-message-list"
                   hx-swap="innerHTML"
                   hx-push-url="true">My Queue</a>
                <a href="{% url 'inbox:feed' workspace_id=workspace.id %}?view=unassigned"
                   class="inbox-tab {% if current_view == 'unassigned' %}active{% endif %}"
                   hx-get="{% url 'inbox:feed' workspace_id=workspace.id %}?view=unassigned"
                   hx-target="#inbox-message-list"
                   hx-swap="innerHTML"
                   hx-push-url="true">Unassigned</a>
            </div>
        </div>
        <div class="flex items-center gap-2">
            <a href="{% url 'inbox:saved_replies' workspace_id=workspace.id %}"
               class="inline-flex items-center gap-1.5 px-3 py-1.5 text-[12px] font-semibold text-stone-600 bg-white border border-stone-200 rounded-full hover:border-stone-300 hover:bg-stone-50 transition-all duration-150"
               title="Saved Replies">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>
                <span class="hidden sm:inline">Saved Replies</span>
            </a>
            {% if sla_config %}
            <a href="{% url 'inbox:sla_config' workspace_id=workspace.id %}"
               class="inline-flex items-center gap-1.5 px-3 py-1.5 text-[12px] font-semibold text-stone-600 bg-white border border-stone-200 rounded-full hover:border-stone-300 hover:bg-stone-50 transition-all duration-150"
               title="SLA Settings">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                <span class="hidden sm:inline">SLA</span>
            </a>
            {% endif %}
        </div>
    </div>

    <!-- Split Layout -->
    <div class="inbox-split">

        <!-- Left: Message List -->
        <div class="inbox-list-pane" :data-mobile-hidden="activePanel === 'detail' ? '' : undefined">

            <!-- Filters -->
            {% include "inbox/partials/_filter_bar.html" %}

            <!-- Message list (HTMX target) -->
            <div class="flex-1 overflow-y-auto" id="inbox-message-list">
                {% include "inbox/partials/_message_list.html" %}
            </div>

            <!-- Bulk action bar -->
            <div x-show="selectedCount > 0" x-cloak class="bulk-bar">
                <span x-text="selectedCount + ' selected'"></span>
                <button @click="bulkAction('mark_read')">Mark Read</button>
                <button @click="bulkAction('resolve')">Resolve</button>
                <button @click="bulkAction('archive')">Archive</button>
                <button @click="closeBulk()" class="ml-auto" style="border: none;">
                    <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>
        </div>

        <!-- Right: Detail Panel -->
        <div class="inbox-detail-pane" id="inbox-detail-panel"
             :data-mobile-visible="activePanel === 'detail' ? '' : undefined">
            <!-- Mobile back button -->
            <div class="flex md:hidden items-center gap-2 px-3 py-2.5 border-b border-stone-200 flex-shrink-0">
                <button @click="activePanel = 'list'"
                        class="flex items-center gap-1.5 text-sm font-medium text-stone-600 hover:text-stone-900 transition-colors cursor-pointer">
                    <svg width="16" height="16" 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
                </button>
            </div>
            <!-- Empty state shown when no message is selected -->
            <div class="inbox-empty-detail">
                <svg class="w-12 h-12" style="color: var(--neutral-300);" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
                <p class="text-sm font-medium" style="color: var(--text-tertiary);">Select a message to view details</p>
            </div>
        </div>

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

{% block extra_js %}
<script nonce="{{ request.csp_nonce }}">
function inboxController() {
    return {
        activePanel: 'list',
        selected: new Set(),
        get selectedCount() { return this.selected.size; },

        toggleSelect(id) {
            if (this.selected.has(id)) {
                this.selected.delete(id);
            } else {
                this.selected.add(id);
            }
            /* Force Alpine reactivity */
            this.selected = new Set(this.selected);
        },

        isSelected(id) {
            return this.selected.has(id);
        },

        closeBulk() {
            this.selected = new Set();
        },

        bulkAction(action) {
            const ids = Array.from(this.selected).join(',');

            /* Build a hidden form and submit via HTMX */
            const container = document.createElement('div');
            container.innerHTML = `<form>
                <input type="hidden" name="message_ids" value="${ids}">
                <input type="hidden" name="action" value="${action}">
            </form>`;
            const form = container.querySelector('form');
            document.body.appendChild(form);

            htmx.ajax('POST',
                '{% url "inbox:bulk_action" workspace_id=workspace.id %}',
                {
                    source: form,
                    target: '#inbox-message-list',
                    swap: 'innerHTML',
                }
            );
            setTimeout(() => form.remove(), 100);
            this.selected = new Set();
        },

        selectMessage(id, url) {
            /* Load detail panel via HTMX */
            htmx.ajax('GET', url, { target: '#inbox-detail-panel', swap: 'innerHTML' });
            /* Highlight active row */
            document.querySelectorAll('.inbox-row').forEach(el => el.classList.remove('is-active'));
            const row = document.getElementById('msg-' + id);
            if (row) {
                row.classList.add('is-active');
                row.classList.remove('is-unread');
            }
            /* Switch to detail panel on mobile */
            if (window.innerWidth < 768) {
                this.activePanel = 'detail';
            }
        },

        /* SLA countdown timer */
        slaTarget: {{ sla_config.target_response_minutes|default:"0" }},

        getSlaClass(receivedAt) {
            if (!this.slaTarget) return '';
            const received = new Date(receivedAt);
            const deadline = new Date(received.getTime() + this.slaTarget * 60 * 1000);
            const now = new Date();
            const remaining = deadline - now;
            if (remaining < 0) return 'sla-overdue';
            if (remaining < this.slaTarget * 60 * 1000 * 0.25) return 'sla-warn';
            return 'sla-ok';
        },

        formatSla(receivedAt) {
            if (!this.slaTarget) return '';
            const received = new Date(receivedAt);
            const deadline = new Date(received.getTime() + this.slaTarget * 60 * 1000);
            const now = new Date();
            const diff = deadline - now;
            if (diff < 0) {
                const mins = Math.floor(Math.abs(diff) / 60000);
                if (mins < 60) return mins + 'm overdue';
                return Math.floor(mins / 60) + 'h overdue';
            }
            const mins = Math.floor(diff / 60000);
            if (mins < 60) return mins + 'm left';
            return Math.floor(mins / 60) + 'h ' + (mins % 60) + 'm left';
        }
    };
}
</script>
{% endblock %}