/* =========================================================
   三藏閣 — Reader 화면
   사이드바(탭) + 상단 컨트롤 + 본문 + 우측 레일 + 용어 미니카드
   ========================================================= */

const { Icon: RIcon } = window;

const widthClass = { narrow: 'narrow', normal: 'normal', wide: 'wide' };

window.ReaderScreen = ({
  passageId, onChangePassage, onGoHome,
  corpusManifest, onOpenCorpusPassage, externalLoading,
  settings, onSettings,
  panel, onPanelChange,
  mode, onMode,
  bookmarks, onAddBookmark, onJumpBookmark, onRemoveBookmark,
  highlights, onAddHighlight, onJumpHighlight,
  searchResults, searchQuery, onSearch, onJumpSearch,
  ttsState, onTTS,
  isMobile,
  onOpenEncy, onOpenDict,
}) => {
  const passage = window.PASSAGES[passageId];
  const canon = passage && window.CANON_DATA[passage.canon];

  /* 사이드바 모바일 토글 + 데스크톱 콜랩스 */
  const [sbOpen, setSbOpen] = React.useState(false);
  const [sbCollapsed, setSbCollapsed] = React.useState(false);
  const toggleSidebar = () => {
    if (window.innerWidth <= 1023) setSbOpen(o => !o);
    else setSbCollapsed(c => !c);
  };

  /* 진행률 (간단한 스크롤 비율) */
  const [progress, setProgress] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      const el = document.querySelector('.r-body');
      if (!el) return;
      const max = el.scrollHeight - window.innerHeight;
      setProgress(Math.max(0, Math.min(1, window.scrollY / Math.max(1, max))));
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [passageId]);

  /* 인용 링크 복사 */
  const onCite = () => {
    const url = `${location.origin}${location.pathname}#p=${passageId}`;
    navigator.clipboard && navigator.clipboard.writeText(url);
  };

  /* 본문 용어 미니카드 */
  const [termCard, setTermCard] = React.useState(null);
  const closeCard = () => setTermCard(null);

  if (!passage) {
    return (
      <div style={{padding:60, textAlign:'center', color:'var(--ink-mute)'}}>
        본문을 불러올 수 없습니다.
      </div>
    );
  }

  const workId = passage.head?.meta?.find(item => item.k === 'WORK')?.v || '';
  const tocTrail = window.CorpusToc.getTrail(passage.bu, workId, passage.head?.skt || '');

  return (
    <div
      className={
        'reader' +
        (panel ? ' is-tools-open' : '') +
        (sbOpen ? ' is-sidebar-open' : '') +
        (sbCollapsed ? ' is-sidebar-collapsed' : '')
      }
      data-mode={mode}
      data-width={settings.width}
      data-font={settings.font}
      data-show-original={settings.showOriginal ? '1' : '0'}
      data-show-footnotes={settings.showFootnotes ? '1' : '0'}
      style={{
        '--text-size': settings.size + 'px',
        '--text-lh': settings.lh,
        '--c': canon.color,
      }}
      data-screen-label="01 독자 화면"
    >
      <window.ReaderSidebar
        activeCanonId={passage.canon}
        onSelectCanon={async (cid) => {
          if (cid === 'pali' && corpusManifest) {
            try {
              const collection = window.CorpusClient.findCollection(corpusManifest, 'pali');
              const volume = collection?.volumes?.[0];
              if (volume) {
                const index = await window.CorpusClient.loadIndex(volume);
                const firstChunk = index?.works?.[0]?.chunks?.[0];
                if (firstChunk) {
                  await onOpenCorpusPassage(firstChunk);
                  return;
                }
              }
            } catch (error) {
              console.error('외부 빨리 경전 목차를 열지 못했습니다.', error);
            }
          }
          const c = window.CANON_DATA[cid];
          if (!c) return;
          for (const bu of c.bu) for (const s of (bu.sutras||[])) for (const ch of (s.chapters||[]))
            if (ch.hasBody) { onChangePassage(ch.id); return; }
        }}
        currentPassageId={passageId}
        onSelectPassage={onChangePassage}
        corpusManifest={corpusManifest}
        onSelectCorpusPassage={onOpenCorpusPassage}
        externalLoading={externalLoading}
        onClose={() => setSbOpen(false)}
        onOpenEncy={onOpenEncy}
        onOpenDict={onOpenDict}
        bookmarks={bookmarks}
        highlights={highlights}
      />
      <div className="r-sidebar-backdrop" onClick={() => setSbOpen(false)} />

      <main className="r-main">
        <div className="r-toolbar">
          <button className="icon-btn" title="홈" onClick={onGoHome}>
            <RIcon name="home" size={18}/>
          </button>

          <div className="r-toolbar__crumb">
            <span className="r-toolbar__crumb-prev">{passage.head.meta[0]?.v}</span>
            <span className="r-toolbar__crumb-sep">›</span>
            <span className="han">{passage.location.buLabel}</span>
            {tocTrail.map((item, index) => (
              <React.Fragment key={`${item.label}-${index}`}>
                <span className="r-toolbar__crumb-sep">›</span>
                <span>{item.label}</span>
              </React.Fragment>
            ))}
          </div>

          <div className="r-toolbar__progress" aria-hidden="true">
            <div className="r-toolbar__progress-bar"><div style={{width: `${progress*100}%`}}/></div>
            <span className="r-toolbar__progress-pct">{Math.round(progress*100)}%</span>
          </div>

          <div className="r-mode" role="tablist" aria-label="원문/번역 표시 모드">
            <button className={'r-mode__btn' + (mode === 'translation' ? ' is-active' : '')} onClick={() => onMode('translation')} title="번역만">
              <span className="r-mode__btn-label">번역</span>
            </button>
            <button className={'r-mode__btn' + (mode === 'parallel' ? ' is-active' : '')} onClick={() => onMode('parallel')} title="좌우 대조">
              <span className="r-mode__btn-label">원문·번역</span>
            </button>
            <button className={'r-mode__btn' + (mode === 'original' ? ' is-active' : '')} onClick={() => onMode('original')} title="원문만">
              <span className="r-mode__btn-label">원문</span>
            </button>
          </div>
        </div>

        <article className="r-body">
          <window.PassageBody passage={passage} mode={mode} onCite={onCite} tocTrail={tocTrail}/>
        </article>
      </main>

      <window.ReaderTools
        passage={passage}
        panel={panel}
        onPanelChange={onPanelChange}
        settings={settings}
        onSettings={onSettings}
        bookmarks={bookmarks}
        onJumpBookmark={onJumpBookmark}
        onRemoveBookmark={onRemoveBookmark}
        highlights={highlights}
        onJumpHighlight={onJumpHighlight}
        searchResults={searchResults}
        searchQuery={searchQuery}
        onSearch={onSearch}
        onJumpSearch={onJumpSearch}
        onTTS={() => onTTS(passageId)}
        ttsActive={ttsState.playing && ttsState.id === passageId}
        onAddBookmark={() => onAddBookmark(passage)}
        onCite={onCite}
        sbCollapsed={sbCollapsed}
        onToggleSidebar={toggleSidebar}
        onOpenEncy={onOpenEncy}
        onOpenDict={onOpenDict}
      />

      <window.FootnotePopover passage={passage} onTermClick={(d) => setTermCard(d)}/>
      {termCard && (
        <window.TermCard
          termKey={termCard.term}
          x={termCard.x}
          y={termCard.y}
          onClose={closeCard}
          onOpenEncy={(id) => { closeCard(); onOpenEncy(id); }}
          onOpenDict={(id) => { closeCard(); onOpenDict(id); }}
        />
      )}
    </div>
  );
};