// Function to view YAML file
function viewYaml(element) {
    const filename = element.getAttribute('data-filename');
    
    // Make an AJAX request to fetch the YAML content
    fetch(`/get_yaml?filename=${encodeURIComponent(filename)}`)
        .then(response => response.text())
        .then(yamlContent => {
            // Display the YAML content in a modal
            const modal = document.createElement('div');
            modal.style.position = 'fixed';
            modal.style.top = '0';
            modal.style.left = '0';
            modal.style.width = '100%';
            modal.style.height = '100%';
            modal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
            modal.style.zIndex = '1000';
            modal.style.display = 'flex';
            modal.style.justifyContent = 'center';
            modal.style.alignItems = 'center';
            
            const modalContent = document.createElement('div');
            modalContent.style.backgroundColor = 'white';
            modalContent.style.padding = '20px';
            modalContent.style.borderRadius = '5px';
            modalContent.style.maxWidth = '80%';
            modalContent.style.maxHeight = '80%';
            modalContent.style.overflow = 'auto';
            
            const closeButton = document.createElement('button');
            closeButton.textContent = 'Close';
            closeButton.style.marginBottom = '10px';
            closeButton.style.padding = '5px 10px';
            closeButton.style.cursor = 'pointer';
            closeButton.onclick = () => {
                document.body.removeChild(modal);
            };
            
            const yamlPre = document.createElement('pre');
            yamlPre.textContent = yamlContent;
            yamlPre.style.whiteSpace = 'pre-wrap';
            yamlPre.style.wordBreak = 'break-word';
            
            modalContent.appendChild(closeButton);
            modalContent.appendChild(yamlPre);
            modal.appendChild(modalContent);
            
            document.body.appendChild(modal);
        })
        .catch(error => {
            console.error('Error fetching YAML content:', error);
            alert('Error fetching YAML content: ' + error.message);
        });
}

// Function to visualize coverage scores
function visualizeCoverage(scoreDetails) {
    const chartContainer = document.getElementById('coverage-chart');
    
    // Create a bar chart using a visualization library
    // This is just a placeholder - you would use a library like Chart.js
    
    let html = `<div style="margin-top: 20px;">
        <h3>Coverage by Section</h3>
        <div style="display: flex; flex-direction: column; gap: 5px;">`;
    
    for (const [section, details] of Object.entries(scoreDetails)) {
        const percentage = details.completion_rate;
        html += `
            <div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 2px;">
                    <span>${section}</span>
                    <span>${percentage}%</span>
                </div>
                <div style="width: 100%; background-color: #eee; height: 10px; border-radius: 5px;">
                    <div style="width: ${percentage}%; background-color: #3273dc; height: 10px; border-radius: 5px;"></div>
                </div>
            </div>`;
    }
    
    html += '</div></div>';
    
    chartContainer.innerHTML = html;
}

// Initialize any client-side functionality when the document loads
document.addEventListener('DOMContentLoaded', function() {
    // This could be used to initialize charts or other client-side features
    console.log('Client-side JavaScript initialized');
});


// Add this to script.js

// Function to show the YAML content in a modal
function viewYAML(filename) {
    // Use Gradio's client.query to get the YAML content
    gradioApp().querySelector('#file_action_component').querySelector('textarea').value = filename;
    gradioApp().querySelector('#file_action_type_component').querySelector('textarea').value = 'view';
    
    // Trigger the event
    const viewButton = gradioApp().querySelector('#trigger_file_action');
    viewButton.click();
    
    // The result will show up in the modal that's created by the event handler
}

// Function to download a file
function downloadFile(filename, format) {
    let actionType;
    if (format === 'yaml') actionType = 'download_yaml';
    else if (format === 'markdown') actionType = 'download_md';
    else if (format === 'latex') actionType = 'download_latex';
    else return;
    
    // Set the filename and action type
    gradioApp().querySelector('#file_action_component').querySelector('textarea').value = filename;
    gradioApp().querySelector('#file_action_type_component').querySelector('textarea').value = actionType;
    
    // Trigger the event
    const downloadButton = gradioApp().querySelector('#trigger_file_action');
    downloadButton.click();
    
    // The download will be handled by the event response
}

// Helper function to get the Gradio app element
function gradioApp() {
    return document.getElementsByTagName('gradio-app')[0].shadowRoot || document;
}

// Function to create and display a modal with content
function showModal(content) {
    // Create the modal elements
    const modal = document.createElement('div');
    modal.style.position = 'fixed';
    modal.style.top = '0';
    modal.style.left = '0';
    modal.style.width = '100%';
    modal.style.height = '100%';
    modal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    modal.style.zIndex = '1000';
    modal.style.display = 'flex';
    modal.style.justifyContent = 'center';
    modal.style.alignItems = 'center';
    
    const modalContent = document.createElement('div');
    modalContent.style.backgroundColor = 'white';
    modalContent.style.padding = '20px';
    modalContent.style.borderRadius = '5px';
    modalContent.style.maxWidth = '80%';
    modalContent.style.maxHeight = '80%';
    modalContent.style.overflow = 'auto';
    
    const closeButton = document.createElement('button');
    closeButton.textContent = 'Close';
    closeButton.style.marginBottom = '10px';
    closeButton.style.padding = '5px 10px';
    closeButton.style.cursor = 'pointer';
    closeButton.onclick = () => {
        document.body.removeChild(modal);
    };
    
    const contentPre = document.createElement('pre');
    contentPre.textContent = content;
    contentPre.style.whiteSpace = 'pre-wrap';
    contentPre.style.wordBreak = 'break-word';
    
    modalContent.appendChild(closeButton);
    modalContent.appendChild(contentPre);
    modal.appendChild(modalContent);
    
    document.body.appendChild(modal);
}