// Function to load and render JSON into a specific element
async function renderJSON(filePath, elementId) {
    try {
        const response = await fetch(filePath);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();

        // Convert JSON object back to a beautifully formatted string
        // The 'null, 4' adds the necessary indentation/whitespace
        document.querySelector(`#${elementId} pre`).textContent = JSON.stringify(data, null, 4);
    } catch (error) {
        console.error(`Could not load ${filePath}:`, error);
        document.querySelector(`#${elementId} pre`).textContent = `Error loading data.`;
    }
}

async function render_text(filePath, elementId) {
    try {
        const response = await fetch(filePath);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const text = await response.text();
        document.querySelector(`#${elementId} pre`).textContent = text;
    } catch (error) {
        console.error(`Could not load ${filePath}:`, error);
        document.querySelector(`#${elementId} pre`).textContent = `Error loading data.`;
    }
}

// Call the function for both of your files
document.addEventListener("DOMContentLoaded", e => {
    renderJSON('./state.json', 'state');
    renderJSON('./identity.json', 'identity');
    render_text("./tables.sql", "sql")
    render_text("concept.txt", 'concept')
    render_text('concept.py', 'python')
})