/* =========================================================
   三藏閣 — 우측 레일 "연결" 패널
   현재 본문에 등장하는 용어/개념/관련 항목을 자동 수집해 노출
   ========================================================= */

const { Icon: CIcon } = window;

window.ConnectPanel = ({ passage, onOpenEncy, onOpenDict }) => {
  if (!passage) return null;

  /* 본문 안에 등장한 TERM_LINKS 키 수집 */
  const allText = passage.paragraphs
    .map(p => (p.body || '') + ' ' + (p.source || ''))
    .join(' ');
  const seen = new Set();
  const termsPresent = [];
  for (const k of Object.keys(window.TERM_LINKS)) {
    if (seen.has(k)) continue;
    if (allText.includes(k)) {
      const link = window.TERM_LINKS[k];
      const dictId = link.dict;
      const encyId = link.ency;
      const dict = dictId ? window.DICT_ENTRIES.find(d => d.id === dictId) : null;
      const ency = encyId ? window.ENCY_ENTRIES[encyId] : null;
      const sig = (dict ? dict.id : '') + '|' + (ency ? ency.id : '') + '|' + (link.label || '');
      if (seen.has(sig)) continue;
      seen.add(sig);
      termsPresent.push({ term: k, dict, ency, label: link.label });
    }
  }

  /* 카테고리별 분류 */
  const concepts = termsPresent.filter(t => t.ency && t.ency.type === 'concept');
  const persons  = termsPresent.filter(t => t.ency && t.ency.type === 'person');
  const texts    = termsPresent.filter(t => t.ency && t.ency.type === 'text');
  const dictOnly = termsPresent.filter(t => !t.ency && t.dict);

  /* 같은 캐논의 다른 발췌 (간단 추천) */
  const otherPassages = Object.values(window.PASSAGES).filter(p => p !== passage).slice(0, 3);

  return (
    <div className="connect">
      <p className="connect__intro">이 단락에 등장한 개념·인물·문헌을 모았습니다. 클릭해 백과·사전으로 건너가세요.</p>

      {concepts.length > 0 && (
        <section className="connect__group">
          <h4 className="connect__group-title">
            <CIcon name="circle" size={10}/>
            개념 <span>{concepts.length}</span>
          </h4>
          <div className="connect__chips">
            {concepts.map(t => (
              <button key={t.term} className="connect__chip" onClick={() => onOpenEncy(t.ency.id)}>
                <span className="han">{t.ency.head.han}</span>
                <span>{t.ency.head.kr}</span>
              </button>
            ))}
          </div>
        </section>
      )}

      {persons.length > 0 && (
        <section className="connect__group">
          <h4 className="connect__group-title">
            <CIcon name="circle" size={10}/>
            인물 <span>{persons.length}</span>
          </h4>
          <div className="connect__chips">
            {persons.map(t => (
              <button key={t.term} className="connect__chip" onClick={() => onOpenEncy(t.ency.id)}>
                <span className="han">{t.ency.head.han}</span>
                <span>{t.ency.head.kr}</span>
              </button>
            ))}
          </div>
        </section>
      )}

      {texts.length > 0 && (
        <section className="connect__group">
          <h4 className="connect__group-title">
            <CIcon name="circle" size={10}/>
            관련 문헌 <span>{texts.length}</span>
          </h4>
          <div className="connect__chips">
            {texts.map(t => (
              <button key={t.term} className="connect__chip" onClick={() => onOpenEncy(t.ency.id)}>
                <span className="han">{t.ency.head.han}</span>
                <span>{t.ency.head.kr}</span>
              </button>
            ))}
          </div>
        </section>
      )}

      {dictOnly.length > 0 && (
        <section className="connect__group">
          <h4 className="connect__group-title">
            <CIcon name="circle" size={10}/>
            사전 표제어 <span>{dictOnly.length}</span>
          </h4>
          <div className="connect__list">
            {dictOnly.map(t => (
              <button key={t.term} className="connect__row" onClick={() => onOpenDict(t.dict.id)}>
                <div>
                  <span className="connect__row-kr">{t.dict.kr}</span>
                  <span className="connect__row-han">{t.dict.han}</span>
                </div>
                <span className="connect__row-skt">{t.dict.skt || t.dict.pi || ''}</span>
              </button>
            ))}
          </div>
        </section>
      )}

      <section className="connect__group">
        <h4 className="connect__group-title">
          <CIcon name="circle" size={10}/>
          탐구로 건너가기
        </h4>
        <div className="connect__nav">
          <a className="connect__nav-item" onClick={() => window.dispatchEvent(new CustomEvent('app-route', {detail:{name:'explore'}}))}>
            <span className="han">關係</span>
            <span>그래프에서 보기</span>
            <CIcon name="arrow-right" size={12}/>
          </a>
          <a className="connect__nav-item" onClick={() => window.dispatchEvent(new CustomEvent('app-route', {detail:{name:'explore'}}))}>
            <span className="han">對照</span>
            <span>다국어 비교</span>
            <CIcon name="arrow-right" size={12}/>
          </a>
        </div>
      </section>

      {termsPresent.length === 0 && (
        <div className="connect__empty">
          <CIcon name="connect" size={28}/>
          <span>이 단락에서 자동 수집된 연결 항목이 아직 없습니다.</span>
          <span className="connect__empty-sub">검수 진행 중인 본문은 곧 더 많은 링크가 부여됩니다.</span>
        </div>
      )}
    </div>
  );
};