script.js

document.addEventListener('DOMContentLoaded', function() {
    // Encryption functions
    const secretKey = 'chatty-secret-key'; // In production, use a secure key management system
    const encryptMessage = (message) => {
        return btoa(unescape(encodeURIComponent(message))); // Simple base64 encoding for demo
    };
    const decryptMessage = (message) => {
        try {
            return decodeURIComponent(escape(atob(message)));
        } catch {
            return message; // Fallback if decryption fails (e.g., old unencrypted messages)
        }
    };

    // Initialize message storage
    const messageStorage = JSON.parse(localStorage.getItem('chatMessages')) || [];
    
    // Load saved messages
    function loadMessages() {
        const messagesContainer = document.getElementById('messages');
        messagesContainer.querySelector('.space-y-4').innerHTML = '';
        
        messageStorage.forEach(msg => {
            const messageDiv = document.createElement('div');
            messageDiv.className = `flex items-start ${msg.isOutgoing ? 'justify-end' : ''} message`;
            
            const decryptedContent = decryptMessage(msg.content);
            
            if (msg.isOutgoing) {
                messageDiv.innerHTML = `
                <div class="max-w-xs lg:max-w-md bg-gray-900 text-white rounded-lg p-3">
<p>${decryptedContent}</p>
<p class="text-xs text-indigo-200 mt-1">${msg.timestamp}</p>
                    </div>
                <div class="w-8 h-8 rounded-full bg-gray-900 flex items-center justify-center text-white text-xs ml-2">
ME
                    </div>
                `;
            } else {
                messageDiv.innerHTML = `
                    <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-600 text-xs mr-2">
                        JD
                    </div>
                    <div class="max-w-xs lg:max-w-md bg-gray-200 rounded-lg p-3">
                        <p>${msg.content}</p>
                        <p class="text-xs text-gray-500 mt-1">${msg.timestamp}</p>
                    </div>
                `;
            }
            
            messagesContainer.querySelector('.space-y-4').appendChild(messageDiv);
        });
        
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }

    // Load any existing messages
    loadMessages();

    // Function to add a new message
    function addMessage(content, isOutgoing = true) {
        const messagesContainer = document.getElementById('messages');
        const messageDiv = document.createElement('div');
        messageDiv.className = `flex items-start ${isOutgoing ? 'justify-end' : ''} message`;
        
        const timestamp = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
        
        // Save message to storage
            messageStorage.push({
            content: encryptMessage(content),
            isOutgoing,
            timestamp
});
        localStorage.setItem('chatMessages', JSON.stringify(messageStorage));
        
        if (isOutgoing) {
            messageDiv.innerHTML = `
                <div class="max-w-xs lg:max-w-md bg-indigo-500 text-white rounded-lg p-3">
                    <p>${decryptedContent}</p>
<p class="text-xs text-indigo-200 mt-1">${timestamp}</p>
                </div>
                <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white text-xs ml-2">
                    ME
                </div>
            `;
        } else {
            messageDiv.innerHTML = `
                <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-600 text-xs mr-2">
                    JD
                </div>
                <div class="max-w-xs lg:max-w-md bg-gray-200 rounded-lg p-3">
                    <p>${decryptedContent}</p>
<p class="text-xs text-gray-500 mt-1">${timestamp}</p>
                </div>
            `;
        }
        
        messagesContainer.querySelector('.space-y-4').appendChild(messageDiv);
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }
    // Message form handling
    const messageForm = document.getElementById('messageForm');
    const messageInput = document.getElementById('messageInput');

    function handleMessageSubmit(e) {
        e.preventDefault();
        if (messageInput.value.trim() !== '') {
            addMessage(messageInput.value.trim());
            messageInput.value = '';
            
            // Simulate reply after 1-3 seconds
            setTimeout(() => {
                const replies = [
                    "That's interesting!",
                    "Tell me more about that.",
                    "I see what you mean.",
                    "Sounds good to me!",
                    "What else is new?",
                    "I agree with you.",
                    "Thanks for the update!",
                    "Let's discuss this later.",
                    "Interesting perspective!",
                    "What do you think about...?"
                ];
                const randomReply = replies[Math.floor(Math.random() * replies.length)];
                addMessage(randomReply, false);
            }, 1000 + Math.random() * 2000);
        }
        messageInput.focus();
    }

    // Form submission
    messageForm.addEventListener('submit', handleMessageSubmit);
    
    // Keyboard shortcuts
    messageInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            messageForm.dispatchEvent(new Event('submit'));
        }
    });

    // Clear chat button
const clearButton = document.createElement('button');
    clearButton.className = 'ml-2 bg-red-500 text-white p-2 rounded-full hover:bg-red-600';
    clearButton.innerHTML = '<i data-feather="trash-2"></i>';
    clearButton.addEventListener('click', function() {
        localStorage.removeItem('chatMessages');
        messageStorage.length = 0;
        loadMessages();
    });
    document.querySelector('.border-t.border-gray-200.p-4 .flex').appendChild(clearButton);
    feather.replace();
});