{% extends 'agent/base_agent.html' %}

{% block title %}Chat with {{ visitor_id }} | Agent Desk | ChatLab{% endblock %}
{% block agent_dash_active %}active{% endblock %}
{% block messages_display %}{% endblock %}

{% block custom_styles %}
    body {
        overflow: hidden !important;
        height: 100% !important;
        height: 100dvh !important;
    }

    /* Adjust main content container to fill height exactly minus header */
    .main-content {
        padding: 0 !important;
        position: fixed;
        top: 56px;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0 !important;
        height: auto !important;
    }
    
    .chat-layout-wrapper {
        display: flex;
        flex-direction: column;
        flex: 1;
        background: var(--bg-card);
        overflow: hidden;
        height: 100%;
        width: 100%;
        position: relative;
        min-height: 0;
    }

    .agent-msg-row:hover .msg-actions {
        opacity: 1 !important;
    }
    .edit-msg-btn:hover {
        color: var(--primary-blue) !important;
    }
    .delete-msg-btn:hover {
        color: #b91c1c !important;
    }
    @media (max-width: 768px) {
        .msg-actions {
            opacity: 0.6 !important;
        }
    }

    .chat-page-header {
        padding: 10px 16px;
        background: var(--bg-card);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .chat-controls-wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    .attachment-buttons-container {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }

    .input-and-send-container {
        display: flex;
        gap: 8px;
        flex-grow: 1;
        align-items: flex-end;
    }

    .attach-icon-btn {
        background: var(--hover-bg);
        border: none;
        color: var(--primary-blue);
        width: 38px;
        height: 38px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s;
        outline: none;
    }

    .attach-icon-btn:hover {
        background: #e4e6eb;
    }

    .quicktype-btn {
        background: var(--hover-bg);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 6px 12px;
        font-size: 0.85rem;
        color: var(--text-primary);
        cursor: pointer;
        transition: background-color 0.2s;
        outline: none;
    }
    .quicktype-btn:hover {
        background: #e4e6eb;
    }

    /* MOBILE RESPONSIVE LAYOUT */
    @media (max-width: 576px) {
        .chat-page-header {
            flex-direction: column;
            align-items: flex-start;
            padding: 10px;
        }
        .top-action-btns {
            width: 100%;
            display: flex;
            gap: 0.5rem;
            margin-top: 0.25rem;
        }
        .top-action-btns a, .top-action-btns form, .top-action-btns button {
            flex: 1;
            width: 100%;
        }
        .top-action-btns button, .top-action-btns a {
            padding: 0.5rem 0 !important;
            font-size: 0.8rem !important;
            text-align: center;
            justify-content: center;
        }

        .chat-controls-wrapper {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }

        .attachment-buttons-container {
            width: 100%;
            justify-content: flex-start;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 6px;
        }

        .input-and-send-container {
            width: 100%;
        }
    }
{% endblock %}

{% block header_center %}
    <span style="font-weight: 700; font-size: 16px;">Active Chat</span>
{% endblock %}

{% block workspace %}
<div class="chat-layout-wrapper">
    <!-- Chat participant info header -->
    <div class="chat-page-header">
        <div>
            <div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.25rem;">
                <h2 class="page-title" style="margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary);">
                    <div class="status-badge online" style="padding: 0; border: none; background: transparent;">
                        <span class="status-dot" style="width: 8px; height: 8px; margin: 0; background: var(--success-green); border-radius: 50%; display: inline-block;"></span>
                    </div>
                    {% if visitor_profile_pic %}
                        <img src="{{ visitor_profile_pic }}" alt="Profile" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover;">
                    {% endif %}
                    {{ visitor_name|default:visitor_id }}
                </h2>
                <button type="button" id="copy-visitor-btn" style="background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0 0.3rem; font-size: 0.9rem;" title="Copy visitor ID">
                    <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path></svg>
                </button>
            </div>
            <div style="display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.75rem;">
                {% if visitor_id|slice:":3" == "fb_" %}
                    <span style="background: rgba(59, 89, 152, 0.1); color: #3b5998; border: 1px solid rgba(59, 89, 152, 0.25); padding: 0.1rem 0.3rem; border-radius: 4px; display: inline-flex; align-items: center; gap: 0.2rem;">
                        <svg width="10" height="10" fill="currentColor" viewBox="0 0 24 24" style="vertical-align: middle;"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10z"/></svg> Messenger
                    </span>
                {% elif visitor_id|slice:":3" == "wa_" %}
                    <span style="background: rgba(37, 211, 102, 0.1); color: #25d366; border: 1px solid rgba(37, 211, 102, 0.25); padding: 0.1rem 0.3rem; border-radius: 4px; display: inline-flex; align-items: center; gap: 0.2rem;">
                        <svg width="10" height="10" fill="currentColor" viewBox="0 0 24 24" style="vertical-align: middle;"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.724-1.457L0 24zm6.59-4.846c1.6.95 2.56 1.487 4.67 1.488 5.485 0 9.948-4.468 9.95-9.953.003-2.657-1.03-5.155-2.91-7.037C16.48 1.77 13.985.735 11.986.735c-5.49 0-9.953 4.463-9.955 9.948-.002 2.152.56 3.12 1.514 4.72l-1.012 3.693 3.824-.992zm11.758-6.195c-.3-.15-1.77-.874-2.04-.972-.27-.1-.47-.15-.67.15-.2.3-.77.973-.94 1.173-.17.2-.34.224-.64.074-.3-.15-1.27-.47-2.42-1.493-.895-.8-1.5-1.785-1.68-2.083-.18-.3-.02-.46.13-.61.137-.137.3-.35.45-.525.15-.175.2-.3.3-.5.1-.2.05-.375-.025-.525-.075-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51-.17-.01-.37-.01-.57-.01-.2 0-.52.075-.8.375-.27.3-1.04 1.018-1.04 2.483 0 1.465 1.06 2.88 1.21 3.08.15.2 2.09 3.2 5.07 4.487.7.3 1.25.49 1.68.63.71.22 1.36.19 1.87.115.57-.084 1.77-.724 2.02-1.388.25-.664.25-1.233.17-1.388-.07-.15-.27-.25-.57-.4z"/></svg> WhatsApp
                    </span>
                {% else %}
                    <span style="background: rgba(99, 102, 241, 0.1); color: var(--primary-blue); border: 1px solid rgba(99, 102, 241, 0.25); padding: 0.1rem 0.3rem; border-radius: 4px; display: inline-flex; align-items: center; gap: 0.2rem;">
                        <svg width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"></path><path d="M2 12h20"></path></svg> Web
                    </span>
                {% endif %}

                {% if escalation.ai_mode_active %}
                    <span style="background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.25); padding: 0.1rem 0.3rem; border-radius: 4px; display: inline-flex; align-items: center; gap: 0.2rem;">
                        <svg width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 2l3 6 6 3-6 3-3 6-3-6-6-3 6-3 3-6z"></path></svg> AI Active
                    </span>
                {% else %}
                    <span style="background: rgba(245, 158, 11, 0.1); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.25); padding: 0.1rem 0.3rem; border-radius: 4px; display: inline-flex; align-items: center; gap: 0.2rem;">
                        <svg width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> Manual Mode
                    </span>
                {% endif %}
                <span style="color: var(--text-muted);">· Chatting as {{ user.agent_name|default:user.username }}</span>
            </div>
        </div>
        <div class="top-action-btns" style="display: flex; align-items: center; gap: 0.5rem;">
            <a href="{% url 'agent_dashboard' %}" class="btn btn-secondary" style="padding: 0.4rem 0.9rem; font-size: 0.85rem; border-radius: 8px; color: var(--text-primary) !important; display: flex; align-items: center; gap: 0.25rem;">
                <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"></path></svg> Back
            </a>
            <form method="post" action="{% url 'agent_toggle_ai_mode' visitor_id %}" style="margin: 0;" id="toggle-ai-form">
                {% csrf_token %}
                <button type="submit" id="toggle-ai-btn" class="btn {% if escalation.ai_mode_active %}btn-secondary{% else %}btn-primary{% endif %}" style="padding: 0.4rem 0.9rem; font-size: 0.85rem; border-radius: 8px; color: {% if escalation.ai_mode_active %}var(--text-primary){% else %}#ffffff{% endif %} !important;">
                    {% if escalation.ai_mode_active %}Disable AI{% else %}Enable AI{% endif %}
                </button>
            </form>
        </div>
    </div>

    <!-- Messages history log -->
    <div id="chat-window" class="chat-main-mobile" style="flex: 1; min-height: 0; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; background: var(--bg-page);">
        {% for m in messages %}
            {% if m.sender == 'visitor' %}
                <div style="display: flex; justify-content: flex-start; margin-bottom: 0.4rem;">
                    <div style="max-width: 70%; padding: 0.6rem 0.85rem; background: #E4E6EB; color: #050505; border-radius: 18px 18px 18px 4px; font-size: 0.95rem;">
                        <div style="font-size: 0.7rem; color: #65676B; margin-bottom: 0.2rem;">{{ visitor_name|default:"Visitor" }}</div>
                        <div class="msg-text">
                            {% if m.message_type == 'image' %}
                                {% if m.attachment %}
                                    <img src="{{ m.attachment.url }}" style="max-width: 220px; border-radius: 4px; display: block;">
                                {% elif m.attachment_url %}
                                    <img src="{{ m.attachment_url }}" style="max-width: 220px; border-radius: 4px; display: block;">
                                {% endif %}
                            {% elif m.message_type == 'voice' %}
                                {% if m.attachment %}
                                    <audio controls style="max-width: 220px; border-radius: 4px;"><source src="{{ m.attachment.url }}" type="audio/wav"></audio>
                                {% elif m.attachment_url %}
                                    <audio controls style="max-width: 220px; border-radius: 4px;"><source src="{{ m.attachment_url }}" type="audio/wav"></audio>
                                {% endif %}
                            {% elif m.message_type == 'file' %}
                                {% if m.attachment %}
                                    <a href="{{ m.attachment.url }}" download style="color: var(--primary-blue); text-decoration: underline;">📎 {{ m.content }}</a>
                                {% elif m.attachment_url %}
                                    <a href="{{ m.attachment_url }}" download style="color: var(--primary-blue); text-decoration: underline;">📎 {{ m.content }}</a>
                                {% endif %}
                            {% else %}
                                {{ m.content|linebreaksbr }}
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% elif m.sender == 'agent' %}
                <div style="display: flex; justify-content: flex-end; align-items: flex-end; gap: 8px; margin-bottom: 0.4rem;" data-msg-id="{{ m.id }}" class="agent-msg-row">
                    <div class="msg-actions" style="display: flex; gap: 4px; opacity: 0; transition: opacity 0.2s;">
                        <button type="button" class="edit-msg-btn" onclick="editAgentMessage({{ m.id }})" style="background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 2px 4px;">Edit</button>
                        <button type="button" class="delete-msg-btn" onclick="deleteAgentMessage({{ m.id }})" style="background: none; border: none; color: var(--danger-red); cursor: pointer; font-size: 11px; padding: 2px 4px;">Delete</button>
                    </div>
                    <div class="msg-bubble" style="max-width: 70%; padding: 0.6rem 0.85rem; background: var(--primary-blue); color: #ffffff; border-radius: 18px 18px 4px 18px; font-size: 0.95rem; position: relative;">
                        <div style="font-size: 0.7rem; color: rgba(255,255,255,0.8); margin-bottom: 0.2rem;">You</div>
                        <div class="msg-text">
                            {% if m.message_type == 'image' %}
                                {% if m.attachment %}
                                    <img src="{{ m.attachment.url }}" style="max-width: 220px; border-radius: 4px; display: block;">
                                {% elif m.attachment_url %}
                                    <img src="{{ m.attachment_url }}" style="max-width: 220px; border-radius: 4px; display: block;">
                                {% endif %}
                            {% elif m.message_type == 'voice' %}
                                {% if m.attachment %}
                                    <audio controls style="max-width: 220px; border-radius: 4px;"><source src="{{ m.attachment.url }}" type="audio/wav"></audio>
                                {% elif m.attachment_url %}
                                    <audio controls style="max-width: 220px; border-radius: 4px;"><source src="{{ m.attachment_url }}" type="audio/wav"></audio>
                                {% endif %}
                            {% elif m.message_type == 'file' %}
                                {% if m.attachment %}
                                    <a href="{{ m.attachment.url }}" download style="color: #ffffff; text-decoration: underline;">📎 {{ m.content }}</a>
                                {% elif m.attachment_url %}
                                    <a href="{{ m.attachment_url }}" download style="color: #ffffff; text-decoration: underline;">📎 {{ m.content }}</a>
                                {% endif %}
                            {% else %}
                                {{ m.content|linebreaksbr }}
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% elif m.sender == 'bot' %}
                <div style="display: flex; justify-content: flex-start; margin-bottom: 0.4rem;">
                    <div style="max-width: 70%; padding: 0.6rem 0.85rem; background: rgba(0, 132, 255, 0.1); color: var(--primary-blue); border-radius: 18px 18px 18px 4px; font-size: 0.95rem;">
                        <div style="font-size: 0.7rem; color: #65676B; margin-bottom: 0.2rem;">Website</div>
                        <div class="msg-text">
                            {% if m.message_type == 'image' %}
                                {% if m.attachment %}
                                    <img src="{{ m.attachment.url }}" style="max-width: 220px; border-radius: 4px; display: block;">
                                {% elif m.attachment_url %}
                                    <img src="{{ m.attachment_url }}" style="max-width: 220px; border-radius: 4px; display: block;">
                                {% endif %}
                            {% elif m.message_type == 'voice' %}
                                {% if m.attachment %}
                                    <audio controls style="max-width: 220px; border-radius: 4px;"><source src="{{ m.attachment.url }}" type="audio/wav"></audio>
                                {% elif m.attachment_url %}
                                    <audio controls style="max-width: 220px; border-radius: 4px;"><source src="{{ m.attachment_url }}" type="audio/wav"></audio>
                                {% endif %}
                            {% elif m.message_type == 'file' %}
                                {% if m.attachment %}
                                    <a href="{{ m.attachment.url }}" download style="color: var(--primary-blue); text-decoration: underline;">📎 {{ m.content }}</a>
                                {% elif m.attachment_url %}
                                    <a href="{{ m.attachment_url }}" download style="color: var(--primary-blue); text-decoration: underline;">📎 {{ m.content }}</a>
                                {% endif %}
                            {% else %}
                                {{ m.content|linebreaksbr }}
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% else %}
                <div style="text-align: center; color: var(--text-muted); font-size: 0.8rem; font-style: italic;">
                    — {{ m.content }} —
                </div>
            {% endif %}
        {% endfor %}
    </div>

    <!-- Scroll to Bottom Button -->
    <button type="button" id="scroll-to-bottom-btn" style="display: none; position: absolute; bottom: 85px; right: 20px; width: 42px; height: 42px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: 0 4px 8px rgba(0,0,0,0.15); cursor: pointer; z-index: 50; align-items: center; justify-content: center; color: var(--primary-blue); outline: none;">
        <svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 13l-7 7-7-7m14-6l-7 7-7-7"/></svg>
    </button>

    <!-- Input text area and action forms -->
    <form id="send-form" style="padding: 10px 16px; border-top: 1px solid var(--border-color); background: var(--bg-card); display: flex; flex-direction: column; gap: 8px;">
        {% csrf_token %}
        
        <!-- Attachment preview -->
        <div id="attachment-preview" style="display: none; padding: 6px 12px; background: var(--hover-bg); border: 1px solid var(--border-color); border-radius: 6px; font-size: 13px;">
            <span id="preview-text"></span>
            <button type="button" id="remove-attachment" style="margin-left: 8px; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; font-weight: bold; line-height: 1;">&times;</button>
        </div>
        
        <!-- Controls area -->
        <div class="chat-controls-wrapper">
            <!-- Attachment buttons -->
            <div class="attachment-buttons-container">
                <button type="button" id="btn-file" title="Attach file" class="attach-icon-btn">
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path></svg>
                </button>
                <button type="button" id="btn-image" title="Attach image" class="attach-icon-btn">
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                </button>
                <button type="button" id="btn-camera" title="Take photo" class="attach-icon-btn">
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                </button>
                <button type="button" id="btn-voice" title="Record voice" class="attach-icon-btn" data-recording="false">
                    <span id="voice-btn-icon" style="font-size: 16px;">🎤</span>
                </button>
            </div>
            
            <!-- Message text input + send button -->
            <div class="input-and-send-container">
                <textarea id="agent-reply" name="message" class="form-input" placeholder="Type your reply here..." style="flex-grow: 1; height: 38px; resize: none; border-radius: 19px; padding: 8px 16px; color: var(--text-primary); font-size: 14px; line-height: 1.4;"></textarea>
                <button type="submit" id="send-btn" onmousedown="event.preventDefault();" class="btn btn-primary" style="flex-shrink: 0; border-radius: 19px; height: 38px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center;">
                    Send
                </button>
            </div>
        </div>

        <!-- Hidden file inputs -->
        <input type="file" id="file-input" style="display: none;" accept="*/*" multiple>
        <input type="file" id="image-input" style="display: none;" accept="image/*" multiple>
        <input type="file" id="camera-input" style="display: none;" accept="image/*" capture="environment">
    </form>
