// ============================================
// ArchiveView — bookshelf + opened book
// ============================================

function BookSpine({ vol, onClick, idx }) {
  return (
    <button
      className={`book cover-${vol.cover || 'sage'}`}
      data-h={idx % 5}
      onClick={onClick}
      aria-label={`${vol.label} 열기`}
    >
      <div className="book-spine">
        <div className="book-spine-vol">{vol.label}</div>
        <div className="book-spine-label">{vol.title || ''}</div>
        <div className="book-spine-vol" style={{ fontSize: 9, opacity: 0.7 }}>
          {vol.count}通
        </div>
      </div>
    </button>
  );
}

function Shelf({ volumes, onOpen }) {
  // Group books into shelves of 8
  const shelves = [];
  for (let i = 0; i < volumes.length; i += 8) {
    shelves.push(volumes.slice(i, i + 8));
  }
  if (shelves.length === 0) shelves.push([]);

  return (
    <div className="shelf-wrap">
      {shelves.map((books, si) => (
        <div className="shelf" key={si}>
          <div className="shelf-books">
            {books.length === 0 ? (
              <div className="shelf-empty">— 아직 보관된 권이 없습니다 —</div>
            ) : (
              books.map((vol, i) => (
                <BookSpine
                  key={vol.id || vol.vol}
                  vol={vol}
                  idx={i + si * 8}
                  onClick={() => onOpen(vol)}
                />
              ))
            )}
          </div>
          <div className="shelf-board" />
        </div>
      ))}
    </div>
  );
}

function BookOpen({ vol, onClose, me }) {
  const { useEffect } = React;

  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  return (
    <div className="book-stage">
      <div className="book-stage-top">
        <button onClick={onClose}>← 서가</button>
        <span>{vol.label}</span>
      </div>
      <div className="book-open">
        <div className="book-inner">
          <div className="book-title-page">
            <div className="book-title-vol">{vol.label}</div>
            {vol.title && vol.title !== vol.label && (
              <div className="book-title-name">{vol.title}</div>
            )}
            <div className="book-title-period">{vol.period}</div>
            <div className="book-title-count">{vol.count}通 · TELEGRAMS</div>
          </div>

          {(vol.telegrams || []).map((t, i) => (
            <div className="book-page-tg" key={i}>
              <div className={`book-page-from ${t.from === me ? 'me' : 'other'}`}>
                {t.from === me ? '→ 발신' : '← 수신'}
              </div>
              <div className="book-page-text">
                <FormattedText text={t.text} />
              </div>
              <div className="book-page-time">{t.time}</div>
            </div>
          ))}

          <div className="book-end-stamp">
            <div className="book-end-stamp-inner">— FIN —</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ArchiveView({ state }) {
  const { useState } = React;
  const [openVol, setOpenVol] = useState(null);

  return (
    <div className="fade-up">
      <div className="section-label">서가 · ARCHIVE</div>
      <Shelf volumes={state.volumes} onOpen={setOpenVol} />
      {state.volumes.length === 0 && (
        <div className="empty" style={{ marginTop: 8 }}>
          첫 만남 후 이곳에 첫 권이 보관됩니다.
        </div>
      )}
      {openVol && (
        <BookOpen vol={openVol} me={state.me} onClose={() => setOpenVol(null)} />
      )}
    </div>
  );
}

window.ArchiveView = ArchiveView;