{% extends 'layouts/base.html' %}

{% block content %}

<div class="page-head">
    <div>
        <h1>Contact License Support</h1>
        <p class="muted">Chat directly with the license server operator about this installation.</p>
    </div>
    <a class="btn" href="{{ url_for('license.notifications') }}">Back to License</a>
</div>

<div class="panel">
    <div id="license-support-thread" class="chat-thread" style="max-height:420px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; margin-bottom:16px;"></div>
    <form id="license-support-form" class="form-grid">
        <label style="flex:1;">Message
            <textarea id="license-support-input" rows="2" style="width:100%;" required></textarea>
        </label>
        <button class="btn" type="submit">Send</button>
    </form>
    <p id="license-support-error" class="badge badge-danger" hidden></p>
</div>

<script>
(function () {
    const thread = document.getElementById('license-support-thread');
    const form = document.getElementById('license-support-form');
    const input = document.getElementById('license-support-input');
    const errorBox = document.getElementById('license-support-error');
    let sinceId = 0;

    const escapeHtml = (value) => String(value ?? '').replace(/[&<>"']/g, (char) => ({
        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
    }[char]));

    const appendMessages = (messages) => {
        if (!messages.length) return;
        messages.forEach((m) => {
            const isServer = m.sender === 'server';
            const bubble = document.createElement('div');
            bubble.style.alignSelf = isServer ? 'flex-end' : 'flex-start';
            bubble.style.maxWidth = '70%';
            bubble.style.padding = '8px 12px';
            bubble.style.borderRadius = '8px';
            bubble.style.background = isServer ? '#2779aa' : '#edf1f4';
            bubble.style.color = isServer ? '#fff' : '#1c2530';
            bubble.innerHTML = `<div>${escapeHtml(m.message)}</div>
                <div style="font-size:10px; margin-top:4px; opacity:.75;">${isServer ? 'Support' : 'You'} · ${escapeHtml(m.created_at)}</div>`;
            thread.appendChild(bubble);
            sinceId = Math.max(sinceId, m.id);
        });
        thread.scrollTop = thread.scrollHeight;
    };

    const poll = async () => {
        try {
            const response = await fetch(`{{ url_for('license.support_data') }}?since_id=${sinceId}`, { credentials: 'same-origin' });
            const data = await response.json();
            if (!response.ok) {
                errorBox.textContent = data.error || 'Could not reach the license server.';
                errorBox.hidden = false;
                return;
            }
            errorBox.hidden = true;
            appendMessages(data.messages || []);
        } catch (_error) {
            errorBox.textContent = 'Could not reach the license server.';
            errorBox.hidden = false;
        }
    };

    form.addEventListener('submit', async (event) => {
        event.preventDefault();
        const message = input.value.trim();
        if (!message) return;
        try {
            const response = await fetch("{{ url_for('license.support_send') }}", {
                method: 'POST',
                credentials: 'same-origin',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ message })
            });
            const data = await response.json();
            if (!response.ok) {
                errorBox.textContent = data.error || 'Message could not be sent.';
                errorBox.hidden = false;
                return;
            }
            input.value = '';
            poll();
        } catch (_error) {
            errorBox.textContent = 'Message could not be sent.';
            errorBox.hidden = false;
        }
    });

    poll();
    window.setInterval(poll, 5000);
})();
</script>

{% endblock %}