// Main JavaScript for TuneTok Takedown

document.addEventListener('DOMContentLoaded', function() {
    const downloadBtn = document.getElementById('downloadBtn');
    const tiktokUrlInput = document.getElementById('tiktokUrl');
    const errorMessage = document.getElementById('errorMessage');
    const resultsSection = document.getElementById('resultsSection');
    const audioPreview = document.getElementById('audioPreview');
    const downloadAudioBtn = document.getElementById('downloadAudio');
    const newDownloadBtn = document.getElementById('newDownload');

    // Validate TikTok URL
    function isValidTikTokUrl(url) {
        const tiktokPattern = /^https?:\/\/(www\.)?tiktok\.com\/.+/;
        return tiktokPattern.test(url);
    }

    // Show error message
    function showError(message) {
        errorMessage.textContent = message;
        errorMessage.classList.remove('hidden');
        setTimeout(() => {
            errorMessage.classList.add('hidden');
        }, 5000);
    }

    // Simulate download process (in a real app, this would call an API)
    function processDownload(url) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if (isValidTikTokUrl(url)) {
                    resolve({
                        title: 'TikTok Audio',
                        url: url,
                        downloadUrl: `https://api.example.com/download?url=${encodeURIComponent(url)}`,
                        audioUrl: 'https://example.com/audio.mp3'
                    });
                } else {
                    reject('Enlace de TikTok no válido');
                }
            }, 2000);
        });
    }

    // Create audio preview
    function createAudioPreview(audioUrl) {
        return `
            <div class="bg-gray-50 rounded-lg p-4">
                <audio controls class="w-full">
                    <source src="${audioUrl}" type="audio/mpeg">
                    Tu navegador no soporta el elemento de audio.
                </audio>
                <p class="text-sm text-gray-600 mt-2 text-center">
                    Previsualiza el audio antes de descargar
                </p>
            </div>
        `;
    }

    // Handle download button click
    downloadBtn.addEventListener('click', async function() {
        const url = tiktokUrlInput.value.trim();
        
        if (!url) {
            showError('Por favor, pega un enlace de TikTok');
            return;
        }

        if (!isValidTikTokUrl(url)) {
            showError('Por favor, ingresa un enlace válido de TikTok');
            return;
        }

        // Show loading state
        const originalText = downloadBtn.innerHTML;
        downloadBtn.innerHTML = '<div class="spinner"></div> Procesando...';
        downloadBtn.disabled = true;

        try {
            const result = await processDownload(url);
            
            // Show results section
            audioPreview.innerHTML = createAudioPreview(result.audioUrl);
            resultsSection.classList.remove('hidden');
            
            // Set download link
            downloadAudioBtn.onclick = function() {
                window.open(result.downloadUrl, '_blank');
            };

            // Scroll to results
            resultsSection.scrollIntoView({ behavior: 'smooth' });
            
        } catch (error) {
            showError(error);
        } finally {
            // Reset button
            downloadBtn.innerHTML = originalText;
            downloadBtn.disabled = false;
            feather.replace();
        }
    });

    // Handle new download button
    newDownloadBtn.addEventListener('click', function() {
        resultsSection.classList.add('hidden');
        tiktokUrlInput.value = '';
        tiktokUrlInput.focus();
    });

    // Allow Enter key to trigger download
    tiktokUrlInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            downloadBtn.click();
        }
    });

    // Add some interactive effects
    const featureCards = document.querySelectorAll('.text-center.p-6');
    featureCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
            this.style.transition = 'transform 0.3s ease';
        this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.1)';
        });

        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = 'none';
        });
    });
});