TimelineVisualization.tsx

import React, { useEffect, useRef, forwardRef, useImperativeHandle, useState, useCallback } from 'react';
import * as d3 from 'd3';
import { Course, CourseCredit, OptionGroup, Period, academicPeriods } from '@/types/course';
import kthColors from '@/data/kth-colors.json';
import type { ProgramCosmetics } from '@/types/cosmetics';

type Lang = 'sv' | 'en';
type CourseOrOptionGroup = Course | OptionGroup;

interface TimelineVisualizationProps {
  courses: CourseOrOptionGroup[];
  language?: Lang;
  programName?: string;
  programCode?: string;
  studyplanUrl?: string;
  programComment?: string;
  cosmetics?: ProgramCosmetics | null;
}

// Type guard to distinguish between Course and OptionGroup
const isCourse = (item: CourseOrOptionGroup): item is Course => {
  return 'code' in item && !('type' in item);
};

const isOptionGroup = (item: CourseOrOptionGroup): item is OptionGroup => {
  return 'type' in item && item.type === 'optionGroup';
};

export interface TimelineVisualizationHandle {
  exportChart: (format: 'png' | 'svg' | 'pdf', options?: { includeLegend?: boolean }) => Promise<void>;
}

// Centralized styling constants (module-level so they're stable across renders)
const STYLE = {
  fontFamily: "Figtree, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, 'Apple Color Emoji', 'Segoe UI Emoji'",
  legend: {
    width: 170,
    offsetX: 85,
    offsetY: 30,
    background: 'rgba(255,255,255,0.95)',
    borderColor: '#e5e7eb',
    requires: 'Särskild behörighet',
    requiredFor: 'Krävs för',
    textColor: kthColors.KthBlue?.HEX || '#004791'
  }
} as const;

// Default color for courses not in any cosmetics group
const defaultColor = { fill: kthColors.KthHeaven?.HEX || '#6298D2', stroke: kthColors.KthBlue?.HEX || '#004791', text: kthColors.KthLightBlue?.HEX || '#DEF0FF' };

const getColorForFamily = (family: 'blue' | 'green' | 'turquoise' | 'brick' | 'yellow') => {
  const families = {
    blue: { fill: kthColors.KthBlue?.HEX || '#004791', stroke: kthColors.KthMarine?.HEX || '#000061', text: kthColors.KthLightBlue?.HEX || '#DEF0FF' },
    green: { fill: kthColors.KthGreen?.HEX || '#4DA061', stroke: kthColors.KthDarkGreen?.HEX || '#0D4A21', text: kthColors.KthLightGreen?.HEX || '#C7EBBA' },
    turquoise: { fill: kthColors.KthTurquoise?.HEX || '#339C9C', stroke: kthColors.KthDarkTurquoise?.HEX || '#1C434C', text: kthColors.KthLightTurquoise?.HEX || '#B2E0E0' },
    brick: { fill: kthColors.KthBrick?.HEX || '#E86A58', stroke: kthColors.KthDarkBrick?.HEX || '#78001A', text: kthColors.KthLightBrick?.HEX || '#FFCCC4' },
    yellow: { fill: kthColors.KthYellow?.HEX || '#FFBE00', stroke: kthColors.KthDarkYellow?.HEX || '#A65900', text: kthColors.KthLightYellow?.HEX || '#FFF0B0' }
  };
  return families[family];
};

const getFamilyVariants = (family: 'blue' | 'green' | 'turquoise' | 'brick' | 'yellow') => {
  if (family === 'blue') {
    return [
      { fill: kthColors.KthLightBlue?.HEX || '#6298D2', stroke: kthColors.KthMarine?.HEX || '#000061', text: kthColors.KthMarine?.HEX || '#000061' },
    ];
  }
  if (family === 'green') {
    return [
      { fill: kthColors.KthLightGreen?.HEX || '#C7EBBA', stroke: kthColors.KthDarkGreen?.HEX || '#0D4A21', text: kthColors.KthLightGreen?.HEX || '#C7EBBA' },
    ];
  }
  if (family === 'turquoise') {
    return [
      { fill: kthColors.KthLightTurquoise?.HEX || '#B2E0E0', stroke: kthColors.KthDarkTurquoise?.HEX || '#1C434C', text: kthColors.KthLightTurquoise?.HEX || '#B2E0E0' },
    ];
  }
  if (family === 'brick') {
    return [
      { fill: kthColors.KthLightBrick?.HEX || '#FFCCC4', stroke: kthColors.KthDarkBrick?.HEX || '#78001A', text: kthColors.KthDarkBrick?.HEX || '#78001A' },
    ];
  }
  // yellow
  return [
    { fill: kthColors.KthLightYellow?.HEX || '#FFF0B0', stroke: kthColors.KthDarkYellow?.HEX || '#A65900', text: kthColors.KthDarkYellow?.HEX || '#A65900' },
  ];
};

// Translations (static — module-level so they're stable across renders)
const tr = {
  sv: {
    legend: {
      exams: 'Tentor',
      reexams: 'Omtentor',
      prerequisitesCompleted: 'Kräver avklarad kurs',
      prerequisitesParticipation: 'Kräver deltagande',
      courses: 'Kurser',
      studyPeriods: 'Läsperioder',
      examPeriods: 'Tentaperioder',
      reexamPeriods: 'Omtentaperioder'
    },
    examPeriodLabel: 'Tentaperiod',
    reexamPeriodLabel: 'Omtentaperiod',
    period: 'Läsperiod',
    start: 'Start',
    lectureEnd: 'Föreläsningar slutar',
    end: 'Slut',
    exam: 'Tenta',
    reexam: 'Omtenta',
    year: 'År',
    credits: 'hp',
    teacher: 'Lärare',
    viewCourse: 'kurshemsida',
    viewSchedule: 'schema',
    requires: 'Särskild behörighet',
    requiredFor: 'Krävs för',
    totalCredits: 'Totalt',
    options: 'Alternativ',
    months: ['jan','feb','mar','apr','maj','jun','jul','aug','sep','okt','nov','dec']
  },
  en: {
    legend: {
      exams: 'Exams',
      reexams: 'Re-exams',
      prerequisitesCompleted: 'Requires completion',
      prerequisitesParticipation: 'Requires participation',
      courses: 'Courses',
      studyPeriods: 'Study periods',
      examPeriods: 'Exam periods',
      reexamPeriods: 'Re-exam periods'
    },
    examPeriodLabel: 'Exam period',
    reexamPeriodLabel: 'Re-exam period',
    period: 'Study period',
    start: 'Start',
    lectureEnd: 'Lecture end',
    end: 'End',
    exam: 'Exam',
    reexam: 'Re-exam',
    year: 'Year',
    credits: 'ECTS',
    teacher: 'Teacher',
    viewCourse: 'course webpage',
    viewSchedule: 'schedule',
    requires: 'Requires',
    requiredFor: 'Required for',
    totalCredits: 'Total',
    options: 'Options',
    months: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
  }
} as const;

