// ============================================================
// AI CHAT WIDGET - JAVASCRIPT
// ============================================================

const CHAT_API = 'api/ai-chat.php';
let chatHistory = [];
let isProcessing = false;

// ============================================================
// Toggle Chat
// ============================================================
function toggleChat() {
    const widget = document.getElementById('chatWidget');
    const fab = document.getElementById('chatFab');
    
    if (widget.classList.contains('open')) {
        widget.classList.remove('open');
        fab.style.display = 'flex';
    } else {
        widget.classList.add('open');
        fab.style.display = 'none';
        setTimeout(() => {
            document.getElementById('chatInput').focus();
        }, 300);
    }
}

// ============================================================
// Quick Message
// ============================================================
function sendQuickMessage(type) {
    const messages = {
        'wan': 'WAN1 status down, bagaimana cara troubleshoot koneksi internet?',
        'dhcp': 'Client tidak dapat IP dari DHCP. Bagaimana cara troubleshoot?',
        'vpn': 'SSL VPN tidak bisa connect, error autentikasi. Tolong bantu troubleshoot.',
        'security': 'Ada banyak alert IPS blocking traffic. Bagaimana cara analisis dan resolusi?',
        'performance': 'FortiGate terasa lambat, CPU tinggi. Bagaimana cara optimasi?'
    };
    
    const input = document.getElementById('chatInput');
    input.value = messages[type] || '';
    sendMessage();
}

// ============================================================
// Send Message
// ============================================================
async function sendMessage() {
    const input = document.getElementById('chatInput');
    const message = input.value.trim();
    
    if (!message || isProcessing) return;
    
    input.value = '';
    input.disabled = true;
    isProcessing = true;
    
    addMessage(message, 'user');
    chatHistory.push({ role: 'user', content: message });
    
    showTyping(true);
    
    try {
        const response = await fetch(CHAT_API, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                message: message,
                conversation: chatHistory,
                type: 'general'
            })
        });
        
        const data = await response.json();
        
        showTyping(false);
        
        if (data.error) {
            addMessage('⚠️ Maaf, terjadi kesalahan: ' + data.error, 'bot');
        } else if (data.response) {
            addMessage(data.response, 'bot');
            chatHistory.push({ role: 'assistant', content: data.response });
        } else {
            addMessage('⚠️ Maaf, saya tidak bisa memproses permintaan Anda. Silakan coba lagi.', 'bot');
        }
    } catch (error) {
        showTyping(false);
        addMessage('⚠️ Terjadi kesalahan koneksi. Silakan coba lagi nanti.', 'bot');
        console.error('Chat Error:', error);
    }
    
    input.disabled = false;
    isProcessing = false;
    input.focus();
    
    scrollToBottom();
}

// ============================================================
// Add Message
// ============================================================
function addMessage(content, sender) {
    const container = document.getElementById('chatMessages');
    const msgDiv = document.createElement('div');
    msgDiv.className = `chat-message ${sender}`;
    
    let html = content;
    
    // Code blocks
    html = html.replace(/```([\s\S]*?)```/g, (match, code) => {
        return `<pre><code>${escapeHtml(code.trim())}</code></pre>`;
    });
    
    // Inline code
    html = html.replace(/`([^`]+)`/g, (match, code) => {
        return `<code>${escapeHtml(code)}</code>`;
    });
    
    // Bold
    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
    
    // Newlines
    html = html.replace(/\n/g, '<br>');
    
    // Lists
    html = html.replace(/<br>\s*[•\-]\s/g, '<br>• ');
    
    const avatar = sender === 'bot' 
        ? '<div class="message-avatar"><i class="fas fa-robot"></i></div>'
        : '<div class="message-avatar"><i class="fas fa-user"></i></div>';
    
    const time = new Date().toLocaleTimeString('en-MY', { hour: '2-digit', minute: '2-digit', hour12: false });
    
    msgDiv.innerHTML = `
        ${avatar}
        <div class="message-bubble">
            ${html}
            <span class="message-time">${time}</span>
        </div>
    `;
    
    container.appendChild(msgDiv);
    scrollToBottom();
}

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

// ============================================================
// Typing Indicator
// ============================================================
function showTyping(show) {
    const indicator = document.getElementById('typingIndicator');
    if (show) {
        indicator.classList.add('active');
        scrollToBottom();
    } else {
        indicator.classList.remove('active');
    }
}

// ============================================================
// Scroll to Bottom
// ============================================================
function scrollToBottom() {
    const container = document.getElementById('chatMessages');
    container.scrollTop = container.scrollHeight;
}

// ============================================================
// Keyboard Shortcuts
// ============================================================
document.addEventListener('keydown', function(e) {
    // Ctrl+Shift+C = toggle chat
    if (e.ctrlKey && e.shiftKey && (e.key === 'c' || e.key === 'C')) {
        e.preventDefault();
        toggleChat();
    }
    
    // Escape = close chat
    if (e.key === 'Escape') {
        const widget = document.getElementById('chatWidget');
        if (widget.classList.contains('open')) {
            toggleChat();
        }
    }
});