main.js

/**
 * Main JavaScript for Curriculum Browser Example
 * Handles user interactions and coordinates between SPARQL queries and tree building
 */

// Global state
let currentState = null;
let currentSubject = null;
let currentClassLevel = null;
let currentSchulart = null;
let currentCurriculum = null;

// Query history storage
let sparqlQueryHistory = [];

// DOM elements
let stateSelect, subjectSelect, classLevelSelect, schulartSelect, curriculumSelect, endpointSelect;
let stateInfo, subjectInfo, classLevelInfo, schulartInfo, curriculumInfo, endpointInfo;
let treeContainer, sparqlDisplay, apiResponse, codeExample;

/**
 * Initialize the application when DOM is loaded
 */
document.addEventListener('DOMContentLoaded', function() {
    // Get DOM elements
    stateSelect = document.getElementById('stateSelect');
    subjectSelect = document.getElementById('subjectSelect');
    classLevelSelect = document.getElementById('classLevelSelect');
    schulartSelect = document.getElementById('schulartSelect');
    curriculumSelect = document.getElementById('curriculumSelect');
    endpointSelect = document.getElementById('endpointSelect');
    stateInfo = document.getElementById('stateInfo');
    subjectInfo = document.getElementById('subjectInfo');
    classLevelInfo = document.getElementById('classLevelInfo');
    schulartInfo = document.getElementById('schulartInfo');
    curriculumInfo = document.getElementById('curriculumInfo');
    endpointInfo = document.getElementById('endpointInfo');
    treeContainer = document.getElementById('treeContainer');
    sparqlDisplay = document.getElementById('sparqlDisplay');
    apiResponse = document.getElementById('apiResponse');
    codeExample = document.getElementById('codeExample');

    // Set up event listeners
    stateSelect.addEventListener('change', handleStateChange);
    subjectSelect.addEventListener('change', handleSubjectChange);
    classLevelSelect.addEventListener('change', handleClassLevelChange);
    schulartSelect.addEventListener('change', handleSchulartChange);
    curriculumSelect.addEventListener('change', handleCurriculumChange);
    endpointSelect.addEventListener('change', handleEndpointChange);

    // Initialize the application
    initializeApp();
});

/**
 * Initialize the application
 */
async function initializeApp() {
    try {
        console.log('Initializing Curriculum Browser Example...');

        // Load states
        await loadStates();

        // Show code example
        displayCodeExample();

    } catch (error) {
        console.error('Error initializing app:', error);
        showError('Failed to initialize application: ' + error.message);
    }
}

/**
 * Load and display all German federal states
 */
async function loadStates() {
    try {
        console.log('Loading states...');
        stateSelect.innerHTML = '<option value="">Loading states...</option>';

        const states = await window.SPARQLExamples.queryStates();

        // Clear loading option
        stateSelect.innerHTML = '<option value="">Select a state</option>';

        // Add states to dropdown
        states.forEach(state => {
            const option = document.createElement('option');
            option.value = state.uri;
            option.textContent = state.label;
            stateSelect.appendChild(option);
        });

        console.log(`Loaded ${states.length} states`);

        // Display the SPARQL query and API response together
        displaySPARQLQuery('queryStates', {}, states);

    } catch (error) {
        console.error('Error loading states:', error);
        stateSelect.innerHTML = '<option value="">Error loading states</option>';
        showError('Failed to load states: ' + error.message);
    }
}

/**
 * Handle state selection change
 */
async function handleStateChange(event) {
    const stateUri = event.target.value;
    currentState = stateUri;

    if (!stateUri) {
        // Reset dependent dropdowns
        resetSubjectSelect();
        resetCurriculumSelect();
        clearTree();
        return;
    }

    try {
        // Update state info
        const selectedOption = event.target.selectedOptions[0];
        stateInfo.innerHTML = `<strong>Selected:</strong> ${selectedOption.textContent}<br><strong>URI:</strong> ${stateUri}`;

        // Load subjects for this state
        await loadSubjectsForState(stateUri);

    } catch (error) {
        console.error('Error handling state change:', error);
        showError('Failed to load data for selected state: ' + error.message);
    }
}

