/* ============================================================
   Sara Akef, WORK LIGHTBOX
   Opens one production: its own photos plus full credit detail.
   ============================================================ */
const { useState: useStateW, useEffect: useEffectW } = React;
const tW = window.SA_T, nW = window.SA_N;

function WorkLightbox({ credit, onClose }) {
  const [i, setI] = useStateW(0);
  const frames = (credit && credit.frames) || [];

  useEffectW(() => { setI(0); }, [credit && credit.id]);

  useEffectW(() => {
    if (!credit) return;
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") setI((n) => (n + 1) % Math.max(1, frames.length));
      if (e.key === "ArrowLeft") setI((n) => (n - 1 + Math.max(1, frames.length)) % Math.max(1, frames.length));
    };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [credit, onClose, frames.length]);

  if (!credit) return null;
  const many = frames.length > 1;

  return (
    <div className="lb wl" onClick={onClose}>
      <button className="lb-close" aria-label={tW("lbClose")} onClick={onClose}>✕</button>
      <div className="wl-stage" onClick={(e) => e.stopPropagation()}>

        <div className="wl-frame">
          {frames.map((src, n) => (
            <img key={n} src={src} alt={n === i ? ((credit && credit.title) || "") : ""} className={n === i ? "on" : ""} draggable="false" />
          ))}
          {many ? (
            <React.Fragment>
              <button className="wl-nav prev" aria-label={tW("lbPrev")}
                      onClick={() => setI((n) => (n - 1 + frames.length) % frames.length)}>‹</button>
              <button className="wl-nav next" aria-label={tW("lbNext")}
                      onClick={() => setI((n) => (n + 1) % frames.length)}>›</button>
              <span className="wl-count">{nW(i + 1)} / {nW(frames.length)}</span>
            </React.Fragment>
          ) : null}
        </div>

        {many ? (
          <div className="wl-thumbs">
            {frames.map((src, n) => (
              <button key={n} className={"wl-thumb" + (n === i ? " on" : "")} onClick={() => setI(n)}
                      aria-label={((credit && credit.title) || "") + tW("listSep") + nW(n + 1)}>
                <img src={src} alt="" />
              </button>
            ))}
          </div>
        ) : null}

        <div className="wl-meta">
          <div className="wl-id">
            <h3 className="disp">{credit.title}{credit.fa ? <span className="fa"> {credit.fa}</span> : null}</h3>
            <div className="wl-sub">{credit.role}</div>
          </div>
          <dl className="wl-facts">
            <div><dt>{tW("lbYear")}</dt><dd>{credit.year}</dd></div>
            <div><dt>{tW("lbType")}</dt><dd>{credit.kind}</dd></div>
            {credit.director ? <div><dt>{tW("lbDirector")}</dt><dd>{credit.director}</dd></div> : null}
            {credit.writer ? <div><dt>{tW("lbWriter")}</dt><dd>{credit.writer}</dd></div> : null}
            {credit.venue ? <div><dt>{tW("lbStaged")}</dt><dd>{credit.venue}{credit.nights ? tW("listSep") + credit.nights : ""}</dd></div> : null}
            {credit.credits_crew ? <div><dt>{tW("lbCrew")}</dt><dd>{credit.credits_crew}</dd></div> : null}
          </dl>
        </div>

        <div className="wl-foot">
          {credit.video
            ? <a className="wl-watch" href={credit.video} target="_blank" rel="noopener" onClick={(e) => e.stopPropagation()}>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m10 8 6 4-6 4V8z"/><rect x="2" y="4" width="20" height="16" rx="3"/></svg>
                {tW("lbWatch")}
              </a>
            : <span></span>}
          <span className="lb-note">{many ? tW("lbBrowse") : tW("lbEsc")}</span>
        </div>
      </div>
    </div>
  );
}
window.WorkLightbox = WorkLightbox;