script.js

document.addEventListener('DOMContentLoaded', function() {
    // Mock data for contacts and messages
    const contacts = [
        {
            id: 1,
            name: 'Alex Johnson',
            avatar: 'http://static.photos/people/200x200/1',
            lastMessage: 'Hey, how are you doing?',
            time: '10:30 AM',
            messages: [
                { text: 'Hey there!', sent: false, time: '10:20 AM' },
                { text: 'Hey, how are you doing?', sent: false, time: '10:30 AM' },
                { type: 'image', content: 'http://static.photos/minimal/320x240/1', sent: false, time: '10:32 AM' }
]
        },
        {
            id: 2,
            name: 'Sarah Miller',
            avatar: 'http://static.photos/people/200x200/2',
            lastMessage: 'Can we meet tomorrow?',
            time: 'Yesterday',
            messages: [
                { text: 'Hi Sarah!', sent: true, time: 'Yesterday, 4:20 PM' },
                { type: 'image', content: 'http://static.photos/minimal/320x240/2', sent: true, time: 'Yesterday, 4:22 PM' },
                { text: 'Can we meet tomorrow?', sent: false, time: 'Yesterday, 4:25 PM' },
                { text: 'Sure, what time?', sent: true, time: 'Yesterday, 4:30 PM' }
]
        },
        {
            id: 3,
            name: 'Mark Williams',
            avatar: 'http://static.photos/people/200x200/3',
            lastMessage: 'I sent you the files',
            time: 'Tuesday',
            messages: [
                { text: 'Did you get the documents?', sent: false, time: 'Tuesday, 11:15 AM' },
                { text: 'Not yet, can you send them again?', sent: true, time: 'Tuesday, 11:30 AM' },
                { text: 'I sent you the files', sent: false, time: 'Tuesday, 11:45 AM' }
            ]
        },
        {
            id: 4,
            name: 'Emily Chen',
            avatar: 'http://static.photos/people/200x200/4',
            lastMessage: 'Thanks for your help!',
            time: 'Monday',
            messages: [
                { text: 'I need some advice', sent: false, time: 'Monday, 9:00 AM' },
                { text: 'Of course, what do you need?', sent: true, time: 'Monday, 9:30 AM' },
                { text: 'Thanks for your help!', sent: false, time: 'Monday, 10:15 AM' }
            ]
        },
        {
            id: 5,
            name: 'David Rodriguez',
            avatar: 'http://static.photos/people/200x200/5',
            lastMessage: 'See you at the meeting',
            time: 'Last week',
            messages: [
                { text: 'Are we still meeting tomorrow?', sent: true, time: 'Friday, 3:00 PM' },
                { text: 'Yes, at 2 PM', sent: false, time: 'Friday, 3:30 PM' },
                { text: 'See you at the meeting', sent: false, time: 'Friday, 4:00 PM' }
            ]
        }
    ];

    // DOM elements
    const contactsList = document.getElementById('contacts-list');
    const messagesContainer = document.getElementById('messages-container');
    const messageInputContainer = document.getElementById('message-input-container');
    const messageForm = document.getElementById('message-form');
    const messageInput = document.getElementById('message-input');
    const chatHeader = document.getElementById('chat-header');
    const activeContactDetails = document.getElementById('active-contact-details');
    const themeToggle = document.getElementById('theme-toggle');

    // Current selected contact
    let currentContact = null;

    // Theme toggle functionality
    themeToggle.addEventListener('click', function() {
        const html = document.querySelector('html');
        if (html.classList.contains('light')) {
            html.classList.remove('light');
            html.classList.add('dark');
            feather.replace();
            themeToggle.innerHTML = feather.icons['sun'].toSvg();
        } else {
            html.classList.remove('dark');
            html.classList.add('light');
            feather.replace();
            themeToggle.innerHTML = feather.icons['moon'].toSvg();
        }
    });

    // Render contacts list
    function renderContacts() {
        contactsList.innerHTML = '';
        contacts.forEach(contact => {
            const contactItem = document.createElement('div');
            contactItem.className = 'contact-item p-4 flex items-center gap-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700';
            contactItem.dataset.contactId = contact.id;
            
            contactItem.innerHTML = `
                <img src="${contact.avatar}" alt="${contact.name}" class="w-12 h-12 rounded-full object-cover">
                <div class="flex-1 min-w-0">
                    <h4 class="font-semibold text-gray-800 dark:text-white truncate">${contact.name}</h4>
                    <p class="text-sm text-gray-600 dark:text-gray-400 truncate">${contact.lastMessage}</p>
                </div>
                <span class="text-xs text-gray-500 dark:text-gray-400">${contact.time}</span>
            `;
            
            contactItem.addEventListener('click', () => selectContact(contact.id));
            contactsList.appendChild(contactItem);
        });
    }

    // Select a contact to chat with
    function selectContact(contactId) {
        currentContact = contacts.find(c => c.id === contactId);
        if (!currentContact) return;
        
        // Update active contact details
        activeContactDetails.innerHTML = `
            <div class="flex items-center gap-3">
                <img src="${currentContact.avatar}" alt="${currentContact.name}" class="w-10 h-10 rounded-full object-cover">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">${currentContact.name}</h3>
            </div>
        `;
        
        // Show message input
        messageInputContainer.classList.remove('hidden');
        
        // Render messages
        renderMessages(currentContact.messages);
    }
  // Render messages for selected contact
    function renderMessages(messages) {
        messagesContainer.innerHTML = '';
        
        messages.forEach(message => {
            const messageElement = document.createElement('div');
            messageElement.className = `message-bubble mb-4 p-3 ${
                message.sent ? 'sent self-end' : 'received self-start'
            }`;
            
            if (message.type === 'image') {
                messageElement.innerHTML = `
                    <img src="${message.content}" class="message-image" alt="Shared image">
                    <span class="text-xs opacity-70 block mt-1 ${
                        message.sent ? 'text-white/70' : 'text-black/70 dark:text-white/70'
                    }">${message.time}</span>
                `;
            } else {
                messageElement.innerHTML = `
                    <p class="whitespace-pre-wrap">${message.text}</p>
                    <span class="text-xs opacity-70 block mt-1 ${
                        message.sent ? 'text-white/70' : 'text-black/70 dark:text-white/70'
                    }">${message.time}</span>
`;
            
            messagesContainer.appendChild(messageElement);
        });
        
        // Scroll to bottom
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }

    // Send new message
    messageForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const messageText = messageInput.value.trim();
        if (!messageText || !currentContact) return;
        
        // Add message to current contact
        const newMessage = {
            text: messageText,
            sent: true,
            time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
        };
        
        currentContact.messages.push(newMessage);
        currentContact.lastMessage = messageText;
        currentContact.time = 'Just now';
        
        // Update UI
        renderMessages(currentContact.messages);
        renderContacts();
        messageInput.value = '';
        
        // Simulate reply after 1-3 seconds
        setTimeout(() => {
            const replies = [
                "Sounds good!",
                "I'll get back to you soon.",
                "Thanks for letting me know.",
                "Interesting, tell me more.",
                "Can we talk about this later?"
            ];
            
            const replyMessage = {
                text: replies[Math.floor(Math.random() * replies.length)],
                sent: false,
                time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
            };
            
            currentContact.messages.push(replyMessage);
            currentContact.lastMessage = replyMessage.text;
            currentContact.time = 'Just now';
            
            renderMessages(currentContact.messages);
            renderContacts();
        }, 1000 + Math.random() * 2000);
    });

    // Initialize
    renderContacts();
    feather.replace();
});