assets/js/main.js

let currentStep = 1;
let audioFiles = {};
let selectedAvatars = [];

function nextStep() {
    if (validateCurrentStep()) {
        if (currentStep < 4) {
            document.querySelector(`.step[data-step="${currentStep}"]`).classList.remove('active');
            document.getElementById(`step${currentStep}`).classList.remove('active');
            currentStep++;
            document.querySelector(`.step[data-step="${currentStep}"]`).classList.add('active');
            document.getElementById(`step${currentStep}`).classList.add('active');
            
            if (currentStep === 4) {
                updateGenerationSummary();
            }
        }
    }
}

function prevStep() {
    if (currentStep > 1) {
        document.querySelector(`.step[data-step="${currentStep}"]`).classList.remove('active');
        document.getElementById(`step${currentStep}`).classList.remove('active');
        currentStep--;
        document.querySelector(`.step[data-step="${currentStep}"]`).classList.add('active');
        document.getElementById(`step${currentStep}`).classList.add('active');
    }
}

function validateCurrentStep() {
    if (currentStep === 1) {
        const title = document.getElementById('videoTitle').value;
        if (!title) {
            showToast('Please enter a video title', 'error');
            return false;
        }
    } else if (currentStep === 2) {
        const numSpeakers = parseInt(document.getElementById('numSpeakers').value);
        for (let i = 1; i <= numSpeakers; i++) {
            if (!audioFiles[i]) {
                showToast(`Please upload audio for Speaker ${i}`, 'error');
                return false;
            }
        }
    } else if (currentStep === 3) {
        const numSpeakers = parseInt(document.getElementById('numSpeakers').value);
        const selectedOptions = document.querySelectorAll('.avatar-option.selected');
        if (selectedOptions.length !== numSpeakers) {
            showToast(`Please select ${numSpeakers} avatars`, 'error');
            return false;
        }
    }
    return true;
}

function updateSpeakerCount() {
    const numSpeakers = parseInt(document.getElementById('numSpeakers').value);
    const container = document.getElementById('audioUploadContainer');
    
    if (currentStep === 1 || currentStep === 2) {
        container.innerHTML = '';
        for (let i = 1; i <= numSpeakers; i++) {
            const audioItem = document.createElement('div');
            audioItem.className = 'audio-upload-item';
            audioItem.setAttribute('data-speaker', i);
            audioItem.innerHTML = `
                <label>Speaker ${i} Audio</label>
                <div class="upload-zone" onclick="document.getElementById('audio${i}').click()">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        <polyline points="17 8 12 3 7 8"></polyline>
                        <line x1="12" y1="3" x2="12" y2="15"></line>
                    </svg>
                    <span>Click to upload or drag & drop</span>
                    <small>MP3, WAV, M4A (Max 120MB)</small>
                </div>
                <input type="file" id="audio${i}" accept="audio/*" style="display: none;" onchange="handleAudioUpload(this, ${i})">
                <div class="audio-preview" style="display: none;">
                    <div class="audio-info"></div>
                </div>
            `;
            container.appendChild(audioItem);
        }
    }
}

function handleAudioUpload(input, speakerId) {
    const file = input.files[0];
    if (file) {
        audioFiles[speakerId] = file;
        const preview = input.parentElement.querySelector('.audio-preview');
        const uploadZone = input.parentElement.querySelector('.upload-zone');
        const audioInfo = preview.querySelector('.audio-info');
        
        preview.style.display = 'block';
        uploadZone.style.display = 'none';
        audioInfo.innerHTML = `
            <strong>${file.name}</strong><br>
            Size: ${(file.size / 1024 / 1024).toFixed(2)} MB<br>
            Type: ${file.type}
        `;
        
        showToast(`Audio for Speaker ${speakerId} uploaded successfully`, 'success');
    }
}

// Avatar selection
document.addEventListener('DOMContentLoaded', function() {
    const avatarOptions = document.querySelectorAll('.avatar-option');
    avatarOptions.forEach(option => {
        option.addEventListener('click', function() {
            const numSpeakers = parseInt(document.getElementById('numSpeakers').value);
            const selectedOptions = document.querySelectorAll('.avatar-option.selected');
            
            if (selectedOptions.length >= numSpeakers && !this.classList.contains('selected')) {
                showToast(`You can only select ${numSpeakers} avatars`, 'info');
                return;
            }
            
            this.classList.toggle('selected');
            updateSelectedAvatars();
        });
    });
    
    // Update speaker count on change
    document.getElementById('numSpeakers').addEventListener('change', updateSpeakerCount);
    
    // Initialize drag and drop
    initDragAndDrop();
});

