document.addEventListener('DOMContentLoaded', () => {
    const photoInput = document.getElementById('photo-input');
    const uploadForm = document.getElementById('upload-form');
    const imagePreview = document.getElementById('image-preview');
    const previewContainer = document.getElementById('preview-container');
    const uploadZone = document.querySelector('.upload-zone');
    const processBtn = document.getElementById('process-btn');
    const styleItems = document.querySelectorAll('.style-item');
    const overlay = document.getElementById('processing-overlay');
    const statusDetail = document.getElementById('status-detail');
    
    let selectedStyle = 'penthouse-1';
    let uploadedFile = null;

    // Handle File Preview
    photoInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file) {
            uploadedFile = file;
            const reader = new FileReader();
            reader.onload = (e) => {
                imagePreview.src = e.target.result;
                previewContainer.classList.remove('d-none');
                uploadZone.classList.add('d-none');
                processBtn.classList.remove('d-none');
            };
            reader.readAsDataURL(file);
        }
    });

    // Style Selection
    styleItems.forEach(item => {
        item.addEventListener('click', () => {
            styleItems.forEach(i => i.classList.remove('active'));
            item.classList.add('active');
            selectedStyle = item.getAttribute('data-style');
        });
    });

    // Reset Upload
    window.resetUpload = () => {
        photoInput.value = '';
        uploadedFile = null;
        previewContainer.classList.add('d-none');
        uploadZone.classList.remove('d-none');
        processBtn.classList.add('d-none');
    };

    // Process Logic
    processBtn.addEventListener('click', async () => {
        if (!uploadedFile) return;

        overlay.style.display = 'flex';
        
        // Mocking AI Steps
        const steps = [
            "Detecting portrait contours...",
            "Isolating subject from background...",
            "Matching color temperature to luxury night...",
            "Applying soft cinematic depth of field...",
            "Finalizing luxury textures..."
        ];

        for (let i = 0; i < steps.length; i++) {
            statusDetail.textContent = steps[i];
            await new Promise(r => setTimeout(r, 1200));
        }

        const formData = new FormData();
        formData.append('photo', uploadedFile);
        formData.append('style', selectedStyle);

        try {
            const response = await fetch('api/process.php', {
                method: 'POST',
                body: formData
            });
            const data = await response.json();

            if (data.success) {
                document.getElementById('upload-section').classList.add('d-none');
                document.getElementById('result-section').classList.remove('d-none');
                document.getElementById('original-res').src = data.original_url;
                document.getElementById('processed-res').src = data.processed_url;
                document.getElementById('download-btn').href = data.processed_url;
                
                // Smooth scroll to results
                window.scrollTo({ top: 0, behavior: 'smooth' });
            } else {
                alert("Processing failed: " + (data.error || "Unknown error"));
            }
        } catch (error) {
            console.error('Error:', error);
            alert("Something went wrong with the AI engine.");
        } finally {
            overlay.style.display = 'none';
        }
    });
});