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

const { Icon: RIcon } = window;

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

window.ReaderScreen = ({
  passageId, onChangePassage, onGoHome,
  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 layerSettings = {
    source: settings.showSource !== false,
    reading: settings.showReading !== false,
    translation: settings.showTranslation !== false,
  };
  const activeLayerCount = Object.values(layerSettings).filter(Boolean).length;
  const toggleLayer = (key) => {
    const prop = {
      source: 'showSource',
      reading: 'showReading',
      translation: 'showTranslation',
    }[key];
    const next = { ...settings, [prop]: !layerSettings[key] };
    const nextCount = [next.showSource !== false, next.showReading !== false, next.showTranslation !== false]
      .filter(Boolean).length;
    if (nextCount === 0) return;
    onSettings(next);
  };

  /* 사이드바 모바일 토글 + 데스크톱 콜랩스 */
  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>
    );
  }

  return (
    <div
      className={
        'reader' +
        (panel ? ' is-tools-open' : '') +
        (sbOpen ? ' is-sidebar-open' : '') +
        (sbCollapsed ? ' is-sidebar-collapsed' : '')
      }
      data-mode="layers"
      data-width={settings.width}
      data-font={settings.font}
      data-show-source={layerSettings.source ? '1' : '0'}
      data-show-reading={layerSettings.reading ? '1' : '0'}
      data-show-translation={layerSettings.translation ? '1' : '0'}
      data-layer-count={activeLayerCount}
      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={(cid) => {
          const c = window.CANON_DATA[cid];
          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}
        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>
            <span className="r-toolbar__crumb-sep">·</span>
            <span className="han">{passage.head.han}</span>
          </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-layer-toggle" role="group" aria-label="본문 표시 항목">
            <button
              className={'r-layer-toggle__btn' + (layerSettings.source ? ' is-active' : '')}
              aria-pressed={layerSettings.source}
              onClick={() => toggleLayer('source')}
              title="원문 표시"
            >
              <span className="r-layer-toggle__box" aria-hidden="true" />
              <span>원문</span>
            </button>
            <button
              className={'r-layer-toggle__btn' + (layerSettings.reading ? ' is-active' : '')}
              aria-pressed={layerSettings.reading}
              onClick={() => toggleLayer('reading')}
              title="독음 표시"
            >
              <span className="r-layer-toggle__box" aria-hidden="true" />
              <span>독음</span>
            </button>
            <button
              className={'r-layer-toggle__btn' + (layerSettings.translation ? ' is-active' : '')}
              aria-pressed={layerSettings.translation}
              onClick={() => toggleLayer('translation')}
              title="번역 표시"
            >
              <span className="r-layer-toggle__box" aria-hidden="true" />
              <span>번역</span>
            </button>
          </div>
        </div>

        <article className="r-body">
          <window.PassageBody passage={passage} mode={mode} settings={settings} onCite={onCite}/>
        </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>
  );
};