{% 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 workspace %}
<style>
    /* Full width, full height overrides for chat interface */
    .main-content {
        padding: 0 !important;
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    .chat-layout-wrapper {
        display: flex;
        flex-direction: column;
        flex: 1;
        background: var(--bg);
        overflow: hidden;
    }

    .chat-page-header {
        padding: 0.75rem 1.25rem;
        background: var(--bg);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    @media (max-width: 576px) {
        .chat-page-header {
            flex-direction: column;
            align-items: flex-start;
            padding: 0.75rem;
        }
        .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;
        }
        
        /* Keep reply controls in same row on mobile */
        .chat-reply-controls {
            flex-direction: row !important;
            align-items: flex-end !important;
            gap: 0.5rem !important;
        }
        .chat-reply-controls textarea {
            height: 44px !important;
            margin: 0 !important;
            padding: 0.5rem !important;
        }
        .chat-reply-controls button[type="submit"] {
            width: auto !important;
            padding: 0 1rem !important;
            height: 44px !important;
        }
        .attachment-buttons-container {
            width: auto !important;
            gap: 0.25rem !important;
            justify-content: flex-start !important;
        }
        .attachment-buttons-container button {
            width: 36px !important;
            height: 36px !important;
        }
    }
</style>

<div class="chat-layout-wrapper">
    <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: #000000 !important;">
                    <div class="status-badge online" style="padding: 0; border: none; background: transparent;">
                        <span class="status-dot" style="width: 8px; height: 8px; margin: 0;"></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.15); color: #3b5998; border: 1px solid rgba(59, 89, 152, 0.3); 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.15); color: #25d366; border: 1px solid rgba(37, 211, 102, 0.3); 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.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); 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> Bot
                    </span>
                {% endif %}

                {% if escalation.ai_mode_active %}
                    <span style="background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); 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.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); 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: #000000 !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;">
                {% csrf_token %}
                <button type="submit" 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 %}#000000{% else %}#ffffff{% endif %} !important;">
                    {% if escalation.ai_mode_active %}Disable AI{% else %}Enable AI{% endif %}
                </button>
            </form>
            <form method="post" action="{% url 'agent_release_escalation' visitor_id %}" style="margin: 0;">
                {% csrf_token %}
                <button type="submit" class="btn btn-danger" style="padding: 0.4rem 0.9rem; font-size: 0.85rem; border-radius: 8px;">End chat</button>
            </form>
        </div>
    </div>

    <div id="chat-window" class="chat-main-mobile" style="flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; background: var(--bg);">
        {% for m in messages %}
            {% if m.sender == 'visitor' %}
                <div style="display: flex; justify-content: flex-start;">
                    <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>
                        {{ m.content|linebreaksbr }}
                    </div>
                </div>
            {% elif m.sender == 'agent' %}
                <div style="display: flex; justify-content: flex-end;" data-msg-id="{{ m.id }}">
                    <div style="max-width: 70%; padding: 0.6rem 0.85rem; background: var(--primary); color: #ffffff; border-radius: 18px 18px 4px 18px; font-size: 0.95rem;">
                        <div style="font-size: 0.7rem; color: rgba(255,255,255,0.8); margin-bottom: 0.2rem;">You</div>
                        {{ m.content|linebreaksbr }}
                    </div>
                </div>
            {% elif m.sender == 'bot' %}
                <div style="display: flex; justify-content: flex-start;">
                    <div style="max-width: 70%; padding: 0.6rem 0.85rem; background: rgba(0, 132, 255, 0.1); color: var(--primary); border-radius: 18px 18px 18px 4px; font-size: 0.95rem;">
                        <div style="font-size: 0.7rem; color: #65676B; margin-bottom: 0.2rem;">Bot</div>
                        {{ m.content|linebreaksbr }}
                    </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>

    <div id="quicktype-container" style="padding: 0.65rem 1.25rem; border-top: 1px solid var(--border-color); display:flex; gap:0.5rem; flex-wrap:wrap;">
        {% for q in quick_types %}
            <button type="button" class="quicktype-btn" data-content="{{ q.content|escapejs }}" style="background: rgba(255,255,255,0.03); border:1px solid var(--border-color); padding:0.35rem 0.6rem; font-size:0.85rem; cursor:pointer;">{{ q.label }}</button>
        {% endfor %}
    </div>

    <form id="send-form" style="padding: 1rem 1.25rem; border-top: 1px solid var(--border-color); background: rgba(255,255,255,0.02); display: flex; flex-direction: column; gap: 0.75rem;">
        {% csrf_token %}
        
        <!-- Attachment preview -->
        <div id="attachment-preview" style="display: none; padding: 0.5rem; background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.85rem;">
            <span id="preview-text"></span>
            <button type="button" id="remove-attachment" style="margin-left: 0.5rem; background: none; border: none; color: #999; cursor: pointer;">×</button>
        </div>
        
        <!-- Message input row -->
        <div class="chat-reply-controls" style="display: flex; gap: 0.75rem; align-items: flex-end;">
            <!-- Attachment buttons -->
            <div class="attachment-buttons-container" style="display: flex; gap: 0.5rem;">
                <button type="button" id="btn-file" title="Attach file" style="background: var(--hover-bg); border: none; color: var(--primary); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;">
                    <svg width="20" height="20" 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" style="background: var(--hover-bg); border: none; color: var(--primary); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;">
                    <svg width="20" height="20" 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" style="background: var(--hover-bg); border: none; color: var(--primary); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;">
                    <svg width="20" height="20" 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" style="background: var(--hover-bg); border: none; color: var(--primary); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;" data-recording="false">
                    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path></svg>
                </button>
            </div>
            
            <!-- Hidden file inputs -->
            <input type="file" id="file-input" style="display: none;" accept="*/*">
            <input type="file" id="image-input" style="display: none;" accept="image/*">
            <input type="file" id="camera-input" style="display: none;" accept="image/*" capture="environment">
            
            <!-- Message textarea -->
            <textarea id="agent-reply" name="message" class="form-input" placeholder="Type your reply here" style="flex: 1; height: 60px; border-radius: 0; resize: none; padding: 0.7rem; color: #000000 !important;"></textarea>
            
            <!-- Send button -->
            <button type="submit" id="send-btn" class="btn btn-primary" style="border-radius: 0; padding: 0 1.5rem; height: 60px;">
                Send
            </button>
        </div>
    </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 (provided by view)
    let lastId = Math.max(0, {{ last_id }});
    let typingTimeout = null;

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

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

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

    // Notification sound for new messages
    function playNotificationSound() {
        // Create a simple notification sound using Web Audio API
        try {
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            const now = audioContext.currentTime;
            
            // Create oscillator for a pleasant drop sound
            const osc = audioContext.createOscillator();
            const gain = audioContext.createGain();
            
            osc.connect(gain);
            gain.connect(audioContext.destination);
            
            // Drop sound: high frequency that drops down
            osc.frequency.setValueAtTime(800, now);
            osc.frequency.exponentialRampToValueAtTime(200, now + 0.3);
            
            // Volume envelope: sharp attack, quick decay
            gain.gain.setValueAtTime(0.3, now);
            gain.gain.exponentialRampToValueAtTime(0.01, now + 0.3);
            
            osc.start(now);
            osc.stop(now + 0.3);
        } catch (e) {
            // Fallback: silent if Web Audio not available
        }
    }

    // Track agent typing and send periodic update
    function notifyAgentTyping() {
        if (typingTimeout) clearTimeout(typingTimeout);
        // Send typing status to backend
        fetch(typingUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRFToken': csrfToken,
            },
        }).catch(() => {});
        
        // Send again in 2 seconds if still typing
        typingTimeout = setTimeout(() => {
            if (textarea.value.trim()) {
                notifyAgentTyping();
            }
        }, 2000);
    }

    textarea.addEventListener('input', notifyAgentTyping);

    // QuickType button clicks: insert text and auto-send
    const quickTypeContainer = document.getElementById('quicktype-container');
    if (quickTypeContainer) {
        quickTypeContainer.addEventListener('click', function (e) {
            const btn = e.target.closest('.quicktype-btn');
            if (!btn) return;
            const txt = btn.getAttribute('data-content') || '';
            if (!txt) return;
            textarea.value = txt;
            // submit immediately
            form.requestSubmit();
        });
    }

    function renderMessage(m) {
        const messageType = m.message_type || 'text';
        const senderClass = m.sender === 'agent' ? 'flex-end' : 'flex-start';
        const bubbleStyle = m.sender === 'agent' 
            ? 'background: var(--primary); color: #ffffff;'
            : m.sender === 'bot'
            ? 'background: rgba(0, 132, 255, 0.1); color: var(--primary);'
            : 'background: #E4E6EB; color: #050505;';
        const borderRadius = m.sender === 'agent' ? '18px 18px 4px 18px' : '18px 18px 18px 4px';
        
        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(--theme-primary); text-decoration: underline;">📎 ${escapeHtml(m.content)}</a>`;
        } else {
            content = `${escapeHtml(m.content).replace(/\n/g, '<br>')}`;
        }
        
        return `
            <div style="display: flex; justify-content: ${senderClass};" 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: ${m.sender === 'agent' ? 'rgba(255,255,255,0.8)' : '#65676B'}; margin-bottom: 0.2rem;">${m.sender === 'agent' ? 'You' : (m.sender === 'visitor' ? visitorName : m.sender.charAt(0).toUpperCase() + m.sender.slice(1))}</div>
                    ${content}
                </div>
            </div>`;
    }

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

    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 handling
    let selectedAttachment = null;
    let selectedAttachmentType = 'text';
    
    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');
    
    // Voice recording
    let mediaRecorder = null;
    let audioChunks = [];
    let isRecording = false;
    
    function updateAttachmentPreview() {
        if (selectedAttachment) {
            const fileName = selectedAttachment.name || 'Attachment';
            previewText.textContent = `📎 ${fileName}`;
            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();
    });
    
    fileInput.addEventListener('change', (e) => {
        if (e.target.files.length) {
            const f = e.target.files[0];
            if (f.size > 2 * 1024 * 1024) {
                alert("File size exceeds the 2MB limit.");
                e.target.value = '';
                return;
            }
            selectedAttachment = f;
            selectedAttachmentType = 'file';
            updateAttachmentPreview();
        }
    });
    
    imageInput.addEventListener('change', (e) => {
        if (e.target.files.length) {
            const f = e.target.files[0];
            if (f.size > 2 * 1024 * 1024) {
                alert("File size exceeds the 2MB limit.");
                e.target.value = '';
                return;
            }
            selectedAttachment = f;
            selectedAttachmentType = 'image';
            updateAttachmentPreview();
        }
    });
    
    cameraInput.addEventListener('change', (e) => {
        if (e.target.files.length) {
            const f = e.target.files[0];
            if (f.size > 2 * 1024 * 1024) {
                alert("File size exceeds the 2MB limit.");
                e.target.value = '';
                return;
            }
            selectedAttachment = f;
            selectedAttachmentType = 'image';
            updateAttachmentPreview();
        }
    });
    
    removeAttachmentBtn.addEventListener('click', (e) => {
        e.preventDefault();
        selectedAttachment = null;
        selectedAttachmentType = 'text';
        updateAttachmentPreview();
        fileInput.value = '';
        imageInput.value = '';
        cameraInput.value = '';
    });
    
    // Voice recording
    btnVoice.addEventListener('click', async (e) => {
        e.preventDefault();
        
        if (isRecording) {
            // Stop recording
            isRecording = false;
            btnVoice.style.background = 'rgba(255,255,255,0.08)';
            btnVoice.style.color = 'var(--text-muted)';
            btnVoice.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 = [];
                    selectedAttachment = null;
                    selectedAttachmentType = 'text';
                    updateAttachmentPreview();
                    return;
                }
                selectedAttachment = new File([audioBlob], 'voice_message.wav', { type: 'audio/wav' });
                selectedAttachmentType = 'voice';
                audioChunks = [];
                updateAttachmentPreview();
            });
        } else {
            // Start recording
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                mediaRecorder = new MediaRecorder(stream);
                isRecording = true;
                audioChunks = [];
                
                btnVoice.style.background = 'rgba(220, 38, 38, 0.2)';
                btnVoice.style.color = '#dc2626';
                btnVoice.textContent = '⏹️';
                btnVoice.dataset.recording = 'true';
                
                mediaRecorder.start();
            } catch (err) {
                alert('Microphone access denied. Please enable microphone permissions.');
            }
        }
    });

    form.addEventListener('submit', async function (e) {
        e.preventDefault();
        const text = textarea.value.trim();
        if (!text && !selectedAttachment) return;
        
        sendBtn.disabled = true;
        try {
            const formData = new FormData();
            formData.append('message', text);
            
            if (selectedAttachment) {
                formData.append('attachment', selectedAttachment);
                formData.append('message_type', selectedAttachmentType);
            }
            formData.append('csrfmiddlewaretoken', csrfToken);
            
            const resp = await fetch(sendUrl, {
                method: 'POST',
                body: formData,
            });
            const data = await resp.json();
            if (data.status === 'success') {
                appendMessage(data.message);
                textarea.value = '';
                selectedAttachment = null;
                selectedAttachmentType = 'text';
                updateAttachmentPreview();
                fileInput.value = '';
                imageInput.value = '';
                cameraInput.value = '';
            } else {
                alert('Failed to send: ' + (data.error || 'unknown error'));
            }
        } catch (err) {
            alert('Network error: ' + err.message);
        } finally {
            sendBtn.disabled = false;
            textarea.focus();
        }
    });

    // Submit on Ctrl+Enter
    textarea.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
            e.preventDefault();
            form.requestSubmit();
        }
    });

    // Poll for new messages every 1s (faster for real-time feedback)
    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);
                        // Play notification sound only for new visitor messages
                        if (m.sender === 'visitor') {
                            playNotificationSound();
                        }
                    });
                }
            }
        } catch (err) {
            // network blip — try again next tick
        }
    }
    setInterval(poll, 1000);
    poll();
})();
</script>
{% endblock %}