let generatedFiles = {};

async function generateFiles() {
    const configTextarea = document.getElementById('config');
    const generateBtn = document.getElementById('generateBtn');
    const loadingDiv = document.getElementById('loading');
    const errorDiv = document.getElementById('error');
    const resultsDiv = document.getElementById('results');

    const config = configTextarea.value.trim();

    if (!config) {
        showError('Please enter a configuration before generating files.');
        return;
    }

    // Reset UI state
    hideError();
    hideResults();
    showLoading();
    generateBtn.disabled = true;

    try {
        const response = await fetch('/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ config: config })
        });

        const data = await response.json();

        if (!response.ok) {
            throw new Error(data.error || 'Failed to generate files');
        }

        // Store the generated files
        generatedFiles = data;

        // Display the results
        displayResults(data);

    } catch (error) {
        console.error('Error generating files:', error);
        showError('Error generating files: ' + error.message);
    } finally {
        hideLoading();
        generateBtn.disabled = false;
    }
}

function displayResults(files) {
    const resultsDiv = document.getElementById('results');

    if (Object.keys(files).length === 0) {
        showError('No files were generated.');
        return;
    }

    let html = '<h3>Generated Files</h3>';

    for (const [filename, content] of Object.entries(files)) {
        html += `
            <div class="file-item">
                <h4>${filename}</h4>
                <p>Size: ${content.length} characters</p>
                <div class="file-buttons">
                    <button onclick="toggleFileContent('${filename}')" id="view-${filename}">
                        View Content
                    </button>
                    <button onclick="downloadFile('${filename}')" class="secondary">
                        Download
                    </button>
                </div>
                <div id="content-${filename}" class="file-content">${escapeHtml(content)}</div>
            </div>
        `;
    }

    resultsDiv.innerHTML = html;
    resultsDiv.style.display = 'block';
}

function toggleFileContent(filename) {
    const contentDiv = document.getElementById(`content-${filename}`);
    const viewBtn = document.getElementById(`view-${filename}`);

    if (contentDiv.style.display === 'none' || contentDiv.style.display === '') {
        contentDiv.style.display = 'block';
        viewBtn.textContent = 'Hide Content';
    } else {
        contentDiv.style.display = 'none';
        viewBtn.textContent = 'View Content';
    }
}

function downloadFile(filename) {
    if (!generatedFiles[filename]) {
        showError('File not found: ' + filename);
        return;
    }

    const content = generatedFiles[filename];
    const blob = new Blob([content], { type: 'text/csv' });
    const url = window.URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();

    // Clean up
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
}

function showError(message) {
    const errorDiv = document.getElementById('error');
    errorDiv.textContent = message;
    errorDiv.style.display = 'block';
}

function hideError() {
    const errorDiv = document.getElementById('error');
    errorDiv.style.display = 'none';
}

function showLoading() {
    const loadingDiv = document.getElementById('loading');
    loadingDiv.style.display = 'block';
}

function hideLoading() {
    const loadingDiv = document.getElementById('loading');
    loadingDiv.style.display = 'none';
}

function hideResults() {
    const resultsDiv = document.getElementById('results');
    resultsDiv.style.display = 'none';
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Add Enter key support for the textarea (Ctrl+Enter to generate)
document.getElementById('config').addEventListener('keydown', function (event) {
    if (event.ctrlKey && event.key === 'Enter') {
        generateFiles();
    }
});