workflow.js

// Initialize when the DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    // DOM elements
    const workflowBtn = document.getElementById('workflow-btn');
    const workflowSection = document.getElementById('workflow-section');
    const closeWorkflowBtn = document.getElementById('close-workflow-btn');
    const backToGalleryBtn = document.getElementById('back-to-gallery-btn');
    const backToComparisonBtn = document.getElementById('back-to-comparison-btn');
    const backToWorkflowInfoBtn = document.getElementById('back-to-workflow-info-btn');
    const backToToolsTableBtn = document.getElementById('back-to-tools-table-btn');
    const pipelineSelect = document.getElementById('pipeline-select');
    const workflowDisplay = document.getElementById('workflow-display');

    if (!workflowBtn || !workflowSection || !closeWorkflowBtn || !backToGalleryBtn || 
        !backToComparisonBtn || !backToWorkflowInfoBtn || !backToToolsTableBtn || !pipelineSelect || !workflowDisplay) {
        console.error('Required workflow elements not found');
        return;
    }

    // Initialize the workflow section
    function initWorkflowSection() {
        // Populate the pipeline select dropdown (alphabetically by name)
        const sortedOptions = [...preLoadedObjects].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }));
        sortedOptions.forEach(pipeline => {
            const option = document.createElement('option');
            option.value = pipeline.id;
            option.textContent = pipeline.name;
            pipelineSelect.appendChild(option);
        });

        // Add event listeners
        workflowBtn.addEventListener('click', showWorkflowSection);
        closeWorkflowBtn.addEventListener('click', hideWorkflowSection);
        pipelineSelect.addEventListener('change', handlePipelineSelection);
        
        // Back to Gallery button
        backToGalleryBtn.addEventListener('click', function(e) {
            e.preventDefault();
            hideWorkflowSection();
            if (typeof window.showGallery === 'function') {
                window.showGallery();
            } else {
                console.error('showGallery function not found');
            }
        });

        // Back to Comparison button
        backToComparisonBtn.addEventListener('click', function(e) {
            e.preventDefault();
            hideWorkflowSection();
            // Ensure other sections are hidden
            document.getElementById('selector-page-section').style.display = 'none';
            document.getElementById('tools-table-section').style.display = 'none';
            if (typeof window.showTable === 'function') {
                window.showTable();
            } else {
                console.error('showTable function not found');
            }
        });

        // Back to Tools Selector page button
        backToWorkflowInfoBtn.addEventListener('click', function(e) {
            e.preventDefault();
            hideWorkflowSection();
            const selectorSection = document.getElementById('selector-page-section');
            const selectorBtn = document.getElementById('selector-page-btn');
            if (selectorSection) {
                const mount = document.getElementById('selector-page-mount');
                if (mount && mount.innerHTML.trim() === '' && selectorBtn) {
                    // Trigger the existing loader to render the selector
                    selectorBtn.click();
                } else {
                    selectorSection.style.display = 'block';
                    document.body.style.overflow = 'hidden';
                }
            }
        });

        // Back to Tools Table button
        backToToolsTableBtn.addEventListener('click', function(e) {
            e.preventDefault();
            hideWorkflowSection();
            // Ensure other sections are hidden
            document.getElementById('selector-page-section').style.display = 'none';
            document.getElementById('table-section').style.display = 'none';
            if (typeof window.showToolsTable === 'function') {
                window.showToolsTable();
            } else {
                console.error('showToolsTable function not found');
            }
        });

        // Prevent event propagation to avoid triggering other sections
        workflowSection.addEventListener('click', (e) => {
            e.stopPropagation();
        });
    }

    // Show workflow section
    function showWorkflowSection(e) {
        e.preventDefault();
        e.stopPropagation();
        workflowSection.style.display = 'block';
        document.body.style.overflow = 'hidden';
        // Hide other sections if they're visible
        document.getElementById('gallery-section').style.display = 'none';
        document.getElementById('table-section').style.display = 'none';
        document.getElementById('workflow-info-section').style.display = 'none';
    }

    // Hide workflow section
    function hideWorkflowSection(e) {
        if (e) {
            e.preventDefault();
            e.stopPropagation();
        }
        workflowSection.style.display = 'none';
        document.body.style.overflow = 'auto';
        // Clear the workflow display
        workflowDisplay.innerHTML = '';
        // Reset the select dropdown
        pipelineSelect.value = '';
        // Ensure other sections are also hidden to prevent interference
        document.getElementById('gallery-section').style.display = 'none';
        document.getElementById('table-section').style.display = 'none';
        document.getElementById('workflow-info-section').style.display = 'none';
        document.getElementById('selector-page-section').style.display = 'none';
        document.getElementById('tools-table-section').style.display = 'none';
    }

    // Handle pipeline selection
    function handlePipelineSelection(event) {
        const selectedPipelineId = event.target.value;
        if (!selectedPipelineId) {
            workflowDisplay.innerHTML = '';
            return;
        }

        // Find the selected pipeline object using ID
        const pipeline = preLoadedObjects.find(p => p.id === selectedPipelineId);
        if (!pipeline) return;

        // Display the workflow
        displayWorkflow(pipeline);
    }

    // Display the workflow for a pipeline
    function displayWorkflow(pipeline) {
        // Create the workflow content
        const workflowContent = document.createElement('div');
        workflowContent.className = 'workflow-content';

        // Construct the workflow image path using pipeline ID
        const workflowImagePath = `assets/${pipeline.id}.png`;

        // Add pipeline name and description
        workflowContent.innerHTML = `
            <div class="workflow-header-content">
                <h3>${pipeline.name}</h3>
                <a href="${pipeline.url}" target="_blank" class="workflow-link">
                    <i class="fas fa-external-link-alt"></i>
                    Match me with ${pipeline.name}
                </a>
            </div>
            <p class="pipeline-description">${pipeline.details}</p>
            <div class="workflow-diagram">
                <img src="${workflowImagePath}" 
                     alt="${pipeline.name} workflow diagram" 
                     class="workflow-image"
                     onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'no-workflow-message\'><p>No workflow diagram available for this pipeline.</p><p>Please check the pipeline\'s documentation for workflow information.</p></div>';">
            </div>
        `;

        // Clear and update the workflow display
        workflowDisplay.innerHTML = '';
        workflowDisplay.appendChild(workflowContent);
    }

    // Initialize the workflow section
    initWorkflowSection();
});