/* =========================================================
   三藏閣 — 본문 렌더 (단락, 각주, 좌우 대조 + 용어 링크)
   ========================================================= */

const { Icon: BIcon } = window;

/* 본문 텍스트에 박힌 <fn n="N"/> 마커 변환 + 용어 링크 */
function renderBodyHTML(htmlString) {
  /* 1) fn 마커 → 풍선 트리거 */
  let out = htmlString.replace(
    /<fn n="(\d+)"\s*\/>/g,
    (_, n) => `<button class="r-fn-marker" data-fn="${n}">${n}</button>`
  );
  /* 2) 용어 링크 */
  out = window.linkifyTerms(out);
  return { __html: out };
}
function renderSourceHTML(htmlString) {
  /* 원문에는 fn 마커가 없지만, 한자 용어 링크는 적용 */
  return { __html: window.linkifyTerms(htmlString) };
}

const sourceClass = (lang) => 'r-paragraph__source' + (lang === 'pi' ? ' r-paragraph__source--pi' : lang === 'tib' ? ' r-paragraph__source--tib' : '');

function getVisibleLayers(settings = {}) {
  return {
    source: settings.showSource !== false,
    reading: settings.showReading !== false,
    translation: settings.showTranslation !== false,
  };
}

window.PassageBody = ({ passage, mode, settings, onCite }) => {
  if (!passage) return null;
  const head = passage.head;
  const canon = window.CANON_DATA[passage.canon];
  const layers = getVisibleLayers(settings);
  const activeLayers = Object.entries(layers).filter(([, enabled]) => enabled).map(([key]) => key);
  const layerKey = activeLayers.join('-') || 'translation';
  const showReadingUnderSource = layers.source && layers.reading && layers.translation;

  return (
    <div className="r-body__column" style={{ '--c': canon.color }}>

      <header className="r-head">
        <div className="r-head__roman">{head.roman}</div>
        <div className="r-head__han">{head.han}</div>
        <div className="r-head__kr">{head.kr}</div>
        <div className="r-head__skt">{head.skt}</div>
        <div className="r-head__meta">
          {head.meta.map((m, i) => (
            <div key={i} className="r-head__meta-item">
              <span>{m.k}</span>
              <strong>{m.v}</strong>
            </div>
          ))}
        </div>
      </header>

      <div className="r-passage" data-layers={layerKey} data-layer-count={activeLayers.length}>
        {passage.paragraphs.map((p, i) => {
          if (p.glyph) return <div key={i} className="r-glyph">⁂</div>;

          const id = `p-${i+1}`;
          const bodyHTML = p.body;
          const readingHTML = p.reading || '';
          const blockType = p.blockType || 'prose_block';

          return (
            <div
              key={i}
              id={id}
              className={'r-paragraph r-paragraph--' + blockType}
              data-section={p.section || undefined}
              data-block-type={blockType}
            >
              {layers.source && (
                <div className="r-paragraph__layer r-paragraph__layer--source">
                  {p.source && (
                    <div
                      className={sourceClass(p.sourceLang)}
                      dangerouslySetInnerHTML={renderSourceHTML(p.source)}
                    />
                  )}
                  {showReadingUnderSource && readingHTML && (
                    <div
                      className="r-paragraph__reading"
                      dangerouslySetInnerHTML={renderBodyHTML(readingHTML)}
                    />
                  )}
                </div>
              )}
              {layers.reading && !showReadingUnderSource && (
                <div className="r-paragraph__layer r-paragraph__layer--reading">
                  <div
                    className="r-paragraph__reading"
                    dangerouslySetInnerHTML={renderBodyHTML(readingHTML)}
                  />
                </div>
              )}
              {layers.translation && (
                <div className="r-paragraph__layer r-paragraph__layer--translation">
                  <div
                    className="r-paragraph__body"
                    dangerouslySetInnerHTML={renderBodyHTML(bodyHTML)}
                  />
                </div>
              )}
            </div>
          );
        })}
      </div>

      <section className="r-footnotes">
        <div className="r-footnotes__title">FOOTNOTES · 註</div>
        <ol className="r-footnotes__list">
          {(passage.footnotes || []).map(fn => (
            <li key={fn.n} id={`fn-${fn.n}`} className="r-fn">
              <span className="r-fn__num">{fn.n}</span>
              <div>
                <span className="r-fn__key">{fn.key}</span>
                <span dangerouslySetInnerHTML={{ __html: fn.body }} />
              </div>
            </li>
          ))}
        </ol>
      </section>

      <div className="r-pager">
        <button className="r-pager__btn r-pager__btn--prev">
          <span className="r-pager__btn-label">← 이전</span>
          <span className="r-pager__btn-title">목차로</span>
        </button>
        <button className="r-pager__btn r-pager__btn--next">
          <span className="r-pager__btn-label">다음 →</span>
          <span className="r-pager__btn-title"><span className="han">卷第二</span>제2권</span>
        </button>
      </div>
    </div>
  );
};

/* 각주 호버 풍선 + 용어 클릭 핸들러 */
window.FootnotePopover = ({ passage, onTermClick }) => {
  const [pop, setPop] = React.useState(null);

  React.useEffect(() => {
    const onOver = (e) => {
      const t = e.target.closest && e.target.closest('.r-fn-marker');
      if (!t || !passage) { setPop(null); return; }
      const n = +t.dataset.fn;
      const fn = (passage.footnotes || []).find(f => f.n === n);
      if (!fn) return;
      const r = t.getBoundingClientRect();
      setPop({ fn, x: r.left + r.width/2, y: r.top });
    };
    const onOut = (e) => {
      if (e.target.closest && e.target.closest('.r-fn-marker')) setPop(null);
    };
    const onClick = (e) => {
      const t = e.target.closest && e.target.closest('.term-link');
      if (!t) return;
      e.preventDefault();
      const r = t.getBoundingClientRect();
      onTermClick && onTermClick({
        term: t.dataset.term,
        x: r.left + r.width/2,
        y: r.bottom,
      });
    };
    document.addEventListener('mouseover', onOver);
    document.addEventListener('mouseout', onOut);
    document.addEventListener('click', onClick);
    return () => {
      document.removeEventListener('mouseover', onOver);
      document.removeEventListener('mouseout', onOut);
      document.removeEventListener('click', onClick);
    };
  }, [passage, onTermClick]);

  if (!pop) return null;
  return (
    <div
      className="r-fn-pop is-visible"
      style={{ left: pop.x, top: pop.y - 12, transform: 'translate(-50%, -100%)' }}
    >
      <span className="r-fn__key">{pop.fn.key}</span>
      <span dangerouslySetInnerHTML={{ __html: pop.fn.body }} />
    </div>
  );
};