document.addEventListener('DOMContentLoaded', function () {
    const mappingForm = document.getElementById('mappingForm');
    const convertForm = document.getElementById('convertForm');

    const inputSample = document.getElementById('inputSample');
    const outputSample = document.getElementById('outputSample');
    const buildMappingBtn = document.getElementById('buildMappingBtn');

    const fullInputFile = document.getElementById('fullInputFile');
    const convertBtn = document.getElementById('convertBtn');

    const convertSection = document.getElementById('convertSection');
    const convertResult = document.getElementById('convertResult');
    const mappingFileInput = document.getElementById('mappingFile');

    function checkMappingFiles() {
        buildMappingBtn.disabled = !(inputSample.files.length > 0 && outputSample.files.length > 0);
    }

    function checkConvertFile() {
        convertBtn.disabled = !(fullInputFile.files.length > 0);
    }

    inputSample.addEventListener('change', checkMappingFiles);
    outputSample.addEventListener('change', checkMappingFiles);
    fullInputFile.addEventListener('change', checkConvertFile);

    mappingForm.addEventListener('submit', function (e) {
        e.preventDefault();
        buildMappingBtn.disabled = true;
        buildMappingBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Building...';

        const formData = new FormData(this);
        formData.append('action', 'build_mapping');

        fetch('api.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Mapping built successfully!');
                mappingFileInput.value = data.mapping_file;
                convertSection.classList.remove('d-none');
            } else {
                let errorMsg = 'Error building mapping: ' + data.error;
                if(data.details) {
                    errorMsg += '\nDetails: ' + JSON.stringify(data.details);
                }
                alert(errorMsg);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while building the mapping.');
        })
        .finally(() => {
            buildMappingBtn.disabled = false;
            buildMappingBtn.innerHTML = '<i class="fas fa-cogs me-2"></i>Build Mapping';
        });
    });

    convertForm.addEventListener('submit', function (e) {
        e.preventDefault();
        convertBtn.disabled = true;
        convertBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Converting...';
        convertResult.innerHTML = '';

        const formData = new FormData(this);
        formData.append('action', 'convert');

        fetch('api.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                convertResult.innerHTML = `<div class="alert alert-success">Conversion successful! <a href="outputs/${data.download_url}" download>Download Converted File</a></div>`;
            } else {
                convertResult.innerHTML = `<div class="alert alert-danger">Error: ${data.error}</div>`;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            convertResult.innerHTML = `<div class="alert alert-danger">An unexpected error occurred.</div>`;
        })
        .finally(() => {
            convertBtn.disabled = false;
            convertBtn.innerHTML = '<i class="fas fa-sync-alt me-2"></i>Convert';
        });
    });
});