/**
 * Load subjects for a specific state
 */
async function loadSubjectsForState(stateUri) {
    try {
        console.log('Loading subjects for state:', stateUri);
        subjectSelect.innerHTML = '<option value="">Loading subjects...</option>';
        subjectSelect.disabled = false;

        const subjects = await window.SPARQLExamples.querySubjectsByState(stateUri);

        // Clear loading option
        subjectSelect.innerHTML = '<option value="">Select a subject</option>';

        // Add subjects to dropdown
        subjects.forEach(subject => {
            const option = document.createElement('option');
            option.value = subject.uri;
            option.textContent = subject.label;
            subjectSelect.appendChild(option);
        });

        console.log(`Loaded ${subjects.length} subjects for state`);

        // Display the SPARQL query and API response together
        displaySPARQLQuery('querySubjectsByState', { stateUri }, subjects);

    } catch (error) {
        console.error('Error loading subjects:', error);
        subjectSelect.innerHTML = '<option value="">Error loading subjects</option>';
        showError('Failed to load subjects: ' + error.message);
    }
}

/**
 * Load curricula for a specific state
 */
async function loadCurriculaForState(stateUri) {
    try {
        console.log('Loading curricula for state:', stateUri);
        curriculumSelect.innerHTML = '<option value="">Loading curricula...</option>';
        curriculumSelect.disabled = false;

        const curricula = await window.SPARQLExamples.queryCurriculaByState(stateUri);

        // Clear loading option
        curriculumSelect.innerHTML = '<option value="">Select a curriculum</option>';

        // Add curricula to dropdown
        curricula.forEach(curriculum => {
            const option = document.createElement('option');
            option.value = curriculum.uri;
            option.textContent = curriculum.uri.split('/').pop() || curriculum.uri; // Use last part of URI as label
            curriculumSelect.appendChild(option);
        });

        console.log(`Loaded ${curricula.length} curricula for state`);

        // Display the SPARQL query and API response together
        displaySPARQLQuery('queryCurriculaByState', { stateUri }, curricula);

    } catch (error) {
        console.error('Error loading curricula:', error);
        curriculumSelect.innerHTML = '<option value="">Error loading curricula</option>';
        showError('Failed to load curricula: ' + error.message);
    }
}

/**
 * Load class levels for a specific state and subject
 */
async function loadClassLevelsForStateAndSubject(stateUri, subjectUri) {
    try {
        console.log('Loading class levels for state and subject:', stateUri, subjectUri);
        classLevelSelect.innerHTML = '<option value="">Loading class levels...</option>';
        classLevelSelect.disabled = false;

        const classLevels = await window.SPARQLExamples.queryClassLevelsByStateAndSubject(stateUri, subjectUri);

        // Clear loading option
        classLevelSelect.innerHTML = '<option value="">Select a class level</option>';

        // Add class levels to dropdown
        classLevels.forEach(classLevel => {
            const option = document.createElement('option');
            option.value = classLevel.uri;
            option.textContent = classLevel.label;
            classLevelSelect.appendChild(option);
        });

        console.log(`Loaded ${classLevels.length} class levels`);

        // Display the SPARQL query and API response together
        displaySPARQLQuery('queryClassLevelsByStateAndSubject', { stateUri, subjectUri }, classLevels);

    } catch (error) {
        console.error('Error loading class levels:', error);
        classLevelSelect.innerHTML = '<option value="">Error loading class levels</option>';
        showError('Failed to load class levels: ' + error.message);
    }
}

/**
 * Load curricula for a specific state, subject, and class level
 */
