/* =========================================================
   三藏閣 — 본문 용어 미니카드 (TermCard)
   본문 안의 용어 클릭 시 떠서, 사전 풀이 + 백과 관문 노출
   ========================================================= */

const { Icon: TIcon } = window;

/* 텍스트 안에 등장하는 TERM_LINKS 키워드를 <button.term-link> 로 감싼다.
   가장 긴 키워드부터 매칭해서 부분일치 충돌을 피한다. */
window.linkifyTerms = (html) => {
  if (!html) return html;
  const keys = Object.keys(window.TERM_LINKS).sort((a, b) => b.length - a.length);
  let out = html;
  for (const k of keys) {
    /* 한자/한글/라틴 모두 단순 substring 치환.
       이미 치환된 영역(<button>, <span class="...">) 안은 건드리지 않도록 placeholder 처리. */
    /* HTML 태그 밖에 있는 텍스트만 대상으로 — 단순화: 마커 토큰 사용 */
    const safe = k.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    const re = new RegExp(`(?<!data-term=")${safe}`, 'g');
    out = out.replace(re, (m, offset, str) => {
      /* offset이 어떤 태그 안에 있는지 매우 간단히 검사 */
      const before = str.slice(0, offset);
      const lastOpen = before.lastIndexOf('<');
      const lastClose = before.lastIndexOf('>');
      if (lastOpen > lastClose) return m; /* 태그 속성/내부 */
      return `<button class="term-link" data-term="${k}">${m}</button>`;
    });
  }
  return out;
};

window.TermCard = ({ termKey, x, y, onClose, onOpenEncy, onOpenDict }) => {
  if (!termKey) return null;
  const link = window.TERM_LINKS[termKey];
  if (!link) return null;
  const dictEntry = link.dict ? window.DICT_ENTRIES.find(d => d.id === link.dict) : null;
  const encyEntry = link.ency ? window.ENCY_ENTRIES[link.ency] : null;

  const label = link.label || (dictEntry ? dictEntry.kr : encyEntry ? encyEntry.head.kr : termKey);

  /* 좌표 클램프 */
  const W = 320, H = 240;
  const left = Math.max(12, Math.min(window.innerWidth - W - 12, x - W/2));
  const top  = Math.max(12, y + 14);
  const above = top + H > window.innerHeight - 12;

  return (
    <>
      <div className="term-card__backdrop" onClick={onClose}/>
      <div className="term-card" style={{ left, top: above ? Math.max(12, y - H - 14) : top }}>
        <div className="term-card__head">
          <span className="term-card__term">{termKey}</span>
          {dictEntry && dictEntry.han && dictEntry.han !== termKey && (
            <span className="term-card__alt han">{dictEntry.han}</span>
          )}
          <button className="term-card__close" onClick={onClose}>
            <TIcon name="close" size={14}/>
          </button>
        </div>

        {dictEntry ? (
          <>
            <div className="term-card__title">
              <span className="kr">{dictEntry.kr}</span>
            </div>
            <div className="term-card__alts">
              {dictEntry.skt && <span className="skt"><i>SKT</i>{dictEntry.skt}</span>}
              {dictEntry.pi && dictEntry.pi !== dictEntry.skt && <span className="pi"><i>PI</i>{dictEntry.pi}</span>}
              {dictEntry.tib && <span className="tib"><i>TIB</i>{dictEntry.tib}</span>}
            </div>
            <p className="term-card__note">{dictEntry.note}</p>
          </>
        ) : (
          <>
            <div className="term-card__title">
              <span className="kr">{label}</span>
            </div>
            <p className="term-card__note">사전 결집 중인 항목입니다. 곧 추가됩니다.</p>
          </>
        )}

        <div className="term-card__actions">
          {dictEntry && (
            <button className="term-card__btn" onClick={() => onOpenDict(dictEntry.id)}>
              사전에서 보기
              <TIcon name="arrow-right" size={12}/>
            </button>
          )}
          {encyEntry && (
            <button className="term-card__btn term-card__btn--primary" onClick={() => onOpenEncy(encyEntry.id)}>
              백과로 이동
              <TIcon name="arrow-right" size={12}/>
            </button>
          )}
        </div>
      </div>
    </>
  );
};