// era-view.jsx — era detail page (composers in era)

function EraView({ eraId, onSelectComposer, onSelectEra }) {
  const era = window.ERAS.find(e => e.id === eraId);
  if (!era) return <div className="view"><p>Era not found.</p></div>;

  const eras = window.ERAS;
  const composers = window.COMPOSERS
    .filter(c => c.era === eraId)
    .sort((a, b) => a.born - b.born);

  const idx = eras.findIndex(e => e.id === eraId);
  const prev = idx > 0 ? eras[idx - 1] : null;
  const next = idx < eras.length - 1 ? eras[idx + 1] : null;

  return (
    <div className="view era-view" style={{ '--era-accent': `var(--era-${eraId})` }}>
      <header className="era-hero">
        <div className="era-hero-meta">
          <span className="mono era-hero-tag">Era · {String(idx + 1).padStart(2, '0')} of {eras.length}</span>
          <span className="mono era-hero-years">{era.start} — {era.end}</span>
        </div>
        <h1 className="era-hero-name">{era.name}</h1>
        <p className="era-hero-note">{era.note}</p>
        <div className="era-hero-rule"></div>
      </header>

      <section style={{ marginTop: 56 }}>
        <div className="era-section-h">
          <span className="era-section-title">Composers</span>
          <span className="era-section-count">{composers.length}</span>
        </div>
        <div className="cmp-grid">
          {composers.map((c, i) => (
            <div
              key={c.id}
              className="cmp-card"
              style={{ '--era-accent': `var(--era-${c.era})` }}
              onClick={() => onSelectComposer(c.id)}
            >
              <div className="cmp-card-head">
                <span className="cmp-card-num">№ {String(i + 1).padStart(2, '0')}</span>
                <span className="cmp-card-era">{c.nation}</span>
              </div>
              <h3 className="cmp-card-name">{c.name}</h3>
              <div className="cmp-card-meta">
                <span>{c.born}–{c.died}</span>
              </div>
              <p className="cmp-card-epi">{c.epitaph}</p>
            </div>
          ))}
        </div>
      </section>

      <nav className="era-nav">
        {prev ? (
          <button className="era-nav-btn" onClick={() => onSelectEra(prev.id)}
            style={{ '--era-accent': `var(--era-${prev.id})` }}>
            <span className="mono">← Previous Era</span>
            <span className="era-nav-name">{prev.name}</span>
            <span className="mono era-nav-years">{prev.start}–{prev.end}</span>
          </button>
        ) : <span></span>}
        {next ? (
          <button className="era-nav-btn era-nav-btn--right" onClick={() => onSelectEra(next.id)}
            style={{ '--era-accent': `var(--era-${next.id})` }}>
            <span className="mono">Next Era →</span>
            <span className="era-nav-name">{next.name}</span>
            <span className="mono era-nav-years">{next.start}–{next.end}</span>
          </button>
        ) : <span></span>}
      </nav>
    </div>
  );
}

window.EraView = EraView;