async function loadCurriculaForStateSubjectAndClassLevel(stateUri, subjectUri, classLevelUri) {
    try {
        console.log('Loading curricula for state, subject, and class level:', stateUri, subjectUri, classLevelUri);
        curriculumSelect.innerHTML = '<option value="">Loading curricula...</option>';
        curriculumSelect.disabled = false;

        const curricula = await window.SPARQLExamples.queryCurriculaByStateSubjectAndClassLevel(stateUri, subjectUri, classLevelUri);

        // Clear loading option
        curriculumSelect.innerHTML = '<option value="">Select a curriculum</option>';

        // Add curricula to dropdown with labels
        curricula.forEach(curriculum => {
            const option = document.createElement('option');
            option.value = curriculum.uri;
            option.textContent = curriculum.label || curriculum.uri.split('/').pop() || curriculum.uri;
            curriculumSelect.appendChild(option);
        });

        console.log(`Loaded ${curricula.length} curricula for filters`);

        // Display the SPARQL query and API response together
        displaySPARQLQuery('queryCurriculaByStateSubjectAndClassLevel', { stateUri, subjectUri, classLevelUri }, curricula);

    } catch (error) {
        console.error('Error loading curricula:', error);
        curriculumSelect.innerHTML = '<option value="">Error loading curricula</option>';
        showError('Failed to load curricula: ' + error.message);
    }
}

/**
 * Load curricula for a specific state, subject, class level, and school type
 */
async function loadCurriculaForStateSubjectClassLevelAndSchulart(stateUri, subjectUri, classLevelUri, schulartUri) {
    try {
        console.log('Loading curricula for state, subject, class level, and school type:', stateUri, subjectUri, classLevelUri, schulartUri);
        curriculumSelect.innerHTML = '<option value="">Loading curricula...</option>';
        curriculumSelect.disabled = false;

        const curricula = await window.SPARQLExamples.queryCurriculaByStateSubjectClassLevelAndSchulart(stateUri, subjectUri, classLevelUri, schulartUri);

        // Clear loading option
        curriculumSelect.innerHTML = '<option value="">Select a curriculum</option>';

        // Add curricula to dropdown with labels
        curricula.forEach(curriculum => {
            const option = document.createElement('option');
            option.value = curriculum.uri;
            option.textContent = curriculum.label || curriculum.uri.split('/').pop() || curriculum.uri;
            curriculumSelect.appendChild(option);
        });

        console.log(`Loaded ${curricula.length} curricula for all filters`);

        // Display the SPARQL query and API response together
        displaySPARQLQuery('queryCurriculaByStateSubjectClassLevelAndSchulart', { stateUri, subjectUri, classLevelUri, schulartUri }, curricula);

    } catch (error) {
        console.error('Error loading curricula:', error);
        curriculumSelect.innerHTML = '<option value="">Error loading curricula</option>';
        showError('Failed to load curricula: ' + error.message);
    }
}

/**
 * Handle subject selection change
 */
async function handleSubjectChange(event) {
    const subjectUri = event.target.value;
    currentSubject = subjectUri;

    if (!subjectUri) {
        subjectInfo.innerHTML = '';
        resetClassLevelSelect();
        resetCurriculumSelect();
        return;
    }

    try {
        // Update subject info
        const selectedOption = event.target.selectedOptions[0];
        subjectInfo.innerHTML = `<strong>Selected:</strong> ${selectedOption.textContent}<br><strong>URI:</strong> ${subjectUri}`;

        // Load class levels for this state and subject
        if (currentState) {
            await loadClassLevelsForStateAndSubject(currentState, subjectUri);
        }

    } catch (error) {
        console.error('Error handling subject change:', error);
        showError('Failed to load class levels: ' + error.message);
    }
}

/**
 * Load school types (Schulart) for a specific state, subject, and class level
 */
