@php
    $uzabotChatUrl = route('assistant.chat');
    $uzabotWhatsapp = config('uzabot.whatsapp_number');
@endphp

<div
    class="help-widget-container"
    id="help-widget"
    data-uzabot-chat-url="{{ $uzabotChatUrl }}"
    data-uzabot-whatsapp="{{ $uzabotWhatsapp }}"
>
    <!-- Chat Window -->
    <div class="help-chat-window" id="help-chat-window" aria-hidden="true">
        <!-- Header -->
        <div class="help-chat-header">
            <div class="help-bot-profile">
                <div class="help-bot-avatar">
                    <img src="{{ asset('img/logo-avatar.png') }}" alt="UzaBot Avatar">
                    <span class="help-bot-status"></span>
                </div>
                <div class="help-bot-info">
                    <span class="help-bot-name">UzaBot</span>
                    <span class="help-bot-title">Uzapoint Assistant</span>
                </div>
            </div>
            <button class="help-chat-close" id="help-chat-close" aria-label="Close chat">
                &times;
            </button>
        </div>

        <!-- Messages Area -->
        <div class="help-chat-messages" id="help-chat-messages">
            <div class="help-msg help-msg-bot">
                <div class="help-msg-bubble">
                    Hello there! Welcome to Uzapoint. I'm UzaBot, your digital assistant. How can I help you today?
                </div>
            </div>
            <div class="help-msg help-msg-bot">
                <div class="help-msg-bubble">
                    Feel free to ask a question, select a topic, or chat directly with our team on WhatsApp.
                </div>
            </div>
        </div>

        <!-- Quick Suggestions -->
        <div class="help-chat-suggestions">
            <button class="help-suggest-btn" data-text="I'd like to book a demo of Uzapoint POS.">Demo / Sales</button>
            <button class="help-suggest-btn" data-text="I'm having a technical issue with my account.">Technical Support</button>
            <button class="help-suggest-btn" data-text="I'm interested in Uzapoint SME Empowerment Fund.">SME Fund</button>
        </div>

        <!-- Input Area -->
        <div class="help-chat-footer">
            <textarea class="help-chat-input" id="help-chat-input" placeholder="Type your message..." rows="1"></textarea>
            <button class="help-chat-send-btn" id="help-chat-send-btn" aria-label="Send message">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                    <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
                </svg>
            </button>
        </div>
        
        <!-- WhatsApp Call to Action -->
        <a href="https://wa.me/{{ $uzabotWhatsapp }}" target="_blank" rel="noopener noreferrer" class="help-whatsapp-direct-btn" id="help-whatsapp-direct-btn">
            <svg class="whatsapp-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12.012 2c-5.506 0-9.978 4.471-9.978 9.978 0 1.764.462 3.421 1.265 4.876L2 22l5.304-1.393c1.423.779 3.047 1.218 4.708 1.218 5.507 0 9.978-4.47 9.978-9.979C21.99 6.47 17.519 2 12.012 2zm6.69 13.985c-.273.771-1.59 1.485-2.207 1.548-.563.058-1.29.1-3.79-.904-3.197-1.285-5.234-4.526-5.393-4.739-.158-.213-1.285-1.706-1.285-3.253 0-1.547.813-2.308 1.101-2.614.29-.307.632-.384.843-.384.213 0 .423.003.606.012.193.009.453-.074.708.545.263.638.897 2.186.974 2.345.078.158.13.344.024.553-.105.21-.158.338-.316.524-.158.187-.333.418-.475.56-.158.158-.323.33-.139.646.184.316.818 1.345 1.752 2.177 1.203 1.072 2.215 1.403 2.529 1.562.315.158.5.133.687-.078.188-.212.802-.93 1.013-1.25.21-.318.423-.266.71-.16.29.106 1.84.868 2.156 1.026.316.158.527.236.606.37.079.135.079.78-.194 1.552z"/>
            </svg>
            <span>Chat on WhatsApp</span>
        </a>
    </div>

    <!-- Floating Circular Button -->
    <button class="help-float-trigger" id="help-float-trigger" aria-label="Open chat assistant" aria-expanded="false">
        <span class="help-pulse-ring"></span>
        <span class="help-trigger-icon">
            <svg class="icon-chat" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
            </svg>
            <svg class="icon-close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
        </span>
    </button>

    <button
        type="button"
        class="back-to-top"
        id="back-to-top"
        aria-label="Back to top"
        data-tooltip="Back to top"
        hidden
    >
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M12 19V5"/>
            <path d="m5 12 7-7 7 7"/>
        </svg>
    </button>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const trigger = document.getElementById('help-float-trigger');
    const closeBtn = document.getElementById('help-chat-close');
    const windowEl = document.getElementById('help-chat-window');
    const inputEl = document.getElementById('help-chat-input');
    const sendBtn = document.getElementById('help-chat-send-btn');
    const messagesContainer = document.getElementById('help-chat-messages');
    const whatsappBtn = document.getElementById('help-whatsapp-direct-btn');
    const suggestionBtns = document.querySelectorAll('.help-suggest-btn');

    const widgetRoot = document.getElementById('help-widget');
    const chatUrl = widgetRoot.dataset.uzabotChatUrl;
    const whatsappNumber = widgetRoot.dataset.uzabotWhatsapp;
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content ?? '';

    const conversationHistory = [];
    let isSending = false;

    // Web Audio Synthesized Sound System
    class SoundSynth {
        constructor() {
            this.ctx = null;
        }
        init() {
            if (!this.ctx) {
                this.ctx = new (window.AudioContext || window.webkitAudioContext)();
            }
        }
        playHover() {
            this.init();
            if (!this.ctx) return;
            const now = this.ctx.currentTime;
            const osc = this.ctx.createOscillator();
            const gain = this.ctx.createGain();
            osc.connect(gain);
            gain.connect(this.ctx.destination);
            osc.type = 'sine';
            osc.frequency.setValueAtTime(600, now);
            osc.frequency.exponentialRampToValueAtTime(900, now + 0.04);
            gain.gain.setValueAtTime(0.012, now);
            gain.gain.exponentialRampToValueAtTime(0.001, now + 0.04);
            osc.start(now);
            osc.stop(now + 0.04);
        }
        playOpen() {
            this.init();
            if (!this.ctx) return;
            const now = this.ctx.currentTime;
            const osc1 = this.ctx.createOscillator();
            const gain1 = this.ctx.createGain();
            osc1.connect(gain1);
            gain1.connect(this.ctx.destination);
            osc1.type = 'sine';
            osc1.frequency.setValueAtTime(440, now);
            osc1.frequency.exponentialRampToValueAtTime(660, now + 0.08);
            gain1.gain.setValueAtTime(0.05, now);
            gain1.gain.exponentialRampToValueAtTime(0.001, now + 0.08);
            osc1.start(now);
            osc1.stop(now + 0.08);

            const osc2 = this.ctx.createOscillator();
            const gain2 = this.ctx.createGain();
            osc2.connect(gain2);
            gain2.connect(this.ctx.destination);
            osc2.type = 'sine';
            osc2.frequency.setValueAtTime(580, now + 0.05);
            osc2.frequency.exponentialRampToValueAtTime(880, now + 0.14);
            gain2.gain.setValueAtTime(0.04, now + 0.05);
            gain2.gain.exponentialRampToValueAtTime(0.001, now + 0.14);
            osc2.start(now + 0.05);
            osc2.stop(now + 0.14);
        }
        playClose() {
            this.init();
            if (!this.ctx) return;
            const now = this.ctx.currentTime;
            const osc = this.ctx.createOscillator();
            const gain = this.ctx.createGain();
            osc.connect(gain);
            gain.connect(this.ctx.destination);
            osc.type = 'sine';
            osc.frequency.setValueAtTime(540, now);
            osc.frequency.exponentialRampToValueAtTime(270, now + 0.12);
            gain.gain.setValueAtTime(0.05, now);
            gain.gain.exponentialRampToValueAtTime(0.001, now + 0.12);
            osc.start(now);
            osc.stop(now + 0.12);
        }
        playSend() {
            this.init();
            if (!this.ctx) return;
            const now = this.ctx.currentTime;
            const osc = this.ctx.createOscillator();
            const gain = this.ctx.createGain();
            osc.connect(gain);
            gain.connect(this.ctx.destination);
            osc.type = 'triangle';
            osc.frequency.setValueAtTime(320, now);
            osc.frequency.exponentialRampToValueAtTime(960, now + 0.12);
            gain.gain.setValueAtTime(0.06, now);
            gain.gain.exponentialRampToValueAtTime(0.001, now + 0.12);
            osc.start(now);
            osc.stop(now + 0.12);
        }
        playReceive() {
            this.init();
            if (!this.ctx) return;
            const now = this.ctx.currentTime;
            const osc = this.ctx.createOscillator();
            const gain = this.ctx.createGain();
            osc.connect(gain);
            gain.connect(this.ctx.destination);
            osc.type = 'sine';
            osc.frequency.setValueAtTime(780, now);
            osc.frequency.exponentialRampToValueAtTime(940, now + 0.07);
            gain.gain.setValueAtTime(0.04, now);
            gain.gain.exponentialRampToValueAtTime(0.001, now + 0.14);
            osc.start(now);
            osc.stop(now + 0.14);
        }
    }

    const sound = new SoundSynth();

    trigger.addEventListener('mouseenter', () => {
        sound.playHover();
    });

    const toggleChat = () => {
        const isOpen = windowEl.classList.toggle('is-open');
        trigger.setAttribute('aria-expanded', isOpen);
        trigger.classList.toggle('chat-is-active', isOpen);
        trigger.classList.add('click-pulse');
        setTimeout(() => trigger.classList.remove('click-pulse'), 400);
        
        if (isOpen) {
            sound.playOpen();
            inputEl.focus();
        } else {
            sound.playClose();
        }
    };

    trigger.addEventListener('click', toggleChat);
    closeBtn.addEventListener('click', toggleChat);

    inputEl.addEventListener('input', () => {
        inputEl.style.height = 'auto';
        inputEl.style.height = `${Math.min(inputEl.scrollHeight, 80)}px`;
    });

    const addMessage = (text, isUser = false, links = []) => {
        const msgDiv = document.createElement('div');
        msgDiv.className = `help-msg ${isUser ? 'help-msg-user' : 'help-msg-bot'}`;

        const bubble = document.createElement('div');
        bubble.className = 'help-msg-bubble';

        const textNode = document.createTextNode(text);
        bubble.appendChild(textNode);

        if (!isUser && Array.isArray(links) && links.length > 0) {
            const linksWrap = document.createElement('div');
            linksWrap.className = 'help-msg-links';

            links.forEach((link) => {
                if (!link?.url || !link?.label) return;

                const anchor = document.createElement('a');
                anchor.href = link.url;
                anchor.textContent = link.label;
                anchor.target = '_blank';
                anchor.rel = 'noopener noreferrer';
                linksWrap.appendChild(anchor);
            });

            if (linksWrap.childElementCount > 0) {
                bubble.appendChild(linksWrap);
            }
        }

        msgDiv.appendChild(bubble);
        messagesContainer.appendChild(msgDiv);
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    };

    const pushHistory = (role, content) => {
        conversationHistory.push({ role, content });
        const maxTurns = 8;
        if (conversationHistory.length > maxTurns) {
            conversationHistory.splice(0, conversationHistory.length - maxTurns);
        }
    };

    const showTypingIndicator = () => {
        const typingDiv = document.createElement('div');
        typingDiv.className = 'help-msg help-msg-bot help-typing-indicator';
        typingDiv.id = 'help-typing-indicator';
        
        const bubble = document.createElement('div');
        bubble.className = 'help-msg-bubble help-typing-bubble';
        
        for (let i = 0; i < 3; i++) {
            const dot = document.createElement('span');
            dot.className = 'help-typing-dot';
            bubble.appendChild(dot);
        }
        
        typingDiv.appendChild(bubble);
        messagesContainer.appendChild(typingDiv);
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
        return typingDiv;
    };

    const updateWhatsAppLink = (messageText) => {
        const encodedText = encodeURIComponent(messageText);
        whatsappBtn.href = `https://wa.me/${whatsappNumber}?text=${encodedText}`;
    };

    const requestAssistantReply = async (text) => {
        const typing = showTypingIndicator();

        try {
            const response = await fetch(chatUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify({
                    message: text,
                    history: conversationHistory.slice(0, -1),
                }),
            });

            let data = {};
            try {
                data = await response.json();
            } catch (parseError) {
                throw new Error('Invalid assistant response');
            }

            typing.remove();

            if (!response.ok && !data.reply) {
                throw new Error(data.message ?? `Assistant error (${response.status})`);
            }

            const reply = data.reply ?? "Thanks for your message. Our team can help you on WhatsApp — use the button below.";
            addMessage(reply, false, data.links ?? []);
            pushHistory('assistant', reply);
            sound.playReceive();

            if (data.escalate) {
                updateWhatsAppLink(text);
            }
        } catch (error) {
            typing.remove();
            const fallback = "I couldn't reach our assistant service. Please use the WhatsApp button below and our team will help you.";
            addMessage(fallback, false, [{ label: 'Contact us', url: '/contact' }]);
            pushHistory('assistant', fallback);
            sound.playReceive();
            updateWhatsAppLink(text);
        }
    };

    const sendUserMessage = async (text) => {
        if (!text || isSending) return;

        isSending = true;
        sendBtn.disabled = true;

        addMessage(text, true);
        pushHistory('user', text);
        sound.playSend();

        await requestAssistantReply(text);

        isSending = false;
        sendBtn.disabled = false;
    };

    suggestionBtns.forEach(btn => {
        btn.addEventListener('mouseenter', () => {
            sound.playHover();
        });

        btn.addEventListener('click', () => {
            const text = btn.dataset.text;
            sendUserMessage(text);
        });
    });

    const handleSend = () => {
        const text = inputEl.value.trim();
        if (!text) return;

        inputEl.value = '';
        inputEl.style.height = 'auto';
        sendUserMessage(text);
    };

    sendBtn.addEventListener('click', handleSend);
    inputEl.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            handleSend();
        }
    });
});
</script>