document.addEventListener('DOMContentLoaded', function() {
    const typeSelect = document.getElementById('promotionTypeSelect');
    const siteContainer = document.getElementById('sitePreviewContainer');
    const mobileContainer = document.getElementById('mobilePreviewContainer');

    const imgInput = document.getElementById('imgUpload');
    const sitePreview = siteContainer?.querySelector('img');
    const mobilePreview = mobileContainer?.querySelector('img');
    const savedImageUrl = imgInput.dataset.savedImage || '';

    const titleInput = document.getElementById('titleInput');
    const descriptionInput = document.getElementById('descriptionInput');

    const clearBtn = document.getElementById('clearBtn');

    if (!typeSelect || !siteContainer || !mobileContainer) return;

    let currentImageData = null;

    const clearPreview = () => {
        imgInput.value = '';
        if (sitePreview) sitePreview.src = sitePlugImg;
        if (mobilePreview) mobilePreview.src = mobilePlugImg;
        currentImageData = savedImageUrl;
    };

    const updateVisibility = () => {
        const isSite = typeSelect.value === siteTypeValue;
        siteContainer.style.display = isSite ? 'block' : 'none';
        mobileContainer.style.display = isSite ? 'none' : 'block';

        if (currentImageData) {
            if (sitePreview) sitePreview.src = currentImageData;
            if (mobilePreview) mobilePreview.src = currentImageData;
        }
    };
    const loadPreview = (e) => {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = function(event) {
            currentImageData = event.target.result;
            if (sitePreview) sitePreview.src = currentImageData;
            if (mobilePreview) mobilePreview.src = currentImageData;
        };
        reader.readAsDataURL(file);
    };

    updateVisibility();
    typeSelect.addEventListener('change', updateVisibility);
    imgInput.addEventListener('change', loadPreview);
    clearBtn.addEventListener('click', clearPreview);

    const updateTitlePreview = (value) => {
        const isSite = typeSelect.value === siteTypeValue;
        if (isSite) {
            const stockTitle = document.querySelector('.stock__title');
            stockTitle.innerHTML = value
        }
    }
    const updateDescriptionPreview = (value) => {
        const isSite = typeSelect.value === siteTypeValue;
        if (isSite) {
            const stockDescription = document.querySelector('.stock__text');
            stockDescription.innerHTML = value
        }
    }

    titleInput.addEventListener('input', () => {
        updateTitlePreview(titleInput.value)
    });
    updateTitlePreview(titleInput.value);

    descriptionInput.addEventListener('input', () => {
        updateDescriptionPreview(descriptionInput.value);
    });
    updateDescriptionPreview(descriptionInput.value);
});