async function loadSchulartForStateSubjectAndClassLevel(stateUri, subjectUri, classLevelUri) {
    try {
        console.log('Loading school types for state, subject, and class level:', stateUri, subjectUri, classLevelUri);
        schulartSelect.innerHTML = '<option value="">Loading school types...</option>';
        schulartSelect.disabled = false;

        const schularten = await window.SPARQLExamples.querySchulartByStateSubjectAndClassLevel(stateUri, subjectUri, classLevelUri);

        // Clear loading option
        schulartSelect.innerHTML = '<option value="">Select a school type</option>';

        // Add school types to dropdown
        schularten.forEach(schulart => {
            const option = document.createElement('option');
            option.value = schulart.uri;
            option.textContent = schulart.label;
            schulartSelect.appendChild(option);
        });

        console.log(`Loaded ${schularten.length} school types`);

        // Display the SPARQL query and API response together
        displaySPARQLQuery('querySchulartByStateSubjectAndClassLevel', { stateUri, subjectUri, classLevelUri }, schularten);

    } catch (error) {
        console.error('Error loading school types:', error);
        schulartSelect.innerHTML = '<option value="">Error loading school types</option>';
        showError('Failed to load school types: ' + error.message);
    }
}

/**
 * Handle class level selection change
 */
async function handleClassLevelChange(event) {
    const classLevelUri = event.target.value;
    currentClassLevel = classLevelUri;

    if (!classLevelUri) {
        classLevelInfo.innerHTML = '';
        resetSchulartSelect();
        resetCurriculumSelect();
        return;
    }

    try {
        // Update class level info
        const selectedOption = event.target.selectedOptions[0];
        classLevelInfo.innerHTML = `<strong>Selected:</strong> ${selectedOption.textContent}<br><strong>URI:</strong> ${classLevelUri}`;

        // Load school types for this state, subject, and class level
        if (currentState && currentSubject) {
            await loadSchulartForStateSubjectAndClassLevel(currentState, currentSubject, classLevelUri);
        }

    } catch (error) {
        console.error('Error handling class level change:', error);
        showError('Failed to load school types: ' + error.message);
    }
}

/**
 * Handle school type (Schulart) selection change
 */
async function handleSchulartChange(event) {
    const schulartUri = event.target.value;
    currentSchulart = schulartUri;

    if (!schulartUri) {
        schulartInfo.innerHTML = '';
        resetCurriculumSelect();
        return;
    }

    try {
        // Update school type info
        const selectedOption = event.target.selectedOptions[0];
        schulartInfo.innerHTML = `<strong>Selected:</strong> ${selectedOption.textContent}<br><strong>URI:</strong> ${schulartUri}`;

        // Load curricula for this state, subject, class level, and school type
        if (currentState && currentSubject && currentClassLevel) {
            await loadCurriculaForStateSubjectClassLevelAndSchulart(currentState, currentSubject, currentClassLevel, schulartUri);
        }

    } catch (error) {
        console.error('Error handling school type change:', error);
        showError('Failed to load curricula: ' + error.message);
    }
}

/**
 * Handle curriculum selection change
 */
async function handleCurriculumChange(event) {
    const curriculumUri = event.target.value;
    currentCurriculum = curriculumUri;

    if (!curriculumUri) {
        curriculumInfo.innerHTML = '';
        clearTree();
        return;
    }

    try {
        // Update curriculum info
        const selectedOption = event.target.selectedOptions[0];
        curriculumInfo.innerHTML = `<strong>Selected:</strong> ${selectedOption.textContent}<br><strong>URI:</strong> ${curriculumUri}`;

        // Build and display the curriculum tree
        await buildCurriculumTree(curriculumUri);

    } catch (error) {
        console.error('Error handling curriculum change:', error);
        showError('Failed to load curriculum tree: ' + error.message);
    }
}

/**
 * Handle endpoint selection change
 */