</div>

<script>
(function () {
    const chatWindow = document.getElementById('chat-window');
    const form = document.getElementById('send-form');
    const textarea = document.getElementById('agent-reply');
    const sendBtn = document.getElementById('send-btn');
    const csrfToken = form.querySelector('[name=csrfmiddlewaretoken]').value;
    const visitorId = "{{ visitor_id|escapejs }}";
    const visitorName = "{{ visitor_name|default:'Visitor'|escapejs }}";
    const sendUrl = "{% url 'agent_send_message' visitor_id %}";
    const typingUrl = "{% url 'agent_update_typing_status' visitor_id %}";
    const pollUrl = "{% url 'agent_poll_messages' visitor_id %}";

    // Track the highest message id we have rendered
    let lastId = Math.max(0, {{ last_id }});
    let typingTimeout = null;

    function scrollToBottom() {
        chatWindow.scrollTop = chatWindow.scrollHeight;
    }
    scrollToBottom();

    // Adjust scroll when virtual keyboard opens/resizes viewport
    if (window.visualViewport) {
        window.visualViewport.addEventListener('resize', scrollToBottom);
        window.visualViewport.addEventListener('scroll', scrollToBottom);
    }

    // Submit on Enter key (without Shift)
    textarea.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            form.requestSubmit();
        }
    });

    // Copy visitor ID functionality
    const copyVisitorBtn = document.getElementById('copy-visitor-btn');
    
    function copyVisitorId() {
        navigator.clipboard.writeText(visitorId).then(() => {
            const originalSvg = copyVisitorBtn.innerHTML;
            copyVisitorBtn.textContent = '✓';
            setTimeout(() => {
                copyVisitorBtn.innerHTML = originalSvg;
            }, 2000);
        }).catch(() => {
            alert('Failed to copy visitor ID');
        });
    }
    if (copyVisitorBtn) copyVisitorBtn.addEventListener('click', copyVisitorId);

    // Notification sound for new messages
    function playNotificationSound() {
        try {
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            const now = audioContext.currentTime;
            
            const osc = audioContext.createOscillator();
            const gain = audioContext.createGain();
            
            osc.connect(gain);
            gain.connect(audioContext.destination);
            
            osc.frequency.setValueAtTime(800, now);
            osc.frequency.exponentialRampToValueAtTime(200, now + 0.3);
            
            gain.gain.setValueAtTime(0.3, now);
            gain.gain.exponentialRampToValueAtTime(0.01, now + 0.3);
            
            osc.start(now);
            osc.stop(now + 0.3);
        } catch (e) {
            // silent if AudioContext blocked/not available
        }
    }

    // Track agent typing
    function notifyAgentTyping() {
        if (typingTimeout) clearTimeout(typingTimeout);
        fetch(typingUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRFToken': csrfToken,
            },
        }).catch(() => {});
        
        typingTimeout = setTimeout(() => {
            if (textarea.value.trim()) {
                notifyAgentTyping();
            }
        }, 2000);
    }
    textarea.addEventListener('input', notifyAgentTyping);

    // Scroll to bottom button toggle and click logic
    const scrollToBottomBtn = document.getElementById('scroll-to-bottom-btn');
    if (scrollToBottomBtn) {
        chatWindow.addEventListener('scroll', function() {
            const scrollDiff = chatWindow.scrollHeight - chatWindow.scrollTop - chatWindow.clientHeight;
            if (scrollDiff > 200) {
                scrollToBottomBtn.style.display = 'flex';
            } else {
                scrollToBottomBtn.style.display = 'none';
            }
        });
        scrollToBottomBtn.addEventListener('click', function() {
            scrollToBottom();
        });
    }

    function renderMessage(m) {
        const messageType = m.message_type || 'text';
        
        let content = '';
        if (messageType === 'image' && m.attachment) {
            content = `<img src="${m.attachment}" style="max-width: 220px; border-radius: 4px; display: block;">`;
        } else if (messageType === 'voice' && m.attachment) {
            content = `<audio controls style="max-width: 220px; border-radius: 4px;"><source src="${m.attachment}" type="audio/wav"></audio>`;
        } else if (messageType === 'file' && m.attachment) {
            content = `<a href="${m.attachment}" download style="color: var(--primary-blue); text-decoration: underline;">📎 ${escapeHtml(m.content)}</a>`;
        } else {
            content = `${escapeHtml(m.content).replace(/\n/g, '<br>')}`;
        }

        if (m.sender === 'agent') {
            return `
                <div style="display: flex; justify-content: flex-end; align-items: flex-end; gap: 8px; margin-bottom: 0.4rem;" data-msg-id="${m.id}" class="agent-msg-row">
                    <div class="msg-actions" style="display: flex; gap: 4px; opacity: 0; transition: opacity 0.2s;">
                        <button type="button" class="edit-msg-btn" onclick="editAgentMessage(${m.id})" style="background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 2px 4px;">Edit</button>
                        <button type="button" class="delete-msg-btn" onclick="deleteAgentMessage(${m.id})" style="background: none; border: none; color: var(--danger-red); cursor: pointer; font-size: 11px; padding: 2px 4px;">Delete</button>
                    </div>
                    <div class="msg-bubble" style="max-width: 70%; padding: 0.6rem 0.85rem; background: var(--primary-blue); color: #ffffff; border-radius: 18px 18px 4px 18px; font-size: 0.95rem; position: relative;">
                        <div style="font-size: 0.7rem; color: rgba(255,255,255,0.8); margin-bottom: 0.2rem;">You</div>
                        <div class="msg-text">${content}</div>
                    </div>
                </div>`;
        } else {
            const bubbleStyle = m.sender === 'bot'
                ? 'background: rgba(0, 132, 255, 0.1); color: var(--primary-blue);'
                : 'background: #E4E6EB; color: #050505;';
            const borderRadius = '18px 18px 18px 4px';
            const displaySender = m.sender === 'visitor' ? visitorName : (m.sender === 'bot' ? 'Website' : m.sender.charAt(0).toUpperCase() + m.sender.slice(1));
            
            return `
                <div style="display: flex; justify-content: flex-start; margin-bottom: 0.4rem;" data-msg-id="${m.id}">
                    <div style="max-width: 70%; padding: 0.6rem 0.85rem; ${bubbleStyle} border-radius: ${borderRadius}; font-size: 0.95rem;">
                        <div style="font-size: 0.7rem; color: #65676B; margin-bottom: 0.2rem;">${displaySender}</div>
                        <div>${content}</div>
                    </div>
                </div>`;
        }
    }

    function escapeHtml(s) {
        return String(s)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
    }

    // Agent message edit/delete handlers
    window.editAgentMessage = async function(msgId) {
        const row = document.querySelector(`.agent-msg-row[data-msg-id="${msgId}"]`);
        if (!row) return;
        const msgTextDiv = row.querySelector('.msg-text');
        
        if (row.querySelector('img') || row.querySelector('audio') || row.querySelector('a[download]')) {
            alert("Editing attachments is not supported. You can only edit text messages.");
            return;
        }

        const currentText = msgTextDiv.innerHTML.replace(/<br\s*\/?>/mg, "\n");
        const newText = prompt("Edit your message:", currentText);
        if (newText === null) return;
        const trimmed = newText.trim();
        if (!trimmed) {
            alert("Message cannot be empty.");
            return;
        }

        try {
            const formData = new FormData();
            formData.append('content', trimmed);
            formData.append('csrfmiddlewaretoken', csrfToken);

            const response = await fetch(`/agent/chat/message/${msgId}/edit/`, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': csrfToken
                }
            });
            const data = await response.json();
            if (data.status === 'success') {
                msgTextDiv.innerHTML = escapeHtml(data.message.content).replace(/\n/g, '<br>');
            } else {
                alert("Failed to edit message: " + (data.error || "unknown error"));
            }
        } catch (err) {
            alert("Network error: " + err.message);
        }
    };

    window.deleteAgentMessage = async function(msgId) {
        if (!confirm("Are you sure you want to delete this message?")) return;

        try {
            const formData = new FormData();
            formData.append('csrfmiddlewaretoken', csrfToken);

            const response = await fetch(`/agent/chat/message/${msgId}/delete/`, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': csrfToken
                }
            });
            const data = await response.json();
            if (data.status === 'success') {
                const row = document.querySelector(`[data-msg-id="${msgId}"]`);
                if (row) {
                    row.remove();
                }
            } else {
                alert("Failed to delete message: " + (data.error || "unknown error"));
            }
        } catch (err) {
            alert("Network error: " + err.message);
        }
    };

    function appendMessage(m) {
        if (chatWindow.querySelector(`[data-msg-id="${m.id}"]`)) return;
        const wrapper = document.createElement('div');
        wrapper.innerHTML = renderMessage(m);
        chatWindow.appendChild(wrapper.firstElementChild);
        if (m.id > lastId) lastId = m.id;
        scrollToBottom();
    }

    // Attachment input elements
    const fileInput = document.getElementById('file-input');
    const imageInput = document.getElementById('image-input');
    const cameraInput = document.getElementById('camera-input');
    const btnFile = document.getElementById('btn-file');
    const btnImage = document.getElementById('btn-image');
    const btnCamera = document.getElementById('btn-camera');
    const btnVoice = document.getElementById('btn-voice');
    const attachmentPreview = document.getElementById('attachment-preview');
    const previewText = document.getElementById('preview-text');
    const removeAttachmentBtn = document.getElementById('remove-attachment');
    
    let selectedAttachments = [];

    // Voice recording states
    let mediaRecorder = null;
    let audioChunks = [];
    let isRecording = false;

    function updateAttachmentPreview() {
        if (selectedAttachments.length > 0) {
            const names = selectedAttachments.map(a => a.file.name || 'Attachment').join(', ');
            previewText.textContent = `📎 ${names}`;
            attachmentPreview.style.display = 'block';
        } else {
            attachmentPreview.style.display = 'none';
        }
    }

    btnFile.addEventListener('click', (e) => { e.preventDefault(); fileInput.click(); });
    btnImage.addEventListener('click', (e) => { e.preventDefault(); imageInput.click(); });
    btnCamera.addEventListener('click', (e) => { e.preventDefault(); cameraInput.click(); });

    function handleFileSelection(e, type) {
        if (e.target.files.length) {
            for (let f of e.target.files) {
                if (f.size > 2 * 1024 * 1024) {
                    alert("A file exceeds the 2MB limit: " + (f.name || 'Attachment'));
                    continue;
                }
                selectedAttachments.push({ file: f, type: type });
            }
            updateAttachmentPreview();
        }
        e.target.value = '';
    }

    fileInput.addEventListener('change', (e) => handleFileSelection(e, 'file'));
    imageInput.addEventListener('change', (e) => handleFileSelection(e, 'image'));
    cameraInput.addEventListener('change', (e) => handleFileSelection(e, 'image'));

    removeAttachmentBtn.addEventListener('click', (e) => {
        e.preventDefault();
        selectedAttachments = [];
        updateAttachmentPreview();
        fileInput.value = '';
        imageInput.value = '';
        cameraInput.value = '';
    });

    // Voice recording
    btnVoice.addEventListener('click', async (e) => {
        e.preventDefault();
        const iconSpan = document.getElementById('voice-btn-icon');
        
        if (isRecording) {
            isRecording = false;
            btnVoice.style.background = 'var(--hover-bg)';
            btnVoice.style.color = 'var(--primary-blue)';
            if (iconSpan) iconSpan.textContent = '🎤';
            btnVoice.dataset.recording = 'false';
            
            mediaRecorder.stop();
            mediaRecorder.addEventListener('dataavailable', (e) => {
                audioChunks.push(e.data);
            });
            
            mediaRecorder.addEventListener('stop', () => {
                const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                if (audioBlob.size > 2 * 1024 * 1024) {
                    alert("Recorded voice message exceeds the 2MB size limit.");
                    audioChunks = [];
                    return;
                }
                const voiceFile = new File([audioBlob], 'voice_message.wav', { type: 'audio/wav' });
                selectedAttachments.push({ file: voiceFile, type: 'voice' });
                audioChunks = [];
                updateAttachmentPreview();
            });
        } else {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                mediaRecorder = new MediaRecorder(stream);
                isRecording = true;
                audioChunks = [];
                
                btnVoice.style.background = 'rgba(220, 38, 38, 0.15)';
                btnVoice.style.color = '#dc2626';
                if (iconSpan) iconSpan.textContent = '⏹️';
                btnVoice.dataset.recording = 'true';
                
                mediaRecorder.start();
            } catch (err) {
                alert('Microphone access denied. Please enable microphone permissions.');
            }
        }
    });

    let isSubmitting = false;
    form.addEventListener('submit', async function (e) {
        e.preventDefault();
        if (isSubmitting) return;
        
        const text = textarea.value.trim();
        if (!text && selectedAttachments.length === 0) return;
        
        isSubmitting = true;
        try {
            const formData = new FormData();
            formData.append('message', text);
            
            selectedAttachments.forEach(att => {
                formData.append('attachments', att.file);
            });
            formData.append('csrfmiddlewaretoken', csrfToken);
            
            const resp = await fetch(sendUrl, {
                method: 'POST',
                body: formData,
            });
            const data = await resp.json();
            if (data.status === 'success') {
                if (data.messages && data.messages.length) {
                    data.messages.forEach(m => appendMessage(m));
                } else if (data.message) {
                    appendMessage(data.message);
                }
                textarea.value = '';
                selectedAttachments = [];
                updateAttachmentPreview();
                fileInput.value = '';
                imageInput.value = '';
                cameraInput.value = '';
            } else {
                alert('Failed to send: ' + (data.error || 'unknown error'));
            }
        } catch (err) {
            alert('Network error: ' + err.message);
        } finally {
            isSubmitting = false;
        }
    });

    // Poll for new messages every 1s
    async function poll() {
        try {
            const resp = await fetch(pollUrl + '?since_id=' + lastId, {
                headers: { 'X-CSRFToken': csrfToken },
            });
            if (resp.ok) {
                const data = await resp.json();
                if (data.messages && data.messages.length) {
                    data.messages.forEach(m => {
                        appendMessage(m);
                        if (m.sender === 'visitor') {
                            playNotificationSound();
                        }
                    });
                }
            }
        } catch (err) {
            // retry silently
        }
    }
    setInterval(poll, 1000);
    poll();
})();
</script>
<style>
    .custom-toast {
        position: fixed;
        top: 24px;
        right: 24px;
        background: var(--bg-card);
        border-left: 4px solid var(--primary-blue);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        padding: 12px 18px;
        border-radius: 8px;
        z-index: 99999;
        display: flex;
        align-items: center;
        gap: 12px;
        transform: translateY(-20px);
        opacity: 0;
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
        max-width: 380px;
        font-size: 14px;
        pointer-events: auto;
    }
    .custom-toast.show {
        transform: translateY(0);
        opacity: 1;
    }
    .custom-toast.success {
        border-left-color: var(--success-green);
    }
    .custom-toast.error, .custom-toast.danger {
        border-left-color: var(--danger-red);
    }
    .custom-toast.warning {
        border-left-color: var(--warning-orange);
    }
    .custom-toast .close-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-muted);
        font-size: 18px;
        margin-left: auto;
        padding: 0 4px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s;
    }
    .custom-toast .close-btn:hover {
        color: var(--text-primary);
    }
