// Header: title + genre filter chips + era band
function Header({ activeGenres, onToggleGenre, eraRange, onEraChange, selectedPlay, focusInfo }) {
  return (
    <div className="header">
      <div className="header-l">
        <div className="header-title">
          京 劇 劇 本 可 視 分 析
          <span className="seal">PEKING · OPERA</span>
        </div>
        <div className="header-sub">
          ChinaVis&nbsp;2026 · Track&nbsp;1 · 9&nbsp;Plays · 56&nbsp;Roles · 5&nbsp;Coordinated&nbsp;Views
        </div>
      </div>
      <div className="header-r">
        <div className="chip-row">
          {["history","family","court"].map(g => (
            <button
              key={g}
              className={"chip" + (activeGenres.has(g) ? " on" : "")}
              onClick={() => onToggleGenre(g)}
            >
              <span className="chip-dot" style={{ background: genreColor(g) }}></span>
              {genreLabel(g)}
            </button>
          ))}
        </div>
        <EraBand range={eraRange} onChange={onEraChange} />
      </div>
    </div>
  );
}

function EraBand({ range, onChange }) {
  // 1800-1950, with major opera eras marked
  const min = 1800, max = 1950;
  const eras = [
    { y: 1830, label: "道光" },
    { y: 1860, label: "同光" },
    { y: 1900, label: "光宣" },
    { y: 1925, label: "民国盛期" },
  ];
  const w = 260, h = 28;
  const x = (y) => ((y - min) / (max - min)) * w;
  return (
    <svg width={w} height={h} className="era-band">
      <line x1="0" y1={h/2} x2={w} y2={h/2} stroke="#2a2118" strokeWidth="1" />
      <rect x={x(range[0])} y={h/2-3} width={x(range[1])-x(range[0])} height="6"
            fill="#d4a24c" opacity="0.35" />
      {eras.map(e => (
        <g key={e.y}>
          <line x1={x(e.y)} y1={h/2-5} x2={x(e.y)} y2={h/2+5} stroke="#8a6a2e" strokeWidth="1" />
          <text x={x(e.y)} y={h/2+18} fontSize="9" textAnchor="middle" className="label-dim">{e.label}</text>
        </g>
      ))}
      <text x="0" y="9" fontSize="9" className="mono label-dim">{min}</text>
      <text x={w} y="9" fontSize="9" textAnchor="end" className="mono label-dim">{max}</text>
    </svg>
  );
}

window.Header = Header;