/* =========================================================
   三藏閣 — 사전 (Dictionary)
   다국어 표제어 검색 · 한국어/한문/SKT/PI/TIB/EN
   ========================================================= */

const { Icon: DIcon } = window;

window.Dictionary = (props) => <window.DictionaryScreen {...props} openTerm={props.entryId}/>;

window.DictionaryScreen = ({ onOpen, onOpenEntry, onOpenEncy, openTerm, entryId }) => {
  const handleOpenEntry = onOpenEncy || onOpenEntry || (() => {});
  openTerm = openTerm || entryId;
  const [q, setQ] = React.useState('');
  const [activeCat, setActiveCat] = React.useState('all');
  const [selected, setSelected] = React.useState(openTerm || null);

  React.useEffect(() => {
    if (openTerm) setSelected(openTerm);
  }, [openTerm]);

  const all = window.DICT_ENTRIES;
  const cats = [
    { id:'all', name:'전체', count: all.length },
    { id:'concept', name:'개념',  count: all.filter(e=>e.cat==='concept').length },
    { id:'person',  name:'인물',  count: all.filter(e=>e.cat==='person').length },
    { id:'place',   name:'지명',  count: all.filter(e=>e.cat==='place').length },
    { id:'phrase',  name:'정형구', count: all.filter(e=>e.cat==='phrase').length },
  ];

  const filtered = all.filter(e => {
    if (activeCat !== 'all' && e.cat !== activeCat) return false;
    if (!q.trim()) return true;
    const hay = [e.kr, e.han, e.skt, e.pi, e.tib, e.en, e.note].filter(Boolean).join(' ').toLowerCase();
    return hay.includes(q.toLowerCase());
  });

  const detail = selected ? all.find(e => e.id === selected) : (filtered[0] || null);

  return (
    <div className="dict" data-screen-label="03 사전">

      <header className="dict__hero">
        <div className="dict__hero-inner">
          <div className="dict__hero-eyebrow">사전 · MULTILINGUAL DICTIONARY</div>
          <h1 className="dict__hero-title">한 단어, 다섯 언어, 시대별 한역</h1>
          <p className="dict__hero-sub">한국어 · 한문 · 산스크리트 · 빨리어 · 티벳어 · 영어를 함께 찾는다. 같은 개념의 다른 이름과, 같은 이름의 다른 뜻을 분별한다.</p>

          <div className="dict__search">
            <DIcon name="search" size={18}/>
            <input
              placeholder="한문·산스크리트·팔리·티베트어 검색…  예) skandha, 蘊, 온"
              value={q}
              onChange={e => { setQ(e.target.value); setSelected(null); }}
              autoFocus
            />
            {q && <button className="dict__search-clear" onClick={() => setQ('')}><DIcon name="close" size={16}/></button>}
          </div>
        </div>
      </header>

      <div className="dict__inner">

        {/* 카테고리 */}
        <div className="dict__cats">
          {cats.map(c => (
            <button key={c.id}
              className={'dict__cat' + (activeCat===c.id ? ' is-active' : '')}
              onClick={() => setActiveCat(c.id)}>
              <span>{c.name}</span><span className="dict__cat-count">{c.count}</span>
            </button>
          ))}
        </div>

        {/* 2단: 목록 + 상세 */}
        <div className="dict__split">

          {/* 좌: 목록 */}
          <div className="dict__list">
            <div className="dict__list-head">{filtered.length} 표제어</div>
            <div className="dict__list-body">
              {filtered.map(e => (
                <button key={e.id}
                  className={'dict-row' + (detail && detail.id===e.id ? ' is-active' : '')}
                  onClick={() => setSelected(e.id)}>
                  <div className="dict-row__main">
                    <span className="dict-row__kr">{e.kr}</span>
                    <span className="dict-row__han">{e.han}</span>
                  </div>
                  <div className="dict-row__alt">
                    {e.skt && <span className="skt">{e.skt}</span>}
                    {e.pi && e.pi !== e.skt && <span className="pi">{e.pi}</span>}
                    {e.tib && <span className="tib">{e.tib}</span>}
                  </div>
                </button>
              ))}
              {filtered.length === 0 && (
                <div className="dict__empty">
                  <span>일치하는 표제어가 없습니다.</span>
                </div>
              )}
            </div>
          </div>

          {/* 우: 상세 */}
          {detail ? (
            <div className="dict__detail">
              <div className="dict__detail-head">
                <div className="dict__detail-eyebrow">{({concept:'개념',person:'인물',place:'지명',phrase:'구절'})[detail.cat] || ''}</div>
                <h2 className="dict__detail-title">
                  <span className="han">{detail.han}</span>
                  <span className="kr">{detail.kr}</span>
                </h2>
              </div>

              <table className="dict__detail-table">
                <tbody>
                  {detail.skt && <tr><th>산스크리트</th><td className="skt">{detail.skt}</td></tr>}
                  {detail.pi  && <tr><th>빨리어</th><td className="pi">{detail.pi}</td></tr>}
                  {detail.tib && <tr><th>티베트어</th><td className="tib">{detail.tib}</td></tr>}
                  {detail.en  && <tr><th>영어</th><td>{detail.en}</td></tr>}
                </tbody>
              </table>

              <div className="dict__detail-section">
                <h3>풀이</h3>
                <p>{detail.note}</p>
              </div>

              {detail.chinHistory && (
                <div className="dict__detail-section">
                  <h3>시대별 한역</h3>
                  <p>{detail.chinHistory}</p>
                </div>
              )}

              {detail.relatedTerms && detail.relatedTerms.length > 0 && (
                <div className="dict__detail-section">
                  <h3>관련 용어</h3>
                  <div className="dict__detail-related">
                    {detail.relatedTerms.map((t, i) => <span key={i} className="dict-pill">{t}</span>)}
                  </div>
                </div>
              )}

              {detail.encyId && (
                <div className="dict__detail-cta">
                  <button onClick={() => handleOpenEntry(detail.encyId)}>
                    백과 항목으로 자세히 보기
                    <DIcon name="arrow-right" size={14}/>
                  </button>
                </div>
              )}
            </div>
          ) : (
            <div className="dict__detail dict__detail--empty">
              <span>왼쪽에서 표제어를 선택하세요.</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};