document.addEventListener('DOMContentLoaded', () => {
    const imageUpload = document.getElementById('image-upload');
    const imagePreview = document.getElementById('image-preview');
    const styledPreview = document.getElementById('styled-preview');
    const uploadWrapper = document.querySelector('.image-upload-wrapper');

    if (uploadWrapper) {
        uploadWrapper.addEventListener('click', () => imageUpload.click());
    }

    if (imageUpload) {
        imageUpload.addEventListener('change', (event) => {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    const imageUrl = e.target.result;
                    if(imagePreview) imagePreview.src = imageUrl;
                    if(styledPreview) styledPreview.src = imageUrl;
                };
                reader.readAsDataURL(file);
            }
        });
    }

    const styleCards = document.querySelectorAll('.style-card');
    styleCards.forEach(card => {
        card.addEventListener('click', () => {
            // Update active card
            styleCards.forEach(c => c.classList.remove('active'));
            card.classList.add('active');

            // Apply style effect
            const style = card.dataset.style;
            if (styledPreview) {
                styledPreview.className = 'styled-preview'; // Reset classes
                switch (style) {
                    case 'pop-art':
                        styledPreview.classList.add('style-pop-art');
                        break;
                    case 'pixel-art':
                        styledPreview.classList.add('style-pixel-art');
                        break;
                    case 'sketch':
                        styledPreview.classList.add('style-sketch');
                        break;
                    case 'none':
                    default:
                        // No extra class needed
                        break;
                }
            }
        });
    });
});