@props([
    'invitationId' => null
])

<div id="aiChatWidgetContainer" class="ai-chat-widget-root">
    <!-- Floating Trigger Button -->
    <div id="aiChatTrigger" onclick="toggleAiChat()" class="ai-chat-trigger-btn">
        <div style="position: relative; display: flex; align-items: center; justify-content: center;">
            <svg style="width: 20px; height: 20px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
            </svg>
            <span style="position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; background: #22c55e; border-radius: 50%; border: 1.5px solid #4a5d46;"></span>
        </div>
        <div class="ai-trigger-text-wrapper" style="display: flex; flex-direction: column; text-align: left;">
            <span class="ai-trigger-title" style="font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em;">Bantuan AI</span>
            <span class="ai-trigger-subtitle" style="font-size: 10px; opacity: 0.85; line-height: 1;">Online 24/7</span>
        </div>
    </div>

    <!-- Chat Window Popup (Hidden by default) -->
    <div id="aiChatWindow" style="display: none; position: fixed; bottom: 84px; right: 24px; width: 380px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 110px); background: #ffffff; border-radius: 18px; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.08); border: 1px solid rgba(74, 93, 70, 0.15); flex-direction: column; overflow: hidden; animation: aiChatPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);">
        
        <!-- Header -->
        <div style="background: linear-gradient(135deg, #4a5d46 0%, #344231 100%); color: #ffffff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.1);">
            <div style="display: flex; align-items: center; gap: 10px;">
                <div style="position: relative; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(212, 175, 55, 0.5);">
                    <svg style="width: 20px; height: 20px; color: #fef08a;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                    </svg>
                    <span style="position: absolute; bottom: 0; right: 0; width: 9px; height: 9px; background: #22c55e; border-radius: 50%; border: 1.5px solid #4a5d46;"></span>
                </div>
                <div>
                    <h4 id="aiBotNameDisplay" style="margin: 0; font-size: 14px; font-weight: 700; color: #ffffff; display: flex; align-items: center; gap: 6px;">
                        Janoer Assistant
                        <span style="font-size: 9px; padding: 1px 6px; background: rgba(212, 175, 55, 0.25); color: #fef08a; border-radius: 9999px; font-weight: 600; border: 1px solid rgba(212, 175, 55, 0.4);">AI</span>
                    </h4>
                    <span style="font-size: 11px; color: rgba(255, 255, 255, 0.75);">Siap membantu 24/7 seputar undangan</span>
                </div>
            </div>

            <div style="display: flex; align-items: center; gap: 4px;">
                <!-- Clear / Reset Chat -->
                <button type="button" onclick="resetAiChatHistory()" title="Reset Obrolan" style="background: transparent; border: none; color: rgba(255, 255, 255, 0.75); cursor: pointer; padding: 6px; border-radius: 6px; transition: background 0.15s;" onmouseover="this.style.background='rgba(255,255,255,0.15)'" onmouseout="this.style.background='transparent'">
                    <svg style="width: 15px; height: 15px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                    </svg>
                </button>
                <!-- Close Button -->
                <button type="button" onclick="toggleAiChat()" title="Tutup Chat" style="background: transparent; border: none; color: rgba(255, 255, 255, 0.75); cursor: pointer; padding: 6px; border-radius: 6px; transition: background 0.15s;" onmouseover="this.style.background='rgba(255,255,255,0.15)'" onmouseout="this.style.background='transparent'">
                    <svg style="width: 18px; height: 18px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
        </div>

        <!-- Suggestion Pills (Quick Prompts) -->
        <div id="aiSuggestionPillsContainer" style="padding: 10px 14px; background: #f8faf7; border-bottom: 1px solid #e5e7eb; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; white-space: nowrap;">
            <!-- Rendered dynamically -->
        </div>

        <!-- Message Body Thread -->
        <div id="aiChatMessages" style="flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; background: #fafafa;">
            <!-- Initial Greeting rendered via JS -->
        </div>

        <!-- Typing Indicator (Hidden by default) -->
        <div id="aiTypingIndicator" style="display: none; padding: 8px 16px; background: #fafafa;">
            <div style="display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; font-size: 11px; color: #6b7280;">
                <span>Asisten sedang mengetik</span>
                <span class="ai-dot" style="display:inline-block; width:4px; height:4px; background:#4a5d46; border-radius:50%; animation: aiBlink 1.4s infinite .2s;"></span>
                <span class="ai-dot" style="display:inline-block; width:4px; height:4px; background:#4a5d46; border-radius:50%; animation: aiBlink 1.4s infinite .4s;"></span>
                <span class="ai-dot" style="display:inline-block; width:4px; height:4px; background:#4a5d46; border-radius:50%; animation: aiBlink 1.4s infinite .6s;"></span>
            </div>
        </div>

        <!-- Input & Footer -->
        <div style="padding: 12px 14px; background: #ffffff; border-top: 1px solid #e5e7eb;">
            <form id="aiChatForm" onsubmit="handleSendAiMessage(event)" style="display: flex; gap: 8px; align-items: center; margin: 0;">
                <input type="text" id="aiChatInput" placeholder="Tanya sesuatu tentang undangan..." autocomplete="off" style="flex: 1; padding: 9px 14px; font-size: 12.5px; border: 1px solid #d1d5db; border-radius: 9999px; outline: none; background: #f9fafb; color: #111827; transition: border-color 0.15s, box-shadow 0.15s;" onfocus="this.style.borderColor='#4a5d46'; this.style.boxShadow='0 0 0 2px rgba(74,93,70,0.15)'" onblur="this.style.borderColor='#d1d5db'; this.style.boxShadow='none'">
                <button type="submit" id="aiChatSubmitBtn" style="background: #4a5d46; color: #ffffff; border: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s; flex-shrink: 0;" onmouseover="this.style.background='#344231'" onmouseout="this.style.background='#4a5d46'">
                    <svg style="width: 16px; height: 16px; transform: translateX(1px);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                    </svg>
                </button>
            </form>
            
            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 10.5px; color: #6b7280; padding: 0 4px;">
                <span>Didukung oleh Gemini AI</span>
                <a id="aiCsWhatsappLink" href="https://wa.me/6282114878804" target="_blank" style="color: #2e7d32; text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: 3px;">
                    <svg style="width: 12px; height: 12px;" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.771-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.575-.187-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793s.448-1.273.607-1.446c.159-.173.346-.217.462-.217l.332.007c.106.005.249-.04.39.298.144.347.491 1.2.534 1.287.043.087.072.188.014.304-.058.116-.087.188-.173.289l-.26.304c-.087.086-.177.18-.076.353.101.173.45 743 965 1.202.662.59 1.221.774 1.394.86.173.086.275.072.376-.043.101-.116.433-.506.549-.679.116-.173.231-.145.39-.087s1.011.477 1.184.564.289.13.332.203c.043.072.043.419-.101.824z"/>
                    </svg>
                    Chat CS WhatsApp
                </a>
            </div>
        </div>
    </div>
