/* Portfolio — the reading pages.
   Profile     : biography, CV rows, portrait.
   Information : public collections, exhibition history, contact form, legal notice.
   Link        : outbound links.
   Writings    : papers and essays (PDF viewer via pdf.js, loaded on demand).
   Reads: window.HU_DATA (collections/exhibitions), window.HU_WRITINGS, strings via the `t` prop. */
const { HUButton, HUIconButton, HUTag, HUEyebrow, HUArtworkCard, HUMuseumLabel, HUSectionHeading, HUInput } = window;
const { HU_ASSET: ASSET, HU_smBreaks: smBreaks, HU_workById: workById } = window;

/* ---------------- Profile ---------------- */
function Row({ year, text }) {
  return (
    <div className="hu-cv__row">
      <span className="hu-cv__year">{year}</span>
      <span className="hu-cv__text">{text}</span>
    </div>
  );
}
function ProfileScreen({ t }) {
  const P = t.profile;
  const asideRef = React.useRef(null);
  const trackRef = React.useRef(null);
  React.useEffect(() => {
    const aside = asideRef.current, track = trackRef.current;
    if (!aside || !track) return;
    const sync = () => {
      // desktop only: pin the aside to its spacer track
      if (window.matchMedia("(max-width: 1080px)").matches) {
        aside.style.position = ""; aside.style.left = ""; aside.style.top = ""; aside.style.width = "";
        return;
      }
      const r = track.getBoundingClientRect();
      aside.style.position = "fixed";
      aside.style.left = r.left + "px";
      aside.style.width = r.width + "px";
      aside.style.top = "calc(72px + var(--space-8))";
    };
    sync();
    window.addEventListener("resize", sync);
    return () => window.removeEventListener("resize", sync);
  }, []);
  return (
    <div className="hu-page hu-wrap">
      <div className="hu-profile">
        <div className="hu-profile__spacer" ref={trackRef}>
          <aside className="hu-profile__aside" ref={asideRef}>
          <div className="hu-portrait">
            <div className="hu-portrait__frame" style={{ aspectRatio: "1 / 1" }}>
              <img src={`${ASSET}/portrait/chau_jin_hu_exhibition.jpg`} alt="Chau-Jin Hu at the easel" />
            </div>
          </div>
          <div className="hu-namestack hu-namestack--profile">
            <h1 className="hu-profile__name">胡朝景</h1>
            <p className="hu-profile__rom"><span className="hu-rom-a">Chau<span className="hu-rom-sep">-</span>Jin</span><span className="hu-rom-b">Hu</span></p>
          </div>
          <div className={"hu-profile__occ" + (t.occLabel === "Occupation" ? " hu-profile__occ--compact" : "")}>
            <span className="hu-occ-label">{t.occLabel}</span>
            {P.occupation.map((o, i) => <p key={i}>{o}</p>)}
          </div>
        </aside>
        </div>
        <div className="hu-profile__body">
          <section className="hu-cv">
            <HUEyebrow variant="accent">{t.education}</HUEyebrow>
            {P.education.map(([y, x]) => <Row key={y} year={y} text={x} />)}
          </section>
          <section className="hu-cv">
            <HUEyebrow variant="accent">{t.exhibitions}</HUEyebrow>
            {P.exhibitions.map(([y, x], i) => <Row key={i} year={y} text={x} />)}
          </section>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Information (collections · exhibitions · contact) ---------------- */
function InformationScreen({ t, lang, openWork }) {
  const [status, setStatus] = React.useState("idle");
  const [copied, setCopied] = React.useState(false);
  const email = "chaujin.tw@gmail.com";
  const submit = async (e) => {
    e.preventDefault();
    const form = e.currentTarget;
    const fd = new FormData(form);
    setStatus("sending");
    try {
      const res = await fetch("https://formsubmit.co/ajax/" + email, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          name: fd.get("name"), email: fd.get("email"), message: fd.get("message"),
          _subject: "作品洽詢 · chaujin.tw", _template: "table", _captcha: "false",
        }),
      });
      if (!res.ok) throw new Error(res.status);
      setStatus("sent"); form.reset();
    } catch (err) { setStatus("error"); }
  };
  const copyEmail = () => {
    const done = () => { setCopied(true); setTimeout(() => setCopied(false), 1800); };
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(email).then(done).catch(done);
    } else {
      const ta = document.createElement("textarea");
      ta.value = email; document.body.appendChild(ta); ta.select();
      try { document.execCommand("copy"); } catch (e) {}
      document.body.removeChild(ta); done();
    }
  };
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [copied, lang]);
  const D = window.HU_DATA;
  const collWorks = D.collections.map((c) => D.works.find((w) => w.id === c.id)).filter(Boolean)
    .map((w) => { const r = (window.HU_RATIOS || {})[w.img] || ""; const p = r.split("/"); return { w, ar: p.length === 2 ? (+p[0]) / (+p[1]) : 1 }; })
    .sort((a, b) => a.ar - b.ar)
    .map((x) => x.w);
  return (
    <div className="hu-page hu-page--tight hu-wrap">
      <HUSectionHeading center title={t.infoTitle} cjk={lang !== "en"} accent sub={t.cSub} />

      <section className="hu-info-sec">
        <HUEyebrow variant="accent" rule>{t.collHead}</HUEyebrow>
        <div className="hu-coll-grid">
          {collWorks.map((w) => <HUArtworkCard key={w.id} work={w} lang={lang} onClick={() => openWork(w.id)} />)}
        </div>
      </section>

      <section className="hu-info-sec">
        <HUEyebrow variant="accent" rule>{t.contactHead}</HUEyebrow>
        <div className="hu-contact">
          <form className="hu-form" onSubmit={submit}>
            <HUInput label={t.cName} name="name" placeholder={t.cNameP} required />
            <HUInput label={t.cEmail} name="email" type="email" placeholder={t.cEmailP} required />
            <HUInput label={t.cMsg} name="message" multiline placeholder={t.cMsgP} required />
            <div className="hu-form__actions">
              <HUButton size="lg" type="submit" disabled={status === "sending" || status === "sent"}>
                {status === "sending" ? t.cSending : status === "sent" ? t.cSent : t.cSend}
              </HUButton>
              {status === "error" && <p className="hu-form__err">{t.cErr}</p>}
            </div>
          </form>
          <aside className="hu-info">
            <div className="hu-info__block">
              <HUEyebrow>Email</HUEyebrow>
              <button type="button" className="hu-info__link" onClick={copyEmail} title={email}>{copied ? t.emailCopied : email}</button>
            </div>
            <div className="hu-info__block">
              <HUEyebrow>Facebook</HUEyebrow>
              <a className="hu-info__link" href="https://www.facebook.com/chaujin.tw/?locale=zh_TW" target="_blank" rel="noopener">Chau-Jin Hu</a>
            </div>
            <div className="hu-info__legal">
              <p className="hu-info__copyright">{t.iCopyright(new Date().getFullYear())}</p>
              <p className="hu-info__disc-head">{t.iDisclaimerHead}</p>
              {t.iDisclaimer.map((l, i) => <p key={i} className="hu-info__disc">{l}</p>)}
            </div>
          </aside>
        </div>
      </section>
    </div>
  );
}

