// Fungsi untuk menambahkan pesan baru ke area chat
function addMessage(content, isSent) {
    const chatArea = document.querySelector('.chat-area');
    
    // Buat elemen pesan
    const message = document.createElement('div');
    message.className = `message ${isSent ? 'sent' : 'received'}`;
    
    // Ambil inisial dari nama pengguna yang mengisi form, atau default 'M'
    let userInitial = 'M';
    const leadData = localStorage.getItem('leadData');
    if (leadData) {
        const data = JSON.parse(leadData);
        if (data.nama) {
            userInitial = data.nama.split(' ').map(n => n[0]).join('').substring(0, 1);
        }
    }

    // Tambahkan avatar kecil untuk pesan masuk
    if (!isSent) {
        const smallAvatar = document.createElement('div');
        smallAvatar.className = 'small-avatar';
        smallAvatar.textContent = userInitial; // Gunakan inisial dari nama
        message.appendChild(smallAvatar);
    } else {
        // Tambahkan ikon person untuk pesan keluar (dikirim oleh pengguna)
        const personIcon = document.createElement('i');
        personIcon.className = 'bi bi-person sent-user-icon';
        message.appendChild(personIcon);
    }
    
    // Tambahkan konten pesan
    const messageContent = document.createElement('div');
    messageContent.className = 'message-content';
    messageContent.textContent = content;
    
    // Tambahkan waktu pesan
    const now = new Date();
    const time = now.getHours().toString().padStart(2, '0') + ':' + 
                now.getMinutes().toString().padStart(2, '0');
    
    const messageTime = document.createElement('div');
    messageTime.className = 'message-time';
    messageTime.textContent = time;
    
    // Gabungkan semua elemen
    message.appendChild(messageContent);
    message.appendChild(messageTime);
    
    // Tambahkan ke area chat dengan animasi
    chatArea.appendChild(message);
    
    // Scroll ke bawah untuk melihat pesan terbaru
    chatArea.scrollTop = chatArea.scrollHeight;
}

// Fungsi untuk menampilkan indikator mengetik
function showTypingIndicator() {
    const chatArea = document.querySelector('.chat-area');
    const typingIndicator = document.createElement('div');
    typingIndicator.className = 'typing-indicator';
    typingIndicator.innerHTML = `
        <div class="typing-dots">
            <span></span>
            <span></span>
            <span></span>
        </div>
    `;
    chatArea.appendChild(typingIndicator);
    chatArea.scrollTop = chatArea.scrollHeight;
    return typingIndicator;
}

// Fungsi untuk menyembunyikan indikator mengetik
function hideTypingIndicator(indicator) {
    if (indicator) {
        indicator.remove();
    }
}

// Generate unique session ID
function generateSessionId() {
    return 'session-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
}

// Fungsi untuk mengirim pesan
async function sendMessage() {
    const input = document.querySelector('.message-input');
    const message = input.value.trim();
    
    if (message) {
        addMessage(message, true);
        input.value = '';
        toggleAttachmentIcons(true); // Tampilkan kembali ikon setelah mengirim
        
        const typingIndicator = showTypingIndicator();
        
        try {
            // Get or create session ID
            let sessionId = localStorage.getItem('chatSessionId');
            if (!sessionId) {
                sessionId = generateSessionId();
                localStorage.setItem('chatSessionId', sessionId);
            }
            
            const response = await fetch('https://bot.kediritechnopark.com/webhook/2afaf386-603b-484c-af51-6dd0f48fae20', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    text: message,
                    sessionId: sessionId
                })
            });
            
            hideTypingIndicator(typingIndicator);
            
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            
            const data = await response.json();
            
            // Cek apakah ada balasan dari bot
            if (data && data.output) {
                addMessage(data.output, false);
            } else {
                addMessage('Maaf, terjadi kesalahan saat memproses balasan.', false);
            }
            
        } catch (error) {
            hideTypingIndicator(typingIndicator);
            console.error('Error sending message:', error);
            addMessage('Maaf, tidak dapat terhubung ke server. Silakan coba lagi nanti.', false);
        }
    }
}

// Function to toggle attachment icons visibility
function toggleAttachmentIcons(show) {
    const icons = document.querySelector('.attachment-icons');
    if (icons) { // Check if icons element exists
        if (show) {
            icons.style.opacity = '1';
            icons.style.transform = 'translateY(-50%)';
        } else {
            icons.style.opacity = '0';
            icons.style.transform = 'translateY(-50%) translateX(20px)';
        }
    }
}

// Handle viewport height for mobile browsers
const setVh = () => {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
};