</div>

<style>
@keyframes aiChatPop {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes aiBlink {
    0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.2); }
}
.ai-bubble-user {
    align-self: flex-end;
    background: #4a5d46;
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 16px 16px 4px 16px;
    font-size: 12.5px;
    line-height: 1.45;
    max-width: 82%;
    word-break: break-word;
    box-shadow: 0 2px 4px rgba(74, 93, 70, 0.15);
}
.ai-bubble-bot {
    align-self: flex-start;
    background: #ffffff;
    color: #1f2937;
    padding: 12px 14px;
    border-radius: 16px 16px 16px 4px;
    font-size: 12.5px;
    line-height: 1.5;
    max-width: 88%;
    word-break: break-word;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.ai-bubble-bot p {
    margin: 0 0 6px 0;
}
.ai-bubble-bot p:last-child {
    margin-bottom: 0;
}
.ai-bubble-bot ul, .ai-bubble-bot ol {
    margin: 4px 0 6px 18px;
    padding: 0;
}
.ai-bubble-bot li {
    margin-bottom: 3px;
}
.ai-bubble-bot a {
    color: #4a5d46;
    font-weight: 600;
    text-decoration: underline;
}
.ai-pill-btn {
    display: inline-block;
    padding: 5px 11px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    font-size: 11px;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    font-weight: 500;
}
.ai-pill-btn:hover {
    background: #4a5d46;
    color: #ffffff;
    border-color: #4a5d46;
}

.ai-chat-widget-root {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-chat-trigger-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #4a5d46;
    color: #ffffff;
    padding: 12px 18px;
    border-radius: 9999px;
    box-shadow: 0 10px 25px -5px rgba(74, 93, 70, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transition: all 0.25s ease;
    border: 2px solid rgba(212, 175, 55, 0.4);
    user-select: none;
}
.ai-chat-trigger-btn:hover {
    background: #3d4d3a;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -5px rgba(74, 93, 70, 0.5);
}
.ai-chat-trigger-btn:active {
    transform: scale(0.96);
}

@media (max-width: 767px) {
    .ai-chat-widget-root {
        /* Naikkan posisi widget AI di mobile agar berada rapi DI ATAS floating dock tanpa tumpang tindih */
        bottom: 78px !important;
        right: 14px !important;
    }
    .ai-chat-trigger-btn {
        padding: 9px 13px !important;
        gap: 6px !important;
        box-shadow: 0 8px 20px -4px rgba(74, 93, 70, 0.45) !important;
    }
    .ai-trigger-subtitle {
        display: none !important;
    }
    .ai-trigger-title {
        font-size: 11.5px !important;
    }
    #aiChatWindow {
        bottom: 76px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-width: none !important;
        height: 72vh !important;
        max-height: 520px !important;
        border-radius: 20px !important;
    }
}
</style>

<script>
(function() {
    const INVITATION_ID = {{ $invitationId ?: 'null' }};
    const STORAGE_KEY = 'janoer_ai_chat_history_' + (INVITATION_ID || 'guest');
    
    let isChatOpen = false;
    let chatHistory = [];
    let isSending = false;

    // Initialize on page load
    window.addEventListener('DOMContentLoaded', function() {
        initAiChat();
    });

    window.toggleAiChat = function() {
        const win = document.getElementById('aiChatWindow');
        const trigger = document.getElementById('aiChatTrigger');
        isChatOpen = !isChatOpen;
        if (isChatOpen) {
            win.style.display = 'flex';
            setTimeout(() => {
                document.getElementById('aiChatInput').focus();
                scrollChatToBottom();
            }, 100);
        } else {
            win.style.display = 'none';
        }
    };

    function initAiChat() {
        // Load stored history if any
        try {
            const saved = sessionStorage.getItem(STORAGE_KEY);
            if (saved) {
                chatHistory = JSON.parse(saved);
            }
        } catch(e) {
            chatHistory = [];
        }

        // Fetch init info from server
        fetch('/api/chat-assistant/init' + (INVITATION_ID ? '?invitation_id=' + INVITATION_ID : ''))
            .then(res => res.json())
            .then(data => {
                if (data.status === 'success') {
                    if (data.bot_name) {
                        document.getElementById('aiBotNameDisplay').childNodes[0].nodeValue = data.bot_name + ' ';
                    }
                    if (data.whatsapp_url) {
                        document.getElementById('aiCsWhatsappLink').href = data.whatsapp_url;
                    }

                    // Render suggestion pills
                    if (data.suggestions && data.suggestions.length) {
                        renderSuggestions(data.suggestions);
                    }

                    // If history is empty, show welcome greeting
                    if (chatHistory.length === 0 && data.greeting) {
                        addMessageToThread('model', data.greeting, false);
                    } else {
                        renderChatHistory();
                    }
                }
            })
            .catch(err => {
                console.error('Error init AI chat:', err);
                if (chatHistory.length === 0) {
                    addMessageToThread('model', 'Halo Kak! Ada yang bisa saya bantu terkait undangan Anda hari ini?', false);
                } else {
                    renderChatHistory();
                }
            });
    }

    function renderSuggestions(pills) {
        const container = document.getElementById('aiSuggestionPillsContainer');
        container.innerHTML = '';
        pills.forEach(pillText => {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'ai-pill-btn';
            btn.textContent = pillText;
            btn.onclick = function() {
                sendUserPrompt(pillText);
            };
            container.appendChild(btn);
        });
    }

    function renderChatHistory() {
        const container = document.getElementById('aiChatMessages');
        container.innerHTML = '';
        chatHistory.forEach(item => {
            appendBubble(item.role, item.text);
        });
        scrollChatToBottom();
    }

    window.resetAiChatHistory = function() {
        if (confirm('Mulai obrolan baru dengan asisten AI?')) {
            chatHistory = [];
            sessionStorage.removeItem(STORAGE_KEY);
            const container = document.getElementById('aiChatMessages');
            container.innerHTML = '';
            initAiChat();
        }
    };

    window.handleSendAiMessage = function(e) {
        e.preventDefault();
        const input = document.getElementById('aiChatInput');
        const text = input.value.trim();
        if (!text || isSending) return;
        input.value = '';
        sendUserPrompt(text);
    };

    function sendUserPrompt(text) {
        if (isSending) return;
        isSending = true;

        // Render user message immediately
        addMessageToThread('user', text, true);

        // Show typing indicator
        document.getElementById('aiTypingIndicator').style.display = 'block';
        scrollChatToBottom();

        // Get CSRF Token
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') 
            || '{{ csrf_token() }}';

        fetch('/api/chat-assistant/send', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                message: text,
                history: chatHistory.slice(-8), // Send recent context
                invitation_id: INVITATION_ID
            })
        })
        .then(async res => {
            const data = await res.json().catch(() => null);
            document.getElementById('aiTypingIndicator').style.display = 'none';
            isSending = false;
            if (data && data.reply) {
                addMessageToThread('model', data.reply, true);
            } else if (data && data.message) {
                addMessageToThread('model', data.message, true);
            } else {
                addMessageToThread('model', 'Maaf, terjadi kendala saat memproses jawaban. Silakan hubungi Customer Service kami via WhatsApp.', true);
            }
        })
        .catch(err => {
            console.error('AI chat send error:', err);
            document.getElementById('aiTypingIndicator').style.display = 'none';
            isSending = false;
            addMessageToThread('model', 'Maaf, koneksi terputus. Silakan coba lagi atau hubungi Customer Service via WhatsApp.', true);
        });
    }

    function addMessageToThread(role, text, saveToStorage = true) {
        chatHistory.push({ role: role, text: text });
        appendBubble(role, text);
        if (saveToStorage) {
            try {
                sessionStorage.setItem(STORAGE_KEY, JSON.stringify(chatHistory));
            } catch(e) {}
        }
        scrollChatToBottom();
    }

    function appendBubble(role, text) {
        const container = document.getElementById('aiChatMessages');
        const bubble = document.createElement('div');
        bubble.className = role === 'user' ? 'ai-bubble-user' : 'ai-bubble-bot';
        
        if (role === 'user') {
            bubble.textContent = text;
        } else {
            bubble.innerHTML = formatMarkdown(text);
        }
        
        container.appendChild(bubble);
    }

    function scrollChatToBottom() {
        const container = document.getElementById('aiChatMessages');
        container.scrollTop = container.scrollHeight;
    }

    function formatMarkdown(text) {
        if (!text) return '';
        
        // Escape HTML
        let html = text
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');

        // Bold: **text**
        html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');

        // Italic: *text*
        html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');

        // Links: [label](url)
        html = html.replace(/\[(.*?)\]\((https?:\/\/.*?)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');

        // Bullet lists
        let lines = html.split('\n');
        let inList = false;
        let formatted = [];

        lines.forEach(line => {
            let trimmed = line.trim();
            if (trimmed.startsWith('- ') || trimmed.startsWith('* ')) {
                if (!inList) {
                    formatted.push('<ul style="padding-left:18px; margin:4px 0;">');
                    inList = true;
                }
                formatted.push('<li>' + trimmed.substring(2) + '</li>');
            } else if (/^\d+\.\s/.test(trimmed)) {
                if (!inList) {
                    formatted.push('<ol style="padding-left:18px; margin:4px 0;">');
                    inList = true;
                }
                formatted.push('<li>' + trimmed.replace(/^\d+\.\s/, '') + '</li>');
            } else {
                if (inList) {
                    formatted.push(formatted[formatted.length - 1].startsWith('<ol') ? '</ol>' : '</ul>');
                    inList = false;
                }
                if (trimmed.length > 0) {
                    formatted.push('<p style="margin:0 0 6px 0;">' + trimmed + '</p>');
                } else {
                    formatted.push('<div style="height:4px;"></div>');
                }
            }
        });

        if (inList) {
            formatted.push('</ul>');
        }

        return formatted.join('');
    }
})();
</script>