<script>
    const courseRelationships = {
        'ENGL 101': {
            prereqs: [],
            unlocks: ['ENGL 102']
        },
        'MATH 111': {
            prereqs: [],
            unlocks: ['MATH 112' , 'PHYS 121']
        },
        'GENS 101': {
            prereqs: [],
            unlocks: []
        },
        'CHEM 115': {
            prereqs: [],
            unlocks: []
        },
        'GENS 100': {
            prereqs: [],
            unlocks: ['GENS 300']
        },
        'ENGL 102': {
            prereqs: ['ENGL 101'],
            unlocks: []
        },
        'MATH 112': {
            prereqs: ['MATH 111'],
            unlocks: ['MATH 243', 'MATH 204', 'PHYS 122', 'MATH 232', 'MATH 206']
        },
        'PHYS 121': {
            prereqs: ['MATH 111'],
            unlocks: ['PHYS 122']
        },
        'COSC 114': {
            prereqs: [],
            unlocks: ['COSC 202', 'CCEN 210']
        },
        'HUMA 107/108': {
            prereqs: [],
            unlocks: []
        },
        'HUMA 108': {
            prereqs: [],
            unlocks: []
        },
        'MATH 232': {
            prereqs: ['MATH 112'],
            unlocks: ['ELEN 320', 'ELEN 302', 'ELEN 221', 'ELEN 360']
        },
        'MATH 206': {
            prereqs: ['MATH 112'],
            unlocks: ['ELEN 222', 'ELEN 320']
        },
        'PHYS 122': {
            prereqs: ['PHYS 121', 'MATH 112'],
            unlocks: ['ELEN 221']
        },
        'MATH 204': {
            prereqs: ['MATH 112'],
            unlocks: ['ELEN 302']
        },
        'ELEN 221': {
            prereqs: ['PHYS 122', 'MATH 232'],
            unlocks: ['ELEN 222', 'ELEN 312']
        },
        'MATH 243': {
            prereqs: ['MATH 112'],
            unlocks: ['ELEN 360']
        },
        'CCEN 210': {
            prereqs: ['COSC 114'],
            unlocks: ['CCEN 316']
        },
        'ELEN 222': {
            prereqs: ['ELEN 221', 'MATH 206'],
            unlocks: ['ELEN 320', 'ELEN 302', ]
        },
        'ELEN 320': {
            prereqs: ['MATH 232', 'MATH 206', 'ELEN 222'],
            unlocks: ['ELEN 322']
        },
        'COSC 202': {
            prereqs: ['COSC 114'],
            unlocks: []
        },
        'ELEN 302': {
            prereqs: ['ELEN 222', 'MATH 232', 'MATH 204'],
            unlocks: ['ELEN 402', 'ELEN 323', 'ELEN 360']
        },
        'CCEN 316': {
            prereqs: ['CCEN 210'],
            unlocks: ['ELEN 497']
        },
        'ELEN 312': {
            prereqs: ['ELEN 221'],
            unlocks: ['ELEN 497']
        },
        'ELEN 323': {
            prereqs: ['ELEN 302'],
            unlocks: []
        },
        'ELEN 322': {
            prereqs: ['ELEN 320'],
            unlocks: ['ELEN 421']
        },
        'ELEN 360': {
            prereqs: ['MATH 243', 'MATH 232', 'ELEN 302'],
            unlocks: []
        },
        'BUSS 322': {
            prereqs: [],
            unlocks: []
        },
        'ELEN 399': {
            prereqs: ['GENS 300'],
            unlocks: []
        },
        'GENS 300': {
            prereqs: ['GENS 100'],
            unlocks: ['GENS 400', 'ELEN 399']
        },
        'Technical Elective': {
            prereqs: [],
            unlocks: []
        },
        'ELEN 402': {
            prereqs: ['ELEN 302'],
            unlocks: []
        },
        'BUSS XXX': {
            prereqs: [],
            unlocks: []
        },
        'ELEN 421': {
            prereqs: ['ELEN 322'],
            unlocks: []
        },
        'ELEN 497': {
            prereqs: ['CCEN 316', 'ELEN 312'],
            unlocks: ['ELEN 498']
        },
        'GENS 400': {
            prereqs: ['GENS 300'],
            unlocks: []
        },
        'ELEN 498': {
            prereqs: ['ELEN 497'],
            unlocks: []
        }
    };

    // courses
    const curriculum = {
        Freshman: {
            Fall: [
                { code: 'GENS 101', name: 'Grand Challenges', credits: 4 },
                { code: 'ENGL 101', name: 'Academic English I', credits: 3 },
                { code: 'MATH 111', name: 'Calculus I', credits: 4 },
                { code: 'CHEM 115', name: 'General Chemistry I', credits: 4 },
                { code: 'GENS 100', name: 'Academic Development & Success', credits: 1 }
            ],
            Spring: [
                { code: 'ENGL 102', name: 'Academic English II', credits: 3 },
                { code: 'MATH 112', name: 'Calculus II', credits: 4 },
                { code: 'PHYS 121', name: 'University Physics I', credits: 4 },
                { code: 'COSC 114', name: 'Introduction to Computing Using Python', credits: 4 }
            ],
            Summer: [
                { code: 'HUMA 107/108', name: 'Introduction to Arabic and Islamic Heritage/Arabic and Islamic Heritage', credits: 3 },
            ]
        },
    
        Sophomore: {
            Fall: [
                { code: 'ELEN 221', name: '(Can take it with prereqs.) Electric Circuits I', credits: 4 },
                { code: 'MATH 204', name: 'Linear Algebra', credits: 3 },
                { code: 'PHYS 122', name: 'University Physics II', credits: 4 },
                { code: 'MATH 232', name: 'Engineering Mathematics', credits: 3 },
                { code: 'COSC 202', name: 'Data Science & AI', credits: 3 }
                
                
                
                
            ],
            Spring: [
                { code: 'ELEN 222', name: 'Electric Circuits II', credits: 3 },
                { code: 'CCEN 210', name: 'Digital Logic Design', credits: 4 },
                { code: 'MATH 243', name: 'Probability & Statistical Inference', credits: 3 },
                { code: 'MATH 206', name: '(Can take it with unlocks) Differential Equations', credits: 3 },
                { code: 'ELEN 320', name: 'Applied Electromagnetics', credits: 3 }
            ],
            Summer: [
            ]
        },
    
        Junior: {
            Fall: [
                { code: 'BUSS 322', name: 'Fundamentals of Innovation and Entrepreneurship', credits: 3 },
                { code: 'ELEN 302', name: 'Signals and Systems', credits: 3 },
                { code: 'ELEN 312', name: 'Electronic Circuits and Devices', credits: 4 },
                { code: 'ELEN 322', name: 'Electrical Machines', credits: 4 },
                { code: 'GENS 300', name: 'Career Preparation', credits: 1 },
            ],
            Spring: [
                { code: 'CCEN 316', name: 'Microprocessor Systems', credits: 4 },
                { code: 'ELEN 323', name: 'Feedback Control Systems', credits: 4 },
                { code: 'ELEN 360', name: 'Communication Systems', credits: 4 },
                { code: 'ELEN 421', name: 'Power System Analysis', credits: 3 },
            ],
            Summer: [
                { code: 'ELEN 399', name: 'Electrical Engineering Internship', credits: 1 }
            ]
        },
    
        Senior: {
            Fall: [
                { code: 'HUMA 105/106', name: 'UAE studies', credits: 3 },
                { code: 'ELEN 497', name: 'Senior Design Project I', credits: 3 },
                { code: 'ELEN 402', name: 'Digital Signal Processing', credits: 3 },
                { code: 'Technical Elective', name: 'Technical Elective', credits: 3 },
                { code: 'Technical Elective', name: 'Technical Elective', credits: 3 },
                { code: 'GENS 400', name: 'Enhancing Employability and Job Readiness', credits: 1 }
            ],
            Spring: [
                { code: 'BUSS XXX', name: 'Business Elective', credits: 3 },
                { code: 'ELEN 498', name: 'Senior Design Project II', credits: 3 },
                { code: 'Technical Elective', name: 'Technical Elective', credits: 3 },
                { code: 'Technical Elective', name: 'Technical Elective', credits: 3 },
                { code: 'Technical Elective', name: 'Technical Elective', credits: 3 },
                
            ],
            Summer: [
                { code: 'ELEN 399', name: 'Electrical Engineering Internship', credits: 1 },
            ]
        }
    };
    
    
    let hoveredCode = null;
    let clickedCode = null;
    
    function renderApp() {
        const app = document.getElementById('app');
        // Clear
        while (app.firstChild) {
            app.removeChild(app.firstChild);
        }
    
        const yearGrid = document.createElement('div');
        yearGrid.className = "year-grid";
        app.appendChild(yearGrid);
    
        // MOUSEMOVE => handle hover if not locked
        yearGrid.addEventListener('mousemove', e => {
            if (!clickedCode) {
                const card = e.target.closest('.course-card');
                if (card) {
                    const code = card.getAttribute('data-code');
                    if (code !== hoveredCode) {
                        hoveredCode = code;
                        renderApp();
                    }
                } else if (hoveredCode) {
                    hoveredCode = null;
                    renderApp();
                }
            }
        });
    
        // CLICK to toggle highlight or clear if empty
        yearGrid.addEventListener('click', e => {
            const card = e.target.closest('.course-card');
            if (card) {
                const code = card.getAttribute('data-code');
                if (clickedCode === code) {
                    clickedCode = null;
                    hoveredCode = null;
                } else {
                    clickedCode = code;
                }
            } else {
                // empty space => clear
                clickedCode = null;
                hoveredCode = null;
            }
            renderApp();
        });
    
        // Build each year block
        Object.entries(curriculum).forEach(([yearName, terms]) => {
            const yearDiv = document.createElement('div');
            yearDiv.className = "year-block";
    
            const yearTitle = document.createElement('h2');
            yearTitle.className = "year-title";
            yearTitle.textContent = yearName;
            yearDiv.appendChild(yearTitle);
    
            // terms
            Object.entries(terms).forEach(([termName, courses]) => {
                const termDiv = document.createElement('div');
                termDiv.className = "term";
    
                const termTitle = document.createElement('h3');
                termTitle.className = "term-title";
                termTitle.textContent = termName;
                termDiv.appendChild(termTitle);
    
                const courseGrid = document.createElement('div');
                courseGrid.className = "course-grid";
    
                courses.forEach(course => {
                    const cardDiv = document.createElement('div');
                    cardDiv.className = "course-card";
                    cardDiv.setAttribute('data-code', course.code);
    
                    const isSelected = getSelectedCode() === course.code;
                    const highlightClasses = buildHighlightClasses(course.code, isSelected);
                    highlightClasses.forEach(c => cardDiv.classList.add(c));
    
                    // content
                    const codeDiv = document.createElement('div');
                    codeDiv.className = "course-code";
                    codeDiv.textContent = course.code;
    
                    const nameDiv = document.createElement('div');
                    nameDiv.className = "course-name";
                    nameDiv.textContent = course.name;
    
                    const creditsDiv = document.createElement('div');
                    creditsDiv.className = "course-credits";
                    creditsDiv.textContent = course.credits + " cr";
    
                    cardDiv.appendChild(codeDiv);
                    cardDiv.appendChild(nameDiv);
                    cardDiv.appendChild(creditsDiv);
    
                    courseGrid.appendChild(cardDiv);
                });
    
                termDiv.appendChild(courseGrid);
                yearDiv.appendChild(termDiv);
            });
    
            yearGrid.appendChild(yearDiv);
        });
    
        updateLegend();
    }
    
    function getSelectedCode() {
        return clickedCode || hoveredCode;
    }
    
    function buildHighlightClasses(courseCode, isSelected) {
        const classes = ["bg-white"];
        const sc = getSelectedCode();
        if (sc) {
            if (isSelected) {
                classes.push("bg-indigo-100", "ring-2-indigo");
            } else if (courseRelationships[sc]) {
                const { prereqs, unlocks } = courseRelationships[sc];
                if (prereqs.includes(courseCode)) {
                    classes.push("bg-amber-50", "ring-2-amber");
                } else if (unlocks.includes(courseCode)) {
                    classes.push("bg-emerald-50", "ring-2-emerald");
                }
            }
        }
        return classes;
    }
    
    function updateLegend() {
        const legend = document.getElementById('legend');
        const legendSelected = document.getElementById('legend-selected');
        const prereqCountSpan = document.getElementById('prereq-count');
        const unlockCountSpan = document.getElementById('unlock-count');
        const sc = getSelectedCode();
        
        if (sc && courseRelationships[sc]) { // Ensure the course exists in relationships
            const prereqCount = courseRelationships[sc].prereqs.length;
            const unlockCount = courseRelationships[sc].unlocks.length;
            
            legendSelected.textContent = `Selected: ${sc}`;
            prereqCountSpan.textContent = prereqCount;
            unlockCountSpan.textContent = unlockCount;
        } else {
            legendSelected.textContent = "Hover over any course";
            prereqCountSpan.textContent = '0';
            unlockCountSpan.textContent = '0';
        }
        
        // Show the legend
        legend.classList.remove('hidden');
    }
    
    // Initial
    renderApp();
</script>