function handleEndpointChange(event) {
    const endpointType = event.target.value;

    try {
        // Update the endpoint
        const newEndpoint = window.SPARQLExamples.SPARQL_ENDPOINTS[endpointType];
        window.SPARQLExamples.setEndpoint(newEndpoint);

        // Update the info display
        endpointInfo.innerHTML = `<strong>Current:</strong> ${newEndpoint}<br><strong>Note:</strong> Make sure your SPARQL endpoint is running and accessible.`;

        // Reset the application state
        resetSubjectSelect();
        resetCurriculumSelect();
        clearTree();

        // Reload states with new endpoint
        loadStates();

        console.log('Switched to endpoint:', newEndpoint);

    } catch (error) {
        console.error('Error changing endpoint:', error);
        showError('Failed to change endpoint: ' + error.message);
    }
}

/**
 * Build and display the curriculum tree
 */
async function buildCurriculumTree(curriculumUri) {
    try {
        console.log('Building tree for curriculum:', curriculumUri);

        // Clear previous tree
        treeContainer.innerHTML = '<div class="loading"></div>Loading curriculum tree...';

        // Build tree using the tree builder
        await window.TreeBuilder.buildCurriculumTree(curriculumUri, treeContainer, {
            maxDepth: 4,
            showLabels: true
        });

        console.log('Tree built successfully');

    } catch (error) {
        console.error('Error building curriculum tree:', error);
        treeContainer.innerHTML = `<div class="error">Error loading tree: ${error.message}</div>`;
    }
}

/**
 * Add a SPARQL query to the history and update display
 */
