document.addEventListener('DOMContentLoaded', () => {
    const mockForm = document.getElementById('mock-chat-form');
    const mockInput = document.getElementById('mock-chat-input');
    const mockMessages = document.getElementById('mock-chat-messages');

    const appendMockMessage = (content, author = 'You', isBot = false, embed = null) => {
        const msgDiv = document.createElement('div');
        msgDiv.className = 'message';
        
        let avatarText = author.substring(0, 2).toUpperCase();
        if (isBot) avatarText = 'MB';

        let html = `
            <div class="avatar" style="${isBot ? 'background-color: #5865F2;' : 'background-color: #4F545C;'}">${avatarText}</div>
            <div class="msg-content">
                <div class="msg-author">${author} ${isBot ? '<span class="bot-tag">BOT</span>' : ''}</div>
                <div class="msg-text">${content}</div>
        `;

        if (embed) {
            html += `
                <div class="embed">
                    <div class="embed-title">${embed.title}</div>
                    <div class="embed-description">${embed.description}</div>
                </div>
            `;
        }

        html += `</div>`;
        msgDiv.innerHTML = html;
        mockMessages.appendChild(msgDiv);
        mockMessages.scrollTop = mockMessages.scrollHeight;
    };

    if (mockForm) {
        mockForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const val = mockInput.value.trim();
            if (!val) return;

            appendMockMessage(val, 'User');
            mockInput.value = '';

            // Bot logic simulation
            setTimeout(() => {
                if (val.startsWith('/play')) {
                    const song = val.replace('/play', '').trim() || 'Lofi Hip Hop';
                    appendMockMessage('🔍 Searching for `' + song + '`...', 'MusicBot', true);
                    
                    setTimeout(() => {
                        appendMockMessage('🎶 Now playing:', 'MusicBot', true, {
                            title: song,
                            description: 'Requested by User • Duration: 03:45 • Platform: YouTube'
                        });
                    }, 1200);
                } else if (val.startsWith('/skip')) {
                    appendMockMessage('⏭️ Skipped current song!', 'MusicBot', true);
                } else if (val.startsWith('/stop')) {
                    appendMockMessage('⏹️ Stopped the player and left the voice channel.', 'MusicBot', true);
                } else {
                    appendMockMessage('❓ Unknown command. Use /play to start music!', 'MusicBot', true);
                }
            }, 600);
        });
    }

    // Smooth scroll for nav links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
});