{% extends 'admin/base_admin.html' %}
{% load static %}

{% block title %}Messages Desk | {{ company.name }} | ChatLab{% endblock %}
{% block admin_messages_active %}active{% endblock %}

{% block custom_styles %}
    /* Dashboard-specific Styles */
    .filter-tabs {
        display: flex;
        background: #f0f2f5;
        padding: 4px;
        border-radius: 20px;
        gap: 4px;
    }

    .filter-tab {
        border: none;
        background: transparent;
        color: var(--text-muted);
        font-weight: 600;
        font-size: 13.5px;
        padding: 6px 14px;
        border-radius: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s;
        outline: none;
    }

    .filter-tab.active {
        background: var(--bg-card);
        color: var(--primary-blue);
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    .tab-count {
        font-size: 10.5px;
        background: #e4e6eb;
        color: var(--text-muted);
        padding: 1.5px 5.5px;
        border-radius: 10px;
        font-weight: 700;
        transition: all 0.2s;
    }

    .filter-tab.active .tab-count {
        background: var(--primary-blue);
        color: #ffffff;
    }

    .conversations-list-wrapper {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .conversation-item {
        display: flex;
        align-items: center;
        padding: 14px 16px;
        gap: 12px;
        text-decoration: none;
        color: inherit;
        border-bottom: 1px solid var(--border-color);
        transition: background 0.2s;
        cursor: pointer;
        width: 100%;
    }

    .conversation-item:last-child {
        border-bottom: none;
    }

    .conversation-item:hover {
        background-color: var(--hover-bg);
    }

    .avatar-container {
        position: relative;
        width: 46px;
        height: 46px;
        flex-shrink: 0;
    }

    .avatar-circle {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: #e4e6eb;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 16px;
        text-transform: uppercase;
    }

    .status-dot {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        border: 2px solid var(--bg-card);
    }

    .status-dot.active {
        background-color: var(--success-green);
    }

    .status-dot.pending {
        background-color: var(--warning-orange);
    }

    .conversation-details {
        flex-grow: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .name-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .name {
        font-weight: 600;
        font-size: 14.5px;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 70%;
    }

    .time {
        font-size: 11.5px;
        color: var(--text-muted);
        flex-shrink: 0;
    }

    .message-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
    }

    .message-preview {
        font-size: 13px;
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-grow: 1;
    }

    .platform-badge {
        padding: 2.5px 6.5px;
        border-radius: 4px;
        font-size: 10.5px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 3.5px;
        flex-shrink: 0;
    }

    .platform-badge.fb {
        background: rgba(0, 132, 255, 0.08);
        color: var(--primary-blue);
    }

    .platform-badge.wa {
        background: rgba(37, 211, 102, 0.08);
        color: var(--whatsapp-green);
    }

    .platform-badge.web {
        background: rgba(99, 102, 241, 0.08);
        color: var(--web-indigo);
    }

    .ai-badge {
        background: rgba(16, 185, 129, 0.08);
        color: var(--success-green);
        padding: 2.5px 6.5px;
        border-radius: 4px;
        font-size: 10.5px;
        font-weight: 700;
        flex-shrink: 0;
    }

    .action-container {
        flex-shrink: 0;
        margin-left: auto;
    }

    .claim-btn {
        border: none;
        background: var(--primary-blue);
        color: #ffffff;
        font-weight: 600;
        font-size: 12.5px;
        padding: 6px 14px;
        border-radius: 16px;
        cursor: pointer;
        transition: opacity 0.2s;
        outline: none;
    }

    .claim-btn:hover {
        opacity: 0.9;
    }

    .no-conversations {
        padding: 48px 16px;
        text-align: center;
        color: var(--text-muted);
        font-size: 14.5px;
    }
{% endblock %}

{% block header_center %}
    <div class="filter-tabs">
        <button id="btn-active" class="filter-tab {% if not pending %}active{% endif %}">
            Active <span id="count-active" class="tab-count">{{ claimed|length }}</span>
        </button>
        <button id="btn-pending" class="filter-tab {% if pending %}active{% endif %}">
            Pending <span id="count-pending" class="tab-count">{{ pending|length }}</span>
        </button>
    </div>
{% endblock %}

{% block workspace_wrapper %}
    <div class="workspace-container" style="padding-top: 5px; max-width: 100%;">
        
        <div class="conversations-list-wrapper">
            <!-- Pending Escalations List -->
            <div id="pending-list" style="display: {% if pending %}block{% else %}none{% endif %};">
                {% if pending %}
                    {% for e in pending %}
                        <a href="{% url 'admin_chat' e.visitor_id %}" class="conversation-item pending-item" data-visitor-id="{{ e.visitor_id }}">
                            <div class="avatar-container">
                                <div class="avatar-circle" style="{% if e.visitor_id|slice:':3' == 'fb_' %}background:linear-gradient(135deg,#0084ff,#7c3aed);color:#fff;{% elif e.visitor_id|slice:':3' != 'wa_' %}background:linear-gradient(135deg,#9333ea,#c084fc);color:#fff;{% endif %}">
                                    {% if e.fb_name %}{{ e.fb_name|slice:":1"|upper }}{% else %}{{ e.visitor_id|slice:":1"|upper }}{% endif %}
                                </div>
                                <span class="status-dot pending"></span>
                            </div>
                            <div class="conversation-details">
                                <div class="name-row">
                                    <span class="name">{% if e.fb_name %}{{ e.fb_name }}{% else %}{{ e.visitor_id }}{% endif %}</span>
                                    <span class="time">{{ e.updated_at|timesince }} ago</span>
                                </div>
                                <div class="message-row">
                                    <span class="message-preview">{{ e.message|truncatechars:70 }}</span>
                                    {% if e.visitor_id|slice:":3" == "fb_" %}
                                        <span class="platform-badge fb">💬 Messenger</span>
                                    {% elif e.visitor_id|slice:":3" == "wa_" %}
                                        <span class="platform-badge wa">📱 WhatsApp</span>
                                    {% else %}
                                        <span class="platform-badge web">🌐 Web</span>
                                    {% endif %}
                                </div>
                            </div>
                        </a>
                    {% endfor %}
                {% else %}
                    <div class="no-conversations">No pending escalations.</div>
                {% endif %}
            </div>

            <!-- Active Conversations List -->
            <div id="active-list" style="display: {% if not pending %}block{% else %}none{% endif %};">
                {% if claimed %}
                    {% for e in claimed %}
                        <a href="{% url 'admin_chat' e.visitor_id %}" class="conversation-item active-item" data-visitor-id="{{ e.visitor_id }}">
                            <div class="avatar-container">
                                <div class="avatar-circle" style="{% if e.visitor_id|slice:':3' == 'fb_' %}background:linear-gradient(135deg,#0084ff,#7c3aed);color:#fff;{% elif e.visitor_id|slice:':3' != 'wa_' %}background:linear-gradient(135deg,#9333ea,#c084fc);color:#fff;{% endif %}">
                                    {% if e.fb_name %}{{ e.fb_name|slice:":1"|upper }}{% else %}{{ e.visitor_id|slice:":1"|upper }}{% endif %}
                                </div>
                                <span class="status-dot active"></span>
                            </div>
                            <div class="conversation-details">
                                <div class="name-row">
                                    <span class="name">{% if e.fb_name %}{{ e.fb_name }}{% else %}{{ e.visitor_id }}{% endif %}</span>
                                    <span class="time">{{ e.updated_at|timesince }} ago</span>
                                </div>
                                <div class="message-row">
                                    <span class="message-preview">{{ e.message|truncatechars:70 }}</span>
                                    {% if e.visitor_id|slice:":3" == "fb_" %}
                                        <span class="platform-badge fb">💬 Messenger</span>
                                    {% elif e.visitor_id|slice:":3" == "wa_" %}
                                        <span class="platform-badge wa">📱 WhatsApp</span>
                                    {% else %}
                                        <span class="platform-badge web">🌐 Web</span>
                                    {% endif %}
                                    {% if e.ai_mode_active %}
                                        <span class="ai-badge">🤖 AI</span>
                                    {% endif %}
                                    {% if e.claimed_by_name %}
                                        <span class="platform-badge" style="background: rgba(107, 114, 128, 0.08); color: #4b5563;">👤 {{ e.claimed_by_name }}</span>
                                    {% endif %}
                                </div>
                            </div>
                        </a>
                    {% endfor %}
                {% else %}
                    <div class="no-conversations">No active conversations.</div>
                {% endif %}
            </div>
        </div>

    </div>

    <!-- Active and Pending Switching, Claim Logic & Dynamic Polling -->
    <script>
        (function() {
            // Tab Switching Logic
            const btnPending = document.getElementById('btn-pending');
            const btnActive = document.getElementById('btn-active');
            const pendingList = document.getElementById('pending-list');
            const activeList = document.getElementById('active-list');

            if (btnPending && btnActive) {
                btnPending.addEventListener('click', function() {
                    pendingList.style.display = 'block';
                    activeList.style.display = 'none';
                    btnPending.classList.add('active');
                    btnActive.classList.remove('active');
                });

                btnActive.addEventListener('click', function() {
                    pendingList.style.display = 'none';
                    activeList.style.display = 'block';
                    btnActive.classList.add('active');
                    btnPending.classList.remove('active');
                });
            }

            // CSRF helper
            function getCookie(name) {
                const value = `; ${document.cookie}`;
                const parts = value.split(`; ${name}=`);
                if (parts.length === 2) return parts.pop().split(';').shift();
                return '';
            }

            function timeSince(dateStr) {
                const date = new Date(dateStr);
                const seconds = Math.floor((new Date() - date) / 1000);
                let interval = seconds / 31536000;
                if (interval > 1) return Math.floor(interval) + " years ago";
                interval = seconds / 2592000;
                if (interval > 1) return Math.floor(interval) + " months ago";
                interval = seconds / 86400;
                if (interval > 1) return Math.floor(interval) + " days ago";
                interval = seconds / 3600;
                if (interval > 1) return Math.floor(interval) + " hours ago";
                interval = seconds / 60;
                if (interval > 1) return Math.floor(interval) + " minutes ago";
                return Math.floor(seconds) + " seconds ago";
            }

            // Bind Claim actions
            const workspaceContainer = document.querySelector('.workspace-container');
            if (workspaceContainer) {
                // No claim logic needed for Admin since they can enter chats directly
            }

            // Live polling logic matching admin DOM nodes
            const pollInterval = 3000;
            let pollTimer = null;

            function buildEscalationNode(esc) {
                const wrapper = document.createElement('a');
                wrapper.className = 'conversation-item pending-item';
                wrapper.href = '/company-admin/messages/chat/' + encodeURIComponent(esc.visitor_id) + '/';
                wrapper.setAttribute('data-visitor-id', esc.visitor_id);

                const avatarContainer = document.createElement('div');
                avatarContainer.className = 'avatar-container';
                
                const circle = document.createElement('div');
                circle.className = 'avatar-circle';
                circle.textContent = (esc.visitor_name || esc.visitor_id || 'U').charAt(0).toUpperCase();
                if (esc.visitor_id && esc.visitor_id.startsWith('fb_')) {
                    circle.style.background = 'linear-gradient(135deg,#0084ff,#7c3aed)';
                    circle.style.color = '#fff';
                } else if (esc.visitor_id && !esc.visitor_id.startsWith('wa_')) {
                    circle.style.background = 'linear-gradient(135deg,#9333ea,#c084fc)';
                    circle.style.color = '#fff';
                }
                avatarContainer.appendChild(circle);

                const statusDot = document.createElement('span');
                statusDot.className = 'status-dot pending';
                avatarContainer.appendChild(statusDot);

                const details = document.createElement('div');
                details.className = 'conversation-details';
                
                const nameRow = document.createElement('div');
                nameRow.className = 'name-row';
                const name = document.createElement('span');
                name.className = 'name';
                name.textContent = esc.visitor_name || esc.visitor_id || 'Unknown User';
                const time = document.createElement('span');
                time.className = 'time';
                time.textContent = timeSince(esc.updated_at);
                nameRow.appendChild(name);
                nameRow.appendChild(time);

                const msgRow = document.createElement('div');
                msgRow.className = 'message-row';
                const preview = document.createElement('span');
                preview.className = 'message-preview';
                preview.textContent = esc.message ? (esc.message.substring(0, 70) + (esc.message.length > 70 ? '...' : '')) : '';
                
                let badge = document.createElement('span');
                if (esc.visitor_id && esc.visitor_id.startsWith('fb_')) {
                    badge.className = 'platform-badge fb';
                    badge.textContent = 'Messenger';
                } else if (esc.visitor_id && esc.visitor_id.startsWith('wa_')) {
                    badge.className = 'platform-badge wa';
                    badge.textContent = 'WhatsApp';
                } else {
                    badge.className = 'platform-badge web';
                    badge.textContent = 'Web';
                }
                msgRow.appendChild(preview);
                msgRow.appendChild(badge);

                details.appendChild(nameRow);
                details.appendChild(msgRow);

                wrapper.appendChild(avatarContainer);
                wrapper.appendChild(details);
                return wrapper;
            }

            function buildActiveEscalationNode(esc) {
                const a = document.createElement('a');
                a.className = 'conversation-item active-item';
                a.href = '/company-admin/messages/chat/' + encodeURIComponent(esc.visitor_id) + '/';
                a.setAttribute('data-visitor-id', esc.visitor_id);

                const avatarContainer = document.createElement('div');
                avatarContainer.className = 'avatar-container';
                
                const circle = document.createElement('div');
                circle.className = 'avatar-circle';
                circle.textContent = (esc.visitor_name || esc.visitor_id || 'U').charAt(0).toUpperCase();
                if (esc.visitor_id && esc.visitor_id.startsWith('fb_')) {
                    circle.style.background = 'linear-gradient(135deg,#0084ff,#7c3aed)';
                    circle.style.color = '#fff';
                } else if (esc.visitor_id && !esc.visitor_id.startsWith('wa_')) {
                    circle.style.background = 'linear-gradient(135deg,#9333ea,#c084fc)';
                    circle.style.color = '#fff';
                }
                avatarContainer.appendChild(circle);

                const statusDot = document.createElement('span');
                statusDot.className = 'status-dot active';
                avatarContainer.appendChild(statusDot);

                const details = document.createElement('div');
                details.className = 'conversation-details';
                
                const nameRow = document.createElement('div');
                nameRow.className = 'name-row';
                const name = document.createElement('span');
                name.className = 'name';
                name.textContent = esc.visitor_name || esc.visitor_id || 'Unknown User';
                const time = document.createElement('span');
                time.className = 'time';
                time.textContent = timeSince(esc.updated_at);
                nameRow.appendChild(name);
                nameRow.appendChild(time);

                const msgRow = document.createElement('div');
                msgRow.className = 'message-row';
                const preview = document.createElement('span');
                preview.className = 'message-preview';
                preview.textContent = esc.message ? (esc.message.substring(0, 70) + (esc.message.length > 70 ? '...' : '')) : '';
                
                let badge = document.createElement('span');
                if (esc.visitor_id && esc.visitor_id.startsWith('fb_')) {
                    badge.className = 'platform-badge fb';
                    badge.textContent = 'Messenger';
                } else if (esc.visitor_id && esc.visitor_id.startsWith('wa_')) {
                    badge.className = 'platform-badge wa';
                    badge.textContent = 'WhatsApp';
                } else {
                    badge.className = 'platform-badge web';
                    badge.textContent = 'Web';
                }
                msgRow.appendChild(preview);
                msgRow.appendChild(badge);
                if (esc.ai_mode_active) {
                    const aiBadge = document.createElement('span');
                    aiBadge.className = 'ai-badge';
                    aiBadge.textContent = '🤖 AI';
                    msgRow.appendChild(aiBadge);
                }

                if (esc.claimed_by_name) {
                    const agentBadge = document.createElement('span');
                    agentBadge.className = 'platform-badge';
                    agentBadge.style.background = 'rgba(107, 114, 128, 0.08)';
                    agentBadge.style.color = '#4b5563';
                    agentBadge.textContent = '👤 ' + esc.claimed_by_name;
                    msgRow.appendChild(agentBadge);
                }

                details.appendChild(nameRow);
                details.appendChild(msgRow);

                a.appendChild(avatarContainer);
                a.appendChild(details);
                return a;
            }

            async function pollPendingEscalations() {
                try {
                    const response = await fetch("{% url 'admin_pending_escalations' %}");
                    if (!response.ok) return;
                    const data = await response.json();
                    if (data.status !== 'success') return;
                    
                    const pending = data.escalations || [];
                    const active = data.active || [];
                    
                    const pendingDiv = document.getElementById('pending-list');
                    if (pendingDiv) {
                        pendingDiv.innerHTML = '';
                        if (pending.length === 0) {
                            pendingDiv.innerHTML = '<div class="no-conversations">No pending escalations.</div>';
                        } else {
                            for (const esc of pending) {
                                pendingDiv.appendChild(buildEscalationNode(esc));
                            }
                        }
                    }

                    const activeDiv = document.getElementById('active-list');
                    if (activeDiv) {
                        activeDiv.innerHTML = '';
                        if (active.length === 0) {
                            activeDiv.innerHTML = '<div class="no-conversations">No active conversations.</div>';
                        } else {
                            for (const esc of active) {
                                activeDiv.appendChild(buildActiveEscalationNode(esc));
                            }
                        }
                    }
                    
                    const countPending = document.getElementById('count-pending');
                    const countActive = document.getElementById('count-active');
                    if (countPending) countPending.textContent = pending.length;
                    if (countActive) countActive.textContent = active.length;
                    
                } catch (err) {
                    console.error(err);
                }
            }

            pollTimer = setInterval(pollPendingEscalations, pollInterval);
            window.addEventListener('beforeunload', () => { if (pollTimer) clearInterval(pollTimer); });
        })();
    </script>
{% endblock %}