import React from 'react';
import { groupLines, groupVisibilityState } from '../lib/crossSubjectChart';

// Presentational panel listing subjects grouped by their group, with per-subject
// and per-group visibility checkboxes. All state lives in the parent; this component
// only renders and calls handlers.
export function SubjectSidebar({
  lines, hiddenSubjects, onToggleSubject, onToggleGroup, onShowAll, onHighlight,
}) {
  const groups = groupLines(lines);
  const anyHidden = lines.some((l) => hiddenSubjects.has(l.id));

  return (
    <div className="w-[210px] shrink-0 border-l border-gray-100 pl-3">
      <div className="flex items-center justify-between mb-2">
        <span className="text-xs font-semibold text-gray-500 uppercase tracking-wide">Subjects</span>
        {anyHidden && (
          <button type="button" onClick={onShowAll} aria-label="Show all subjects"
            className="text-xs text-indigo-500 hover:text-indigo-700">Show all</button>
        )}
      </div>
      <div className="space-y-3 max-h-[320px] overflow-y-auto pr-1">
        {groups.map(({ group, subjects }) => {
          const ids = subjects.map((s) => s.id);
          const state = groupVisibilityState(ids, hiddenSubjects);
          return (
            <div key={group}>
              <label className="flex items-center gap-1.5 text-xs font-medium text-gray-600 cursor-pointer">
                <input type="checkbox"
                  checked={state === 'all'}
                  ref={(el) => { if (el) el.indeterminate = state === 'some'; }}
                  onChange={() => onToggleGroup(ids, state === 'all')}
                  className="accent-indigo-500" />
                <span className="truncate">{group}</span>
                <span className="text-gray-400">({subjects.length})</span>
              </label>
              <div className="mt-1 space-y-0.5 pl-1">
                {subjects.map((s) => (
                  <label key={s.id}
                    onMouseEnter={() => onHighlight(s.id)}
                    onMouseLeave={() => onHighlight(null)}
                    className="flex items-center gap-1.5 text-xs text-gray-600 cursor-pointer hover:bg-gray-50 rounded px-1 py-0.5">
                    <input type="checkbox"
                      checked={!hiddenSubjects.has(s.id)}
                      onChange={() => onToggleSubject(s.id)}
                      className="accent-indigo-500" />
                    <span className="inline-block w-2.5 h-2.5 rounded-full shrink-0"
                      style={{ backgroundColor: s.color }} />
                    <span className="truncate">{s.name}</span>
                  </label>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