function addQueryToHistory(functionName, params = {}, apiResponse = null) {
    let query = '';
    let description = '';

    // Get the query and description based on function name
    switch (functionName) {
        case 'queryStates':
            query = `PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX lp: <https://w3id.org/lehrplan/ontology/>

SELECT DISTINCT ?uri ?label
WHERE {
  ?s lp:LP_0000029 ?uri .
  ?uri rdfs:label ?label .
  FILTER(lang(?label) = "de")
}
ORDER BY ?label`;
            description = 'Loading all German federal states';
            break;

        case 'querySubjectsByState':
            query = `PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX lp: <https://w3id.org/lehrplan/ontology/>

SELECT DISTINCT ?uri (SAMPLE(?label1) AS ?label)
WHERE {
  ?s lp:LP_0000537 ?uri .
  ?uri rdfs:label ?label1 .
  ?s lp:LP_0000029 <${params.stateUri}> .
  FILTER(lang(?label1) = "de")
}
GROUP BY ?uri
ORDER BY ?label`;
            description = `Loading subjects for selected state`;
            break;

        case 'queryCurriculaByState':
            query = `PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX lp: <https://w3id.org/lehrplan/ontology/>

SELECT DISTINCT ?s ?lp
WHERE {
  ?s a <https://w3id.org/lehrplan/ontology/LP_0000438> .
  ?s lp:LP_0000029 <${params.stateUri}> .
  BIND (?s AS ?lp)
}
LIMIT 100`;
            description = `Loading curricula for selected state`;
            break;

        case 'queryClassLevelsByStateAndSubject':
            query = `PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX lp: <https://w3id.org/lehrplan/ontology/>

SELECT DISTINCT ?uri (SAMPLE(?label1) AS ?label)
WHERE {
  ?s lp:LP_0000026 ?uri .
  ?uri rdfs:label ?label1 .
  ?s lp:LP_0000029 <${params.stateUri}> .
  ?s lp:LP_0000537 <${params.subjectUri}> .
  FILTER(lang(?label1) = "de")
}
GROUP BY ?uri
ORDER BY ?label`;
            description = `Loading class levels for selected subject`;
            break;

        case 'querySchulartByStateSubjectAndClassLevel':
            query = `PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX lp: <https://w3id.org/lehrplan/ontology/>

SELECT DISTINCT ?uri (SAMPLE(?label1) AS ?label)
WHERE {
  ?s lp:LP_0000812 ?uri .
  ?uri rdfs:label ?label1 .
  ?s lp:LP_0000029 <${params.stateUri}> .
  ?s lp:LP_0000537 <${params.subjectUri}> .
  ?s lp:LP_0000026 <${params.classLevelUri}> .
  FILTER(lang(?label1) = "de")
}
GROUP BY ?uri
ORDER BY ?label`;
            description = `Loading school types for selected class level`;
            break;

        case 'queryCurriculaByStateSubjectAndClassLevel':
            query = `PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX lp: <https://w3id.org/lehrplan/ontology/>

SELECT DISTINCT ?s ?lp ?label
WHERE {
  ?s a <https://w3id.org/lehrplan/ontology/LP_0000438> .
  ?s lp:LP_0000029 <${params.stateUri}> .
  ?s lp:LP_0000537 <${params.subjectUri}> .
  ?s lp:LP_0000026 <${params.classLevelUri}> .
  ?s rdfs:label ?label .
  FILTER(lang(?label) = "de")
  BIND (?s AS ?lp)
}
ORDER BY ?label
LIMIT 100`;
            description = `Loading curricula for selected filters`;
            break;

        case 'queryCurriculaByStateSubjectClassLevelAndSchulart':
            query = `PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX lp: <https://w3id.org/lehrplan/ontology/>

SELECT DISTINCT ?s ?lp ?label
WHERE {
  ?s a <https://w3id.org/lehrplan/ontology/LP_0000438> .
  ?s lp:LP_0000029 <${params.stateUri}> .
  ?s lp:LP_0000537 <${params.subjectUri}> .
  ?s lp:LP_0000026 <${params.classLevelUri}> .
  ?s lp:LP_0000812 <${params.schulartUri}> .
  ?s rdfs:label ?label .
  FILTER(lang(?label) = "de")
  BIND (?s AS ?lp)
}
ORDER BY ?label
LIMIT 100`;
            description = `Loading curricula for all selected filters`;
            break;

        case 'queryChildren':
            query = `PREFIX lp: <https://w3id.org/lehrplan/ontology/>

SELECT DISTINCT ?child
WHERE {
  <${params.elementUri}> lp:hasPart ?child .
}`;
            description = `Loading child elements for curriculum tree`;
            break;

        case 'queryLabel':
            query = `PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>

SELECT ?label
WHERE {
  <${params.uri}> rdfs:label ?label .
  FILTER(lang(?label) = "de")
}
LIMIT 1`;
            description = `Loading label for curriculum element`;
            break;
    }

    if (query) {
        // Create timestamp
        const now = new Date();
        const timestamp = now.toLocaleTimeString('de-DE', {
            hour12: false,
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        });

        // Add to history (newer queries at the top)
        const queryEntry = {
            id: Date.now(),
            timestamp: timestamp,
            description: description,
            query: query.trim(),
            apiResponse: apiResponse
        };

        sparqlQueryHistory.unshift(queryEntry);

        // Update display
        renderQueryHistory();
    }
}

/**
 * Render the query history in the display area
 */
function renderQueryHistory() {
    if (sparqlQueryHistory.length === 0) {
        sparqlDisplay.innerHTML = '<p class="placeholder">SPARQL queries will appear here as you make selections</p>';
        return;
    }

    let html = '';

    sparqlQueryHistory.forEach(entry => {
        html += `
<div class="query-entry">
    <div class="query-timestamp">${entry.timestamp}</div>
    <div class="query-description">${entry.description}</div>
    <pre class="query-content"><code>${entry.query}</code></pre>
`;

        // Add API response if available
        if (entry.apiResponse) {
            const responseJson = JSON.stringify(entry.apiResponse, null, 2);
            html += `
    <div class="api-response-section">
        <div class="response-header">API Response (${entry.apiResponse.count || entry.apiResponse.length || 'N/A'} items)</div>
        <pre class="api-json">${responseJson}</pre>
    </div>
`;
        }

        html += `
</div>
        `;
    });

    sparqlDisplay.innerHTML = html;
}

