// Left rail: filterable play list
function PlayRail({ plays, selectedPlay, onSelect, activeGenres, eraRange, hoverGenre, onHoverGenre }) {
  return (
    <div className="panel">
      <div className="panel-head">
        <div className="panel-title">
          <span className="num">01</span>剧 目
        </div>
        <div className="panel-meta">{plays.length} TITLES</div>
      </div>
      <div className="play-list">
        {plays.map((p, i) => {
          const inGenre = activeGenres.has(p.genre);
          const inEra = p.era >= eraRange[0] && p.era <= eraRange[1];
          const dim = !inGenre || !inEra || (hoverGenre && hoverGenre !== p.genre);
          const on = selectedPlay === p.id;
          return (
            <div
              key={p.id}
              className={"play-row" + (on ? " on" : "") + (dim ? " dim" : "")}
              onClick={() => onSelect(p.id)}
              onMouseEnter={() => onHoverGenre && onHoverGenre(p.genre)}
              onMouseLeave={() => onHoverGenre && onHoverGenre(null)}
            >
              <div className={"play-genre-pip " + (p.genre === "family" ? "family" : p.genre === "court" ? "court" : "")} />
              <div>
                <div className="play-name">{p.title}</div>
                <div className="play-name-sub">
                  {p.subtitle} · {p.era}
                </div>
              </div>
              <div style={{ fontFamily: "var(--f-mono)", fontSize: 9, color: "var(--paper-dim)", letterSpacing: "0.15em" }}>
                {String(i + 1).padStart(2, "0")}
              </div>
            </div>
          );
        })}
        <div style={{ padding: "10px 14px", fontFamily: "var(--f-mono)", fontSize: 9, color: "var(--gold-dim)", letterSpacing: "0.2em", textTransform: "uppercase", borderTop: "1px dashed var(--ink-4)", marginTop: 4 }}>
          ※ source: 《戏考》《国剧大成》《京剧汇编》<br/>
          &nbsp;&nbsp; click any title to coordinate views
        </div>
      </div>
    </div>
  );
}

window.PlayRail = PlayRail;