/* ===========================================================
   Editions — the UK/US (or any two-market) comparison, rendered inside the
   song-by-song section.

   The dossiers made a point of saying these albums exist in two incompatible
   versions, then listed one tracklist and showed one sleeve. This puts both on
   the page and, more usefully, works out the DIFFERENCE itself rather than
   asking an editor to describe it in prose that can drift out of date:

     * a track only on edition A is marked as dropped from B
     * a track only on edition B is marked as added
     * shared tracks that moved position show the shift

   Sleeve images are optional. When a market has its own sleeve file it is shown
   beside its tracklist; when it doesn't, the tracklist stands alone rather than
   falling back to the other market's artwork, which would be worse than nothing.
   =========================================================== */

const { useState: useEdState, useMemo: useEdMemo } = React;

const norm = (t) => String(t || "").toLowerCase().replace(/[^a-z0-9]/g, "");

function Editions({ editions }) {
  if (!editions || !Array.isArray(editions.markets) || editions.markets.length < 2) return null;
  const [view, setView] = useEdState("compare");   // compare | 0 | 1 | …

  const diff = useEdMemo(() => {
    const [a, b] = editions.markets;
    const listA = (a.tracks || []).map(norm);
    const listB = (b.tracks || []).map(norm);
    const setA = new Set(listA), setB = new Set(listB);
    return {
      onlyA: (a.tracks || []).filter((t) => !setB.has(norm(t))),
      onlyB: (b.tracks || []).filter((t) => !setA.has(norm(t))),
      moved: (a.tracks || []).filter((t) => {
        const i = listA.indexOf(norm(t)), j = listB.indexOf(norm(t));
        return j >= 0 && i !== j;
      }).length,
      shared: (a.tracks || []).filter((t) => setB.has(norm(t))).length,
    };
  }, [editions]);

  const [a, b] = editions.markets;

  return (
    <div className="editions">
      <div className="ed-head">
        <h4 className="sub-h">Two different albums</h4>
        {editions.summary && <p className="ed-summary">{editions.summary}</p>}
        <div className="ed-diff-strip">
          <span><b>{diff.shared}</b> shared</span>
          <span className="ed-only-a"><b>{diff.onlyA.length}</b> only on {a.label}</span>
          <span className="ed-only-b"><b>{diff.onlyB.length}</b> only on {b.label}</span>
          {diff.moved > 0 && <span><b>{diff.moved}</b> resequenced</span>}
        </div>
      </div>

      <div className="ed-cols">
        {editions.markets.map((m, mi) => {
          const otherIdx = mi === 0 ? 1 : 0;
          const other = new Set((editions.markets[otherIdx].tracks || []).map(norm));
          return (
            <div className="ed-col" key={m.label}>
              <div className="ed-col-head">
                <span className="ed-market">{m.label}</span>
                {m.release && <span className="ed-release">{m.release}</span>}
              </div>
              {m.catno && <div className="ed-catno">{m.catno}</div>}

              {m.coverImage && (
                <figure className="ed-sleeve">
                  <img src={m.coverImage} alt={`${m.label} sleeve`} loading="lazy" />
                  {m.sleeve && <figcaption>{m.sleeve}</figcaption>}
                </figure>
              )}
              {!m.coverImage && m.sleeve && <p className="ed-sleeve-note">{m.sleeve}</p>}

              <ol className="ed-tracks">
                {(m.tracks || []).map((t, i) => {
                  const unique = !other.has(norm(t));
                  return (
                    <li key={t + i} className={unique ? "ed-t-unique" : undefined}>
                      <span className="ed-t-n">{i + 1}</span>
                      <span className="ed-t-title">{t}</span>
                      {unique && <span className="ed-t-flag">only here</span>}
                    </li>
                  );
                })}
              </ol>
              {m.note && <p className="ed-note">{m.note}</p>}
            </div>
          );
        })}
      </div>

      {editions.note && <p className="ed-foot">{editions.note}</p>}
    </div>
  );
}

Object.assign(window, { Editions });