<script>
  const courseRelationships = {
    //     First Year
    'COSC 114': {
      prereqs: [],
      unlocks: ['COSC 101', 'COSC 230', 'COSC 202']
    },
    'COSC 101': {
      prereqs: ['COSC 114'],
      unlocks: ['COSC 201', 'COSC 301']
    },
    'MATH 111': {
      prereqs: [],
      unlocks: ['MATH 112', 'PHYS 121']
    },
    'MATH 112': {
      prereqs: ['MATH 111'],
      unlocks: ['MATH 204', 'MATH 232', 'MATH 242']
    },
    'ENGL 101': {
      prereqs: [],
      unlocks: ['ENGL 102'] 
    },
    'ENGL 102': {
      prereqs: ['ENGL 101'],
      unlocks: []
    },
    'CHEM 115': {
      prereqs: [],
      unlocks: []
    },
    'PHYS 121': {
      prereqs: ['MATH 111'],
      unlocks: []
    },
    'GENS 101': {
      prereqs: [],
      unlocks: []
    },
    'GENS 100': {
      prereqs: [],
      unlocks: ['GENS 300']
    },
  
    'HUMA XXX (Islamic/Arabic)': {
      prereqs: [],
      unlocks: []
    },
  
    //    Second Year
    'COSC 230': {
      prereqs: ['COSC 114'],
      unlocks: ['COSC 310', 'COSC 336', 'COSC 330'] 
    },
    'COSC 201': {
      prereqs: ['COSC 101'],
      unlocks: ['COSC 354', 'CCEN 356']
    },
    'MATH 204': {
      prereqs: ['MATH 112'],
      unlocks: ['MATH 214']
    },
    'MATH 234': {
      prereqs: ['MATH 112'],
      unlocks: ['COSC 301']
    },
    'MATH 242': {
      prereqs: ['MATH 112'],
      unlocks: ['MATH 214']
    },
    'MATH 232': {
      prereqs: ['COSC 230'],
      unlocks: []
    },
    'MATH 214': {
      prereqs: ['MATH 242', 'MATH 204', 'COSC 114'],
      unlocks: []
    },
    'COSC 336': {
      prereqs: ['COSC 230'],
      unlocks: ['COSC 444'] 
    },
    'COSC 310': {
      prereqs: ['COSC 230'],
      unlocks: ['COSC 312'] 
    },
    'COSC 202': {
      prereqs: ['COSC 114'],
      unlocks: []
    },
    'HUMA 105/106': {
      prereqs: [],
      unlocks: []
    },
  
    //     Third Year
    'BUSS 322': {
      prereqs: [],
      unlocks: []
    },
    'COSC 301': {
      prereqs: ['COSC 101', 'MATH 234'],
      unlocks: ['COSC 312', 'COSC 320']
    },
    'COSC 354': {
      prereqs: ['COSC 201'],
      unlocks: ['COSC 340']
    },
    'COSC 320': {
      prereqs: ['COSC 301'],
      unlocks: [] 
    },
    'COSC 312': {
      prereqs: ['COSC 310', 'COSC 301'],
      unlocks: ['COSC 497']
    },
    'COSC 330': {
      prereqs: ['COSC 230'],
      unlocks: []
    },
    'COSC 340': {
      prereqs: ['COSC 354'],
      unlocks: []
    },
    'CCEN 356': {
      prereqs: ['COSC 201'],
      unlocks: []
    },
    'GENS 300': {
      prereqs: ['GENS 100'],
      unlocks: ['GENS 400']
    },
    'COSC 444': {
      prereqs: ['COSC 336'],
      unlocks: []
    },
  
    //    Fourth Year
    'COSC 497': {
      prereqs: ['COSC 312'],
      unlocks: ['COSC 498'] 
    },
    'COSC 498': {
      prereqs: ['COSC 497'],
      unlocks: []
    },
    'HUMA/BUSS XXX': {
      prereqs: [],
      unlocks: []
    },
    'GENS 400': {
      prereqs: ['GENS 300'],
      unlocks: []
    },
    'Technical Elective': {
      prereqs: [],
      unlocks: []
    },
    'COSC 399': {
      prereqs: [],
      unlocks: []
    }
  };
  
  // courses
  const curriculum = {
    Freshman: {
      Fall: [
        { code: 'ENGL 101', name: 'Academic English I', credits: 3 },
        { code: 'MATH 111', name: 'Calculus I', credits: 4 },
        { code: 'GENS 101', name: 'Grand Challenges', 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/BUSS XXX',
          name: 'Any HUMA/BUSS Elective',
          credits: 3
        }
      ]
    },
  
    Sophomore: {
      Fall: [
        { code: 'COSC 101', name: 'Foundations of Computer Science', credits: 3 },
        { code: 'MATH 204', name: 'Linear Algebra', credits: 3 },
        {
          code: 'MATH 242',
          name: 'Introduction to Probability and Statistics',
          credits: 3
        },
        { code: 'COSC 202', name: 'Data Science & AI', credits: 3 },
        { code: 'COSC 230', name: 'Object-Oriented Programming', credits: 4 }
      ],
      Spring: [
        {
          code: 'COSC 201',
          name: 'Computer Systems Organization',
          credits: 3
        },
        {
          code: 'MATH 214',
          name: 'Mathematical and Statistical Software',
          credits: 3
        },
        { code: 'MATH 232', name: 'Engineering Mathematics', credits: 3 },
        { code: 'MATH 234', name: 'Discrete Mathematics', credits: 3 },
        {
          code: 'COSC 310',
          name: 'Data Structure and Algorithms',
          credits: 3
        }
      ],
      Summer: [
        {
          code: 'HUMA 105/106',
          name: 'UAE Studies Elective',
          credits: 3
        }
      ]
    },
  
    Junior: {
      Fall: [
        {
          code: 'BUSS 322',
          name: 'Fundamentals of Innovation and Entrepreneurship',
          credits: 3
        },
        {
          code: 'COSC 301',
          name: 'Automata, Computability and Complexity',
          credits: 3
        },
  
        {
          code: 'COSC 336',
          name: 'Introduction to Software Engineering',
          credits: 3
        },
  
        {
          code: 'COSC 354',
          name: 'Operating Systems',
          credits: 3
        },
  
        {
          code: 'CCEN 356',
          name: 'Computer Networks',
          credits: 4
        },
  
  
  
      ],
      Spring: [
        {
          code: 'COSC 312',
          name: 'Design and Analysis of Algorithms',
          credits: 3
        },
  
        {
          code: 'COSC 320',
          name: 'Principles of Programming Languages',
          credits: 3
        },
  
        {
          code: 'COSC 330',
          name: 'Introduction to Artificial Intelligence',
          credits: 3
        },
  
        {
          code: 'COSC 340',
          name: 'Introduction to Computer Security',
          credits: 3
        },
  
        {
          code: 'GENS 300',
          name: 'Career Preparation',
          credits: 1
        }
  
      ],
      Summer: [
  
        {
          code: 'COSC 399',
          name: 'CS Internship',
          credits: 1
        }
      ]
    },
  
    Senior: {
      Fall: [
        {
          code: 'COSC 497',
          name: 'Senior Design Project I',
          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
        },
        {
          code: 'COSC 444',
          name: 'Database Systems',
          credits: 3
        }

      ],
      Spring: [
        {
          code: 'COSC 498',
          name: 'Senior Design Project II',
          credits: 3
        },
        {
          code: 'HUMA/BUSS XXX',
          name: 'Any HUMA/BUSS Elective',
          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
        },
        {
          code: 'GENS 400',
          name: 'Enhancing Employability & Job Readiness',
          credits: 1
        }
      ],
      Summer: [
        {
          code: 'COSC 399',
          name: 'CS 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 space
    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>