/* =========================================================================
   daily.jsx — the journal. Today featured, then a masonry of every past
   frame. Click any frame to enlarge (lightbox with ← → / Esc).
   ========================================================================= */

const DAILY_RATIOS = ["3 / 4", "1 / 1", "4 / 5", "4 / 3", "3 / 4", "1 / 1", "4 / 5", "3 / 4", "1 / 1", "4 / 3", "3 / 4", "4 / 5", "1 / 1", "3 / 4", "4 / 3"];

function Lightbox({ list, idx, lang, onClose, setIdx }) {
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      else if (e.key === "ArrowLeft") setIdx((idx - 1 + list.length) % list.length);
      else if (e.key === "ArrowRight") setIdx((idx + 1) % list.length);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [idx, list, onClose, setIdx]);

  if (idx < 0) return null;
  const item = list[idx];
  return (
    <div className="lb" onClick={onClose}>
      <button className="lb-x" onClick={onClose}>CLOSE ✕</button>
      <button className="lb-nav lb-prev" onClick={(e) => { e.stopPropagation(); setIdx((idx - 1 + list.length) % list.length); }}>←</button>
      <button className="lb-nav lb-next" onClick={(e) => { e.stopPropagation(); setIdx((idx + 1) % list.length); }}>→</button>
      <figure className="lb-fig" onClick={(e) => e.stopPropagation()}>
        <div className="lb-photo">
          <Photo item={item} ratio={item.src ? null : "4 / 3"} />
        </div>
        <figcaption className="lb-cap">
          <span className="txt">{t(item.caption, lang)}</span>
          <span className="meta">{fmtStamp(item.date)} · {item.day}</span>
        </figcaption>
      </figure>
    </div>
  );
}

function Daily({ lang }) {
  const [idx, setIdx] = useState(-1);

  return (
    <div>
      <div className="sp-s"></div>

      <header className="rise is-in">
        <h1 className="h-title">{t(STR.daily_title, lang)}</h1>
        <p className="h-sub">{t(STR.daily_sub, lang)}</p>
      </header>

      <div className="sp-m"></div>

      {/* today featured */}
      <section className="rise is-in d1 col">
        <Dateline dot>{t(STR.daily_today, lang)} · {fmtStamp(TODAY.date)} · {TODAY.day}</Dateline>
        <div className="sp-s"></div>
        <Photo item={TODAY} ratio="3 / 2" click onClick={() => setIdx(0)} />
        <div className="cap">
          <span className="txt">{t(TODAY.caption, lang)}</span>
        </div>
      </section>

      <div className="sp-l"></div>
      <hr className="rule" />
      <div className="sp-m"></div>

      {/* the masonry archive */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: "clamp(20px,3vw,32px)" }}>
        <Dateline>{t(STR.daily_archive, lang)}</Dateline>
        <span className="dl" style={{ color: "var(--line)" }}>{t(STR.enlarge, lang)}</span>
      </div>

      <div className="masonry rise is-in d2">
        {ARCHIVE.map((p, i) => (
          <div className="m-item" key={p.date}>
            <Photo item={p} no={i + 1} ratio={DAILY_RATIOS[i % DAILY_RATIOS.length]} click onClick={() => setIdx(i + 1)} />
            <div className="cap">
              <span className="txt">{t(p.caption, lang)}</span>
              <span className="meta">{fmtStamp(p.date).slice(0, 6)}</span>
            </div>
          </div>
        ))}
      </div>

      <Lightbox
        list={[TODAY, ...ARCHIVE]}
        idx={idx}
        lang={lang}
        onClose={() => setIdx(-1)}
        setIdx={setIdx}
      />
    </div>
  );
}

Object.assign(window, { Daily });