/*
Project: Customer Service Bot
Author: RSK World
Website: https://rskworld.in
Contact: info@rskworld.com, support@rskworld.com
Phone: +91 93305 39277
Year: 2026
*/

document.addEventListener('DOMContentLoaded', () => {
    const chatBox = document.getElementById('chat-box');
    const userInput = document.getElementById('user-input');
    const sendBtn = document.getElementById('send-btn');

    // Auto scroll to bottom
    const scrollToBottom = () => {
        chatBox.scrollTop = chatBox.scrollHeight;
    };

    const appendMessage = (text, sender, isHtml = false) => {
        const msgDiv = document.createElement('div');
        msgDiv.classList.add('message', sender);
        if (isHtml) {
            msgDiv.innerHTML = text;
        } else {
            msgDiv.textContent = text;
        }
        chatBox.appendChild(msgDiv);
        scrollToBottom();
    };

    const handleOptionClick = (optionText) => {
        if (optionText.includes("raise a ticket")) {
            startTicketProcess();
        } else {
            // Treat as normal message
            sendMessage(optionText);
        }
    };

    const startTicketProcess = () => {
        // Simple flow for ticket
        const issue = prompt("Please describe your issue:");
        if (!issue) return;

        const contact = prompt("Please provide your contact email:");
        if (!contact) return;

        // Call API
        fetch('/api/ticket', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ issue, contact })
        })
            .then(res => res.json())
            .then(data => {
                appendMessage(`Ticket created successfully! Ticket ID: ${data.ticket_id}. We will contact you at ${contact}.`, 'bot');
            })
            .catch(err => {
                appendMessage("Error creating ticket. Please try again.", 'bot');
            });
    };

    const sendMessage = (text) => {
        if (!text) return;

        appendMessage(text, 'user');
        userInput.value = '';

        // Show typing indicator (simulated)
        const loadingDiv = document.createElement('div');
        loadingDiv.classList.add('message', 'bot');
        loadingDiv.textContent = '...';
        loadingDiv.id = 'loading';
        chatBox.appendChild(loadingDiv);
        scrollToBottom();

        fetch('/api/chat', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ message: text })
        })
            .then(res => res.json())
            .then(data => {
                document.getElementById('loading').remove();

                if (data.type === 'option') {
                    let html = `${data.text}<br><div style="margin-top:10px;">`;
                    data.options.forEach(opt => {
                        const safeOpt = opt.replace(/'/g, "\\'");
                        html += `<button class="option-btn" onclick="document.dispatchEvent(new CustomEvent('option-clicked', {detail: '${safeOpt}'}))">${opt}</button>`;
                    });
                    html += `</div>`;
                    appendMessage(html, 'bot', true);
                } else {
                    appendMessage(data.text, 'bot');
                }
            })
            .catch(err => {
                document.getElementById('loading').remove();
                appendMessage("Sorry, something went wrong.", 'bot');
            });
    };

    // Event listener for custom option clicks from injected HTML
    document.addEventListener('option-clicked', (e) => {
        handleOptionClick(e.detail);
    });

    sendBtn.addEventListener('click', () => {
        sendMessage(userInput.value.trim());
    });

    userInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            sendMessage(userInput.value.trim());
        }
    });
});