/* ---------------- Link ---------------- */
function LinkScreen({ t, lang }) {
  return (
    <div className="hu-page hu-wrap">
      <HUSectionHeading center eyebrow={t.linkEyebrow} title={t.linkTitle} cjk={lang !== "en"} sub={t.linkSub} />
    </div>
  );
}
/* ---------------- Writings (文章) ---------------- */
function locTitle(piece, lang){ return lang === "en" ? piece.en : lang === "jp" ? (piece.jp || piece.cjk) : piece.cjk; }
function pickBody(piece, lang){
  if (lang === "en") return piece.bodyEn || piece.bodyZh;
  if (lang === "jp") return piece.bodyJp || piece.bodyZh;
  return piece.bodyZh;
}
function pickAbstract(piece, lang){ return lang === "en" ? piece.abEn : lang === "jp" ? piece.abJp : piece.abZh; }

function loadPdfJs(){
  if (window.__pdfjsPromise) return window.__pdfjsPromise;
  window.__pdfjsPromise = new Promise((resolve, reject) => {
    const s = document.createElement("script");
    s.src = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js";
    s.onload = () => {
      const lib = window.pdfjsLib;
      lib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
      resolve(lib);
    };
    s.onerror = reject;
    document.head.appendChild(s);
  });
  return window.__pdfjsPromise;
}

