// CoursePills.jsx — shared course-filter pill row
// Used by PlanRevealScreen and GraphScreen.
// Exported on window as CoursePills + TINT.

const TINT = {
  amber:  { fg: "#7a5200", bg: "rgba(245,191,79,0.20)", border: "rgba(245,191,79,0.55)" },
  blue:   { fg: "#1f4d8a", bg: "rgba(66,153,234,0.18)", border: "rgba(66,153,234,0.55)" },
  red:    { fg: "#a9361e", bg: "rgba(249,111,98,0.18)", border: "rgba(249,111,98,0.55)" },
  green:  { fg: "#2b6b1e", bg: "rgba(97,197,84,0.18)",  border: "rgba(97,197,84,0.55)"  },
  olive:  { fg: "#4c5c28", bg: "rgba(164,177,117,0.22)",border: "rgba(164,177,117,0.55)" },
  coral:  { fg: "#8a2525", bg: "rgba(251,88,88,0.18)",  border: "rgba(251,88,88,0.55)"  },
  indigo: { fg: "#1e2670", bg: "rgba(26,35,126,0.14)",  border: "rgba(26,35,126,0.55)"  },
};

// CoursePills — pure display, no zero-selection enforcement (caller's job).
// Props:
//   courses  — [{id, name, tint, anchor_count}]
//   selected — Set of selected course ids
//   onToggle — (id: string) => void
function CoursePills({ courses, selected, onToggle }) {
  if (!courses || courses.length === 0) return null;
  return (
    <div className="pr-course-pills">
      {courses.map(c => {
        const isOn = selected.has(c.id);
        const t = TINT[c.tint] || TINT.amber;
        return (
          <button
            key={c.id}
            className={"pr-course-pill" + (isOn ? " is-on" : "")}
            onClick={() => onToggle(c.id)}
            style={isOn ? { background: t.bg, color: t.fg, borderColor: t.border } : undefined}
          >
            <span className="pr-course-pill-dot" style={{ background: t.border }} />
            {c.name}
            {c.anchor_count != null && (
              <span className="pr-course-pill-n">{c.anchor_count}</span>
            )}
          </button>
        );
      })}
    </div>
  );
}

Object.assign(window, { CoursePills, TINT });