function updateSelectedAvatars() {
    selectedAvatars = [];
    document.querySelectorAll('.avatar-option.selected').forEach(option => {
        selectedAvatars.push(option.dataset.avatar);
    });
}

function updateGenerationSummary() {
    const duration = document.getElementById('duration').options[document.getElementById('duration').selectedIndex].text;
    const numSpeakers = document.getElementById('numSpeakers').value;
    const background = document.getElementById('background').options[document.getElementById('background').selectedIndex].text;
    
    document.getElementById('summaryDuration').textContent = duration;
    document.getElementById('summarySpeakers').textContent = numSpeakers;
    document.getElementById('summaryBackground').textContent = background;
}

function startGeneration() {
    const btn = event.target;
    const btnText = btn.querySelector('.btn-text');
    const btnLoader = btn.querySelector('.btn-loader');
    
    btnText.style.display = 'none';
    btnLoader.style.display = 'inline-block';
    btn.disabled = true;
    
    // Simulate generation process
    setTimeout(() => {
        btnText.style.display = 'inline';
        btnLoader.style.display = 'none';
        btn.disabled = false;
        
        // Show preview section
        document.querySelector('.generator-section').style.display = 'none';
        document.getElementById('previewSection').style.display = 'block';
        
        // Simulate video URL
        const video = document.getElementById('generatedVideo');
        video.src = 'https://www.w3schools.com/html/mov_bbb.mp4';
        
        showToast('Video generated successfully!', 'success');
        
        // Scroll to preview
        document.getElementById('previewSection').scrollIntoView({ behavior: 'smooth' });
    }, 3000);
}

function downloadVideo() {
    showToast('Preparing download...', 'info');
    setTimeout(() => {
        showToast('Download started!', 'success');
    }, 1500);
}

function shareVideo() {
    if (navigator.share) {
        navigator.share({
            title: 'Generated Conversational Video',
            text: 'Check out this AI-generated conversational video!',
            url: window.location.href
        });
    } else {
        showToast('Share link copied to clipboard!', 'success');
    }
}

function resetGenerator() {
    currentStep = 1;
    audioFiles = {};
    selectedAvatars = [];
    
    // Reset form
    document.getElementById('videoTitle').value = '';
    document.getElementById('duration').selectedIndex = 0;
    document.getElementById('numSpeakers').selectedIndex = 0;
    document.getElementById('background').selectedIndex = 0;
    
    // Reset steps
    document.querySelectorAll('.step').forEach(step => step.classList.remove('active'));
    document.querySelectorAll('.step-panel').forEach(panel => panel.classList.remove('active'));
    document.querySelector('.step[data-step="1"]').classList.add('active');
    document.getElementById('step1').classList.add('active');
    
    // Reset avatar selection
    document.querySelectorAll('.avatar-option').forEach(option => option.classList.remove('selected'));
    
    // Hide preview, show generator
    document.getElementById('previewSection').style.display = 'none';
    document.querySelector('.generator-section').style.display = 'block';
    
    // Scroll to generator
    document.getElementById('generator').scrollIntoView({ behavior: 'smooth' });
}

function scrollToGenerator() {
    document.getElementById('generator').scrollIntoView({ behavior: 'smooth' });
}

function showToast(message, type = 'info') {
    const toast = document.createElement('div');
    toast.className = `toast ${type}`;
    toast.textContent = message;
    document.body.appendChild(toast);
    
    setTimeout(() => toast.classList.add('show'), 100);
    setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(() => toast.remove(), 300);
    }, 3000);
}

function initDragAndDrop() {
    document.addEventListener('dragover', (e) => {
        if (e.target.classList.contains('upload-zone')) {
            e.preventDefault();
            e.target.style.borderColor = 'var(--primary)';
            e.target.style.background = 'var(--bg)';
        }
    });
    
    document.addEventListener('dragleave', (e) => {
        if (e.target.classList.contains('upload-zone')) {
            e.target.style.borderColor = 'var(--border)';
            e.target.style.background = 'transparent';
        }
    });
    
    document.addEventListener('drop', (e) => {
        if (e.target.classList.contains('upload-zone')) {
            e.preventDefault();
            e.target.style.borderColor = 'var(--border)';
            e.target.style.background = 'transparent';
            
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                const speakerId = e.target.parentElement.dataset.speaker;
                const input = e.target.parentElement.querySelector('input[type="file"]');
                input.files = files;
                handleAudioUpload(input, speakerId);
            }
        }
    });
}

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

// Header scroll effect
window.addEventListener('scroll', () => {
    const header = document.querySelector('.header');
    if (window.scrollY > 100) {
        header.style.boxShadow = '0 2px 20px rgba(0,0,0,0.1)';
    } else {
        header.style.boxShadow = 'none';
    }
});