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 existingMappings = document.getElementById('existingMappings');

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

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

    function checkConvertState() {
        const mappingSelected = mappingFileInput.value !== '';
        const fileSelected = fullInputFile.files.length > 0;
        convertBtn.disabled = !(mappingSelected && fileSelected);
    }

    function loadMappings() {
        fetch('api.php?action=list_mappings')
            .then(response => response.json())
            .then(data => {
                if (data.success && data.mappings.length > 0) {
                    existingMappings.innerHTML = '<option value="" selected>Select a mapping</option>';
                    data.mappings.forEach(mapping => {
                        const option = document.createElement('option');
                        option.value = `mappings/${mapping}`;
                        option.textContent = mapping;
                        existingMappings.appendChild(option);
                    });
                } else {
                    existingMappings.innerHTML = '<option value="" selected>No mappings found</option>';
                }
            })
            .catch(error => {
                console.error('Error loading mappings:', error);
                existingMappings.innerHTML = '<option value="" selected>Error loading mappings</option>';
            });
    }

    inputSample.addEventListener('change', checkMappingFiles);
    outputSample.addEventListener('change', checkMappingFiles);
    fullInputFile.addEventListener('change', checkConvertState);
    existingMappings.addEventListener('change', function() {
        mappingFileInput.value = this.value;
        checkConvertState();
    });

    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;
                loadMappings(); // Refresh the list
                // Select the new mapping in the dropdown
                setTimeout(() => {
                    existingMappings.value = data.mapping_file;
                    checkConvertState();
                }, 500); // Give it a moment to reload
            } 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';
            checkConvertState();
        });
    });

    // Initial load
    loadMappings();
});