function PdfBlock({ t, file }){
  const [show, setShow] = React.useState(false);
  const [state, setState] = React.useState("idle"); // idle | loading | done | error
  const hostRef = React.useRef(null);
  const href = `${window.HU_KIT_BASE || ""}papers/${file}`;
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  React.useEffect(() => {
    if (!show || state !== "idle") return;
    let cancelled = false;
    setState("loading");
    (async () => {
      try {
        const lib = await loadPdfJs();
        const buf = await fetch(href).then((r) => { if (!r.ok) throw new Error(r.status); return r.arrayBuffer(); });
        if (cancelled) return;
        const pdf = await lib.getDocument({ data: buf }).promise;
        const host = hostRef.current;
        if (!host || cancelled) return;
        host.innerHTML = "";
        for (let n = 1; n <= pdf.numPages; n++) {
          const page = await pdf.getPage(n);
          if (cancelled) return;
          const vp0 = page.getViewport({ scale: 1 });
          const scale = Math.min(2, (host.clientWidth || 800) / vp0.width);
          const vp = page.getViewport({ scale: scale * (window.devicePixelRatio || 1) });
          const canvas = document.createElement("canvas");
          canvas.width = vp.width; canvas.height = vp.height;
          canvas.style.width = "100%"; canvas.style.height = "auto";
          canvas.className = "hu-pdf-page";
          host.appendChild(canvas);
          await page.render({ canvasContext: canvas.getContext("2d"), viewport: vp }).promise;
        }
        if (!cancelled) setState("done");
      } catch (e) { if (!cancelled) setState("error"); }
    })();
    return () => { cancelled = true; };
  }, [show]);
  return (
    <div className="hu-pdfview">
      <div className="hu-pdf-actions">
        <button type="button" className="hu-pdf" onClick={() => setShow((s) => !s)}>
          <i data-lucide={show ? "chevron-up" : "file-text"}></i> {show ? t.wPdfHide : t.wPdf}
        </button>
      </div>
      {show && state === "loading" ? <p className="hu-pdf-load">{t.wPdfLoading}</p> : null}
      {show && state === "error" ? <p className="hu-pdf-err">{t.wPdfErr}</p> : null}
      <div ref={hostRef} className="hu-pdf-pages" style={{ display: show ? "block" : "none" }}></div>
    </div>
  );
}

function ArticleReader({ t, lang, kind, piece, onBack }){
  React.useEffect(() => { window.scrollTo(0, 0); }, [piece]);
  const cjk = lang !== "en";
  const main = locTitle(piece, lang);
  const alt = lang === "en" ? piece.cjk : piece.en;
  return (
    <article className="hu-article hu-wrap">
      <header className="hu-article__head">
        <h2 className={`hu-article__title${cjk ? " is-cjk" : ""}`}>{main}</h2>
        <p className="hu-article__sub">{alt}{piece.year ? ` · ${piece.year}` : ""}</p>
        {piece.venue ? <p className="hu-article__venue">{piece.venue}</p> : null}
      </header>

      {kind === "statement" ? (
        <div className={`hu-article__body${cjk ? " is-cjk" : ""}`}>
          {pickBody(piece, lang).map((p, i) => <p key={i}>{p}</p>)}
          {piece.sign ? <p className="hu-article__sign">{piece.sign}</p> : null}
        </div>
      ) : null}

      {kind === "treatise" ? (
        <div className={`hu-article__body${cjk ? " is-cjk" : ""}`}>
          {pickAbstract(piece, lang) ? <p className="hu-article__lead">{pickAbstract(piece, lang)}</p> : null}
          {!pickAbstract(piece, lang) && piece.pdf ? (
            <div className="hu-article__rule"><span>{t.wZhOnly}</span></div>
          ) : null}
          {piece.excerptZh ? (
            <div className="hu-article__rule"><span>{t.wExcerpt}{lang !== "tw" ? ` · ${t.wZhOnly}` : ""}</span></div>
          ) : null}
          {piece.excerptZh ? (
            <div className="is-cjk">
              {piece.excerptZh.map((p, i) => <p key={i}>{p}</p>)}
            </div>
          ) : null}
          {piece.pdf ? <PdfBlock t={t} file={piece.pdf} /> : null}
        </div>
      ) : null}

      {kind === "viewpoint" ? (
        <div className={`hu-article__body${cjk ? " is-cjk" : ""}`}>
          {lang !== "tw" ? (
            <React.Fragment>
              <p className="hu-article__lead">{pickAbstract(piece, lang)}</p>
              <div className="hu-article__rule"><span>{t.wZhOnly}</span></div>
            </React.Fragment>
          ) : null}
          <div className="is-cjk">
            {piece.bodyZh.map((p, i) => <p key={i}>{p}</p>)}
          </div>
        </div>
      ) : null}
    </article>
  );
}

