/* =========================================================
   三藏閣 — 사이드바 (탭: 목차 / 관련 / 출처 / 메모)
   기본은 목차(트리). 관련은 현재 본문에 등장한 개념·문헌,
   출처는 본문의 footnotes + sources, 메모는 사용자의 하이라이트.
   ========================================================= */

const { Icon: SbIcon } = window;

window.ReaderSidebar = ({
  activeCanonId, onSelectCanon,
  currentPassageId, onSelectPassage, onClose,
  onOpenEncy, onOpenDict,
  bookmarks, highlights,
}) => {
  const canons = [window.CANON_DATA.daisho, window.CANON_DATA.pali, window.CANON_DATA.tibet];
  const canon = window.CANON_DATA[activeCanonId];
  const passage = currentPassageId ? window.PASSAGES[currentPassageId] : null;

  const [tab, setTab] = React.useState('toc');

  /* TOC 트리: 현재 본문이 속한 부 자동 펼침 */
  const [openBu, setOpenBu] = React.useState(() => {
    return passage ? { [passage.bu]: true } : (canon.bu[0] ? { [canon.bu[0].id]: true } : {});
  });
  React.useEffect(() => {
    if (passage && passage.canon === activeCanonId) setOpenBu(o => ({ ...o, [passage.bu]: true }));
  }, [currentPassageId, activeCanonId]);
  const toggleBu = (id) => setOpenBu(o => ({ ...o, [id]: !o[id] }));

  /* 관련: 본문에 등장하는 TERM_LINKS 수집 */
  const related = React.useMemo(() => {
    if (!passage) return [];
    const text = passage.paragraphs.map(p => (p.body||'') + ' ' + (p.source||'')).join(' ');
    const out = []; const seen = new Set();
    for (const k of Object.keys(window.TERM_LINKS)) {
      if (text.includes(k)) {
        const link = window.TERM_LINKS[k];
        const sig = (link.dict||'') + '|' + (link.ency||'');
        if (seen.has(sig)) continue;
        seen.add(sig);
        const dict = link.dict ? window.DICT_ENTRIES.find(d => d.id===link.dict) : null;
        const ency = link.ency ? window.ENCY_ENTRIES[link.ency] : null;
        if (dict || ency) out.push({ term:k, dict, ency, label: link.label });
      }
    }
    return out;
  }, [currentPassageId]);

  return (
    <aside className="r-sidebar">
      <div className="r-sidebar__head">
        <div className="r-sidebar__title">藏經 · CONTENTS</div>
        <div className="r-sidebar__sub">{canon.title} · {canon.titleHan}</div>
      </div>

      <nav className="r-canon-tabs" aria-label="대장경 선택">
        {canons.map(c => (
          <button
            key={c.id}
            className={'r-canon-tab' + (c.id === activeCanonId ? ' is-active' : '')}
            style={{ '--c': c.color }}
            onClick={() => onSelectCanon(c.id)}
          >
            <span className="han">{c.titleHan.slice(0, 2)}</span>
            <span>{c.title.split(' ')[0]}</span>
          </button>
        ))}
      </nav>

      {/* 사이드바 탭 */}
      <div className="r-sidebar-tabs">
        <button className={'r-sidebar-tab'+(tab==='toc'?' is-active':'')} onClick={()=>setTab('toc')}>
          <SbIcon name="list" size={14}/><span>목차</span>
        </button>
        <button className={'r-sidebar-tab'+(tab==='related'?' is-active':'')} onClick={()=>setTab('related')}>
          <SbIcon name="related" size={14}/><span>관련<i>{related.length}</i></span>
        </button>
        <button className={'r-sidebar-tab'+(tab==='sources'?' is-active':'')} onClick={()=>setTab('sources')}>
          <SbIcon name="source" size={14}/><span>출처</span>
        </button>
        <button className={'r-sidebar-tab'+(tab==='notes'?' is-active':'')} onClick={()=>setTab('notes')}>
          <SbIcon name="note" size={14}/><span>메모<i>{(bookmarks?.length||0)+(highlights?.length||0)}</i></span>
        </button>
      </div>

      {/* 탭 콘텐츠 */}
      {tab === 'toc' && (
        <div className="r-tree">
          {canon.bu.map(bu => {
            const expanded = !!openBu[bu.id];
            return (
              <div className="r-tree__group" key={bu.id} style={{ '--bu': bu.color }}>
                <button
                  className="r-tree__bu"
                  aria-expanded={expanded}
                  onClick={() => toggleBu(bu.id)}
                >
                  <span className="r-tree__bu-dot" />
                  <span className="r-tree__bu-han">{bu.han}</span>
                  <span>{bu.name}</span>
                  <span className="r-tree__bu-caret"><SbIcon name="caret" size={14}/></span>
                </button>
                {expanded && (
                  <div className="r-tree__sutras">
                    {(bu.sutras || []).length === 0 && (
                      <div style={{padding:'8px 16px 8px 36px',fontSize:12,color:'var(--ink-dim)',fontStyle:'italic'}}>
                        준비 중 — 다음 결집 단계
                      </div>
                    )}
                    {(bu.sutras || []).map(s => {
                      const chapters = s.chapters || [];
                      if (chapters.length === 0) {
                        return (
                          <div key={s.id} className="r-tree__sutra" style={{opacity:0.55, cursor:'default'}}>
                            <span className="r-tree__sutra-han">{s.han}</span>
                            <span>{s.name} · {s.volumes}권</span>
                          </div>
                        );
                      }
                      return chapters.map(ch => (
                        <button
                          key={ch.id}
                          className={'r-tree__sutra' + (ch.id === currentPassageId ? ' is-current' : '')}
                          onClick={() => { onSelectPassage(ch.id); onClose && onClose(); }}
                        >
                          <span className="r-tree__sutra-han">{s.han} · {ch.vol}</span>
                          <span>{ch.name}</span>
                        </button>
                      ));
                    })}
                  </div>
                )}
              </div>
            );
          })}
          <div style={{height:80}} />
        </div>
      )}

      {tab === 'related' && (
        <div className="r-side-list">
          {related.length === 0 && (
            <div className="r-side-list__empty">이 본문에서 자동 수집된 관련 항목이 없습니다.</div>
          )}
          {related.map(r => (
            <button key={r.term} className="r-side-item"
              onClick={() => r.ency ? onOpenEncy(r.ency.id) : onOpenDict(r.dict.id)}>
              <div className="r-side-item__main">
                {r.ency ? (
                  <>
                    <span className="han">{r.ency.head.han}</span>
                    <span>{r.ency.head.kr}</span>
                  </>
                ) : (
                  <>
                    <span className="han">{r.dict.han}</span>
                    <span>{r.dict.kr}</span>
                  </>
                )}
              </div>
              <span className="r-side-item__kind">
                {r.ency ? ({concept:'개념',person:'인물',text:'문헌',school:'종파'})[r.ency.type] : '사전'}
              </span>
            </button>
          ))}
        </div>
      )}

      {tab === 'sources' && (
        <div className="r-side-list">
          <div className="r-side-list__head">본문 각주</div>
          {(passage?.footnotes || []).map(fn => (
            <button key={fn.n} className="r-side-item"
              onClick={() => {
                const el = document.getElementById('fn-'+fn.n);
                if (el) el.scrollIntoView({block:'center'});
                onClose && onClose();
              }}>
              <div className="r-side-item__main">
                <span className="r-side-item__num">{fn.n}</span>
                <span>{fn.key}</span>
              </div>
            </button>
          ))}
          <div className="r-side-list__head">서지</div>
          <div className="r-side-item r-side-item--info">
            <div className="r-side-item__main"><span>{passage?.location.canonLabel}</span></div>
            <span className="r-side-item__kind">대장경</span>
          </div>
          <div className="r-side-item r-side-item--info">
            <div className="r-side-item__main"><span>{passage?.head.meta[1]?.v || '-'}</span></div>
            <span className="r-side-item__kind">번역</span>
          </div>
        </div>
      )}

      {tab === 'notes' && (
        <div className="r-side-list">
          <div className="r-side-list__head">북마크</div>
          {(bookmarks || []).length === 0 && (
            <div className="r-side-list__empty">아직 저장한 북마크가 없습니다.</div>
          )}
          {(bookmarks || []).map((b, i) => (
            <button key={i} className="r-side-item"
              onClick={() => { onSelectPassage(b.passageId); onClose && onClose(); }}>
              <div className="r-side-item__main">
                <span>{b.loc}</span>
                <span className="r-side-item__excerpt">{b.excerpt}</span>
              </div>
              <span className="r-side-item__kind">{b.time}</span>
            </button>
          ))}
          <div className="r-side-list__head">하이라이트</div>
          {(highlights || []).length === 0 && (
            <div className="r-side-list__empty">드래그로 본문을 선택해 표시할 수 있습니다.</div>
          )}
        </div>
      )}
    </aside>
  );
};