// Simulate explanatory demo conversation
const simulateConversation = async () => {
    await new Promise(resolve => setTimeout(resolve, 1500));
    addMessage('Halo, saya tertarik dengan layanan Mayagen. Bisa jelaskan apa saja fiturnya?', true);
    
    let typingIndicator = showTypingIndicator();
    await new Promise(resolve => setTimeout(resolve, 2500));
    hideTypingIndicator(typingIndicator);
    addMessage('Tentu! Senang Anda tertarik. Mayagen adalah asisten AI yang dirancang untuk mengotomatisasi interaksi pelanggan dan meningkatkan efisiensi bisnis Anda 24/7.', false);
    
    await new Promise(resolve => setTimeout(resolve, 2500));
    addMessage('Sangat menarik. Apakah Mayagen hanya berfungsi di webchat seperti yang saya gunakan sekarang?', true);
    
    typingIndicator = showTypingIndicator();
    await new Promise(resolve => setTimeout(resolve, 3500));
    hideTypingIndicator(typingIndicator);
    addMessage('Pertanyaan yang sangat bagus! Webchat ini hanyalah salah satu contoh platform yang bisa saya layani. Kekuatan utama Mayagen adalah kemampuan untuk menjawab pesan secara otomatis di berbagai channel populer secara terpisah.', false);
    
    typingIndicator = showTypingIndicator();
    await new Promise(resolve => setTimeout(resolve, 3500));
    hideTypingIndicator(typingIndicator);
    addMessage('Saya bisa membalas DM di Instagram, merespons chat di WhatsApp, dan berinteraksi dengan pelanggan Anda di Telegram. Semua fitur ini berjalan independen di masing-masing platform, memberikan pengalaman terbaik bagi pelanggan Anda.', false);

    typingIndicator = showTypingIndicator();
    await new Promise(resolve => setTimeout(resolve, 2500));
    hideTypingIndicator(typingIndicator);
    addMessage('Apakah ada fitur atau channel spesifik yang ingin Anda ketahui lebih lanjut?', false);

    await new Promise(resolve => setTimeout(resolve, 1500));
    addMessage('Silakan bertanya mengenai fitur-fitur Mayagen yang relevan dengan bidang bisnis yang Anda pilih.', false);
};


document.addEventListener('DOMContentLoaded', function() {
    const formSection = document.getElementById('form-section');
    const chatSection = document.getElementById('chat-section');
    const bidangBisnisSelect = document.getElementById('bidang-bisnis');
    const otherBisnisWrapper = document.getElementById('other-bisnis-wrapper');
    const otherBidangBisnisInput = document.getElementById('other-bidang-bisnis');
    const messageInput = document.querySelector('.message-input');
    const sendButton = document.querySelector('.send-btn');

    bidangBisnisSelect.addEventListener('change', function() {
        if (this.value === 'other') {
            otherBisnisWrapper.style.display = 'block';
            otherBidangBisnisInput.required = true;
        } else {
            otherBisnisWrapper.style.display = 'none';
            otherBidangBisnisInput.required = false;
        }
    });

    document.getElementById('demo-form').addEventListener('submit', async function(event) {
        event.preventDefault(); // Mencegah form dari submit default
        
        // Ambil data dari form
        const nama = document.getElementById('nama').value;
        const emailValue = document.getElementById('email').value;
        let nomorHp = document.getElementById('nomor-hp').value;
        let bidangBisnis = bidangBisnisSelect.value;

        if (bidangBisnis === 'other') {
            bidangBisnis = otherBidangBisnisInput.value;
        }

        // Format nomor HP
        nomorHp = document.getElementById('nomor-hp').value;
        if (nomorHp.startsWith('0')) {
            nomorHp = '62' + nomorHp.slice(1);
        }

        // Validasi email
        if (!isValidEmail(emailValue)) {
            alert('Alamat email tidak valid.');
            return;
        }
        
        // Simpan data ke localStorage (untuk tujuan demo)
        const leadData = {
            nama: nama,
            email: emailValue,
            nomorHp: nomorHp,
            bidangBisnis: bidangBisnis,
            timestamp: new Date().toISOString()
        };

        // Kirim data ke webhook sebelum melanjutkan
        try {
            const webhookResponse = await fetch('https://bot.kediritechnopark.com/webhook/2afaf386-603b-484c-af51-6dd0f48fae20', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(leadData)
            });

            if (!webhookResponse.ok) {
                console.error('Webhook error:', webhookResponse.status, webhookResponse.statusText);
                // Handle error appropriately, e.g., display a message to the user
                alert('Terjadi kesalahan saat mengirim data ke server. Silakan coba lagi.');
                return; // Prevent navigation to chat page
            }

            console.log('Webhook berhasil dikirim!');

        } catch (error) {
            console.error('Webhook error:', error);
            // Handle error appropriately
            alert('Tidak dapat terhubung ke server. Silakan coba lagi nanti.');
            return; // Prevent navigation to chat page
        }
        
        // Sembunyikan form dan tampilkan chat
        formSection.style.display = 'none';
        chatSection.style.display = 'flex'; // Use flex to maintain column layout

        // Initialize chat functionality
        setVh();
        window.addEventListener('resize', setVh);
        window.addEventListener('load', setVh);

        toggleAttachmentIcons(true);
        const chatArea = document.querySelector('.chat-area');
        if (chatArea) {
            chatArea.scrollTop = chatArea.scrollHeight;
        }

        // Add event listeners for chat
        if (sendButton) {
            sendButton.addEventListener('click', sendMessage);
        }
        if (messageInput) {
            messageInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    sendMessage();
                }
            });
            messageInput.addEventListener('input', function() {
                if (this.value.trim() !== '') {
                    toggleAttachmentIcons(false);
                } else {
                    toggleAttachmentIcons(true);
                }
            });
            messageInput.addEventListener('focus', function() {
                setTimeout(() => {
                    this.scrollIntoView({behavior: 'smooth', block: 'end'});
                }, 300);
            });
        }

        simulateConversation();
    });
});

// Function to validate email format
function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}