function WritingItem({ piece, lang, onOpen }){
  return (
    <button className="hu-wlist__row" onClick={onOpen}>
      <span className="hu-wlist__year">{piece.year}</span>
      <span className="hu-wlist__main">
        <span className="hu-wlist__title is-cjk">{piece.cjk}</span>
        <span className="hu-wlist__en">{piece.en}{piece.venue ? ` · ${piece.venue}` : ""}</span>
      </span>
      <span className="hu-wlist__go" aria-hidden="true"><i data-lucide="arrow-right"></i></span>
    </button>
  );
}

function Jottings({ lang }){
  const items = window.HU_WRITINGS.jottings;
  const text = (j) => lang === "en" ? j.en : lang === "jp" ? j.jp : j.zh;
  const cjk = lang !== "en";
  return (
    <div className="hu-jot">
      {items.map((j, i) => (
        j.img ? (
          <figure key={i} className={`hu-jot__pair${i % 2 ? " hu-jot__pair--alt" : ""}`}>
            <span className="hu-jot__plate"><img src={`${ASSET}/works/${j.img}`} alt="" loading="lazy" /></span>
            <figcaption className={`hu-jot__cap${cjk ? " is-cjk" : ""}`}>{text(j)}</figcaption>
          </figure>
        ) : (
          <p key={i} className={`hu-jot__line${cjk ? " is-cjk" : ""}`}>{text(j)}</p>
        )
      ))}
    </div>
  );
}

function WritingsScreen({ t, lang }){
  const W = window.HU_WRITINGS;
  const [open, setOpen] = React.useState(null); // {kind, piece}
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  if (open) return <ArticleReader t={t} lang={lang} kind={open.kind} piece={open.piece} onBack={() => setOpen(null)} />;
  return (
    <div className="hu-page hu-page--tight hu-wrap">
      <HUSectionHeading center title={t.wTitle} cjk={lang !== "en"} accent sub={t.wSub} />

      <section className="hu-info-sec hu-wsec">
        <HUEyebrow variant="accent" rule>{t.wPhilosophy}</HUEyebrow>
        <div className="hu-wlist">
          {W.philosophy.map((p) => <WritingItem key={p.id} piece={p} lang={lang} onOpen={() => setOpen({ kind: "statement", piece: p })} />)}
        </div>
      </section>

      <section className="hu-info-sec hu-wsec">
        <HUEyebrow variant="accent" rule>{t.wTreatise}</HUEyebrow>
        <div className="hu-wlist">
          {W.treatise.map((p) => <WritingItem key={p.id} piece={p} lang={lang} onOpen={() => setOpen({ kind: "treatise", piece: p })} />)}
        </div>
      </section>

      <section className="hu-info-sec hu-wsec">
        <HUEyebrow variant="accent" rule>{t.wViewpoint}</HUEyebrow>
        <div className="hu-wlist">
          {W.viewpoint.map((p) => <WritingItem key={p.id} piece={p} lang={lang} onOpen={() => setOpen({ kind: "treatise", piece: p })} />)}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ProfileScreen, InformationScreen, LinkScreen, WritingsScreen });