const TimelineVisualization = forwardRef(function TimelineVisualization({ courses, language = 'sv', programName, programCode, studyplanUrl, programComment, cosmetics }: TimelineVisualizationProps, ref: React.ForwardedRef<TimelineVisualizationHandle>) {
  const containerRef = useRef<HTMLDivElement>(null);
  const svgRef = useRef<SVGSVGElement>(null);
  // Preserve the initial chart height to keep a stable px-per-ECTS baseline across re-renders/toggles
  const initialChartHeightRef = useRef<number | null>(null);

  // Year focus state for highlighting a whole year
  const [focusYear, setFocusYear] = useState<number | null>(null);

  // Option group modal state
  const [selectedOptionGroup, setSelectedOptionGroup] = useState<OptionGroup | null>(null);
  
  // Track which option is currently highlighted in the modal
  const [highlightedOptionCode, setHighlightedOptionCode] = useState<string | null>(null);
  
  // Track user's selection: which course was chosen for each option group
  // Maps option group name -> selected course code
  const [selectedOptionPerGroup, setSelectedOptionPerGroup] = useState<Record<string, string>>({});

  // When the modal opens/closes, reset or initialize highlighting.
  // selectedOptionPerGroup is intentionally excluded: we only want to react to the
  // modal open/close event, not to individual option selections within the modal.
  useEffect(() => {
    if (selectedOptionGroup) {
      const currentSelection = selectedOptionPerGroup[selectedOptionGroup.name];
      setHighlightedOptionCode(currentSelection || null);
    } else {
      setHighlightedOptionCode(null);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedOptionGroup]);

  // Marker visual parameters - centralized for consistency
  const EXAM_MARKER_RADIUS = 4;
  const EXAM_MARKER_STROKE_WIDTH = 1;
  const REEXAM_MARKER_RADIUS = 4;
  const REEXAM_MARKER_STROKE_WIDTH = 1;

  // Per-course color selection within a cosmetics group (depends only on cosmetics prop)
  const getCourseColors = useCallback((course: Course) => {
    const group = cosmetics?.courseToGroup.get(course.code);
    if (!group) return defaultColor;
    const variants = getFamilyVariants(group.colorFamily);
    const idxInGroup = (group.courses || []).findIndex(c => c === course.code);
    const baseIndex = idxInGroup >= 0 ? idxInGroup : Array.from(course.code).reduce((s, ch) => s + ch.charCodeAt(0), 0);
    const variant = variants[baseIndex % variants.length];
    return variant || getColorForFamily(group.colorFamily);
  }, [cosmetics]);

  // expose methods to parent via ref
  useImperativeHandle(ref, () => ({
    exportChart: async (format: 'png' | 'svg' | 'pdf', options?: { includeLegend?: boolean }) => {
      if (!svgRef.current) return;
      const svgEl = svgRef.current;

      // Measure the on-screen SVG in CSS pixels
      const svgRect = svgEl.getBoundingClientRect();
      const exportWidth = Math.max(1, Math.round(svgRect.width));
      const exportHeight = Math.max(1, Math.round(svgRect.height));

      // Clone the SVG so we don't change the live DOM
      const cloned = svgEl.cloneNode(true) as SVGSVGElement;
      cloned.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
      // Set explicit pixel dimensions on the cloned SVG so the rasterizer uses them
      cloned.setAttribute('width', String(exportWidth));
      cloned.setAttribute('height', String(exportHeight));
      cloned.setAttribute('viewBox', `0 0 ${exportWidth} ${exportHeight}`);
      // Ensure font family is applied for all text in export
      cloned.setAttribute('style', `font-family: ${STYLE.fontFamily};`);
      
      try {
        const styleEl = document.createElementNS('http://www.w3.org/2000/svg', 'style');
        styleEl.textContent = `* { font-family: ${STYLE.fontFamily}; }`;
        cloned.insertBefore(styleEl, cloned.firstChild);

        // Extract font families from the font stack and try to inline web fonts
        // Parse font families from STYLE.fontFamily (e.g., "Figtree, ui-sans-serif, system-ui, ...")
        const fontFamilies = STYLE.fontFamily.split(',').map(f => f.trim().replace(/['"]/g, ''));
        
        // Try to fetch and embed web fonts (currently supports Google Fonts)
        for (const fontFamily of fontFamilies) {
          // Skip generic and system fonts
          if (['ui-sans-serif', 'system-ui', 'sans-serif', 'serif', 'monospace', '-apple-system', 
               'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'Noto Sans'].some(s => fontFamily.includes(s))) {
            continue;
          }
          
          try {
            // Try to fetch from Google Fonts (works for common web fonts)
            const fontUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontFamily)}:wght@300;400;500;600;700;800;900&display=swap`;
            const cssResp = await fetch(fontUrl);
            
            if (cssResp.ok) {
              const cssText = await cssResp.text();
              
              // Match all font URLs (for different weights)
              const matches = cssText.matchAll(/url\((https:[^)]+\.(?:woff2|woff|ttf))\)/g);
              const fontUrls = Array.from(matches).map(m => m[1]);
              
              if (fontUrls.length > 0) {
                // Fetch and embed all font files
                for (const fontFileUrl of fontUrls) {
                  const fontResp = await fetch(fontFileUrl);
                  
                  if (fontResp.ok) {
                    const buf = await fontResp.arrayBuffer();
                    const u8 = new Uint8Array(buf);
                    let binary = '';
                    for (let i = 0; i < u8.length; i++) binary += String.fromCharCode(u8[i]);
                    const fontBase64 = btoa(binary);
                    
                    // Determine format from URL
                    const format = fontFileUrl.includes('.woff2') ? 'woff2' : 
                                   fontFileUrl.includes('.woff') ? 'woff' : 'truetype';
                    
                    const fontStyle = document.createElementNS('http://www.w3.org/2000/svg', 'style');
                    fontStyle.textContent = `@font-face { font-family: '${fontFamily}'; src: url(data:font/${format};base64,${fontBase64}) format('${format}'); font-weight: 100 900; font-style: normal; }`;
                    cloned.insertBefore(fontStyle, cloned.firstChild);
                  }
                }
                break; // Successfully embedded a font, no need to try others
              }
            }
          } catch {
            // Continue to next font family if this one fails
          }
        }
      } catch {}

      // Optionally add an SVG legend into the cloned SVG for export
      if (options?.includeLegend) {
        try {
          const NS = 'http://www.w3.org/2000/svg';
          const legendPadding = 8;
          const itemGap = 8;
          const itemHeight = 18;
          const items = [
            { key: tr[language].legend.exams, type: 'exam', active: layers.exams },
            { key: tr[language].legend.reexams, type: 'reexam', active: layers.reexams },
            { key: tr[language].legend.prerequisitesCompleted, type: 'prereqCompleted', active: layers.prereqCompleted },
            { key: tr[language].legend.prerequisitesParticipation, type: 'prereqParticipated', active: layers.prereqParticipation },
            { key: tr[language].legend.courses, type: 'course', active: layers.courseBars },
            { key: tr[language].legend.studyPeriods, type: 'study', active: layers.studyPeriods },
            { key: tr[language].legend.examPeriods, type: 'examPeriod', active: layers.examPeriods },
            { key: tr[language].legend.reexamPeriods, type: 'reexamPeriod', active: layers.reexamPeriods },
          ];

          // container group
          const legendG = document.createElementNS(NS, 'g');
          // estimate width
          const legendWidth = STYLE.legend.width;
          const legendHeight = legendPadding*2 + items.length * (itemHeight + itemGap) - itemGap;
          const svgW = exportWidth;
          const svgH = exportHeight;
          const legendX = svgW - legendWidth - STYLE.legend.offsetX;
          const legendY = svgH - legendHeight - STYLE.legend.offsetY;
          legendG.setAttribute('transform', `translate(${legendX},${legendY})`);

          // background
          const bg = document.createElementNS(NS, 'rect');
          bg.setAttribute('x', '0');
          bg.setAttribute('y', '0');
          bg.setAttribute('width', String(legendWidth));
          bg.setAttribute('height', String(legendHeight));
          bg.setAttribute('rx', '8');
          bg.setAttribute('ry', '8');
          bg.setAttribute('fill', 'white');
          bg.setAttribute('stroke', STYLE.legend.borderColor);
          legendG.appendChild(bg);

          // add rows
          items.forEach((item, idx) => {
            const rowG = document.createElementNS(NS, 'g');
            rowG.setAttribute('transform', `translate(${legendPadding},${legendPadding + idx * (itemHeight + itemGap)})`);
            rowG.setAttribute('opacity', item.active ? '1' : '0.4');

            // icon
            if (item.type === 'exam') {
              const c = document.createElementNS(NS, 'circle');
              c.setAttribute('cx', '9');
              c.setAttribute('cy', String(itemHeight/2));
              c.setAttribute('r', '6');
              c.setAttribute('fill', kthColors.KthLightBrick?.HEX || '#FFCCC4');
              c.style.stroke = kthColors.KthDarkBrick?.HEX || '#B35A4A';
              c.style.strokeWidth = '1.5';
              rowG.appendChild(c);
            } else if (item.type === 'reexam') {
              const c = document.createElementNS(NS, 'circle');
              c.setAttribute('cx', '9');
              c.setAttribute('cy', String(itemHeight/2));
              c.setAttribute('r', '6');
              c.setAttribute('fill', kthColors.KthLightBrick?.HEX || '#FFCCC4');
              c.style.stroke = kthColors.KthDarkBrick?.HEX || '#B35A4A';
              c.style.strokeWidth = '1.5';
              c.style.strokeDasharray = '3 2';
              rowG.appendChild(c);
            } else if (item.type === 'prereqCompleted') {
              const line = document.createElementNS(NS, 'line');
              line.setAttribute('x1', '0');
              line.setAttribute('y1', String(itemHeight/2));
              line.setAttribute('x2', '18');
              line.setAttribute('y2', String(itemHeight/2));
              line.setAttribute('stroke', '#999');
              line.setAttribute('stroke-width', '1.5');
              rowG.appendChild(line);
            } else if (item.type === 'prereqParticipated') {
              const line = document.createElementNS(NS, 'line');
              line.setAttribute('x1', '0');
              line.setAttribute('y1', String(itemHeight/2));
              line.setAttribute('x2', '18');
              line.setAttribute('y2', String(itemHeight/2));
              line.setAttribute('stroke', kthColors.KthBlue?.HEX || '#004791');
              line.setAttribute('stroke-width', '1.5');
              line.setAttribute('stroke-dasharray', '4,3');
              rowG.appendChild(line);
            } else if (item.type === 'course') {
              const r = document.createElementNS(NS, 'rect');
              r.setAttribute('x', '0');
              r.setAttribute('y', String((itemHeight-12)/2));
              r.setAttribute('width', '18');
              r.setAttribute('height', '12');
              r.setAttribute('fill', kthColors.KthHeaven?.HEX || '#6298D2');
              r.setAttribute('stroke', 'rgba(0,0,0,0.06)');
              rowG.appendChild(r);
            } else if (item.type === 'study') {
              const r = document.createElementNS(NS, 'rect');
              r.setAttribute('x', '0');
              r.setAttribute('y', String((itemHeight-12)/2));
              r.setAttribute('width', '18');
              r.setAttribute('height', '12');
              r.setAttribute('fill', kthColors.KthSand?.HEX || '#f3f4f6');
              r.setAttribute('stroke', 'rgba(0,0,0,0.06)');
              rowG.appendChild(r);
            } else if (item.type === 'examPeriod') {
              const r = document.createElementNS(NS, 'rect');
              r.setAttribute('x', '0');
              r.setAttribute('y', String((itemHeight-12)/2));
              r.setAttribute('width', '18');
              r.setAttribute('height', '12');
              r.setAttribute('fill', (kthColors.KthLightBlue?.HEX || '#DEF0FF'));
              r.setAttribute('stroke', 'rgba(0,0,0,0.06)');
              rowG.appendChild(r);
            } else if (item.type === 'reexamPeriod') {
              const r = document.createElementNS(NS, 'rect');
              r.setAttribute('x', '0');
              r.setAttribute('y', String((itemHeight-12)/2));
              r.setAttribute('width', '18');
              r.setAttribute('height', '12');
              r.setAttribute('fill', kthColors.KthLightGray?.HEX || '#eee');
              r.setAttribute('stroke', 'rgba(0,0,0,0.06)');
              rowG.appendChild(r);
            }

            // label
            const text = document.createElementNS(NS, 'text');
            text.setAttribute('x', '26');
            text.setAttribute('y', String(itemHeight/2 + 4));
            text.setAttribute('fill', STYLE.legend.textColor);
            text.setAttribute('font-size', '12');
            text.textContent = item.key;
            rowG.appendChild(text);

            legendG.appendChild(rowG);
          });

          // Add course groups if cosmetics available
          if (cosmetics && cosmetics.groups.length > 0) {
            // defs for gradients
            const defs = document.createElementNS(NS, 'defs');
            legendG.appendChild(defs);
            let currentIdx = items.length;
            // Add a separator line
            const separatorY = legendPadding + currentIdx * (itemHeight + itemGap) - itemGap/2;
            const separatorLine = document.createElementNS(NS, 'line');
            separatorLine.setAttribute('x1', String(legendPadding));
            separatorLine.setAttribute('y1', String(separatorY));
            separatorLine.setAttribute('x2', String(legendWidth - legendPadding));
            separatorLine.setAttribute('y2', String(separatorY));
            separatorLine.setAttribute('stroke', '#e5e7eb');
            separatorLine.setAttribute('stroke-width', '1');
            legendG.appendChild(separatorLine);

            currentIdx++; // account for separator space
            cosmetics.groups.forEach((group, gIdx) => {
              const variants = getFamilyVariants(group.colorFamily);
              const rowG = document.createElementNS(NS, 'g');
              rowG.setAttribute('transform', `translate(${legendPadding},${legendPadding + (currentIdx + gIdx) * (itemHeight + itemGap)})`);

              // Make group header clickable: add a transparent rect for hit area
              const hitRect = document.createElementNS(NS, 'rect');
              hitRect.setAttribute('x', '0');
              hitRect.setAttribute('y', '0');
              hitRect.setAttribute('width', String(legendWidth - legendPadding * 2));
              hitRect.setAttribute('height', String(itemHeight));
              hitRect.setAttribute('fill', 'transparent');
              hitRect.setAttribute('cursor', 'pointer');
              hitRect.addEventListener('click', () => toggleGroup(group.name));
              rowG.appendChild(hitRect);

              const r = document.createElementNS(NS, 'rect');
              r.setAttribute('x', '0');
              r.setAttribute('y', String((itemHeight-12)/2));
              r.setAttribute('width', '18');
              r.setAttribute('height', '12');
              // Create linear gradient for this group
              const gradId = `legendGrad_${gIdx}`;
              const lg = document.createElementNS(NS, 'linearGradient');
              lg.setAttribute('id', gradId);
              lg.setAttribute('x1', '0%');
              lg.setAttribute('y1', '0%');
              lg.setAttribute('x2', '100%');
              lg.setAttribute('y2', '0%');
              const n = Math.max(1, variants.length);
              variants.forEach((v, i) => {
                const start = Math.round((i / n) * 100);
                const end = Math.round(((i + 1) / n) * 100);
                const s1 = document.createElementNS(NS, 'stop');
                s1.setAttribute('offset', `${start}%`);
                s1.setAttribute('stop-color', v.fill);
                const s2 = document.createElementNS(NS, 'stop');
                s2.setAttribute('offset', `${end}%`);
                s2.setAttribute('stop-color', v.fill);
                lg.appendChild(s1);
                lg.appendChild(s2);
              });
              defs.appendChild(lg);
              r.setAttribute('fill', `url(#${gradId})`);
              r.setAttribute('stroke', (variants[0]?.stroke) || '#999');
              rowG.appendChild(r);

              const text = document.createElementNS(NS, 'text');
              text.setAttribute('x', '26');
              text.setAttribute('y', String(itemHeight/2 + 4));
              text.setAttribute('fill', STYLE.legend.textColor);
              text.setAttribute('font-size', '12');
              text.textContent = language === 'en' ? (group.nameEn || group.name) : group.name;
              rowG.appendChild(text);

              legendG.appendChild(rowG);
            });

            // Update legend height to include groups
            const totalItems = items.length + 1 + cosmetics.groups.length; // +1 for separator
            const newLegendHeight = legendPadding*2 + totalItems * (itemHeight + itemGap) - itemGap;
            bg.setAttribute('height', String(newLegendHeight));
            // Reposition to stay in bottom-right
            const newLegendY = svgH - newLegendHeight - STYLE.legend.offsetY;
            legendG.setAttribute('transform', `translate(${legendX},${newLegendY})`);
          }

          // append legend to cloned
          cloned.appendChild(legendG);
        } catch (e) {
          console.warn('Failed to add legend to export', e);
        }
      }

      // Optionally add a bottom comment into the cloned SVG for export
      if (programComment && programComment.trim().length > 0) {
        try {
          const NS = 'http://www.w3.org/2000/svg';
          const commentText = document.createElementNS(NS, 'text');
          // place inside left margin area at bottom
          const x = 12; // small left padding within SVG
          const y = exportHeight - 8; // a few pixels from bottom
          commentText.setAttribute('x', String(x));
          commentText.setAttribute('y', String(y));
          commentText.setAttribute('fill', '#6b7280');
          commentText.setAttribute('font-size', '11');
          commentText.textContent = programComment;
          cloned.appendChild(commentText);
        } catch {
          // ignore comment failures
        }
      }

      const serializer = new XMLSerializer();
      const svgString = serializer.serializeToString(cloned);

      if (format === 'svg') {
        const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'program-visualization.svg';
        document.body.appendChild(a);
        a.click();
        a.remove();
        URL.revokeObjectURL(url);
        return;
      }

      // PDF export: use Puppeteer via API for perfect font rendering
      if (format === 'pdf') {
        // Create a complete HTML document with embedded SVG and fonts
        const htmlDoc = `<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&display=swap');
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: Figtree, ui-sans-serif, system-ui, -apple-system, sans-serif;
    }
    
    @page {
      size: ${exportWidth}px ${exportHeight}px;
      margin: 0;
    }
    
    svg {
      display: block;
      width: ${exportWidth}px;
      height: ${exportHeight}px;
    }
  </style>
</head>
<body>
  ${svgString}
</body>
</html>`;
        
        try {
          const response = await fetch('/api/export-pdf', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({ html: htmlDoc })
          });
          
          if (!response.ok) {
            const errorText = await response.text();
            console.error('PDF export failed:', errorText);
            alert('PDF export failed: ' + errorText);
            return;
          }
          
          const pdfBlob = await response.blob();
          const url = URL.createObjectURL(pdfBlob);
          const a = document.createElement('a');
          a.href = url;
          a.download = 'program-visualization.pdf';
          document.body.appendChild(a);
          a.click();
          a.remove();
          URL.revokeObjectURL(url);
        } catch (error) {
          console.error('PDF export error:', error);
          alert('PDF export failed. Check console for details.');
        }
        return;
      }

      // Convert to PNG via canvas
      const svg64 = btoa(unescape(encodeURIComponent(svgString)));
      const image64 = 'data:image/svg+xml;base64,' + svg64;
      const img = new Image();
      img.crossOrigin = 'anonymous';

      img.onload = () => {
        // Use devicePixelRatio to create a higher-resolution export (clamped)
        const dpr = typeof window !== 'undefined' ? (window.devicePixelRatio || 1) : 1;
        const scale = Math.min(4, Math.max(1, dpr * 2)); // e.g. DPR 1 -> 2, DPR 2 -> 4 (clamped at 4)

        const canvas = document.createElement('canvas');
        canvas.width = Math.round(exportWidth * scale);
        canvas.height = Math.round(exportHeight * scale);
        // keep CSS size equal to logical SVG size
        canvas.style.width = `${exportWidth}px`;
        canvas.style.height = `${exportHeight}px`;

        const ctx = canvas.getContext('2d');
        if (!ctx) return;

        // Map drawing so that 1 unit = 1 CSS px in SVG space, while canvas pixels are scaled
        ctx.setTransform(scale, 0, 0, scale, 0, 0);

        // Fill white background in SVG coordinates
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, exportWidth, exportHeight);

        // Draw the SVG raster (img) into SVG coordinate space
        ctx.drawImage(img, 0, 0, exportWidth, exportHeight);

        // PNG export
        canvas.toBlob((blob) => {
          if (!blob) return;
          const url = URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = 'program-visualization.png';
          document.body.appendChild(a);
          a.click();
          a.remove();
          URL.revokeObjectURL(url);
        }, 'image/png');
      };
      img.src = image64;
    }
  }));

  // layer visibility state
  const [layers, setLayers] = useState(() => {
    const base = {
      exams: true,
      reexams: true,
      prereqCompleted: true,
      prereqParticipation: true,
      courseBars: true,
      studyPeriods: true,
      examPeriods: true,
      reexamPeriods: true,
      groups: {} as Record<string, boolean>
    };
    if (cosmetics && cosmetics.groups) {
      cosmetics.groups.forEach(g => { base.groups[g.name] = true; });
    }
    return base;
  });

  // Handler to toggle group visibility
  const toggleGroup = (groupName: string) => {
    setLayers(l => ({
      ...l,
      groups: {
        ...l.groups,
        [groupName]: l.groups[groupName] === false ? true : false
      }
    }));
  };

  // focused course code for fading non-relevant elements
  const [focusCourse, setFocusCourse] = useState<string | null>(null);
  // Info panel selection
  const [selectedInfo, setSelectedInfo] = useState<{
    course: Course;
    credit?: { period: string; credits: number; year: number };
  } | null>(null);

  useEffect(() => {
    if (!svgRef.current || !containerRef.current || !courses.length) return;

    const container = d3.select(containerRef.current);
    
    // setup tooltip container
    container.selectAll('.pv-tooltip').remove();
    const tooltip = container.append('div')
      .attr('class', 'pv-tooltip')
      .style('position', 'absolute')
      .style('pointer-events', 'none')
      .style('display', 'none')
      .style('background', `rgba(${(kthColors.KthMarine?.RGB || [0, 0, 97]).join(',')}, 0.8)`)
      .style('color', '#fff')
      .style('padding', '6px 8px')
      .style('border-radius', '4px')
      .style('font-size', '12px')
      .style('z-index', '1001');

  const svg = d3.select(svgRef.current);
  // Apply global font family to all SVG text
  svg.style('font-family', STYLE.fontFamily);
  const margin = { top: 100, right: 40, bottom: 40, left: 100 }; // Increased top margin for title and period labels
  const width = svgRef.current.clientWidth - margin.left - margin.right;
  let height = svgRef.current.clientHeight - margin.top - margin.bottom;
  if (initialChartHeightRef.current == null) {
    initialChartHeightRef.current = height;
  }

  // Clear previous content
  svg.selectAll('*').remove();

  // Create SVG defs for patterns (option group stripes)
  const defs = svg.append('defs');
  
  // Create a striped pattern for each option group using colors of its option courses
  courses.filter(isOptionGroup).forEach(og => {
    const optionGroup = og as OptionGroup;
    const patternId = `option-group-pattern-${optionGroup.name.replace(/\s+/g, '-')}`;
    
    // Get colors for each option course
    const optionColors = optionGroup.options
      .map(optionCode => {
        const optionCourse = courses.find(c => isCourse(c) && (c as Course).code === optionCode) as Course | undefined;
        return optionCourse ? getCourseColors(optionCourse).fill : null;
      })
      .filter(color => color !== null) as string[];
    
    // Create diagonal striped pattern at 45 degrees
    if (optionColors.length > 0) {
      const stripeWidth = 16; // Width of each diagonal stripe
      const pattern = defs.append('pattern')
        .attr('id', patternId)
        .attr('patternUnits', 'userSpaceOnUse')
        .attr('width', optionColors.length * stripeWidth)
        .attr('height', optionColors.length * stripeWidth)
        .attr('patternTransform', 'rotate(45)');
      
      // Add a rect for each color
      optionColors.forEach((color, index) => {
        pattern.append('rect')
          .attr('x', index * stripeWidth)
          .attr('y', 0)
          .attr('width', stripeWidth)
          .attr('height', '100%')
          .attr('fill', color);
      });
    }
  });

  const g = svg.append('g')
    .attr('transform', `translate(${margin.left},${margin.top})`);    // Create scales
    const timeScale = d3.scaleTime()
      .domain([academicPeriods[0].start, academicPeriods[3].reExamEnd])
      .range([0, width]);
  // Clicking on empty SVG space clears focus and closes popup
  svg.on('click', () => {
    setFocusCourse(null);
    setSelectedInfo(null);
    setFocusYear(null);
  });

  const maxYear = Math.max(1, ...courses.flatMap(c => {
    if (isCourse(c)) {
      return c.credits.map(cr => cr.year || c.year || 1);
    } else {
      return [(c as OptionGroup).year || 1];
    }
  }));
  const numYears = Math.max(1, maxYear);
  
  // Separate option groups and individual courses, and identify courses that should be hidden
  const optionGroups = courses.filter(isOptionGroup);
  const coursesInOptionGroups = new Set<string>();
  optionGroups.forEach(og => {
    og.options.forEach(optionCode => {
      // Don't hide courses that have been selected as the chosen option
      if (selectedOptionPerGroup[og.name] !== optionCode) {
        coursesInOptionGroups.add(optionCode);
      }
    });
  });
  
  // Filter courses to only include individual courses (not in option groups)
  const individualCourses = courses.filter(c => {
    if (isOptionGroup(c)) return false;
    return !coursesInOptionGroups.has((c as Course).code);
  }) as Course[];
  
  // Combine individual courses with option groups for rendering (selected courses are now in individualCourses)
  const displayItems: Array<Course | OptionGroup> = [
    ...individualCourses,
    ...optionGroups.filter(og => !selectedOptionPerGroup[og.name])
  ];
  
  // Increased vertical gap between year rows (px)
  // Increase inter-year gap by 20% (from 48 to ~57.6). Use integer for pixel grid.
  const yearRowGap = 58; // was 48
  const totalGaps = Math.max(0, numYears - 1) * yearRowGap;
  // Base band height from current SVG height, used to derive a baseline pixels-per-ECTS
  // Use the initial chart height for baseline band height so layer toggles don't create feedback loops
  const baseYearBandHeight = ((initialChartHeightRef.current || height) - totalGaps) / numYears;
  // Baseline pixels per ECTS (15 ECTS previously mapped to a year band)
  const pxPerECTS = baseYearBandHeight / 15;
  // Minimum ECTS to enforce for bar height so labels fit nicely
  const MIN_ECTS_FOR_HEIGHT = 2;
  const STACK_GAP_PX = 4; // gap between stacked bars

  // Build mapping of courses per year+period to compute stacking lanes (needed for sizing and layout)
  const slotsByYearPeriod: Record<string, Array<{ item: Course | OptionGroup; credit: { period: string; credits: number; year: number } }>> = {};
  displayItems.forEach((item) => {
    const credits = isCourse(item) ? item.credits : Object.entries((item as OptionGroup).periodCredits)
      .filter(([, credits]) => credits > 0)
      .map(([period, credits]) => ({
        period: period as 'P1' | 'P2' | 'P3' | 'P4',
        credits,
        year: (item as OptionGroup).year
      }));
    
    credits.forEach((credit) => {
      const key = `${credit.year}-${credit.period}`;
      if (!slotsByYearPeriod[key]) slotsByYearPeriod[key] = [];
      slotsByYearPeriod[key].push({ item, credit });
    });
  });

  // Compute required band height per year considering the minimum bar height corresponding to 2 ECTS
  const yearBandHeights: number[] = Array.from({ length: numYears }, () => 0);
  for (let y = 1; y <= numYears; y++) {
    // for this year, find all 4 periods
    let maxPeriodHeightNeeded = 0;
    academicPeriods.forEach((p) => {
      const list = slotsByYearPeriod[`${y}-${p.id}`] || [];
      if (list.length === 0) return;
      const heightSum = list.reduce((sum, it) => {
        const effECTS = Math.max(it.credit.credits, MIN_ECTS_FOR_HEIGHT);
        return sum + effECTS * pxPerECTS;
      }, 0);
      const gaps = Math.max(0, list.length - 1) * STACK_GAP_PX;
      maxPeriodHeightNeeded = Math.max(maxPeriodHeightNeeded, heightSum + gaps);
    });
    // Ensure at least the baseline height is kept, even if no courses
    yearBandHeights[y - 1] = Math.max(baseYearBandHeight, maxPeriodHeightNeeded);
  }

  // If required total height exceeds current height, expand the SVG to fit to avoid compressing bars below the minimum
  const requiredTotalHeight = yearBandHeights.reduce((a, b) => a + b, 0) + totalGaps;
  if (requiredTotalHeight > height) {
    height = requiredTotalHeight;
    // also set explicit height on the SVG node so layout picks it up
    d3.select(svgRef.current)
      .attr('height', height + margin.top + margin.bottom);
  }

  // Compute cumulative Y offsets per year using the (possibly) expanded band heights
  const yearYOffset: number[] = [];
  for (let i = 0; i < numYears; i++) {
    const prev = i === 0 ? 0 : (yearYOffset[i - 1] + yearBandHeights[i - 1] + yearRowGap);
    yearYOffset.push(prev);
  }
  const verticalOffset = 0;
  const periodExtension = 10; // How much the period backgrounds extend beyond course area (reduced for better alignment)

    // Draw program title first (at the top)
    if (programName && programCode) {
      const title = g.append('text')
        .attr('x', width / 2)
        .attr('y', -75)
        .attr('text-anchor', 'middle')
        .attr('fill', kthColors.KthBlue?.HEX)
        .attr('font-weight', 400)
        .attr('font-size', 18);

      title.append('tspan').text(`${programName} `);
      const codeText = `(${programCode})`;
      const linkUrl = studyplanUrl ? (language === 'en' ? `${studyplanUrl}?l=en` : studyplanUrl) : undefined;
      if (linkUrl) {
        const anchor = title.append('a')
          .attr('href', linkUrl)
          .attr('target', '_blank');
        anchor.append('tspan')
          .text(codeText)
          .attr('fill', kthColors.KthHeaven?.HEX || '#6298D2')
          .style('text-decoration', 'none')
          .style('cursor', 'pointer');
      } else {
        title.append('tspan')
          .text(codeText);
      }
    }

    // Draw period backgrounds with extension above and below
    academicPeriods.forEach((period, i) => {
      const periodHeight = height + 2 * periodExtension;
      const yOffset = -periodExtension;
      
      // Main period background
      g.append('rect')
        .attr('x', timeScale(period.start))
        .attr('y', yOffset)
        .attr('width', timeScale(period.lectureEnd) - timeScale(period.start))
        .attr('height', periodHeight)
        .attr('class', 'study-period')
        .attr('fill', (kthColors.KthSand?.HEX ? d3.color(kthColors.KthSand.HEX)!.copy({ opacity: 0.25 }).formatRgb() : 'rgba(235,229,224,0.25)'))
          .attr('stroke', 'none')
          .on('mouseover', () => {
            tooltip.html(`
              <strong>${tr[language].period} P${i + 1}</strong>
            `).style('display', 'block');
          })
          .on('mousemove', (event: MouseEvent) => {
            tooltip.style('left', (event.pageX + 50) + 'px').style('top', (event.pageY + 50) + 'px');
          })
          .on('mouseout', () => tooltip.style('display', 'none'));

      // Add period label (P1, P2, etc.)
      g.append('text')
        .attr('x', timeScale(period.start) + (timeScale(period.lectureEnd) - timeScale(period.start)) / 2)
        .attr('y', -50) // Increased distance from the period fields
        .attr('text-anchor', 'middle')
        .attr('fill', kthColors.KthBlue?.HEX)
        .attr('font-weight', 400)
        .attr('font-size', 14)
        .text(`P${i + 1}`);
    });

    // Month labels across the whole timeline
    {
      const start = academicPeriods[0].start;
      const end = academicPeriods[academicPeriods.length - 1].reExamEnd;
      const months: Date[] = [];
      const d = new Date(start.getFullYear(), start.getMonth(), 1);
      while (d <= end) {
        months.push(new Date(d));
        d.setMonth(d.getMonth() + 1);
      }

      // vertical month boundary lines with same gray and roughly label height
      const monthLabelY = -28;
      const labelHeight = 12;
      months.forEach((md, idx) => {
        if (idx > 0) {
          const xBoundary = timeScale(new Date(md.getFullYear(), md.getMonth(), 1));
          g.append('line')
            .attr('x1', xBoundary)
            .attr('y1', monthLabelY - labelHeight / 2)
            .attr('x2', xBoundary)
            .attr('y2', monthLabelY + labelHeight / 2)
            .attr('stroke', '#f0f2f5ff')
            .attr('stroke-width', 5);
        }
      });

      months.forEach((md) => {
        const label = tr[language].months[md.getMonth()];
        // position in the middle of the month
        const monthStart = new Date(md.getFullYear(), md.getMonth(), 1);
        const monthEnd = new Date(md.getFullYear(), md.getMonth() + 1, 0);
        const mid = new Date((monthStart.getTime() + monthEnd.getTime()) / 2);
        g.append('text')
          .attr('x', timeScale(mid))
          .attr('y', monthLabelY)
          .attr('text-anchor', 'middle')
          .attr('fill', '#9ca3af')
          .attr('font-size', 10)
          .text(label);
      });
    }

    // Draw exam periods with extension above and below
    academicPeriods.forEach(period => {
      const examHeight = height + 2 * periodExtension;
      const yOffset = -periodExtension;

      // Regular exam period (subtle KTH light blue)
      g.append('rect')
        .attr('x', timeScale(period.examStart))
        .attr('y', yOffset)
        .attr('width', timeScale(period.examEnd) - timeScale(period.examStart))
        .attr('height', examHeight)
        .attr('class', 'exam-period-rect')
        .attr('fill', (kthColors.KthLightBlue?.HEX ? d3.color(kthColors.KthLightBlue.HEX)!.copy({ opacity: 0.5 }).formatRgb() : 'rgba(222,240,255,0.5)'))
          .attr('stroke', 'none')
          .on('mouseover', () => {
            tooltip.html(`
              <strong>${tr[language].examPeriodLabel} ${period.id}</strong><br/>
            `).style('display', 'block');
          })
          .on('mousemove', (event: MouseEvent) => {
            tooltip.style('left', (event.pageX + 50) + 'px').style('top', (event.pageY + 50) + 'px');
          })
          .on('mouseout', () => tooltip.style('display', 'none'));

      // Re-exam period (light gray)
      g.append('rect')
        .attr('x', timeScale(period.reExamStart))
        .attr('y', yOffset)
        .attr('width', timeScale(period.reExamEnd) - timeScale(period.reExamStart))
        .attr('height', examHeight)
        .attr('class', 'reexam-period-rect')
        .attr('fill', (kthColors.KthLightGray?.HEX ? d3.color(kthColors.KthLightGray.HEX)!.copy({ opacity: 0.5 }).formatRgb() : 'rgba(230,230,230,0.5)'))
          .attr('stroke', 'none')
          .on('mouseover', () => {
            tooltip.html(`
              <strong>${tr[language].reexamPeriodLabel} ${period.id}</strong><br/>
            `).style('display', 'block');
          })
          .on('mousemove', (event: MouseEvent) => {
            tooltip.style('left', (event.pageX + 50) + 'px').style('top', (event.pageY + 50) + 'px');
          })
          .on('mouseout', () => tooltip.style('display', 'none'));
    });

    // Compute max parallel slots per year to determine lane heights
    const maxSlotsPerYear: Record<number, number> = {};
    Object.keys(slotsByYearPeriod).forEach((key) => {
      const [yearStr] = key.split('-');
      const year = Number(yearStr);
      maxSlotsPerYear[year] = Math.max(maxSlotsPerYear[year] || 0, slotsByYearPeriod[key].length);
    });

  // Prepare a position map for drawing arrows and markers later
  const positionMap: Record<string, { xStart: number; xEnd: number; yCenter: number; yTop: number; height: number }> = {};

    // First pass: collect position data for all course bars
    type BarInfo = {
      item: Course | OptionGroup;
      credit: { period: string; credits: number; year: number };
      barX: number;
      barY: number;
      barWidth: number;
      barHeight: number;
      colors: { fill: string; stroke: string; text: string };
      periodObj: Period;
    };
    const allBars: BarInfo[] = [];

    Object.entries(slotsByYearPeriod).forEach(([key, list]) => {
      const [yearStr, periodId] = key.split('-');
      const year = Number(yearStr);
      const period = academicPeriods.find((p) => p.id === (periodId as Period['id']))!;
      const yearIndex = year - 1;
      const yearY = yearYOffset[yearIndex];
      const x = timeScale(period.start);
      const pixelsPerECTS = pxPerECTS;
      const gapPx = STACK_GAP_PX;
      let cursorY = verticalOffset + yearY;

      list.forEach((itemWrapper) => {
        const credit = itemWrapper.credit;
        const item = itemWrapper.item;
        const rawHeight = pixelsPerECTS * credit.credits;
        const minHeight = pixelsPerECTS * MIN_ECTS_FOR_HEIGHT;
        const courseHeight = Math.max(rawHeight, minHeight);
        const periodObj = academicPeriods.find(p => p.id === credit.period)!;
        const courseWidth = timeScale(new Date(periodObj.lectureEnd)) - timeScale(new Date(periodObj.start));
        const barX = x + 2;
        const barWidth = Math.max(0, courseWidth - 4);
        
        // Handle both courses and option groups for colors
        const colors = isCourse(item) ? getCourseColors(item) : getColorForFamily('yellow');

        allBars.push({
          item,
          credit: { period: credit.period as Period['id'], credits: credit.credits, year: credit.year || (isCourse(item) ? item.year : (item as OptionGroup).year) },
          barX,
          barY: cursorY,
          barWidth,
          barHeight: courseHeight,
          colors,
          periodObj
        });

        const itemId = isCourse(item) ? item.code : `optionGroup-${(item as OptionGroup).name}`;
        positionMap[`${itemId}-${credit.year}-${credit.period}`] = {
          xStart: barX,
          xEnd: barX + barWidth,
          yCenter: cursorY + courseHeight / 2,
          yTop: cursorY,
          height: courseHeight
        };

        cursorY += courseHeight + gapPx;
      });
    });

    // Second pass: draw connector shapes for consecutive periods within same year
    // Also track which bars should show labels (first in each connected sequence)
    // Handle connectors for both courses and option groups that span multiple periods
    const periodSequence = ['P1', 'P2', 'P3', 'P4'];
    const barsWithoutLabels = new Set<string>(); // track bars that shouldn't have labels
    const barsConnectedRight = new Set<string>(); // bars with connector on their right side
    const barsConnectedLeft = new Set<string>(); // bars with connector on their left side
    const connectorBorders: Array<{ points: number[][]; stroke: string; itemId: string }> = []; // collect connector borders to draw last
    
    // Process both courses and option groups
    const processItem = (item: Course | OptionGroup) => {
      const itemId = isCourse(item) ? (item as Course).code : `optionGroup-${(item as OptionGroup).name}`;
      const barsByYear: Record<number, BarInfo[]> = {};
      
      // Find all bars for this item
      allBars.filter(b => {
        if (isCourse(item)) {
          return isCourse(b.item) && (b.item as Course).code === (item as Course).code;
        } else {
          return isOptionGroup(b.item) && (b.item as OptionGroup).name === (item as OptionGroup).name;
        }
      }).forEach(bar => {
        const year = bar.credit.year;
        if (!barsByYear[year]) barsByYear[year] = [];
        barsByYear[year].push(bar);
      });

      Object.entries(barsByYear).forEach(([, yearBars]) => {
        yearBars.sort((a, b) => periodSequence.indexOf(a.credit.period) - periodSequence.indexOf(b.credit.period));
        
        // Find consecutive periods
        for (let i = 0; i < yearBars.length - 1; i++) {
          const current = yearBars[i];
          const next = yearBars[i + 1];
          const currentIdx = periodSequence.indexOf(current.credit.period);
          const nextIdx = periodSequence.indexOf(next.credit.period);
          
          // Check if consecutive
          if (nextIdx === currentIdx + 1) {
            // Mark the second bar as not needing a label
            barsWithoutLabels.add(`${itemId}-${next.credit.year}-${next.credit.period}`);
            
            // Mark which bars are connected
            barsConnectedRight.add(`${itemId}-${current.credit.year}-${current.credit.period}`);
            barsConnectedLeft.add(`${itemId}-${next.credit.year}-${next.credit.period}`);
            
            // Draw connector polygon
            // Connect pre-rounding points on horizontal edges of both bars
            const cornerRadius = 4;
            const x1 = current.barX + current.barWidth; // right edge of current bar
            const y1Top = current.barY;
            const y1Bottom = current.barY + current.barHeight;
            const x2 = next.barX; // left edge of next bar
            const y2Top = next.barY;
            const y2Bottom = next.barY + next.barHeight;

            // Pre-rounding points on horizontal edges
            const points = [
              [x1 - cornerRadius, y1Top],      // top-right pre-rounding
              [x2 + cornerRadius, y2Top],      // top-left pre-rounding
              [x2 + cornerRadius, y2Bottom],   // bottom-left pre-rounding
              [x1 - cornerRadius, y1Bottom]    // bottom-right pre-rounding
            ];

            // Get the colors
            const connectorColors = isCourse(item) ? getCourseColors(item as Course) : getColorForFamily('yellow');
            
            // For option groups, use a striped pattern fill in connectors too
            const connectorFillValue = isOptionGroup(item) 
              ? `url(#option-group-pattern-${(item as OptionGroup).name.replace(/\s+/g, '-')})`
              : connectorColors.fill;

            // Create tooltip text for this item
            let tooltipText = '';
            if (isCourse(item)) {
              const course = item as Course;
              const allCompleted = course.prerequisitesCompleted || course.prerequisites || [];
              const allParticipation = course.prerequisitesParticipation || [];
              const completedStr = (allCompleted || []).length ? (allCompleted as string[]).join(', ') : '—';
              const participationStr = (allParticipation || []).length ? (allParticipation as string[]).join(', ') : '—';
              const dependents = individualCourses.filter(c => {
                const comp = c.prerequisitesCompleted || c.prerequisites || [];
                const part = c.prerequisitesParticipation || [];
                return (comp.includes(course.code) || part.includes(course.code));
              }).map(c => c.code);
              const dependentCodes = dependents.length ? dependents.join(', ') : '—';
              
              // Calculate total credits for this course
              const totalCredits = course.credits.reduce((sum, c) => sum + c.credits, 0);
              
              // Build period credits string (e.g., "P1: 4 hp, P2: 2 hp")
              const periodCreditsStr = course.credits
                .map(c => `${c.period}: ${c.credits} ${tr[language].credits}`)
                .join(', ');
              
              // Get language-appropriate course name
              const courseName = language === 'en' 
                ? (course.nameEn || course.name)
                : course.name;
              
              tooltipText = `<strong>${course.code}, ${totalCredits} ${tr[language].credits}</strong><br/>${courseName}<br/>${periodCreditsStr}
                <br/><em>${tr[language].legend.prerequisitesCompleted}:</em> ${completedStr}
                <br/><em>${tr[language].legend.prerequisitesParticipation}:</em> ${participationStr}
                <br/><em>${tr[language].requiredFor}:</em> ${dependentCodes}`;
            } else {
              const og = item as OptionGroup;
              const ogName = language === 'en' ? (og.nameEn || og.name) : og.name;
              const totalCredits = og.totalCredits;
              
              // Build option list - look up course details from course codes
              const optionsList = og.options
                .map(optionCode => {
                  const optionCourse = courses.find(c => isCourse(c) && (c as Course).code === optionCode) as Course | undefined;
                  if (!optionCourse) return null;
                  const optName = language === 'en' ? (optionCourse.nameEn || optionCourse.name) : optionCourse.name;
                  return `${optionCode}: ${optName}`;
                })
                .filter(opt => opt !== null)
                .join('<br/>');
              
              tooltipText = `<strong>${ogName}</strong><br/>${tr[language].totalCredits}: ${totalCredits} ${tr[language].credits}<br/><strong>${tr[language].options}:</strong><br/>${optionsList}`;
            }

            g.append('polygon')
              .attr('points', points.map(p => p.join(',')).join(' '))
              .attr('fill', connectorFillValue)
              .attr('stroke', 'none')
              .attr('class', 'course-connector-fill')
              .attr('data-course', itemId)
              .attr('data-group', () => {
                if (isCourse(item)) {
                  const grp = cosmetics?.courseToGroup.get((item as Course).code);
                  return grp ? grp.name : '';
                }
                return '';
              })
              .style('cursor', 'pointer')
              .on('mouseover', () => {
                tooltip.html(tooltipText).style('display', 'block');
              })
              .on('mousemove', (event: MouseEvent) => {
                tooltip.style('left', (event.pageX + 50) + 'px').style('top', (event.pageY + 50) + 'px');
              })
              .on('mouseout', () => tooltip.style('display', 'none'))
              .on('click', (event: MouseEvent) => {
                event.stopPropagation();
                if (isCourse(item)) {
                  const course = item as Course;
                  setFocusCourse(prev => {
                    const next = prev === course.code ? null : course.code;
                    if (next) {
                      setSelectedInfo({ course, credit: { period: current.credit.period as Period['id'], credits: current.credit.credits, year: current.credit.year } });
                    } else {
                      setSelectedInfo(null);
                    }
                    return next;
                  });
                } else {
                  // For option groups, open the modal
                  setSelectedOptionGroup(item as OptionGroup);
                }
              });
            
            // Store connector border to draw later (after all fills)
            connectorBorders.push({
              points,
              stroke: connectorColors.stroke,
              itemId: itemId
            });
          }
        }
      });
    };

    // Process individual courses
    individualCourses.forEach((course) => {
      processItem(course);
    });

    // Process option groups
    optionGroups.forEach((og) => {
      processItem(og);
    });

    // Third pass: draw the actual course bars
    Object.entries(slotsByYearPeriod).forEach(([key, list]) => {
    const [yearStr, periodId] = key.split('-');
      const year = Number(yearStr);
      const period = academicPeriods.find((p) => p.id === (periodId as Period['id']))!;
  const yearIndex = year - 1;
  const yearY = yearYOffset[yearIndex];
      const x = timeScale(period.start);

    // pixels per ECTS for the year band (baseline set from initial layout)
    const pixelsPerECTS = pxPerECTS;

    const gapPx = STACK_GAP_PX; // doubled gap between stacked bars (was 2)
    let cursorY = verticalOffset + yearY; // start at the top of the year band

      list.forEach((itemWrapper) => {
        const credit = itemWrapper.credit;
        const item = itemWrapper.item;

        // Skip courses that are part of option groups (defensive check)
        if (isCourse(item) && coursesInOptionGroups.has((item as Course).code)) {
          return;
        }

  const rawHeight = pixelsPerECTS * credit.credits;
  const minHeight = pixelsPerECTS * MIN_ECTS_FOR_HEIGHT;
  const courseHeight = Math.max(rawHeight, minHeight); // ensure minimal visible height equal to 2 ECTS

  // Generate item ID for tracking
  const itemId = isCourse(item) ? (item as Course).code : `optionGroup-${(item as OptionGroup).name}`;
  
  // For courses, use course group information; for option groups, use generic styling
  let dataGroup = '';
  if (isCourse(item)) {
    const grp = cosmetics?.courseToGroup.get(item.code);
    dataGroup = grp ? grp.name : '';
  }

  const block = g.append('g')
    .attr('class', 'course-group')
    .attr('data-course', itemId)
    .attr('data-group', dataGroup);

  const periodObj = academicPeriods.find(p => p.id === credit.period)!;
  const courseWidth = timeScale(new Date(periodObj.lectureEnd)) - timeScale(new Date(periodObj.start));
  const barX = x + 2;
  const barWidth = Math.max(0, courseWidth - 4);

  // Determine color based on item type
  const colors = isCourse(item) ? getCourseColors(item) : getColorForFamily('yellow');
  
  // For option groups, use a striped pattern fill
  const fillValue = isOptionGroup(item) 
    ? `url(#option-group-pattern-${(item as OptionGroup).name.replace(/\s+/g, '-')})`
    : colors.fill;

  // Check if this bar is connected to others (applies to both courses and option groups)
  const barKey = `${itemId}-${credit.year}-${credit.period}`;
  const connectedRight = barsConnectedRight.has(barKey);
  const connectedLeft = barsConnectedLeft.has(barKey);

  // Draw filled rectangle (always the same)
  block.append('rect')
    .attr('x', barX)
    .attr('y', cursorY)
    .attr('width', barWidth)
    .attr('height', courseHeight)
    .attr('fill', fillValue)
    .attr('stroke', 'none')
    .attr('rx', 4)
    .attr('ry', 4)
    .attr('class', 'course-block')
    .attr('data-course-code', itemId)
    .style('cursor', 'pointer')
    .on('mouseover', () => {
      // Build tooltip based on item type
      let tooltipText = '';
      
      if (isCourse(item)) {
        const course = item as Course;
        const allCompleted = course.prerequisitesCompleted || course.prerequisites || [];
        const allParticipation = course.prerequisitesParticipation || [];
        const completedStr = (allCompleted || []).length ? (allCompleted as string[]).join(', ') : '—';
        const participationStr = (allParticipation || []).length ? (allParticipation as string[]).join(', ') : '—';
        const dependents = individualCourses.filter(c => {
          const comp = c.prerequisitesCompleted || c.prerequisites || [];
          const part = c.prerequisitesParticipation || [];
          return (comp.includes(course.code) || part.includes(course.code));
        }).map(c => c.code);
        const dependentCodes = dependents.length ? dependents.join(', ') : '—';
        
        // Calculate total credits for this course
        const totalCredits = course.credits.reduce((sum, c) => sum + c.credits, 0);
        
        // Build period credits string (e.g., "P1: 4 hp, P2: 2 hp")
        const periodCreditsStr = course.credits
          .map(c => `${c.period}: ${c.credits} ${tr[language].credits}`)
          .join(', ');
        
        // Get language-appropriate course name
        const courseName = language === 'en' 
          ? (course.nameEn || course.name)
          : course.name;
        
        tooltipText = `<strong>${course.code}, ${totalCredits} ${tr[language].credits}</strong><br/>${courseName}<br/>${periodCreditsStr}
          <br/><em>${tr[language].legend.prerequisitesCompleted}:</em> ${completedStr}
          <br/><em>${tr[language].legend.prerequisitesParticipation}:</em> ${participationStr}
          <br/><em>${tr[language].requiredFor}:</em> ${dependentCodes}`;
      } else {
        const og = item as OptionGroup;
        const ogName = language === 'en' ? (og.nameEn || og.name) : og.name;
        const totalCredits = og.totalCredits;
        
        // Build option list - look up course details from course codes
        const optionsList = og.options
          .map(optionCode => {
            const optionCourse = courses.find(c => isCourse(c) && (c as Course).code === optionCode) as Course | undefined;
            if (!optionCourse) return null;
            const optName = language === 'en' ? (optionCourse.nameEn || optionCourse.name) : optionCourse.name;
            return `${optionCode}: ${optName}`;
          })
          .filter(opt => opt !== null)
          .join('<br/>');
        
        tooltipText = `<strong>${ogName}</strong><br/>${tr[language].totalCredits}: ${totalCredits} ${tr[language].credits}<br/><strong>${tr[language].options}:</strong><br/>${optionsList}`;
      }
      
      tooltip.html(tooltipText).style('display', 'block');
    })
    .on('mousemove', (event: MouseEvent) => {
      tooltip.style('left', (event.pageX + 50) + 'px').style('top', (event.pageY + 50) + 'px');
    })
    .on('mouseout', () => tooltip.style('display', 'none'))
    .on('click', (event: MouseEvent) => {
      event.stopPropagation();
      if (isCourse(item)) {
        const course = item as Course;
        // Check if this course is a selected option from an option group
        const optionGroupForCourse = Object.entries(selectedOptionPerGroup).find(
          ([, selectedCode]) => selectedCode === course.code
        )?.[0];
        
        if (optionGroupForCourse) {
          // This course is a selected option, open the modal for its option group
          const ogToReopen = courses.find(c => isOptionGroup(c) && (c as OptionGroup).name === optionGroupForCourse) as OptionGroup | undefined;
          if (ogToReopen) {
            setSelectedOptionGroup(ogToReopen);
            setHighlightedOptionCode(null);
            setSelectedInfo(null);
          }
        } else {
          // Normal course click - show in bottom panel
          setFocusCourse(prev => {
            const next = prev === course.code ? null : course.code;
            if (next) {
              setSelectedInfo({ course, credit: { period: credit.period as Period['id'], credits: credit.credits, year: credit.year || course.year } });
            } else {
              setSelectedInfo(null);
            }
            return next;
          });
        }
      } else {
        // For option groups, open the modal
        setSelectedOptionGroup(item as OptionGroup);
        setHighlightedOptionCode(null);
      }
    });

  // Draw border with custom path that excludes connected edges
  const r = 4; // corner radius
  const x0 = barX;
  const y0 = cursorY;
  const x1 = barX + barWidth;
  const y1 = cursorY + courseHeight;
  
  let borderPath = '';
  
  if (!connectedLeft && !connectedRight) {
    // No connections: draw full rounded rectangle border
    block.append('rect')
      .attr('class', 'course-bar-border')
      .attr('x', barX)
      .attr('y', cursorY)
      .attr('width', barWidth)
      .attr('height', courseHeight)
      .attr('fill', 'none')
      .attr('stroke', colors.stroke)
      .attr('rx', 4)
      .attr('ry', 4)
      .style('pointer-events', 'none');
  } else {
    // Draw custom border path excluding connected edges
    // Start from top-left, going clockwise
    borderPath = `M ${x0 + r} ${y0}`; // Start after top-left corner
    
    // Top edge
    borderPath += ` L ${x1 - r} ${y0}`;
    
    // Top-right corner (only if not connected on right)
    if (!connectedRight) {
      borderPath += ` Q ${x1} ${y0} ${x1} ${y0 + r}`;
      // Right edge
      borderPath += ` L ${x1} ${y1 - r}`;
      // Bottom-right corner
      borderPath += ` Q ${x1} ${y1} ${x1 - r} ${y1}`;
    } else {
      // Skip right edge when connected
      borderPath += ` M ${x1 - r} ${y1}`;
    }
    
    // Bottom edge
    borderPath += ` L ${x0 + r} ${y1}`;
    
    // Bottom-left corner (only if not connected on left)
    if (!connectedLeft) {
      borderPath += ` Q ${x0} ${y1} ${x0} ${y1 - r}`;
      // Left edge
      borderPath += ` L ${x0} ${y0 + r}`;
      // Top-left corner
      borderPath += ` Q ${x0} ${y0} ${x0 + r} ${y0}`;
    } else {
      // Skip left edge when connected
      borderPath += ` M ${x0 + r} ${y0}`;
    }
    
    block.append('path')
      .attr('class', 'course-bar-border')
      .attr('d', borderPath)
      .attr('fill', 'none')
      .attr('stroke', colors.stroke)
      .style('pointer-events', 'none');
  }

  // store positions for arrows and markers
  positionMap[`${itemId}-${credit.year}-${credit.period}`] = {
    xStart: barX,
    xEnd: barX + barWidth,
    yCenter: cursorY + courseHeight / 2,
    yTop: cursorY,
    height: courseHeight
  };

  // labels inside the bar (code and name on the same row)
  // Skip label if this bar is the second in a connected sequence (applies to both courses and option groups)
  const shouldShowLabel = !barsWithoutLabels.has(barKey);
        
        if (shouldShowLabel) {
          const padding = 4;
          let textX = barX + padding;
          const textY = cursorY + 12;
          let maxWidth = Math.max(0, barWidth - padding * 2);

          // For option groups, draw a circled number indicator before the text
          if (isOptionGroup(item)) {
            const og = item as OptionGroup;
            const numOptions = og.options.length;
            const circleRadius = 7;
            const circleCenterX = textX + circleRadius;
            const circleCenterY = cursorY + circleRadius + 2;
            
            // Draw circle
            block.append('circle')
              .attr('cx', circleCenterX)
              .attr('cy', circleCenterY)
              .attr('r', circleRadius)
              .attr('fill', 'none')
              .attr('stroke', kthColors.KthMarine?.HEX || '#000061')
              .attr('stroke-width', 1.5)
              .attr('pointer-events', 'none');
            
            // Draw number inside circle
            block.append('text')
              .attr('x', circleCenterX)
              .attr('y', circleCenterY)
              .attr('text-anchor', 'middle')
              .attr('dominant-baseline', 'central')
              .attr('font-size', 10)
              .attr('font-weight', 600)
              .attr('fill', kthColors.KthMarine?.HEX || '#000061')
              .attr('pointer-events', 'none')
              .text(numOptions);
            
            // Adjust text position to be after the circle
            textX += circleRadius * 2 + 4;
            maxWidth -= circleRadius * 2 + 4;
          }

          // Create single text string with code and name, using language-appropriate version
          let fullText: string = '';
          if (isCourse(item)) {
            const course = item as Course;
            let displayName: string = '';
            if (language === 'en') {
              displayName = course.briefNameEn || course.nameEn || course.briefName || course.name || '';
            } else {
              displayName = course.briefName || course.name || '';
            }
            fullText = `${course.code} ${displayName}`.trim();
          } else if (isOptionGroup(item)) {
            const og = item as OptionGroup;
            fullText = language === 'en' ? (og.nameEn || og.name) : og.name;
          }
          
          const label = block.append('text')
            .attr('x', textX)
            .attr('y', textY)
            .attr('font-size', 11)
            .attr('font-weight', 600)
            .attr('fill', kthColors.KthMarine?.HEX || '#000061')
            .attr('pointer-events', 'none')
            .attr('class', 'course-label')
            .text(fullText);

          // truncate text if it overflows available width
          try {
            let displayText = fullText;
            while ((label.node() as SVGTextElement).getComputedTextLength() > maxWidth && displayText.length > 3) {
              displayText = displayText.slice(0, -1);
              label.text(displayText + '…');
            }
          } catch {
            // safe guard for environments where getComputedTextLength may fail
          }
        }

        // advance cursor for next stacked item
        cursorY += courseHeight + gapPx;
      });
    });

    // Fourth pass: draw connector borders on top of everything else
    // Only draw the top and bottom edges (not the vertical sides)
    connectorBorders.forEach(({ points, stroke, itemId }) => {
      // Skip if itemId is undefined
      if (!itemId) return;
      
      // points are: [top-right, top-left, bottom-left, bottom-right]
      // We want to draw: top edge (top-right to top-left) and bottom edge (bottom-left to bottom-right)
      const topEdge = `M ${points[0][0]} ${points[0][1]} L ${points[1][0]} ${points[1][1]}`;
      const bottomEdge = `M ${points[2][0]} ${points[2][1]} L ${points[3][0]} ${points[3][1]}`;
      
      // Only apply group styling for courses, not option groups
      let groupName = '';
      if (itemId && !itemId.startsWith('optionGroup-')) {
        const grp = cosmetics?.courseToGroup.get(itemId);
        groupName = grp ? grp.name : '';
      }
      
      g.append('path')
        .attr('d', topEdge)
        .attr('fill', 'none')
        .attr('stroke', stroke)
        .attr('class', 'course-connector-border')
        .attr('data-course', itemId)
        .attr('data-group', groupName)
        .style('pointer-events', 'none');
      
      g.append('path')
        .attr('d', bottomEdge)
        .attr('fill', 'none')
        .attr('stroke', stroke)
        .attr('class', 'course-connector-border')
        .attr('data-course', itemId)
        .attr('data-group', groupName)
        .style('pointer-events', 'none');
    });

    // Year labels on the left
    // Collect exam / re-exam markers so we can draw them on the top layer later
    type ExamMarker = { x: number; cy: number; r: number; course: Course; examPeriod: Period };
    type ReexamMarker = { x: number; cy: number; r: number; course: Course; rePeriod: Period };
    const examMarkers: ExamMarker[] = [];
    const reexamMarkers: ReexamMarker[] = [];
    individualCourses.forEach((course) => {
  const examsGlobal: string[] = course.exams || [];
  const reexamsGlobal: string[] = course.reexams || [];
  const examByYear = course.examsByYear;
  const reexamByYear = course.reexamsByYear;

      course.credits.forEach((credit) => {
        const y = credit.year;
        const examsForYear = examByYear?.[y];
        const reexamsForYear = reexamByYear?.[y];

        const hasExam = Array.isArray(examsForYear)
          ? examsForYear.includes(credit.period)
          : examsGlobal.includes(credit.period);
        const hasReexam = Array.isArray(reexamsForYear)
          ? reexamsForYear.includes(credit.period)
          : reexamsGlobal.includes(credit.period);

        if (hasExam) {
          const examPeriod = academicPeriods.find(p => p.id === credit.period);
          if (examPeriod) {
            const pos = positionMap[`${course.code}-${y}-${credit.period}`];
            if (pos) {
              const xExam = timeScale(new Date((+examPeriod.examStart + +examPeriod.examEnd) / 2));
              examMarkers.push({ x: xExam, cy: pos.yCenter, r: EXAM_MARKER_RADIUS, course, examPeriod });
            }
          }
        }
        if (hasReexam) {
          const rePeriod = academicPeriods.find(p => p.id === credit.period);
          if (rePeriod) {
            const pos = positionMap[`${course.code}-${y}-${credit.period}`];
            if (pos) {
              const xRe = timeScale(new Date((+rePeriod.reExamStart + +rePeriod.reExamEnd) / 2));
              reexamMarkers.push({ x: xRe, cy: pos.yCenter, r: REEXAM_MARKER_RADIUS, course, rePeriod });
            }
          }
        }
      });
    });
    for (let i = 0; i < numYears; i++) {
      const yearLabelY = yearYOffset[i] + yearBandHeights[i] / 2;
      const label = g.append('text')
        .attr('x', -margin.left + 12)
        .attr('y', yearLabelY)
        .text(`${tr[language].year} ${i + 1}`)
        .attr('font-size', 14)
        .attr('font-weight', 400)
        .attr('fill', kthColors.KthBlue?.HEX || '#111827')
        .attr('dominant-baseline', 'middle')
        .attr('class', 'year-label')
        .attr('data-year', String(i + 1))
        .style('cursor', 'pointer')
        .on('click', (event: MouseEvent) => {
          event.stopPropagation();
          setFocusYear((prev) => (prev === i + 1 ? null : i + 1));
        });

      // Visually indicate active year label
      if (focusYear === i + 1) {
        label.attr('font-weight', 600);
      }
    }

    // Draw arrows for prerequisites using stored positions
    const periodOrder: Record<string, number> = { P1: 1, P2: 2, P3: 3, P4: 4 };

    // Add arrow marker definitions (gray and blue) to existing defs
    defs.append('marker')
      .attr('id', 'arrow-gray')
      .attr('viewBox', '0 -5 10 10')
      .attr('refX', 10)
      .attr('markerWidth', 6)
      .attr('markerHeight', 6)
      .attr('orient', 'auto')
      .append('path')
      .attr('d', 'M0,-5L10,0L0,5')
      .attr('fill', '#999');

    defs.append('marker')
      .attr('id', 'arrow-blue')
      .attr('viewBox', '0 -5 10 10')
      .attr('refX', 10)
      .attr('markerWidth', 6)
      .attr('markerHeight', 6)
      .attr('orient', 'auto')
      .append('path')
      .attr('d', 'M0,-5L10,0L0,5')
      .attr('fill', kthColors.KthHeaven?.HEX || '#6298D2');

    // Helper: create a rounded-corner SVG path from a polyline of only horizontal/vertical segments
    function roundedHVPolyline(points: [number, number][], radius: number) {
      if (points.length < 2) return '';
      
      // First, build the path segments (storing them to allow adjustment)
      type PathSegment = { type: 'M' | 'L' | 'Q'; coords: number[] };
      const segments: PathSegment[] = [];
      
      segments.push({ type: 'M', coords: [points[0][0], points[0][1]] });
      let lastX = points[0][0];
      let lastY = points[0][1];
      
      for (let i = 1; i < points.length; i++) {
        const [x0, y0] = points[i - 1];
        const [x1, y1] = points[i];
        
        // Check if there's a corner at the next point when we're at i=1
        // If so, skip the straight line segment and let the corner logic handle it at i=2
        let skipStraightSegment = false;
        if (i === 1 && points.length >= 3) {
          const [x2, y2] = points[i + 1];
          const dx0 = x1 - x0;
          const dy0 = y1 - y0;
          const dx1 = x2 - x1;
          const dy1 = y2 - y1;
          
          // If there's a corner coming, skip the straight line
          if ((dx0 === 0 && dy1 === 0 && dx1 !== 0) || (dy0 === 0 && dx1 === 0 && dy1 !== 0)) {
            skipStraightSegment = true;
            // Still update lastX/lastY to point[1] even though we skipped the segment,
            // so the corner logic at i=2 sees the correct previous position
            lastX = x1; lastY = y1;
          }
        }
        
        // If direction changes (i.e., from horizontal to vertical or vice versa), round the corner
        if (i > 1) {
          const [xPrev, yPrev] = points[i - 2];
          const dx0 = x0 - xPrev;
          const dy0 = y0 - yPrev;
          const dx1 = x1 - x0;
          const dy1 = y1 - y0;
          
          // Only round if direction changes and both segments are axis-aligned
          if ((dx0 === 0 && dy1 === 0 && dx1 !== 0) || (dy0 === 0 && dx1 === 0 && dy1 !== 0)) {
            // Shorten previous segment by radius
            const prevX = x0 - Math.sign(dx0) * radius;
            const prevY = y0 - Math.sign(dy0) * radius;
            // Shorten current segment by radius
            const nextX = x0 + Math.sign(dx1) * radius;
            const nextY = y0 + Math.sign(dy1) * radius;
            
            segments.push({ type: 'L', coords: [prevX, prevY] });
            lastX = prevX; lastY = prevY;
            if (i === points.length - 1) {
              // Last corner: curve directly into the exact target
              segments.push({ type: 'Q', coords: [x0, y0, x1, y1] });
              lastX = x1; lastY = y1;
              continue;
            } else {
              // Intermediate corner: curve to shortened point
              segments.push({ type: 'Q', coords: [x0, y0, nextX, nextY] });
              lastX = nextX; lastY = nextY;
              continue;
            }
          }
        }
        
        // Skip the straight line segment if we detected a corner is coming
        if (!skipStraightSegment) {
          segments.push({ type: 'L', coords: [x1, y1] });
          lastX = x1; lastY = y1;
        }
      }
      
      // Check if we ended at the target point
      const [targetX, targetY] = points[points.length - 1];
      
      // If we're short of the target, append a final segment to reach target exactly
      if (lastX !== targetX || lastY !== targetY) {
        segments.push({ type: 'L', coords: [targetX, targetY] });
      }
      
      // Convert segments to path string
      let d = '';
      segments.forEach(seg => {
        if (seg.type === 'M') {
          d += `M${seg.coords[0]},${seg.coords[1]}`;
        } else if (seg.type === 'L') {
          d += ` L${seg.coords[0]},${seg.coords[1]}`;
        } else if (seg.type === 'Q') {
          d += ` Q${seg.coords[0]},${seg.coords[1]} ${seg.coords[2]},${seg.coords[3]}`;
        }
      });
      
      return d;
    }

    // Arrow routing: assign global lanes per gap so arrows do not overlap
    // Collect ALL arrows first (both completed and participation prereqs for all courses)
    type PositionEntry = { xStart: number; xEnd: number; yCenter: number; yTop: number; height: number };
    type ArrowData = {
      prCode: string;
      targetCourse: Course;
      from: PositionEntry;
      to: PositionEntry;
      fromYearIdx: number;
      toYearIdx: number;
      fromPeriod: string;
      toPeriod: string;
      style: { stroke: string; dash?: string; markerId: string; cssClass: string };
    };
    const allArrows: ArrowData[] = [];
    
    individualCourses.forEach((course) => {
      const courseCreditsSorted = [...course.credits].sort((a: CourseCredit, b: CourseCredit) => (a.year - b.year) || (periodOrder[a.period] - periodOrder[b.period]));
      const firstCourse = courseCreditsSorted[0];
      if (!firstCourse) return;
      
      const completed = course.prerequisitesCompleted || course.prerequisites || [];
      const participated = course.prerequisitesParticipation || [];
      
      // Process completed prerequisites
      completed.forEach((prCode: string) => {
        const prereq = individualCourses.find((c) => c.code === prCode);
        if (!prereq) return;
        const prereqCreditsSorted = [...prereq.credits].sort((a: CourseCredit, b: CourseCredit) => (a.year - b.year) || (periodOrder[a.period] - periodOrder[b.period]));
        const lastPrereq = prereqCreditsSorted[prereqCreditsSorted.length - 1];
        if (!lastPrereq) return;
        const from = positionMap[`${prereq.code}-${lastPrereq.year}-${lastPrereq.period}`];
        const to = positionMap[`${course.code}-${firstCourse.year}-${firstCourse.period}`];
        if (!from || !to) return;
        allArrows.push({
          prCode,
          targetCourse: course,
          from,
          to,
          fromYearIdx: lastPrereq.year - 1,
          toYearIdx: firstCourse.year - 1,
          fromPeriod: lastPrereq.period,
          toPeriod: firstCourse.period,
          style: { stroke: (kthColors.KthHeaven?.HEX || '#6298D2'), markerId: 'arrow-blue', cssClass: 'prereq-completed' }
        });
      });
      
      // Process participation prerequisites
      participated.forEach((prCode: string) => {
        const prereq = individualCourses.find((c) => c.code === prCode);
        if (!prereq) return;
        const prereqCreditsSorted = [...prereq.credits].sort((a: CourseCredit, b: CourseCredit) => (a.year - b.year) || (periodOrder[a.period] - periodOrder[b.period]));
        const lastPrereq = prereqCreditsSorted[prereqCreditsSorted.length - 1];
        if (!lastPrereq) return;
        const from = positionMap[`${prereq.code}-${lastPrereq.year}-${lastPrereq.period}`];
        const to = positionMap[`${course.code}-${firstCourse.year}-${firstCourse.period}`];
        if (!from || !to) return;
        allArrows.push({
          prCode,
          targetCourse: course,
          from,
          to,
          fromYearIdx: lastPrereq.year - 1,
          toYearIdx: firstCourse.year - 1,
          fromPeriod: lastPrereq.period,
          toPeriod: firstCourse.period,
          style: { stroke: '#999', dash: '4,3', markerId: 'arrow-gray', cssClass: 'prereq-participation' }
        });
      });
    });
    
    // Step 1: Extract all arrow segments (horizontal and vertical) for each prerequisite arrow
    //         Store them in a clear structure with all required metadata, but do not assign lanes or endpoints yet.
    type ArrowSegment = {
      arrowIdx: number;
      arrowId: string; // e.g. `${prCode}->${targetCode}`
      type: 'horizontal' | 'vertical';
      direction: 'up' | 'down' | 'left' | 'right';
      gapType: string; // e.g. 'inter-year-gap-1', 'inter-period-y2'
      gapIdx: number; // year index for gap
      x1: number;
      y1: number;
      x2: number;
      y2: number;
      fromSameYear: boolean;
      fromTo: { fromYearIdx: number; toYearIdx: number; fromPeriod: string; toPeriod: string };
      // Optionally: more info for sorting/assignment
    };

    // This will be filled for all arrows
    const allArrowSegments: ArrowSegment[] = [];

    allArrows.forEach((arrow, idx) => {
      const isSameYear = arrow.fromYearIdx === arrow.toYearIdx;
      const fromPeriodNum = periodOrder[arrow.fromPeriod];
      const toPeriodNum = periodOrder[arrow.toPeriod];
      const isImmediatelyAfter = isSameYear && (toPeriodNum === fromPeriodNum + 1);
      const arrowId = `${arrow.prCode}->${arrow.targetCourse.code}`;

      // Compute the main routing points (not including start/end connectors yet)
      // We'll use the same logic as before, but just record the segments
      if (isImmediatelyAfter) {
        // Inter-period routing: horizontal segment in the inter-period space
        // Start at bar edge, short horizontal, vertical, horizontal, vertical, horizontal into target
        // We'll record the vertical segments in the inter-period gap, and the horizontal in the bar/gap
        // For now, just record the main horizontal and vertical segments (not the connectors)
        // (The actual x/y values for the connectors will be added after lane assignment)

        // Horizontal segment in the inter-period gap (y = routingY)
        // We'll need to know the y value for the gap (routingY), and the x range
        // For now, just record the segment from the start of the gap to the end of the gap
        // (The actual offsets for lanes will be added later)

        // Record horizontal segment for the inter-period gap
        // Gap is identified by year and period boundary, not by source Y coordinate
        const y = Math.round(arrow.from.yCenter); // routingY will be offset later
        const xStart = Math.round(arrow.from.xEnd);
        const xEnd = Math.round(arrow.to.xStart);
        const gapType = `inter-period-y${arrow.fromYearIdx}-p${periodOrder[arrow.fromPeriod]}to${periodOrder[arrow.toPeriod]}`;
        const gapIdx = arrow.fromYearIdx; // year index
        allArrowSegments.push({
          arrowIdx: idx,
          arrowId,
          type: 'horizontal',
          direction: xEnd > xStart ? 'right' : 'left',
          gapType,
          gapIdx,
          x1: xStart,
          y1: y,
          x2: xEnd,
          y2: y,
          fromSameYear: true,
          fromTo: { fromYearIdx: arrow.fromYearIdx, toYearIdx: arrow.toYearIdx, fromPeriod: arrow.fromPeriod, toPeriod: arrow.toPeriod },
        });
        
        // Also extract vertical segments in the inter-period gap (at start and end)
        const yStart = Math.round(arrow.from.yCenter);
        const yEnd = Math.round(arrow.to.yCenter);
        // Both vertical segments are in the same gap between the two periods
        // Use consistent gap naming: p1-p2 format
        const fromPNum = periodOrder[arrow.fromPeriod];
        const toPNum = periodOrder[arrow.toPeriod];
        const verticalGapType = `inter-period-vertical-y${arrow.fromYearIdx}-p${fromPNum}-p${toPNum}`;
        
        // Start vertical segment (from bar to routing Y)
        allArrowSegments.push({
          arrowIdx: idx,
          arrowId,
          type: 'vertical',
          direction: yStart < y ? 'down' : 'up', // will go from yStart to routingY
          gapType: verticalGapType,
          gapIdx,
          x1: xStart,
          y1: yStart,
          x2: xStart,
          y2: y, // routingY (will be offset later)
          fromSameYear: true,
          fromTo: { fromYearIdx: arrow.fromYearIdx, toYearIdx: arrow.toYearIdx, fromPeriod: arrow.fromPeriod, toPeriod: arrow.toPeriod },
        });
        // End vertical segment (from routing Y to bar)
        allArrowSegments.push({
          arrowIdx: idx,
          arrowId,
          type: 'vertical',
          direction: y < yEnd ? 'down' : 'up', // will go from routingY to yEnd
          gapType: verticalGapType,
          gapIdx,
          x1: xEnd,
          y1: y, // routingY (will be offset later)
          x2: xEnd,
          y2: yEnd,
          fromSameYear: true,
          fromTo: { fromYearIdx: arrow.fromYearIdx, toYearIdx: arrow.toYearIdx, fromPeriod: arrow.fromPeriod, toPeriod: arrow.toPeriod },
        });
      } else {
        // Route via inter-year gap
        // Horizontal segment in the inter-year gap (y = yGap), x1 to x2
        // We'll need to know which gap (gapBelowYearIdx)
        const gapBelowYearIdx = Math.max(arrow.fromYearIdx, arrow.toYearIdx);
        const gapType = `inter-year-gap-${gapBelowYearIdx}`;
        const gapIdx = gapBelowYearIdx;
        // For now, just record the main horizontal segment in the gap
        // The y value for the gap will be offset later
        const xStart = Math.round(arrow.from.xEnd); // will be offset later
        const xEnd = Math.round(arrow.to.xStart); // will be offset later
        // We'll use a placeholder y (to be offset later)
        const y = 0; // placeholder, will be set after lane assignment
        allArrowSegments.push({
          arrowIdx: idx,
          arrowId,
          type: 'horizontal',
          direction: xEnd > xStart ? 'right' : 'left',
          gapType,
          gapIdx,
          x1: xStart,
          y1: y,
          x2: xEnd,
          y2: y,
          fromSameYear: isSameYear,
          fromTo: { fromYearIdx: arrow.fromYearIdx, toYearIdx: arrow.toYearIdx, fromPeriod: arrow.fromPeriod, toPeriod: arrow.toPeriod },
        });
        
        // Extract vertical segments for inter-year arrows
        // Start vertical segment: drops down from source course to inter-year gap
        const yStart = Math.round(arrow.from.yCenter);
        const yGapPlaceholder = 0; // will be calculated during drawing
        // Determine which inter-period gap the start vertical segment passes through
        // The vertical segment is at the right edge of the source course, so it's in the gap after that period
        const fromPeriodNum = periodOrder[arrow.fromPeriod];
        const toPeriodNum = periodOrder[arrow.toPeriod];
        // Gap naming: p1-p2 means between period 1 and 2, p4-after means after period 4
        const startGapName = fromPeriodNum < 4 ? `p${fromPeriodNum}-p${fromPeriodNum + 1}` : `p4-after`;
        const startVerticalGapType = `inter-period-vertical-y${arrow.fromYearIdx}-${startGapName}`;
        allArrowSegments.push({
          arrowIdx: idx,
          arrowId,
          type: 'vertical',
          direction: 'down', // going down to inter-year gap
          gapType: startVerticalGapType,
          gapIdx: arrow.fromYearIdx,
          x1: xStart,
          y1: yStart,
          x2: xStart,
          y2: yGapPlaceholder, // placeholder
          fromSameYear: isSameYear,
          fromTo: { fromYearIdx: arrow.fromYearIdx, toYearIdx: arrow.toYearIdx, fromPeriod: arrow.fromPeriod, toPeriod: arrow.toPeriod },
        });
        
        // End vertical segment: comes up from inter-year gap to target course
        const yEnd = Math.round(arrow.to.yCenter);
        // The vertical segment is at the left edge of the target course, so it's in the gap before that period
        const endGapName = toPeriodNum > 1 ? `p${toPeriodNum - 1}-p${toPeriodNum}` : `before-p1`;
        const endVerticalGapType = `inter-period-vertical-y${arrow.toYearIdx}-${endGapName}`;
        allArrowSegments.push({
          arrowIdx: idx,
          arrowId,
          type: 'vertical',
          direction: 'up', // going up from inter-year gap
          gapType: endVerticalGapType,
          gapIdx: arrow.toYearIdx,
          x1: xEnd,
          y1: yGapPlaceholder, // placeholder
          x2: xEnd,
          y2: yEnd,
          fromSameYear: isSameYear,
          fromTo: { fromYearIdx: arrow.fromYearIdx, toYearIdx: arrow.toYearIdx, fromPeriod: arrow.fromPeriod, toPeriod: arrow.toPeriod },
        });
      }
    });
    // At this point, allArrowSegments contains the main horizontal segments for each arrow, with all required metadata, but no lanes or endpoints yet.

    // Step 2: Group segments by gap and direction for overlap analysis
    // Structure: { [gapType]: { horizontal: ArrowSegment[], vertical: ArrowSegment[], ... } }
    const segmentsByGap: Record<string, { horizontal: ArrowSegment[]; vertical: ArrowSegment[]; sameYear?: ArrowSegment[]; crossYear?: ArrowSegment[]; up?: ArrowSegment[]; down?: ArrowSegment[] }> = {};

    allArrowSegments.forEach(seg => {
      if (!segmentsByGap[seg.gapType]) {
        segmentsByGap[seg.gapType] = { horizontal: [], vertical: [] };
      }
      segmentsByGap[seg.gapType][seg.type].push(seg);
      // Optionally, for inter-year gaps, separate same-year/cross-year
      if (seg.type === 'horizontal') {
        if (seg.fromSameYear) {
          if (!segmentsByGap[seg.gapType].sameYear) segmentsByGap[seg.gapType].sameYear = [];
          segmentsByGap[seg.gapType].sameYear!.push(seg);
        } else {
          if (!segmentsByGap[seg.gapType].crossYear) segmentsByGap[seg.gapType].crossYear = [];
          segmentsByGap[seg.gapType].crossYear!.push(seg);
        }
      }
      // Optionally, for inter-period gaps, separate up/down
      if (seg.type === 'vertical') {
        if (seg.direction === 'up') {
          if (!segmentsByGap[seg.gapType].up) segmentsByGap[seg.gapType].up = [];
          segmentsByGap[seg.gapType].up!.push(seg);
        } else if (seg.direction === 'down') {
          if (!segmentsByGap[seg.gapType].down) segmentsByGap[seg.gapType].down = [];
          segmentsByGap[seg.gapType].down!.push(seg);
        }
      }
    });
    // segmentsByGap is now ready for overlap analysis and lane assignment.

    // Step 3: Detect clashing segments in each gap (overlap groups)
    type OverlapGroup = ArrowSegment[];
    const overlapGroupsByGap: Record<string, { horizontal: OverlapGroup[]; vertical: OverlapGroup[] }> = {};

    Object.entries(segmentsByGap).forEach(([gapType, segsByDir]) => {
      // Horizontal segments: group by x overlap (normalize x ranges)
      const hSegs = segsByDir.horizontal || [];
      const hGroups: OverlapGroup[] = [];
      type HNorm = { seg: ArrowSegment; xMin: number; xMax: number };
      const hNorm: HNorm[] = hSegs.map(seg => ({
        seg,
        xMin: Math.min(seg.x1, seg.x2),
        xMax: Math.max(seg.x1, seg.x2),
      }));
      hNorm.sort((a, b) => a.xMin - b.xMin);
      let currentGroupN: HNorm[] = [];
      let currentEnd = -Infinity;
      hNorm.forEach(item => {
        if (currentGroupN.length === 0 || item.xMin <= currentEnd) {
          currentGroupN.push(item);
          currentEnd = Math.max(currentEnd, item.xMax);
        } else {
          hGroups.push(currentGroupN.map(i => i.seg));
          currentGroupN = [item];
          currentEnd = item.xMax;
        }
      });
      if (currentGroupN.length > 0) hGroups.push(currentGroupN.map(i => i.seg));

      // Vertical segments: group by y overlap (not used yet, but structure is ready)
      const vSegs = segsByDir.vertical || [];
      const vGroups: OverlapGroup[] = [];
      const sortedV = [...vSegs].sort((a, b) => a.y1 - b.y1);
      let vCurrentGroup: ArrowSegment[] = [];
      let vCurrentEnd = -Infinity;
      sortedV.forEach(seg => {
        if (vCurrentGroup.length === 0 || seg.y1 <= vCurrentEnd) {
          vCurrentGroup.push(seg);
          vCurrentEnd = Math.max(vCurrentEnd, seg.y2);
        } else {
          vGroups.push(vCurrentGroup);
          vCurrentGroup = [seg];
          vCurrentEnd = seg.y2;
        }
      });
      if (vCurrentGroup.length > 0) vGroups.push(vCurrentGroup);

      overlapGroupsByGap[gapType] = { horizontal: hGroups, vertical: vGroups };
    });

    // Step 4: Assign lanes to clashing segments
    const segmentLanes: Record<string, { [segmentType: string]: number }> = {};

    Object.entries(overlapGroupsByGap).forEach(([gapType, groupObj]) => {
      // For horizontal segments: assign lanes within each group
      const hGroups = groupObj.horizontal;
      hGroups.forEach((group) => {
        // Greedy interval coloring per group to avoid y collision for overlapping horizontals
        const items = group.map(seg => ({
          seg,
          xMin: Math.min(seg.x1, seg.x2),
          xMax: Math.max(seg.x1, seg.x2),
        })).sort((a, b) => a.xMin - b.xMin);
        const laneEnds: number[] = [];
        items.forEach(({ seg, xMin, xMax }) => {
          // find first lane whose end < xMin
          let laneIdx = laneEnds.findIndex(end => end < xMin);
          if (laneIdx === -1) {
            laneIdx = laneEnds.length;
            laneEnds.push(xMax);
          } else {
            laneEnds[laneIdx] = xMax;
          }
          if (!segmentLanes[seg.arrowId]) segmentLanes[seg.arrowId] = {};
          segmentLanes[seg.arrowId][`horizontal-${gapType}`] = laneIdx;
        });
      });
      
      // For vertical segments: split by x-column (start/end) within the same gap,
      // then group by Y-overlap per column and assign lanes so overlapping verticals don't share x
      const vGroups = groupObj.vertical;
      const vAll: ArrowSegment[] = ([] as ArrowSegment[]).concat(...vGroups);
      if (vAll.length > 0) {
        // Identify columns by x (typically two: left/start and right/end within this gap)
        const xs = vAll.map(s => s.x1);
        const minX = Math.min(...xs);
        const maxX = Math.max(...xs);
        const midX = (minX + maxX) / 2;

        const startCol = vAll.filter(s => s.x1 <= midX);
        const endCol = vAll.filter(s => s.x1 > midX);

        const assignColumnLanes = (colSegs: ArrowSegment[]) => {
          if (colSegs.length === 0) return;
          // Group by Y-overlap using normalized intervals [yMin, yMax]
          const normalized = colSegs.map(s => ({
            seg: s,
            yMin: Math.min(s.y1, s.y2),
            yMax: Math.max(s.y1, s.y2),
          }));
          normalized.sort((a, b) => a.yMin - b.yMin);
          const groups: { segs: ArrowSegment[]; end: number }[] = [];
          normalized.forEach(({ seg, yMin, yMax }) => {
            const g = groups[groups.length - 1];
            if (!g || yMin > g.end) {
              groups.push({ segs: [seg], end: yMax });
            } else {
              g.segs.push(seg);
              g.end = Math.max(g.end, yMax);
            }
          });
          // Within each overlap group, assign lanes by order
          groups.forEach(({ segs }) => {
            const ordered = [...segs].sort((a, b) => a.y1 - b.y1 || a.x1 - b.x1);
            ordered.forEach((seg, laneIdx) => {
              if (!segmentLanes[seg.arrowId]) segmentLanes[seg.arrowId] = {};
              // Robustly determine whether this vertical belongs to the start (source) or end (target)
              const arr = allArrows[seg.arrowIdx];
              const distToStart = Math.abs(seg.x1 - arr.from.xEnd);
              const distToEnd = Math.abs(seg.x1 - arr.to.xStart);
              const posKey: 'start' | 'end' = distToStart <= distToEnd ? 'start' : 'end';
              segmentLanes[seg.arrowId][`vertical-${gapType}-${posKey}`] = laneIdx;
              // Optional debug: which column we grouped it in vs assigned posKey
              // console.log(`Lane assign v: gap=${gapType}, arrow=${seg.arrowId}, column=${columnLabel}, pos=${posKey}, lane=${laneIdx}`);
            });
          });
        };

        assignColumnLanes(startCol);
        assignColumnLanes(endCol);
      }
    });

    // Step 4.5: Add endpoint connector segments and prepare for drawing
    // Now draw all arrows using the new segment and lane assignment structures
    allArrows.forEach((arrow) => {
      // Routing parameters
      const vPad = 8;
      const curveR = 8;
      const laneSpacing = 4;
      const vLaneSpacing = 7;

      const isSameYear = arrow.fromYearIdx === arrow.toYearIdx;
      const fromPeriodNum = periodOrder[arrow.fromPeriod];
      const toPeriodNum = periodOrder[arrow.toPeriod];
      const isImmediatelyAfter = isSameYear && (toPeriodNum === fromPeriodNum + 1);

      // Get the assigned lane for the main horizontal segment
      const gapType = isImmediatelyAfter
        ? `inter-period-y${arrow.fromYearIdx}-p${periodOrder[arrow.fromPeriod]}to${periodOrder[arrow.toPeriod]}`
        : `inter-year-gap-${Math.max(arrow.fromYearIdx, arrow.toYearIdx)}`;
      const hLaneIdx = segmentLanes[`${arrow.prCode}->${arrow.targetCourse.code}`]?.[`horizontal-${gapType}`] ?? 0;

      // Get the assigned lane for vertical segments
      // For inter-period arrows: both vertical segments are in the same gap (p1-p2 format)
      // For inter-year arrows: vertical segments are in different gaps based on source/target period
      const fromPNum = periodOrder[arrow.fromPeriod];
      const toPNum = periodOrder[arrow.toPeriod];
      
      const vGapTypeStart = isImmediatelyAfter 
        ? `inter-period-vertical-y${arrow.fromYearIdx}-p${fromPNum}-p${toPNum}`
        : `inter-period-vertical-y${arrow.fromYearIdx}-${fromPNum < 4 ? `p${fromPNum}-p${fromPNum + 1}` : `p4-after`}`;
      const vGapTypeEnd = isImmediatelyAfter 
        ? `inter-period-vertical-y${arrow.fromYearIdx}-p${fromPNum}-p${toPNum}`
        : `inter-period-vertical-y${arrow.toYearIdx}-${toPNum > 1 ? `p${toPNum - 1}-p${toPNum}` : `before-p1`}`;
      
      const vLaneIdxStart = segmentLanes[`${arrow.prCode}->${arrow.targetCourse.code}`]?.[`vertical-${vGapTypeStart}-start`] ?? 0;
      const vLaneIdxEnd = segmentLanes[`${arrow.prCode}->${arrow.targetCourse.code}`]?.[`vertical-${vGapTypeEnd}-end`] ?? 0;

      // Compute the main routing points (including endpoints)
      const points: [number, number][] = [];
      const startX = arrow.from.xEnd;
      const startY = arrow.from.yCenter;
      const endX = arrow.to.xStart;
      const endY = arrow.to.yCenter;
      
      if (isImmediatelyAfter) {
        // Inter-period routing: horizontal segment in the inter-period space
        const yOffset = hLaneIdx * laneSpacing;
        const routingY = startY + yOffset;
        // Start at bar edge
        points.push([startX, startY]);
        // Short horizontal to clear the bar, then vertical to routing Y level
        let xRouting = startX + vLaneSpacing + vLaneIdxStart * vLaneSpacing;
        // Check if the lane offset would push us too far past the target
        // If so, reduce it to avoid unnecessary back-and-forth routing
        const xNearEnd = endX - vLaneSpacing - vLaneIdxEnd * vLaneSpacing;
        if (xRouting > xNearEnd) {
          // Lane offset is pushing us too far; reduce it
          xRouting = startX + vLaneSpacing;
        }
        points.push([xRouting, startY]);
        points.push([xRouting, routingY]);
        // Horizontal segment across to near the target
        points.push([xNearEnd, routingY]);
        // Vertical down to target Y, then horizontal into target at exact edge
        points.push([xNearEnd, endY]);
        points.push([endX, endY]);
      } else {
        // Route via inter-year gap
        const fromYearY = yearYOffset[arrow.fromYearIdx];
        let yGap;
        if (isSameYear) {
          const yearBottom = fromYearY + yearBandHeights[arrow.fromYearIdx];
          yGap = yearBottom + vPad + hLaneIdx * laneSpacing;
        } else {
          const lowerYearIdx = Math.max(arrow.fromYearIdx, arrow.toYearIdx);
          const gapTop = yearYOffset[lowerYearIdx];
          yGap = gapTop - yearRowGap / 2 + hLaneIdx * laneSpacing;
        }
  // X positions for the vertical segments (apply lane offsets per start/end column)
  const xStartRouting = startX + vLaneSpacing + vLaneIdxStart * vLaneSpacing;
  const xEndRouting = endX - vLaneSpacing - vLaneIdxEnd * vLaneSpacing;
        // Start at course bar edge
        points.push([startX, startY]);
        // Short horizontal to start of vertical segment
        points.push([xStartRouting, startY]);
        // Vertical down to inter-year gap
        points.push([xStartRouting, yGap]);
        // Horizontal across the gap
        points.push([xEndRouting, yGap]);
        // Vertical up to target Y
        points.push([xEndRouting, endY]);
        // Short horizontal into target at exact edge
        points.push([endX, endY]);
      }

      // Step 6: Draw the path using roundedHVPolyline
      const fromGroup = cosmetics?.courseToGroup.get(arrow.prCode);
      const toGroup = cosmetics?.courseToGroup.get(arrow.targetCourse.code);
      const fromGroupName = fromGroup ? fromGroup.name : '';
      const toGroupName = toGroup ? toGroup.name : '';
      
      const path = g.append('path')
        .attr('d', roundedHVPolyline(points, curveR))
        .attr('stroke', arrow.style.stroke)
        .attr('stroke-width', 1)
        .attr('fill', 'none')
        .attr('marker-end', `url(#${arrow.style.markerId})`)
        .attr('class', `prereq-path ${arrow.style.cssClass}`)
        .attr('data-from', arrow.prCode)
        .attr('data-to', arrow.targetCourse.code)
        .attr('data-from-group', fromGroupName)
        .attr('data-to-group', toGroupName);
      if (arrow.style.dash) path.attr('stroke-dasharray', arrow.style.dash);
    });

  // style initial visibility based on layers state
  // note: this will run on each redraw so it's safe to set here
  container.selectAll('.study-period').style('display', layers.studyPeriods ? '' : 'none');
  container.selectAll('.exam-period-rect').style('display', layers.examPeriods ? '' : 'none');
  container.selectAll('.reexam-period-rect').style('display', layers.reexamPeriods ? '' : 'none');
  // course blocks and labels
  container.selectAll('.course-block').style('display', layers.courseBars ? '' : 'none');
  container.selectAll('.course-label').style('display', layers.courseBars ? '' : 'none');
  // exam/reexam markers
  container.selectAll('.exam-dot').style('display', layers.exams ? '' : 'none');
  container.selectAll('.reexam-dot').style('display', layers.reexams ? '' : 'none');

  // create a dedicated top layer group so markers always render above chart elements
  const topLayer = svg.append('g')
    .attr('class', 'pv-top-layer')
    .attr('transform', `translate(${margin.left},${margin.top})`);

  // Draw exam markers in topLayer, aligned horizontally to exam period and vertically to course
  examMarkers.forEach((m) => {
    const colors = getCourseColors(m.course);
    const grp = cosmetics?.courseToGroup.get(m.course.code);
    const groupName = grp ? grp.name : '';
    
    topLayer.append('circle')
      .attr('cx', m.x)
      .attr('cy', m.cy)
      .attr('r', EXAM_MARKER_RADIUS)
      .attr('fill', colors.fill)
      .attr('stroke', colors.stroke)
      .attr('stroke-width', EXAM_MARKER_STROKE_WIDTH)
      .style('pointer-events', 'auto')
      .attr('class', 'exam-dot')
      .attr('data-layer', 'exams')
      .attr('data-course', m.course.code)
      .attr('data-group', groupName)
      .on('mouseover', () => {
        tooltip.html(`<strong>${m.course.code}</strong><br/>${tr[language].exam}`).style('display', 'block');
      })
      .on('mousemove', (event: MouseEvent) => {
        tooltip.style('left', (event.pageX + 50) + 'px').style('top', (event.pageY + 50) + 'px');
      })
      .on('mouseout', () => tooltip.style('display', 'none'));
  });

  reexamMarkers.forEach((m) => {
    const colors = getCourseColors(m.course);
    const grp = cosmetics?.courseToGroup.get(m.course.code);
    const groupName = grp ? grp.name : '';
    
    topLayer.append('circle')
      .attr('cx', m.x)
      .attr('cy', m.cy)
      .attr('r', REEXAM_MARKER_RADIUS)
      .attr('fill', colors.fill)
      .attr('stroke', colors.stroke)
      .attr('stroke-width', REEXAM_MARKER_STROKE_WIDTH)
      .attr('stroke-dasharray', '2 2')
      .style('pointer-events', 'auto')
      .attr('class', 'reexam-dot')
      .attr('data-layer', 'reexams')
      .attr('data-course', m.course.code)
      .attr('data-group', groupName)
      .on('mouseover', () => {
        tooltip.html(`<strong>${m.course.code}</strong><br/>${tr[language].reexam}`).style('display', 'block');
      })
      .on('mousemove', (event: MouseEvent) => {
        tooltip.style('left', (event.pageX + 50) + 'px').style('top', (event.pageY + 50) + 'px');
      })
      .on('mouseout', () => tooltip.style('display', 'none'));
  });

  }, [courses, layers, language, selectedOptionPerGroup, focusYear, cosmetics, programCode, programName, studyplanUrl, getCourseColors]);

  // Removed popup; outside clicks handled by svg.on('click') above

  // Update element opacities when layers change
  useEffect(() => {
    if (!containerRef.current) return;
    const container = d3.select(containerRef.current);

    // Exams: hide/show completely and adjust pointer-events
    container.selectAll<SVGCircleElement, unknown>('.exam-dot')
      .interrupt()
      .style('display', layers.exams ? '' : 'none')
      .style('opacity', layers.exams ? '1' : '0.2')
      .style('pointer-events', layers.exams ? 'auto' : 'none');

    // Reexams
    container.selectAll<SVGCircleElement, unknown>('.reexam-dot')
      .interrupt()
      .style('display', layers.reexams ? '' : 'none')
      .style('opacity', layers.reexams ? '1' : '0.2')
      .style('pointer-events', layers.reexams ? 'auto' : 'none');

    // Prerequisites - completed
    container.selectAll<SVGPathElement, unknown>('.prereq-path.prereq-completed')
      .interrupt()
      .style('display', layers.prereqCompleted ? '' : 'none')
      .style('opacity', layers.prereqCompleted ? '1' : '0.15')
      .style('pointer-events', layers.prereqCompleted ? 'auto' : 'none');

    // Prerequisites - participation
    container.selectAll<SVGPathElement, unknown>('.prereq-path.prereq-participation')
      .interrupt()
      .style('display', layers.prereqParticipation ? '' : 'none')
      .style('opacity', layers.prereqParticipation ? '1' : '0.15')
      .style('pointer-events', layers.prereqParticipation ? 'auto' : 'none');

    // Study periods (background alternating)
    container.selectAll<SVGRectElement, unknown>('.study-period')
      .interrupt()
      .style('display', layers.studyPeriods ? '' : 'none');

    // Course bars (main course rectangles)
    container.selectAll<SVGRectElement, unknown>('.course-block')
      .interrupt()
      .style('display', layers.courseBars ? '' : 'none')
      .style('pointer-events', layers.courseBars ? 'auto' : 'none');

    // Course labels (follow bar visibility)
    container.selectAll('.course-label')
      .interrupt()
      .style('display', layers.courseBars ? '' : 'none');

    // Course bar borders
    container.selectAll('.course-bar-border')
      .interrupt()
      .style('display', layers.courseBars ? '' : 'none');

    // Course connectors (fills and borders between consecutive bars)
    container.selectAll<SVGPolygonElement, unknown>('.course-connector-fill')
      .interrupt()
      .style('display', layers.courseBars ? '' : 'none');
    container.selectAll<SVGPathElement, unknown>('.course-connector-border')
      .interrupt()
      .style('display', layers.courseBars ? '' : 'none');

    // Exam periods (blue)
    container.selectAll<SVGRectElement, unknown>('.exam-period-rect')
      .interrupt()
      .style('display', layers.examPeriods ? '' : 'none');

    // Reexam periods (gray)
    container.selectAll<SVGRectElement, unknown>('.reexam-period-rect')
      .interrupt()
      .style('display', layers.reexamPeriods ? '' : 'none');
  }, [layers]);

  // Handle group visibility toggling without redrawing
  useEffect(() => {
    if (!containerRef.current || !cosmetics) return;
    const container = d3.select(containerRef.current);
    
    // For each group, show/hide all elements with matching data-group attribute
    cosmetics.groups.forEach(group => {
      const isVisible = layers.groups[group.name] !== false;
      const displayValue = isVisible ? '' : 'none';
      
      // Hide/show course groups (course bars)
      container.selectAll(`.course-group[data-group="${group.name}"]`)
        .interrupt()
        .style('display', displayValue);
      
      // Hide/show connector fills
      container.selectAll(`.course-connector-fill[data-group="${group.name}"]`)
        .interrupt()
        .style('display', displayValue);
      
      // Hide/show connector borders
      container.selectAll(`.course-connector-border[data-group="${group.name}"]`)
        .interrupt()
        .style('display', displayValue);
      
      // Hide/show exam markers
      container.selectAll(`.exam-dot[data-group="${group.name}"]`)
        .interrupt()
        .style('display', displayValue);
      
      // Hide/show reexam markers
      container.selectAll(`.reexam-dot[data-group="${group.name}"]`)
        .interrupt()
        .style('display', displayValue);
    });
    
    // Handle prerequisite arrows separately - hide if EITHER source OR target is hidden
    container.selectAll<SVGPathElement, unknown>('.prereq-path')
      .each(function() {
        const arrow = d3.select(this);
        const fromGroup = arrow.attr('data-from-group');
        const toGroup = arrow.attr('data-to-group');
        
        // Hide if either group is hidden (check both from and to groups)
        const fromHidden = fromGroup && layers.groups[fromGroup] === false;
        const toHidden = toGroup && layers.groups[toGroup] === false;
        
        arrow.style('display', (fromHidden || toHidden) ? 'none' : '');
      });
  }, [layers.groups, cosmetics]);

  // Focus mode: fade out unrelated courses/markers/arrows when a course is selected
  useEffect(() => {
    if (!containerRef.current) return;
    const container = d3.select(containerRef.current);
    if (!focusCourse) {
      // remove focus overrides, restore baseline from layer settings
      container.selectAll('.course-group').style('opacity', null);
      container.selectAll('.course-connector-fill').style('opacity', null);
      container.selectAll('.course-connector-border').style('opacity', null);
      container.selectAll('.exam-dot').style('opacity', null);
      container.selectAll('.reexam-dot').style('opacity', null);
      container.selectAll('.prereq-path').style('opacity', null);
      return;
    }

    // Reconstruct filtered courses list
    const optionGroupsList = courses.filter(isOptionGroup);
    const coursesInOptionGroupsSet = new Set<string>();
    optionGroupsList.forEach(og => {
      og.options.forEach(optionCode => {
        coursesInOptionGroupsSet.add(optionCode);
      });
    });
    const filteredCourses = courses.filter(c => {
      if (isOptionGroup(c)) return false;
      return !coursesInOptionGroupsSet.has((c as Course).code);
    }) as Course[];

    const selected = filteredCourses.find(c => c.code === focusCourse);
    if (!selected) return;
    const prereqCompleted = (selected.prerequisitesCompleted || selected.prerequisites || []) as string[];
    const prereqParticipation = (selected.prerequisitesParticipation || []) as string[];
    const prereqSet = new Set([...(prereqCompleted || []), ...(prereqParticipation || [])]);
    const dependentSet = new Set(
      filteredCourses.filter(c => {
        const comp = c.prerequisitesCompleted || c.prerequisites || [];
        const part = c.prerequisitesParticipation || [];
        return (comp.includes(selected.code) || part.includes(selected.code));
      }).map(c => c.code)
    );

    container.selectAll<SVGGElement, unknown>('.course-group')
      .style('opacity', function() {
        const code = (this as Element).getAttribute('data-course');
        const keep = !!code && (code === focusCourse || prereqSet.has(code) || dependentSet.has(code));
        return keep ? '1' : '0.1';
      });

    container.selectAll<SVGPolygonElement, unknown>('.course-connector-fill')
      .style('opacity', function() {
        const code = (this as Element).getAttribute('data-course');
        const keep = !!code && (code === focusCourse || prereqSet.has(code) || dependentSet.has(code));
        return keep ? '1' : '0.1';
      });

    container.selectAll<SVGPathElement, unknown>('.course-connector-border')
      .style('opacity', function() {
        const code = (this as Element).getAttribute('data-course');
        const keep = !!code && (code === focusCourse || prereqSet.has(code) || dependentSet.has(code));
        return keep ? '1' : '0.1';
      });

    container.selectAll<SVGCircleElement, unknown>('.exam-dot, .reexam-dot')
      .style('opacity', function() {
        const code = (this as Element).getAttribute('data-course');
        const keep = !!code && (code === focusCourse || prereqSet.has(code) || dependentSet.has(code));
        return keep ? '1' : '0.1';
      });

    container.selectAll<SVGPathElement, unknown>('.prereq-path')
      .style('opacity', function() {
        const from = (this as Element).getAttribute('data-from');
        const to = (this as Element).getAttribute('data-to');
        const keep = (to === focusCourse && !!from && prereqSet.has(from)) || (from === focusCourse && !!to && dependentSet.has(to));
        return keep ? '1' : '0.1';
      });
  }, [focusCourse, courses]);

  // Year focus mode: clicking a year label fades other years and all prerequisite arrows
  useEffect(() => {
    if (!containerRef.current) return;
    const container = d3.select(containerRef.current);
    // If a single course is focused, year focus is ignored
    if (focusCourse) return;

    if (!focusYear) {
      container.selectAll('.course-group').style('opacity', null);
      container.selectAll('.course-connector-fill').style('opacity', null);
      container.selectAll('.course-connector-border').style('opacity', null);
      container.selectAll('.exam-dot').style('opacity', null);
      container.selectAll('.reexam-dot').style('opacity', null);
      container.selectAll('.prereq-path').style('opacity', null);
      container.selectAll<SVGTextElement, unknown>('.year-label').style('opacity', null);
      return;
    }

    // Helper to check if a course/option group has credits in the focused year
    const itemHasYear = (id: string) => {
      // Check if it's an option group (id starts with optionGroup-)
      if (id.startsWith('optionGroup-')) {
        // Find option group by name
        const ogName = id.substring('optionGroup-'.length);
        const og = courses.filter(isOptionGroup).find(c => (c as OptionGroup).name === ogName) as OptionGroup | undefined;
        return og ? og.year === focusYear : false;
      }
      // Otherwise it's a course code
      const c = courses.find(cc => isCourse(cc) && (cc as Course).code === id) as Course | undefined;
      if (!c) return false;
      return c.credits.some((cr: CourseCredit) => Number(cr.year) === focusYear);
    };

    container.selectAll<SVGGElement, unknown>('.course-group')
      .style('opacity', function() {
        const code = (this as Element).getAttribute('data-course');
        const keep = !!code && itemHasYear(code);
        return keep ? '1' : '0.1';
      });

    container.selectAll<SVGPolygonElement, unknown>('.course-connector-fill')
      .style('opacity', function() {
        const code = (this as Element).getAttribute('data-course');
        const keep = !!code && itemHasYear(code);
        return keep ? '1' : '0.1';
      });

    container.selectAll<SVGPathElement, unknown>('.course-connector-border')
      .style('opacity', function() {
        const code = (this as Element).getAttribute('data-course');
        const keep = !!code && itemHasYear(code);
        return keep ? '1' : '0.1';
      });

    container.selectAll<SVGCircleElement, unknown>('.exam-dot, .reexam-dot')
      .style('opacity', function() {
        const code = (this as Element).getAttribute('data-course');
        const keep = !!code && itemHasYear(code);
        return keep ? '1' : '0.1';
      });

    // Fade all prerequisite arrows when focusing a year
    container.selectAll<SVGPathElement, unknown>('.prereq-path')
      .style('opacity', '0.1');

    // Fade year labels not in focus
    container.selectAll<SVGTextElement, unknown>('.year-label')
      .style('opacity', function() {
        const year = parseInt((this as Element).getAttribute('data-year') || '0');
        return year === focusYear ? '1' : '0.3';
      });
  }, [focusYear, focusCourse, courses]);

  return (
    <div ref={containerRef}>
      {/* Visualization canvas wrapper so legend anchors to the SVG area only */}
      <div style={{ position: 'relative' }}>
        <svg 
          ref={svgRef} 
          className="w-full h-full"
          style={{ minHeight: '600px' }}
        />

        {/* Legend positioned as an overlay in bottom-right of the SVG wrapper */}
        <div style={{ position: 'absolute', right: STYLE.legend.offsetX, bottom: STYLE.legend.offsetY, width: STYLE.legend.width, display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-start', padding: '8px 12px', background: STYLE.legend.background, border: `1px solid ${STYLE.legend.borderColor}`, borderRadius: 8, boxShadow: '0 2px 8px rgba(0,0,0,0.12)', zIndex: 1000 }}>
        {/* Exams */}
        <div onClick={() => setLayers(s => ({ ...s, exams: !s.exams }))} style={{ display: 'flex', gap: 8, alignItems: 'center', cursor: 'pointer', opacity: layers.exams ? 1 : 0.4 }}>
          <svg width={16} height={16} viewBox="0 0 16 16">
            <circle cx={8} cy={8} r={6} fill={kthColors.KthLightBrick?.HEX || '#FFCCC4'} stroke={kthColors.KthDarkBrick?.HEX || '#B35A4A'} strokeWidth={1.5}/>
          </svg>
          <span style={{ fontSize: 12, color: STYLE.legend.textColor }}>{tr[language].legend.exams}</span>
        </div>

        {/* Reexams */}
        <div onClick={() => setLayers(s => ({ ...s, reexams: !s.reexams }))} style={{ display: 'flex', gap: 8, alignItems: 'center', cursor: 'pointer', opacity: layers.reexams ? 1 : 0.4 }}>
          <svg width={16} height={16} viewBox="0 0 16 16">
            <circle cx={8} cy={8} r={6} fill={kthColors.KthLightBrick?.HEX || '#FFCCC4'} stroke={kthColors.KthDarkBrick?.HEX || '#B35A4A'} strokeWidth={1.5} strokeDasharray="3 2" />
          </svg>
          <span style={{ fontSize: 12, color: STYLE.legend.textColor }}>{tr[language].legend.reexams}</span>
        </div>

  {/* Prerequisites - completion */}
  <div onClick={() => setLayers(s => ({ ...s, prereqCompleted: !s.prereqCompleted }))} style={{ display: 'flex', gap: 8, alignItems: 'center', cursor: 'pointer', opacity: layers.prereqCompleted ? 1 : 0.4 }}>
          <svg width={16} height={16} viewBox="0 0 20 16">
            <path d="M2 8 L16 8" stroke={kthColors.KthHeaven?.HEX || '#6298D2'} strokeWidth={2} fill="none" />
            <path d="M12 4 L20 8 L12 12" fill={kthColors.KthHeaven?.HEX || '#6298D2'} />
          </svg>
          <span style={{ fontSize: 12, color: STYLE.legend.textColor }}>{tr[language].legend.prerequisitesCompleted}</span>
        </div>

  {/* Prerequisites - participation */}
  <div onClick={() => setLayers(s => ({ ...s, prereqParticipation: !s.prereqParticipation }))} style={{ display: 'flex', gap: 8, alignItems: 'center', cursor: 'pointer', opacity: layers.prereqParticipation ? 1 : 0.4 }}>
          <svg width={16} height={16} viewBox="0 0 20 16">
            <path d="M2 8 L16 8" stroke="#999" strokeWidth={2} strokeDasharray="4,3" fill="none" />
            <path d="M12 4 L20 8 L12 12" fill="#999" />
          </svg>
          <span style={{ fontSize: 12, color: STYLE.legend.textColor }}>{tr[language].legend.prerequisitesParticipation}</span>
        </div>

        {/* Courses */}
        <div onClick={() => setLayers(s => ({ ...s, courseBars: !s.courseBars }))} style={{ display: 'flex', gap: 8, alignItems: 'center', cursor: 'pointer', opacity: layers.courseBars ? 1 : 0.4 }}>
          <div style={{ width: 18, height: 12, background: kthColors.KthHeaven?.HEX || '#6298D2', borderRadius: 2, border: '1px solid rgba(0,0,0,0.06)' }} />
          <span style={{ fontSize: 12, color: STYLE.legend.textColor }}>{tr[language].legend.courses}</span>
        </div>

        {/* Study periods */}
        <div onClick={() => setLayers(s => ({ ...s, studyPeriods: !s.studyPeriods }))} style={{ display: 'flex', gap: 8, alignItems: 'center', cursor: 'pointer', opacity: layers.studyPeriods ? 1 : 0.4 }}>
          <div style={{ width: 18, height: 12, background: kthColors.KthSand?.HEX || '#f3f4f6' }} />
          <span style={{ fontSize: 12, color: STYLE.legend.textColor }}>{tr[language].legend.studyPeriods}</span>
        </div>

        {/* Exam periods */}
        <div onClick={() => setLayers(s => ({ ...s, examPeriods: !s.examPeriods }))} style={{ display: 'flex', gap: 8, alignItems: 'center', cursor: 'pointer', opacity: layers.examPeriods ? 1 : 0.4 }}>
          <div style={{ width: 18, height: 12, background: kthColors.KthLightBlue?.HEX || '#DEF0FF' }} />
          <span style={{ fontSize: 12, color: STYLE.legend.textColor }}>{tr[language].legend.examPeriods}</span>
        </div>

        {/* Reexam periods */}
        <div onClick={() => setLayers(s => ({ ...s, reexamPeriods: !s.reexamPeriods }))} style={{ display: 'flex', gap: 8, alignItems: 'center', cursor: 'pointer', opacity: layers.reexamPeriods ? 1 : 0.4 }}>
          <div style={{ width: 18, height: 12, background: kthColors.KthLightGray?.HEX || '#e6e6e6' }} />
          <span style={{ fontSize: 12, color: STYLE.legend.textColor }}>{tr[language].legend.reexamPeriods}</span>
        </div>

        {/* Course groups if cosmetics available */}
        {cosmetics && cosmetics.groups.length > 0 && (
          <>
            <div style={{ width: '100%', height: 1, background: '#e5e7eb', margin: '4px 0' }} />
            {cosmetics.groups.map((group) => {
              const variants = getFamilyVariants(group.colorFamily);
              const gradient = variants.length > 1
                ? `linear-gradient(90deg, ${variants.map((v, i) => {
                    const start = Math.round((i / variants.length) * 100);
                    const end = Math.round(((i + 1) / variants.length) * 100);
                    return `${v.fill} ${start}%, ${v.fill} ${end}%`;
                  }).join(', ')})`
                : variants[0]?.fill || '#ccc';
              const borderColor = variants[0]?.stroke || '#999';
              const isHidden = layers.groups[group.name] === false;
              return (
                <div
                  key={group.name}
                  onClick={() => toggleGroup(group.name)}
                  style={{ display: 'flex', gap: 8, alignItems: 'center', cursor: 'pointer', opacity: isHidden ? 0.4 : 1 }}
                  title={isHidden ? 'Show group' : 'Hide group'}
                >
                  <div style={{ width: 18, height: 12, background: gradient, borderRadius: 2, border: `1px solid ${borderColor}` }} />
                  <span style={{ fontSize: 12, color: STYLE.legend.textColor }}>
                    {language === 'en' ? (group.nameEn || group.name) : group.name}
                  </span>
                </div>
              );
            })}
          </>
        )}
        </div>
      </div>

      {/* Info Panel below chart (outside SVG wrapper) */}
      <div style={{ marginTop: 12, padding: '12px 14px', background: '#fff', border: '1px solid #e5e7eb', borderRadius: 8 }}>
        {selectedInfo ? (
          <div style={{ color: kthColors.KthBlue?.HEX || '#004791' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', gap: 12, flexWrap: 'wrap' }}>
              <div>
                <div style={{ fontWeight: 700, marginBottom: 4 }}>
                  {selectedInfo.course.code}{' '}{language === 'en' 
                    ? (selectedInfo.course.nameEn || selectedInfo.course.name)
                    : selectedInfo.course.name}
                  {selectedInfo.credit ? `, ${selectedInfo.credit.credits} ${tr[language].credits}` : ''}{' '}
                  <a href={`https://www.kth.se/student/kurser/kurs/${selectedInfo.course.code.toLowerCase()}${language === 'en' ? '?l=en' : ''}`}
                     target="_blank" rel="noopener noreferrer"
                     style={{ color: kthColors.KthHeaven?.HEX, textDecoration: 'none', fontWeight: 500 }}>
                    ({tr[language].viewCourse},&nbsp;
                  </a>
                  <a href={`https://www.kth.se/social/course/${selectedInfo.course.code.toLowerCase()}/calendar`}
                     target="_blank" rel="noopener noreferrer"
                     style={{ color: kthColors.KthHeaven?.HEX, textDecoration: 'none', fontWeight: 500 }}>
                    {tr[language].viewSchedule})
                  </a>
                </div>
              </div>
              <div>
                <button onClick={() => { setFocusCourse(null); setSelectedInfo(null); }}
                        className="px-2 py-1 border border-gray-300 rounded-md shadow-sm"
                        style={{ color: kthColors.KthBlue?.HEX }}>
                  ×
                </button>
              </div>
            </div>
            <div style={{ marginBottom: 6 }}>
              <div>
                {tr[language].legend.prerequisitesCompleted}:{' '}
                {(() => {
                  const list = selectedInfo.course.prerequisitesCompleted || selectedInfo.course.prerequisites || [];
                  return (list.length ? (list as string[]).join(', ') : '—');
                })()}{', '}
                {tr[language].legend.prerequisitesParticipation}:{' '}
                {(() => {
                  const list = selectedInfo.course.prerequisitesParticipation || [];
                  return (list.length ? (list as string[]).join(', ') : '—');
                })()}{', '}
                {tr[language].requiredFor}:{' '}
                {(() => {
                  // Only check individual courses, not option groups
                  const optGroupsList = courses.filter(isOptionGroup);
                  const coursesInOptGroups = new Set<string>();
                  optGroupsList.forEach(og => {
                    og.options.forEach(optionCode => {
                      coursesInOptGroups.add(optionCode);
                    });
                  });
                  const filteredCoursesList = courses.filter(c => {
                    if (isOptionGroup(c)) return false;
                    return !coursesInOptGroups.has((c as Course).code);
                  }) as Course[];

                  const dependents = filteredCoursesList.filter(c => {
                    const comp = c.prerequisitesCompleted || c.prerequisites || [];
                    const part = c.prerequisitesParticipation || [];
                    return (comp.includes(selectedInfo.course.code) || part.includes(selectedInfo.course.code));
                  }).map(c => c.code);
                  return dependents.length ? dependents.join(', ') : '—';
                })()}
              </div>
            </div>
            {selectedInfo.course.teacher ? (
              <div style={{ marginBottom: 8 }}>
                {tr[language].teacher}: {selectedInfo.course.teacher}
              </div>
            ) : null}
            {selectedInfo.course.description ? (
              <div style={{ marginBottom: 8 }}>
                Info: {selectedInfo.course.description}</div>
            ) : null}
          </div>
        ) : (
          <div style={{ color: '#6b7280' }}>
            {/* Empty state */}
          </div>
        )}
      </div>

      {/* Program comment below info panel */}
      {programComment && programComment.trim().length > 0 && (
        <div style={{ marginTop: 8, fontSize: 11, color: '#6b7280' }}>
          {programComment}
        </div>
      )}

      {/* Option Group Modal - rendered as SVG overlay */}
      {selectedOptionGroup && (() => {
        // Calculate modal dimensions based on content
        const headerHeight = 75;
        const optionHeight = 50; // height for each option bar
        const optionSpacing = 12; // spacing between options
        const padding = 20;
        
        const numOptions = selectedOptionGroup.options.length;
        const contentHeight = headerHeight + (numOptions * optionHeight) + ((numOptions - 1) * optionSpacing);
        const svgHeight = Math.min(contentHeight + padding + padding, 700); // Cap at 700px (padding on top + bottom)
        const svgWidth = 500;
        
        return (
          <div
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              backgroundColor: 'rgba(0, 0, 0, 0.3)',
              zIndex: 500,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontFamily: 'Figtree, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans',
            }}
            onClick={() => setSelectedOptionGroup(null)}
          >
            <svg
              width={svgWidth}
              height={svgHeight}
              style={{
                backgroundColor: 'white',
                borderRadius: '8px',
                boxShadow: '0 10px 25px rgba(0, 0, 0, 0.2)',
                pointerEvents: 'auto',
              }}
              onClick={(e) => {
                e.stopPropagation();
                // Click on empty SVG area deselects current option
                if ((e.target as SVGElement).tagName === 'svg') {
                  setHighlightedOptionCode(null);
                  setSelectedInfo(null);
                }
              }}
            >
              {/* Title */}
              <text
                x={padding}
                y={padding + 20}
                fontSize={18}
                fontWeight={600}
                fill="#004791"
              >
                {language === 'en' ? (selectedOptionGroup.nameEn || selectedOptionGroup.name) : selectedOptionGroup.name}
              </text>

              {/* Info line */}
              <text
                x={padding}
                y={padding + 40}
                fontSize={12}
                fill="#666"
              >
                {language === 'en' ? 'Total credits:' : 'Totalt poäng:'}{' '}
                <tspan fontWeight={600}>{selectedOptionGroup.totalCredits}</tspan>
              </text>

              {/* Divider line */}
              <line
                x1={padding}
                y1={padding + 55}
                x2={svgWidth - padding}
                y2={padding + 55}
                stroke="#e5e7eb"
                strokeWidth={1}
              />
              
              {/* Choose and Cancel buttons - positioned in header area on the right */}
              {/* Choose button background - can be used to select/deselect an option */}
              <rect
                x={svgWidth - padding - 160}
                y={padding + 6}
                width={70}
                height={32}
                fill={(kthColors.KthBlue?.HEX || '#004791')}
                rx={4}
                ry={4}
                style={{ cursor: 'pointer' }}
                onClick={() => {
                  if (selectedOptionGroup) {
                    if (highlightedOptionCode) {
                      // Choose the highlighted option
                      setSelectedOptionPerGroup(prev => ({
                        ...prev,
                        [selectedOptionGroup.name]: highlightedOptionCode,
                      }));
                    } else {
                      // Clear the selection (deselect) - delete the entry so option group shows again
                      setSelectedOptionPerGroup(prev => {
                        const updated = { ...prev };
                        delete updated[selectedOptionGroup.name];
                        return updated;
                      });
                    }
                    setSelectedOptionGroup(null);
                    setHighlightedOptionCode(null);
                  }
                }}
              />
              
              {/* Choose button text */}
              <text
                x={svgWidth - padding - 125}
                y={padding + 22}
                textAnchor="middle"
                dominantBaseline="central"
                fontSize={13}
                fontWeight={600}
                fill="#FFFFFF"
                style={{ cursor: 'pointer', pointerEvents: 'none' }}
              >
                {language === 'en' ? 'Choose' : 'Välj'}
              </text>
              
              {/* Cancel button background */}
              <rect
                x={svgWidth - padding - 80}
                y={padding + 6}
                width={70}
                height={32}
                fill="#e5e7eb"
                rx={4}
                ry={4}
                style={{ cursor: 'pointer' }}
                onClick={() => {
                  setSelectedOptionGroup(null);
                  setHighlightedOptionCode(null);
                }}
              />
              
              {/* Cancel button text */}
              <text
                x={svgWidth - padding - 45}
                y={padding + 22}
                textAnchor="middle"
                dominantBaseline="central"
                fontSize={13}
                fontWeight={600}
                fill="#4B5563"
                style={{ cursor: 'pointer', pointerEvents: 'none' }}
              >
                {language === 'en' ? 'Cancel' : 'Avbryt'}
              </text>

              {/* Course option bars */}
              {selectedOptionGroup.options.map((optionCode, index) => {
                const optionCourse = courses.find(c => isCourse(c) && (c as Course).code === optionCode) as Course | undefined;
                if (!optionCourse) return null;

                const barY = padding + headerHeight + index * (optionHeight + optionSpacing);
                const barHeight = optionHeight;
                const barWidth = svgWidth - 2 * padding;
                const barX = padding;
                const colors = getCourseColors(optionCourse);

                // Get option name
                const optionName = language === 'en' ? (optionCourse.nameEn || optionCourse.name) : optionCourse.name;
                const totalCredits = optionCourse.credits.reduce((sum, c) => sum + c.credits, 0);

                return (
                  <g
                    key={index}
                    style={{ cursor: 'pointer' }}
                    onClick={() => {
                      // Toggle: if already selected, deselect; otherwise select
                      if (highlightedOptionCode === optionCode) {
                        setHighlightedOptionCode(null);
                        setSelectedInfo(null);
                      } else {
                        setHighlightedOptionCode(optionCode);
                        setSelectedInfo({
                          course: optionCourse,
                          credit: {
                            period: optionCourse.credits[0]?.period || 'P1',
                            credits: totalCredits,
                            year: optionCourse.year,
                          },
                        });
                      }
                    }}
                  >
                    {/* Bar background - highlight if selected */}
                    <rect
                      x={barX}
                      y={barY}
                      width={barWidth}
                      height={barHeight}
                      fill={colors.fill}
                      stroke={highlightedOptionCode === optionCode ? '#FFD700' : colors.stroke}
                      strokeWidth={highlightedOptionCode === optionCode ? 3 : 1.5}
                      rx={3}
                      ry={3}
                    />

                    {/* Code, name, and credits text - single line */}
                    <text
                      x={barX + 6}
                      y={barY + optionHeight / 2}
                      fontSize={11}
                      fontWeight={600}
                      fill={kthColors.KthMarine?.HEX || '#000061'}
                      dominantBaseline="central"
                    >
                      {optionCode} {optionName}, {totalCredits} {tr[language].credits}
                    </text>
                  </g>
                );
              })}
            </svg>
          </div>
        );
      })()}

    </div>
  );
});

export default TimelineVisualization;