// work-view.jsx — single work detail page

function WorkView({ composerId, workKey, onBack, onSelectComposer, onSelectWork }) {
  const c = window.COMPOSERS.find(x => x.id === composerId);
  if (!c) return <div className="view"><p>Composer not found.</p></div>;

  // Resolve this work from the full catalogue by its slug.
  const title = window.workTitleFromKey(composerId, workKey) || c.works[0];
  if (!title) return <div className="view"><p>Work not found.</p></div>;

  const era = window.ERAS.find(e => e.id === c.era);
  const styleVars = { '--era-accent': `var(--era-${c.era})` };

  // Listening guide for this specific work (keyed by composer id -> work slug).
  const guide = (window.GUIDES && window.GUIDES[composerId] && window.GUIDES[composerId][workKey]) || null;

  // Synthetic recordings (placeholders — three reference performances per work)
  const recordings = mockRecordings(c, title);

  // Other works by this composer that also have a guide.
  const gset = (window.GUIDES && window.GUIDES[composerId]) || {};
  const others = Object.keys(gset)
    .filter(k => k !== workKey)
    .map(k => ({ title: window.workTitleFromKey(composerId, k) || k, key: k }))
    .filter(w => w.title)
    .slice(0, 8);

  return (
    <div className="work-view" style={styleVars}>
      <header className="work-hero">
        <div>
          <div className="work-meta-row">
            <span className="era-tag">{era.name}</span>
            <span style={{ color: 'var(--ink-faint)' }}>·</span>
            <span>{c.born}–{c.died}</span>
            <span style={{ color: 'var(--ink-faint)' }}>·</span>
            <span className="pos">{guide ? guide.pieceType : era.name}</span>
          </div>
          <h1 className="work-title">{title}</h1>
          <p className="work-by">
            by <button onClick={() => onSelectComposer(c.id)}>{c.name}</button>
          </p>
        </div>
        <div className="work-cover">
          <div className="work-cover-mark">{title.split(' ').map(w => w[0]).slice(0, 2).join('')}</div>
        </div>
      </header>

      <div className="work-body">
        <section className="work-info">
          <h3>About this work</h3>
          <dl>
            <dt>Composer</dt>
            <dd>{c.name}</dd>
            <dt>Period</dt>
            <dd>{era.name}</dd>
            <dt>Composer life</dt>
            <dd className="normal mono" style={{ fontSize: 13, letterSpacing: '0.06em', color: 'var(--ink-dim)' }}>
              {c.born}–{c.died} · {c.nation}
            </dd>
            {guide ? (
              <React.Fragment>
                <dt>曲種</dt>
                <dd className="normal" style={{ fontSize: 16 }}>{guide.pieceType}</dd>
                <dt>全曲長度</dt>
                <dd className="normal mono" style={{ fontSize: 13, letterSpacing: '0.06em', color: 'var(--ink-dim)' }}>
                  {guide.totalDuration}
                </dd>
              </React.Fragment>
            ) : (
              <React.Fragment>
                <dt>Catalogue</dt>
                <dd className="normal mono" style={{ fontSize: 13, letterSpacing: '0.06em', color: 'var(--ink-dim)' }}>
                  Editorial notes to be added
                </dd>
              </React.Fragment>
            )}
          </dl>

          {guide ? (
            <p style={{ color: 'var(--ink-dim)', fontSize: 17, lineHeight: 1.65, marginTop: 8 }}>
              {guide.background}
            </p>
          ) : (
            <p style={{ color: 'var(--ink-dim)', fontSize: 17, lineHeight: 1.55, marginTop: 8 }}>
              One of the works most associated with {c.name.split(' ').slice(-1)[0]} —
              part of the small set of pieces by which the composer is principally remembered.
              Full programme notes, score links and historical context to be added.
            </p>
          )}
        </section>

        <section className="work-rec">
          <h3>Recordings</h3>
          <ul className="work-rec-list">
            {recordings.map((r, i) => (
              <li key={i} className="work-rec-item">
                <div className="work-rec-cover"></div>
                <div>
                  <div className="work-rec-perf">{r.performer}</div>
                  <div className="work-rec-orch">{r.ensemble}</div>
                </div>
                <div className="work-rec-year">{r.year}</div>
              </li>
            ))}
          </ul>
          <p className="mono" style={{ fontSize: 10, color: 'var(--ink-faint)', letterSpacing: '0.15em', marginTop: 12, textTransform: 'uppercase' }}>
            Reference recordings · placeholder credits
          </p>
        </section>
      </div>

      {guide && (
        <div className="wg">
          <section className="wg-movements">
            <div className="wg-h">
              <span className="label">逐樂章導聆</span>
              <span className="wg-h-count">{guide.movements.length} 段 · {guide.totalDuration}</span>
            </div>
            <ol className="wg-mv-list">
              {guide.movements.map((m, i) => (
                <li key={i} className="wg-mv">
                  <div className="wg-mv-head">
                    <span className="wg-mv-label">{m.label}</span>
                    <span className="wg-mv-dur">{m.duration}</span>
                  </div>
                  <div className="wg-mv-title">{m.title}</div>
                  <p className="wg-mv-intro">{m.intro}</p>
                  <p className="wg-mv-listen"><span className="wg-mv-listen-tag">怎麼聽</span>{m.howToListen}</p>
                </li>
              ))}
            </ol>
          </section>

          <section className="wg-appreciate">
            <div className="wg-h">
              <span className="label">欣賞之道</span>
            </div>
            <p className="wg-appreciate-body">{guide.overallAppreciation}</p>
          </section>
        </div>
      )}

      {others.length > 0 && (
        <div className="work-other">
          <div className="work-other-h">
            <span className="label">More by</span>
            <button className="by" onClick={() => onSelectComposer(c.id)} style={{ background: 'transparent', border: 0, cursor: 'pointer', padding: 0 }}>
              {c.name}
            </button>
          </div>
          <div className="work-other-list">
            {others.map((w, i) => (
              <div key={w.key} className="work-other-item" onClick={() => onSelectWork(c.id, w.key)}>
                <span className="num">♪</span>
                <span className="name">{w.title}</span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// Deterministic mock recordings — three "reference" performances per work
function mockRecordings(c, title) {
  const era = c.era;
  // Era-appropriate pools
  const pools = {
    'baroque': [
      { performer: 'John Eliot Gardiner', ensemble: 'English Baroque Soloists' },
      { performer: 'Ton Koopman', ensemble: 'Amsterdam Baroque Orchestra' },
      { performer: 'Trevor Pinnock', ensemble: 'The English Concert' },
      { performer: 'Nikolaus Harnoncourt', ensemble: 'Concentus Musicus Wien' },
      { performer: 'Philippe Herreweghe', ensemble: 'Collegium Vocale Gent' },
      { performer: 'Masaaki Suzuki', ensemble: 'Bach Collegium Japan' },
    ],
    'classical': [
      { performer: 'Nikolaus Harnoncourt', ensemble: 'Concentus Musicus Wien' },
      { performer: 'John Eliot Gardiner', ensemble: 'Orchestre Révolutionnaire et Romantique' },
      { performer: 'Carlos Kleiber', ensemble: 'Wiener Philharmoniker' },
      { performer: 'George Szell', ensemble: 'Cleveland Orchestra' },
      { performer: 'Roger Norrington', ensemble: 'London Classical Players' },
      { performer: 'Otto Klemperer', ensemble: 'Philharmonia Orchestra' },
    ],
    'early-romantic': [
      { performer: 'Carlos Kleiber', ensemble: 'Wiener Philharmoniker' },
      { performer: 'Bernard Haitink', ensemble: 'Concertgebouworkest' },
      { performer: 'Daniel Barenboim', ensemble: 'Berliner Philharmoniker' },
      { performer: 'Otto Klemperer', ensemble: 'Philharmonia Orchestra' },
      { performer: 'Wilhelm Furtwängler', ensemble: 'Berliner Philharmoniker' },
      { performer: 'Riccardo Chailly', ensemble: 'Gewandhausorchester Leipzig' },
    ],
    'romantic': [
      { performer: 'Herbert von Karajan', ensemble: 'Berliner Philharmoniker' },
      { performer: 'Bernard Haitink', ensemble: 'Concertgebouworkest' },
      { performer: 'Carlos Kleiber', ensemble: 'Wiener Philharmoniker' },
      { performer: 'Mariss Jansons', ensemble: 'Symphonieorchester des Bayerischen Rundfunks' },
      { performer: 'Claudio Abbado', ensemble: 'Berliner Philharmoniker' },
      { performer: 'Sergiu Celibidache', ensemble: 'Münchner Philharmoniker' },
    ],
    'late-romantic': [
      { performer: 'Leonard Bernstein', ensemble: 'New York Philharmonic' },
      { performer: 'Claudio Abbado', ensemble: 'Berliner Philharmoniker' },
      { performer: 'Pierre Boulez', ensemble: 'Cleveland Orchestra' },
      { performer: 'Mariss Jansons', ensemble: 'Concertgebouworkest' },
      { performer: 'Simon Rattle', ensemble: 'Berliner Philharmoniker' },
      { performer: 'Esa-Pekka Salonen', ensemble: 'Philharmonia Orchestra' },
    ],
    'modern': [
      { performer: 'Pierre Boulez', ensemble: 'Cleveland Orchestra' },
      { performer: 'Simon Rattle', ensemble: 'City of Birmingham Symphony' },
      { performer: 'Esa-Pekka Salonen', ensemble: 'Los Angeles Philharmonic' },
      { performer: 'Valery Gergiev', ensemble: 'Mariinsky Orchestra' },
      { performer: 'Michael Tilson Thomas', ensemble: 'San Francisco Symphony' },
      { performer: 'Riccardo Chailly', ensemble: 'Concertgebouworkest' },
    ],
  };
  const pool = pools[era] || pools['romantic'];
  // Hash the title to pick a stable 3
  const h = stringHash(title + c.id);
  const a = pool[h % pool.length];
  const b = pool[(h + 2) % pool.length];
  const d = pool[(h + 4) % pool.length];
  // Years spread across decades
  const baseYear = 1965 + ((h >> 3) % 30);
  return [
    { ...a, year: baseYear },
    { ...b, year: baseYear + 12 - ((h >> 5) % 4) * 2 },
    { ...d, year: baseYear - 16 + ((h >> 1) % 4) * 3 },
  ];
}

function stringHash(s) {
  let h = 0;
  for (let i = 0; i < s.length; i++) {
    h = (h * 31 + s.charCodeAt(i)) | 0;
  }
  return Math.abs(h);
}

window.WorkView = WorkView;