script.js

let currentPersona = 'mistress';
const togglePersona = document.getElementById('togglePersona');
const imagePreview = document.getElementById('imagePreview');
const previewImage = document.getElementById('previewImage');
const removeImage = document.getElementById('removeImage');

// Handle image preview and removal
document.addEventListener('DOMContentLoaded', () => {
    const fileInput = document.querySelector('custom-upload').shadowRoot.querySelector('input[type="file"]');
    
    fileInput.addEventListener('change', (e) => {
        if (e.target.files.length > 0) {
            const file = e.target.files[0];
            if (file.type.match('image.*')) {
                const reader = new FileReader();
                reader.onload = (event) => {
                    previewImage.src = event.target.result;
                    imagePreview.classList.remove('hidden');
                };
                reader.readAsDataURL(file);
            }
        }
    });

    removeImage.addEventListener('click', () => {
        previewImage.src = '';
        imagePreview.classList.add('hidden');
        fileInput.value = '';
        document.querySelector('custom-upload').shadowRoot.getElementById('fileName').textContent = '';
    });
});
const personaIcon = document.getElementById('personaIcon');
const personaName = document.getElementById('personaName');
const imagePreview = document.getElementById('imagePreview');
const previewImage = document.getElementById('previewImage');
const removeImage = document.getElementById('removeImage');

// Toggle between Mistress and Daddy personas
togglePersona.addEventListener('click', () => {
    if (currentPersona === 'mistress') {
        currentPersona = 'daddy';
        togglePersona.innerHTML = '<span>Switch to Mistress</span><i data-feather="user"></i>';
        personaIcon.className = 'w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 flex items-center justify-center';
        personaName.textContent = 'Daddy Dom AI';
        personaName.className = 'font-bold text-blue-300';
        feather.replace();
    } else {
        currentPersona = 'mistress';
        togglePersona.innerHTML = '<span>Switch to Daddy</span><i data-feather="user"></i>';
        personaIcon.className = 'w-8 h-8 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center';
        personaName.textContent = 'Mistress AI';
        personaName.className = 'font-bold text-pink-300';
        feather.replace();
    }
});

// Handle image preview and removal
document.addEventListener('DOMContentLoaded', () => {
    const fileInput = document.querySelector('custom-upload').shadowRoot.querySelector('input[type="file"]');
    
    fileInput.addEventListener('change', (e) => {
        if (e.target.files.length > 0) {
            const file = e.target.files[0];
            if (file.type.match('image.*')) {
                const reader = new FileReader();
                reader.onload = (event) => {
                    previewImage.src = event.target.result;
                    imagePreview.classList.remove('hidden');
                };
                reader.readAsDataURL(file);
            }
        }
    });

    removeImage.addEventListener('click', () => {
        previewImage.src = '';
        imagePreview.classList.add('hidden');
        fileInput.value = '';
    });
});
// Handle form submission with image analysis
document.querySelector('form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const input = e.target.querySelector('input[type="text"]');
    const fileInput = document.querySelector('custom-upload').shadowRoot.querySelector('input[type="file"]');
    
    // Show loading state
    const submitBtn = e.target.querySelector('button[type="submit"]');
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i data-feather="loader" class="animate-spin"></i>';

    let response;
    
    try {
        if (fileInput.files.length > 0) {
            // Simulate image analysis with different responses based on persona
            const file = fileInput.files[0];
            const imageType = file.type.split('/')[1] || 'image';
            
            if (currentPersona === 'mistress') {
                response = `*scrutinizes your ${imageType} submission*\n${input.value || 'How dare you present this to me without context!'}\nI can see ${Math.floor(Math.random() * 5) + 1} flaws in your pathetic submission. You'll need to try much harder to impress me.`;
            } else {
                response = `*studies your ${imageType} carefully*\n${input.value || 'Is this your best effort?'}\nI count ${Math.floor(Math.random() * 3) + 1} areas needing improvement. You can do better, boy.`;
            }
        } else {
            // Regular text response
            response = currentPersona === 'mistress'
                ? `*grabs your chin*\n${input.value || 'Silence is unacceptable'}. You will speak when spoken to, worm.`
                : `*crosses arms*\n${input.value || 'I expect better from you'}, boy. Try again.`;
        }
        // Add the response to chat
        const chatContainer = document.querySelector('.space-y-6');
        const botMessage = document.createElement('div');
        botMessage.className = 'flex';
        botMessage.innerHTML = `
            <div class="bg-${currentPersona === 'mistress' ? 'pink' : 'blue'}-900 rounded-lg p-4 max-w-3/4 shadow-lg">
                <div class="flex items-center space-x-3 mb-2">
                    <div class="w-8 h-8 rounded-full bg-gradient-to-r from-${currentPersona === 'mistress' ? 'pink' : 'blue'}-500 to-${currentPersona === 'mistress' ? 'purple' : 'indigo'}-600 flex items-center justify-center">
                        <i data-feather="${currentPersona === 'mistress' ? 'alert-octagon' : 'zap'}" class="w-4 h-4"></i>
                    </div>
                    <span class="font-bold text-${currentPersona === 'mistress' ? 'pink' : 'blue'}-300">${currentPersona === 'mistress' ? 'Mistress AI' : 'Daddy Dom AI'}</span>
                </div>
                <p class="whitespace-pre-line">${response}</p>
                ${fileInput.files.length > 0 ? `<div class="mt-3"><img src="${previewImage.src}" class="max-h-40 rounded-lg border border-${currentPersona === 'mistress' ? 'pink' : 'blue'}-700"></div>` : ''}
            </div>
        `;
        chatContainer.appendChild(botMessage);
        
        // Scroll to bottom
        chatContainer.scrollTop = chatContainer.scrollHeight;
        
        // Clear inputs
        input.value = '';
        fileInput.value = '';
        previewImage.src = '';
        imagePreview.classList.add('hidden');
        
    } catch (error) {
        console.error('Error analyzing image:', error);
        // Add error message to chat
        const chatContainer = document.querySelector('.space-y-6');
        const errorMessage = document.createElement('div');
        errorMessage.className = 'flex';
        errorMessage.innerHTML = `
            <div class="bg-red-900 rounded-lg p-4 max-w-3/4 shadow-lg">
                <p>Failed to analyze your submission. Pathetic. Try again.</p>
            </div>
        `;
        chatContainer.appendChild(errorMessage);
    } finally {
        // Reset button state
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<i data-feather="send"></i>';
        feather.replace();
    }
});