/**
 * Display SPARQL query with syntax highlighting (legacy function - now uses history)
 */
function displaySPARQLQuery(functionName, params = {}, apiResponse = null) {
    addQueryToHistory(functionName, params, apiResponse);
}

/**
 * Display API response data
 */
function displayAPIResponse(data, type) {
    const displayData = {
        type: type,
        count: data.length,
        sample: data
    };
    window.TreeBuilder.displayJSONResponse(displayData, apiResponse);
}

/**
 * Reset subject dropdown
 */
function resetSubjectSelect() {
    subjectSelect.innerHTML = '<option value="">Select a state first</option>';
    subjectSelect.disabled = true;
    currentSubject = null;
    subjectInfo.innerHTML = '';
    resetClassLevelSelect();
}

/**
 * Reset class level dropdown
 */
function resetClassLevelSelect() {
    classLevelSelect.innerHTML = '<option value="">Select a subject first</option>';
    classLevelSelect.disabled = true;
    currentClassLevel = null;
    classLevelInfo.innerHTML = '';
    resetSchulartSelect();
}

/**
 * Reset school type dropdown
 */
function resetSchulartSelect() {
    schulartSelect.innerHTML = '<option value="">Select a class level first</option>';
    schulartSelect.disabled = true;
    currentSchulart = null;
    schulartInfo.innerHTML = '';
    resetCurriculumSelect();
}

/**
 * Reset curriculum dropdown
 */
function resetCurriculumSelect() {
    curriculumSelect.innerHTML = '<option value="">Select a school type first</option>';
    curriculumSelect.disabled = true;
    currentCurriculum = null;
    curriculumInfo.innerHTML = '';
}

/**
 * Clear tree display
 */
function clearTree() {
    treeContainer.innerHTML = '<p class="placeholder">Select a curriculum to see its tree structure</p>';
}

/**
 * Show error message
 */
function showError(message) {
    const errorDiv = document.createElement('div');
    errorDiv.className = 'error';
    errorDiv.textContent = message;

    // Insert at top of container
    const container = document.querySelector('.container');
    container.insertBefore(errorDiv, container.firstChild);

    // Auto-remove after 5 seconds
    setTimeout(() => {
        if (errorDiv.parentNode) {
            errorDiv.parentNode.removeChild(errorDiv);
        }
    }, 5000);
}

/**
 * Display code example in the details section
 */
function displayCodeExample() {
    const code = `// Example: Query states and build cascading dropdowns

// 1. Query all German federal states
const states = await SPARQLExamples.queryStates();

// 2. Query subjects for a specific state
const subjects = await SPARQLExamples.querySubjectsByState(stateUri);

// 3. Query curricula for a specific state
const curricula = await SPARQLExamples.queryCurriculaByState(stateUri);

// 4. Build tree from curriculum URI
await TreeBuilder.buildCurriculumTree(curriculumUri, container);

// 5. Execute custom SPARQL query
const result = await SPARQLExamples.executeSPARQLQuery(\`
  PREFIX lp: <https://w3id.org/lehrplan/ontology/>
  SELECT * WHERE {
    ?s a lp:LP_0000438 .
  } LIMIT 10
\`);`;

    codeExample.textContent = code;
}

/**
 * Utility function to format URI for display
 */
function formatUriForDisplay(uri) {
    return uri.split('/').pop() || uri;
}

// Make functions globally available for debugging
window.CurriculumBrowser = {
    loadStates,
    handleStateChange,
    handleSubjectChange,
    handleClassLevelChange,
    handleCurriculumChange,
    loadSubjectsForState,
    loadClassLevelsForStateAndSubject,
    loadCurriculaForStateSubjectAndClassLevel,
    buildCurriculumTree,
    displaySPARQLQuery,
    displayAPIResponse
};