</style>
<script>
    function showToast(message, type = 'info') {
        const toast = document.createElement('div');
        toast.className = `custom-toast ${type}`;
        
        let icon = 'ℹ️';
        if (type === 'success') icon = '✅';
        else if (type === 'error' || type === 'danger') icon = '❌';
        else if (type === 'warning') icon = '⚠️';
        
        toast.innerHTML = `
            <span style="font-size: 16px;">${icon}</span>
            <span style="color: var(--text-primary); font-weight: 500; line-height: 1.4;">${message}</span>
            <button class="close-btn" aria-label="Close">&times;</button>
        `;
        
        document.body.appendChild(toast);
        
        // Trigger animation
        setTimeout(() => toast.classList.add('show'), 100);
        
        const closeBtn = toast.querySelector('.close-btn');
        closeBtn.addEventListener('click', () => {
            toast.classList.remove('show');
            setTimeout(() => toast.remove(), 300);
        });
        
        // Auto-remove after 4 seconds
        setTimeout(() => {
            if (toast.parentNode) {
                toast.classList.remove('show');
                setTimeout(() => toast.remove(), 300);
            }
        }, 4000);
    }

    // Toggle AI mode client-side check
    document.addEventListener('DOMContentLoaded', function() {
        const toggleAiForm = document.getElementById('toggle-ai-form');
        const toggleAiBtn = document.getElementById('toggle-ai-btn');
        
        if (toggleAiForm && toggleAiBtn) {
            toggleAiForm.addEventListener('submit', function(e) {
                const aiAgentActive = {% if company.ai_agent_active %}true{% else %}false{% endif %};
                const isAIActiveOnChat = {% if escalation.ai_mode_active %}true{% else %}false{% endif %};
                
                // If trying to enable AI (button text is "Enable AI", meaning current state is deactivated)
                // but the global AI agent status is turned off by admin
                if (!isAIActiveOnChat && !aiAgentActive) {
                    e.preventDefault();
                    showToast("AI agent disabled from admin", "error");
                }
            });
        }
    });
</script>
{% endblock %}