/* global React, ChamberChrome */
const { useState, useEffect, useRef } = React;

function Journal({ onBack, onOpenPhoto }) {
  const entries = window.JOURNAL || [];
  const photos = window.DARSHAN || [];
  const photoById = Object.fromEntries(photos.map(p => [p.id, p]));

  const [openId, setOpenId] = useState(null);

  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") { openId ? setOpenId(null) : onBack(); } };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [openId, onBack]);

  if (openId) {
    const entry = entries.find(e => e.id === openId);
    return <JournalEntry entry={entry} photoById={photoById} onBack={() => setOpenId(null)} onOpenPhoto={onOpenPhoto} />;
  }

  return (
    <div className="chamber chamber-journal">
      <ChamberChrome onBack={onBack} num="iv." dev="लेखन" en="Journal" />

      <header className="chamber-head">
        <h1 className="chamber-title">
          letters from <em>the road.</em>
        </h1>
        <p className="chamber-sub">
          field notes written between trains and on the steps of small temples — what the camera missed, what the mind kept anyway.
        </p>
      </header>

      <div className="journal-index">
        {entries.map((e, i) => {
          const p = photoById[e.photoId];
          return (
            <button key={e.id} className="journal-row" onClick={() => setOpenId(e.id)} data-cursor>
              <div className="journal-row-photo">
                <img src={p?.file} alt="" loading="lazy"/>
              </div>
              <div className="journal-row-body">
                <div className="journal-row-meta">
                  <span className="num">— {String(i + 1).padStart(2, "0")} —</span>
                  <span>{e.place}</span>
                  <span className="dot">·</span>
                  <span>{e.date}</span>
                </div>
                <h2 className="journal-row-title">
                  <span className="dev">{e.dev}</span>
                  {e.title}
                </h2>
                <p className="journal-row-pre">{e.body[0]}</p>
                <div className="journal-row-cta">read the entry  →</div>
              </div>
            </button>
          );
        })}
      </div>

      <footer className="chamber-foot">
        <div className="rule"></div>
        <p>the next entry is being written. it will appear when it is ready.</p>
      </footer>
    </div>
  );
}

function JournalEntry({ entry, photoById, onBack, onOpenPhoto }) {
  const p = photoById[entry.photoId];
  return (
    <div className="chamber chamber-journal-entry">
      <ChamberChrome onBack={onBack} num="iv." dev={entry.dev} en="Journal" hint="back to the journal" />

      <article className="entry-article">
        <header className="entry-head">
          <div className="entry-meta">
            <span>{entry.place}</span>
            <span className="dot">·</span>
            <span>{entry.date}</span>
          </div>
          <h1 className="entry-title">
            <span className="dev">{entry.dev}</span>
            {entry.title}
          </h1>
        </header>

        <figure className="entry-photo" onClick={() => onOpenPhoto && onOpenPhoto(entry.photoId)} data-cursor>
          <img src={p?.file} alt={p?.title} />
          <figcaption>
            <span className="dev">{p?.dev}</span>
            <span>{p?.title}</span>
            <span className="thin">— {p?.coords}</span>
          </figcaption>
        </figure>

        <div className="entry-body">
          {entry.body.map((para, i) => {
            // first paragraph gets a drop-cap
            if (i === 0) {
              const first = para.charAt(0);
              const rest = para.slice(1);
              return (
                <p key={i} className="dropcap">
                  <span className="dc">{first}</span>{rest}
                </p>
              );
            }
            return <p key={i}>{para}</p>;
          })}
        </div>

        <footer className="entry-end">
          <div className="rule"></div>
          <div className="entry-signature">
            <span className="dev">— राहुल</span>
            <span>Rahul</span>
          </div>
          <button className="chamber-link" onClick={onBack} data-cursor>
            ← return to the journal
          </button>
        </footer>
      </article>
    </div>
  );
}

window.Journal = Journal;