document.addEventListener('DOMContentLoaded', function () {
    const input = document.getElementById('epas-chat-input');
    const button = document.getElementById('epas-chat-send');
    const resetButton = document.getElementById('epas-chat-reset');
    const messages = document.getElementById('epas-chat-messages');

    if (!input || !button || !resetButton || !messages) {
        console.log('EPAS Brain: elements not found');
        return;
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function autoResizeTextarea() {
        input.style.height = 'auto';
        input.style.height = Math.min(input.scrollHeight, 180) + 'px';
        input.style.overflowY = input.scrollHeight > 180 ? 'auto' : 'hidden';
    }

    function formatAssistantMessage(text) {
        if (!text) return '';
        return text.replace(/\n/g, '<br>');
    }

    function sendPresetMessage(text) {
        if (!text) return;
        input.value = text;
        autoResizeTextarea();
        sendMessage();
    }

    function attachQuickReplyEvents(scope) {
        const quickButtons = scope.querySelectorAll('.epas-quick-reply');
        quickButtons.forEach(btn => {
            btn.addEventListener('click', function () {
                const message = this.getAttribute('data-message');
                sendPresetMessage(message);
            });
        });
    }

    function appendBubble(role, text) {
        const row = document.createElement('div');
        row.className = `epas-chat-row ${role}`;

        const bubble = document.createElement('div');
        bubble.className = 'epas-chat-bubble';

        if (role === 'assistant') {
            bubble.innerHTML = formatAssistantMessage(text);

            const links = bubble.querySelectorAll('a');
            links.forEach(link => {
                link.setAttribute('target', '_blank');
                link.setAttribute('rel', 'noopener noreferrer');
            });

            attachQuickReplyEvents(bubble);
        } else {
            bubble.innerHTML = escapeHtml(text).replace(/\n/g, '<br>');
        }

        row.appendChild(bubble);
        messages.appendChild(row);
        messages.scrollTop = messages.scrollHeight;

        return row;
    }

    function createTypingBubble() {
        const row = document.createElement('div');
        row.className = 'epas-chat-row assistant';

        const bubble = document.createElement('div');
        bubble.className = 'epas-chat-bubble';
        bubble.innerHTML = `
            <span class="epas-typing">
                <span class="epas-typing-dot"></span>
                <span class="epas-typing-dot"></span>
                <span class="epas-typing-dot"></span>
            </span>
        `;

        row.appendChild(bubble);
        messages.appendChild(row);
        messages.scrollTop = messages.scrollHeight;

        return row;
    }

    function sendMessage() {
        const question = input.value.trim();
        if (!question) return;

        appendBubble('user', question);
        input.value = '';
        autoResizeTextarea();

        const typingBubble = createTypingBubble();

        fetch(EPASBrainChat.endpoint, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-WP-Nonce': EPASBrainChat.nonce
            },
            body: JSON.stringify({ question: question })
        })
        .then(async response => {
            const text = await response.text();

            try {
                return JSON.parse(text);
            } catch (e) {
                console.error('Invalid JSON response:', text);
                throw new Error('Invalid JSON response');
            }
        })
        .then(data => {
            typingBubble.remove();
            appendBubble('assistant', data.answer || 'No response received.');
        })
        .catch(error => {
            console.error(error);
            typingBubble.remove();
            appendBubble('assistant', 'Error getting response.');
        });
    }

    input.addEventListener('input', autoResizeTextarea);

    button.addEventListener('click', function () {
        sendMessage();
    });

    input.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    });

    resetButton.addEventListener('click', function () {
        fetch(EPASBrainChat.resetEndpoint, {
            method: 'POST',
            headers: {
                'X-WP-Nonce': EPASBrainChat.nonce
            }
        })
        .then(() => {
            messages.innerHTML = '';
            appendBubble('assistant', 'Chat reset. How can I help?');
        })
        .catch(error => {
            console.error(error);
            appendBubble('assistant', 'Could not reset chat.');
        });
    });

    autoResizeTextarea();
});