script.js

class DualChatApp {
    constructor() {
        this.init();
    }

    init() {
        // Get elements
        this.input1 = document.getElementById('input1');
        this.input2 = document.getElementById('input2');
        this.send1 = document.getElementById('send1');
        this.send2 = document.getElementById('send2');
        this.messages1 = document.getElementById('messages1');
        this.messages2 = document.getElementById('messages2');

        // User names for identification
        this.users = {
            mobile1: 'Alice',
            mobile2: 'Bob'
        };

        // Typing timeout references
        this.typingTimeouts = {};
        
        // Setup event listeners
        this.setupEventListeners();
        
        // Clear welcome messages on first interaction
        this.welcomeCleared = false;
    }

    setupEventListeners() {
        // Send button clicks
        this.send1.addEventListener('click', () => this.sendMessage('mobile1'));
        this.send2.addEventListener('click', () => this.sendMessage('mobile2'));

        // Enter key press
        this.input1.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                this.sendMessage('mobile1');
            }
        });

        this.input2.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                this.sendMessage('mobile2');
            }
        });

        // Typing indicators
        this.input1.addEventListener('input', () => this.handleTyping('mobile1'));
        this.input2.addEventListener('input', () => this.handleTyping('mobile2'));

        // Auto-resize inputs
        this.input1.addEventListener('input', () => this.updateSendButton('mobile1'));
        this.input2.addEventListener('input', () => this.updateSendButton('mobile2'));
    }

    clearWelcomeMessages() {
        if (!this.welcomeCleared) {
            const welcomeMsg1 = this.messages1.querySelector('.welcome-message');
            const welcomeMsg2 = this.messages2.querySelector('.welcome-message');
            
            if (welcomeMsg1) welcomeMsg1.remove();
            if (welcomeMsg2) welcomeMsg2.remove();
            
            this.welcomeCleared = true;
        }
    }

    updateSendButton(mobileId) {
        const input = mobileId === 'mobile1' ? this.input1 : this.input2;
        const sendBtn = mobileId === 'mobile1' ? this.send1 : this.send2;
        
        if (input.value.trim()) {
            sendBtn.style.opacity = '1';
            sendBtn.style.transform = 'scale(1)';
        } else {
            sendBtn.style.opacity = '0.6';
        }
    }

    handleTyping(senderMobile) {
        const receiverMobile = senderMobile === 'mobile1' ? 'mobile2' : 'mobile1';
        const input = senderMobile === 'mobile1' ? this.input1 : this.input2;
        
        if (input.value.trim()) {
            this.showTypingIndicator(receiverMobile);
            
            // Clear existing timeout
            if (this.typingTimeouts[senderMobile]) {
                clearTimeout(this.typingTimeouts[senderMobile]);
            }
            
            // Set new timeout to hide typing indicator
            this.typingTimeouts[senderMobile] = setTimeout(() => {
                this.hideTypingIndicator(receiverMobile);
            }, 1000);
        } else {
            this.hideTypingIndicator(receiverMobile);
        }
    }

    showTypingIndicator(mobileId) {
        const messagesContainer = mobileId === 'mobile1' ? this.messages1 : this.messages2;
        
        // Remove existing typing indicator
        const existingIndicator = messagesContainer.querySelector('.typing-indicator');
        if (existingIndicator) {
            existingIndicator.remove();
        }
        
        // Create new typing indicator
        const typingDiv = document.createElement('div');
        typingDiv.className = 'typing-indicator';
        typingDiv.innerHTML = `
            <div class="typing-dots">
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
            </div>
            <span style="margin-left: 8px; font-size: 12px; color: #888;">typing...</span>
        `;
        
        messagesContainer.appendChild(typingDiv);
        this.scrollToBottom(messagesContainer);
    }

    hideTypingIndicator(mobileId) {
        const messagesContainer = mobileId === 'mobile1' ? this.messages1 : this.messages2;
        const typingIndicator = messagesContainer.querySelector('.typing-indicator');
        
        if (typingIndicator) {
            typingIndicator.remove();
        }
    }

    sendMessage(senderMobile) {
        const input = senderMobile === 'mobile1' ? this.input1 : this.input2;
        const messageText = input.value.trim();
        
        if (!messageText) return;
        
        this.clearWelcomeMessages();
        
        // Clear input
        input.value = '';
        this.updateSendButton(senderMobile);
        
        // Hide typing indicator from receiver
        const receiverMobile = senderMobile === 'mobile1' ? 'mobile2' : 'mobile1';
        this.hideTypingIndicator(receiverMobile);
        
        // Add message to sender's chat as "sent"
        this.addMessage(senderMobile, messageText, 'sent');
        
        // Add realistic delay before showing message on receiver's side
        setTimeout(() => {
            this.addMessage(receiverMobile, messageText, 'received');
        }, 500 + Math.random() * 1000); // Random delay between 500-1500ms
    }

    addMessage(mobileId, text, type) {
        const messagesContainer = mobileId === 'mobile1' ? this.messages1 : this.messages2;
        const currentTime = this.getCurrentTime();
        
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${type}`;
        
        messageDiv.innerHTML = `
            <div class="message-content">${this.escapeHtml(text)}</div>
            <div class="message-time">${currentTime}</div>
        `;
        
        // Add delivery status for sent messages
        if (type === 'sent') {
            setTimeout(() => {
                const timeElement = messageDiv.querySelector('.message-time');
                timeElement.classList.add('delivered');
            }, 1000);
        }
        
        messagesContainer.appendChild(messageDiv);
        this.scrollToBottom(messagesContainer);
        
        // Add a subtle sound effect (you can uncomment this if you want audio)
        // this.playMessageSound(type);
    }

    getCurrentTime() {
        const now = new Date();
        return now.toLocaleTimeString('en-US', { 
            hour: '2-digit', 
            minute: '2-digit',
            hour12: false 
        });
    }

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

    scrollToBottom(container) {
        setTimeout(() => {
            container.scrollTop = container.scrollHeight;
        }, 100);
    }

    // Optional: Add sound effects
    playMessageSound(type) {
        // Create audio context for sound effects
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
        const oscillator = audioContext.createOscillator();
        const gainNode = audioContext.createGain();
        
        oscillator.connect(gainNode);
        gainNode.connect(audioContext.destination);
        
        if (type === 'sent') {
            oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
        } else {
            oscillator.frequency.setValueAtTime(600, audioContext.currentTime);
        }
        
        gainNode.gain.setValueAtTime(0, audioContext.currentTime);
        gainNode.gain.linearRampToValueAtTime(0.1, audioContext.currentTime + 0.01);
        gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.1);
        
        oscillator.start(audioContext.currentTime);
        oscillator.stop(audioContext.currentTime + 0.1);
    }
}

// Initialize the app when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    new DualChatApp();
});

// Add some demo messages after a delay to show the interface in action
document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
        const app = new DualChatApp();
        
        // Add a welcome interaction after 3 seconds
        setTimeout(() => {
            // Simulate Alice sending a message
            const input1 = document.getElementById('input1');
            input1.value = "Hey Bob! 👋";
            app.sendMessage('mobile1');
            
            // Bob responds after a delay
            setTimeout(() => {
                const input2 = document.getElementById('input2');
                input2.value = "Hi Alice! How are you?";
                app.sendMessage('mobile2');
            }, 2000);
            
        }, 3000);
    }, 100);
});

// Utility function to add realistic message delays
function addRealisticDelay() {
    return 300 + Math.random() * 1200; // 300ms to 1.5s delay
}

// Optional: Add keyboard shortcuts
document.addEventListener('keydown', (e) => {
    // Ctrl/Cmd + 1 focuses on first chat
    if ((e.ctrlKey || e.metaKey) && e.key === '1') {
        e.preventDefault();
        document.getElementById('input1').focus();
    }
    
    // Ctrl/Cmd + 2 focuses on second chat
    if ((e.ctrlKey || e.metaKey) && e.key === '2') {
        e.preventDefault();
        document.getElementById('input2').focus();
    }
});