(function () {
    const zone = document.getElementById('signature-drop-zone');
    const input = document.getElementById('signature_image');
    if (!zone || !input) return;

    const placeholder = document.getElementById('signature-placeholder');
    const fileNameEl = document.getElementById('signature-file-name');
    const previewNew = document.getElementById('signature-preview-new');
    const previewExisting = document.getElementById('signature-preview-existing');
    const removeCheckbox = document.getElementById('remove_signature');

    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];

    function isImageFile(file) {
        return file && (allowedTypes.includes(file.type) || /\.(jpe?g|png|gif|webp)$/i.test(file.name));
    }

    function assignFile(file) {
        if (!isImageFile(file)) {
            alert('Please upload an image file (JPEG, PNG, GIF, or WebP).');
            return false;
        }

        const dt = new DataTransfer();
        dt.items.add(file);
        input.files = dt.files;

        if (fileNameEl) {
            fileNameEl.textContent = file.name;
        }

        if (previewNew) {
            const reader = new FileReader();
            reader.onload = function (e) {
                previewNew.src = e.target.result;
                previewNew.classList.remove('d-none');
                if (placeholder) placeholder.classList.add('d-none');
            };
            reader.readAsDataURL(file);
        }

        if (removeCheckbox) {
            removeCheckbox.checked = false;
        }

        return true;
    }

    function onFiles(files) {
        if (files && files.length > 0) {
            assignFile(files[0]);
        }
    }

    input.addEventListener('change', function () {
        onFiles(this.files);
    });

    zone.addEventListener('click', function (e) {
        if (e.target === input) return;
        input.click();
    });

    zone.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            input.click();
        }
    });

    ['dragenter', 'dragover'].forEach(evt => {
        zone.addEventListener(evt, function (e) {
            e.preventDefault();
            e.stopPropagation();
            zone.classList.add('is-dragover');
        });
    });

    zone.addEventListener('dragleave', function (e) {
        e.preventDefault();
        e.stopPropagation();
        if (!zone.contains(e.relatedTarget)) {
            zone.classList.remove('is-dragover');
        }
    });

    zone.addEventListener('drop', function (e) {
        e.preventDefault();
        e.stopPropagation();
        zone.classList.remove('is-dragover');
        onFiles(e.dataTransfer?.files);
    });

    document.addEventListener('dragover', function (e) {
        e.preventDefault();
    });

    document.addEventListener('drop', function (e) {
        if (!zone.contains(e.target)) {
            e.preventDefault();
        }
    });
})();
