/* =========================================================
   三藏閣 — 홈 (학술 플랫폼 진입)
   ---------------------------------------------------------
   구조:
     1. Hero           — 한 줄 정체성 + 메타
     2. 통합 검색       — 페이지 가장 강한 액션
     3. 외부 원문 자료실  — manifest 기반 대용량 corpus
     4. 4 핵심 카드     — 읽기 / 백과 / 사전 / 연구
     5. 추천 경로       — 처음 온 독자에게 제안하는 4 입구
     6. 최근 업데이트    — 백과 / 번역 / 연구노트
     7. 푸터
   ========================================================= */

const { Icon: LIcon } = window;

/* ---------- 추천 경로 시드 ---------- */
const PATHS = [
  {
    id: 'vipassana',
    eyebrow: '수행론',
    title: '위빠사나란 무엇인가',
    sub: '초기 경전의 용례부터 마하시·고엔카 현대 수행까지',
    parts: 8,
    target: { kind: 'ency', id: 'sunyata' }, // placeholder until vipassana entry exists
  },
  {
    id: 'buddha-meditation',
    eyebrow: '초기 경전',
    title: '붓다는 어떤 명상을 가르쳤는가',
    sub: '사념처·사선정·구차제정의 원전 근거',
    parts: 6,
    target: { kind: 'passage', autoFirst: true },
  },
  {
    id: 'liberation',
    eyebrow: '해탈론',
    title: '사선정과 해탈',
    sub: '선정의 단계와 깨달음의 관계에 대한 재구성',
    parts: 5,
    target: { kind: 'research' },
  },
  {
    id: 'modern-debate',
    eyebrow: '현대 논쟁',
    title: '고엔카와 마하시 비교',
    sub: '두 위빠사나 전통의 수행법과 이론적 차이',
    parts: 4,
    target: { kind: 'research' },
  },
];

/* ---------- 핵심 4카드 정의 ---------- */
const CORE_CARDS = [
  {
    id: 'reader',
    kr: '원전 읽기',
    en: 'Canon',
    desc: '신수대장경·빨리대장경·티벳대장경을 한국어 정본 번역과 병렬로. 단어를 누르면 사전·백과가 함께 열린다.',
    meta: 'III 대장경 · 한국어 정본',
  },
  {
    id: 'encyclopedia',
    kr: '백과 항목',
    en: 'Encyclopedia',
    desc: '개념·인물·문헌·종파를 한 항목으로 정리한 SEP식 학술 백과. 모든 항목은 원문 근거와 검수자를 거친다.',
    meta: '1,433 항목 · 검수 진행',
  },
  {
    id: 'dictionary',
    kr: '다국어 사전',
    en: 'Lexicon',
    desc: '빨리·산스크리트·한문·티벳 용어를 한 카드에서. 빠르게 확인하고 본문으로 돌아간다.',
    meta: 'IV 언어 · 카드 보기',
  },
  {
    id: 'research',
    kr: '연구 노트',
    en: 'Research',
    desc: '위빠사나의 재구성, 람림 이전의 람림, 부파불교 수행론 — 연재되는 학술 시리즈와 개발일지.',
    meta: 'V 시리즈 · 연재 중',
  },
];

/* ---------- 최근 업데이트 ---------- */
const UPDATES = [
  { kind: '백과', title: '공성 空性', sub: 'sūnyatā · 중관 항목 검수 완료', date: '2026.05.24', target: { kind:'ency', id:'sunyata' } },
  { kind: '번역', title: '대본경 大本經', sub: '장아함경 권1, §3 비파시불 단락 윤문', date: '2026.05.22', target: { kind:'passage', id:'cha-1-daben' } },
  { kind: '연구', title: '위빠사나의 재구성 04', sub: '청정도론과 마하시 사이의 간극', date: '2026.05.20', target: { kind:'research' } },
  { kind: '백과', title: '사념처 satipaṭṭhāna', sub: '항목 초안 추가 — 검토중', date: '2026.05.18', target: { kind:'ency', id:'sunyata' } },
  { kind: '사전', title: 'vedanā · 受', sub: '교차 색인 갱신 (오온·연기·념처)', date: '2026.05.15', target: { kind:'dict' } },
];

const CorpusSection = ({ corpusState, externalLoading, onOpenCorpusPassage }) => {
  const [openVolume, setOpenVolume] = React.useState(null);
  const [volumeIndex, setVolumeIndex] = React.useState(null);
  const [indexError, setIndexError] = React.useState(null);
  const manifest = corpusState?.manifest;

  const totals = React.useMemo(() => {
    if (!manifest) return { collections: 0, volumes: 0, works: 0, bytes: 0 };
    return manifest.collections.reduce((acc, collection) => {
      acc.collections += 1;
      acc.volumes += collection.volumes.length;
      collection.volumes.forEach(volume => {
        acc.works += volume.workCount || 0;
        acc.bytes += volume.bytes || 0;
      });
      return acc;
    }, { collections: 0, volumes: 0, works: 0, bytes: 0 });
  }, [manifest]);

  if (!manifest) return null;

  const selectVolume = async (collection, volume) => {
    const key = `${collection.id}:${volume.id}`;
    if (openVolume === key) {
      setOpenVolume(null);
      setVolumeIndex(null);
      return;
    }
    setOpenVolume(key);
    setVolumeIndex({ status: 'loading', collection, volume, index: null });
    setIndexError(null);
    try {
      const index = await window.CorpusClient.loadIndex(volume);
      setVolumeIndex({ status: 'ready', collection, volume, index });
    } catch (error) {
      setIndexError(error);
      setVolumeIndex({ status: 'error', collection, volume, index: null });
    }
  };

  return (
    <section className="home-corpus" aria-label="외부 원문 자료실">
      <div className="home-corpus__head">
        <div>
          <div className="home-corpus__eyebrow">외부 원문 자료실</div>
          <h2 className="home-corpus__title">대용량 원문은 밖에 두고, 여기서는 필요한 권만 불러옵니다</h2>
          <p className="home-corpus__sub">
            신수대장경 한문 원문, 빨리대장경 원문, 티벳대장경과 솜붐 자료를 같은 목록 구조로 연결합니다.
          </p>
        </div>
        <div className={'home-corpus__status is-' + (corpusState?.status || 'idle')}>
          {corpusState?.status === 'ready' ? '연결됨'
            : corpusState?.status === 'loading' ? '확인 중'
            : '연결 대기'}
        </div>
      </div>

      <div className="home-corpus__meta">
        <div>
          <span>COLLECTIONS</span>
          <b>{totals.collections || '—'}</b>
        </div>
        <div>
          <span>VOLUMES</span>
          <b>{totals.volumes || '—'}</b>
        </div>
        <div>
          <span>WORKS</span>
          <b>{totals.works ? totals.works.toLocaleString() : '—'}</b>
        </div>
      </div>

      {manifest && (
        <div className="home-corpus__grid">
          {manifest.collections.map(collection => (
            <article key={collection.id} className="home-corpus__collection">
              <div className="home-corpus__collection-head">
                <span className="home-corpus__collection-han">{collection.han}</span>
                <span>{collection.status}</span>
              </div>
              <h3>{collection.name}</h3>
              <div className="home-corpus__collection-meta">
                <span>{collection.volumes.length} groups</span>
                <span>{collection.volumes.reduce((sum, v) => sum + (v.workCount || 0), 0).toLocaleString()} works</span>
              </div>
              <div className="home-corpus__volumes">
                {collection.volumes.map(volume => {
                  const key = `${collection.id}:${volume.id}`;
                  return (
                    <button
                      key={volume.id}
                      className={'home-corpus__volume' + (openVolume === key ? ' is-open' : '')}
                      onClick={() => selectVolume(collection, volume)}
                    >
                      <span>{volume.name}</span>
                      <small>{(volume.workCount || 0).toLocaleString()}</small>
                    </button>
                  );
                })}
              </div>
            </article>
          ))}
        </div>
      )}

      {volumeIndex?.status === 'loading' && (
        <div className="home-corpus__browser">목록을 불러오는 중입니다.</div>
      )}
      {volumeIndex?.status === 'error' && (
        <div className="home-corpus__browser">
          {indexError ? indexError.message : '목록을 불러오지 못했습니다.'}
        </div>
      )}
      {volumeIndex?.status === 'ready' && (
        <div className="home-corpus__browser">
          <div className="home-corpus__browser-head">
            <div>
              <span>{volumeIndex.collection.name}</span>
              <h3>{volumeIndex.volume.name}</h3>
            </div>
            <b>{volumeIndex.index.works.length.toLocaleString()} works</b>
          </div>
          <div className="home-corpus__works">
            {volumeIndex.index.works.slice(0, 18).map(work => {
              const first = work.chunks?.[0];
              return (
                <button
                  key={work.id}
                  className="home-corpus__work"
                  disabled={!first || externalLoading === first.path}
                  onClick={() => first && onOpenCorpusPassage(first)}
                >
                  <span>{work.id}</span>
                  <b>{work.title}</b>
                  <small>{(work.chunks || []).length} chunks</small>
                </button>
              );
            })}
          </div>
        </div>
      )}
    </section>
  );
};

window.Library = ({ onOpenPassage, corpusState, externalLoading, onOpenCorpusPassage, onOpenEncy, onOpenEncyCat, onRoute }) => {
  const [q, setQ] = React.useState('');
  const searchInputRef = React.useRef(null);

  const firstPassageId = React.useMemo(() => Object.keys(window.PASSAGES)[0], []);

  /* 대장경 첫 본문 찾기 — 없으면 글로벌 첫 패시지로 폴백 */
  const firstOfCanon = (canon) => {
    for (const bu of canon.bu || []) {
      for (const s of (bu.sutras || [])) {
        for (const c of (s.chapters || [])) {
          if (c.hasBody) return c.id;
        }
      }
    }
    return firstPassageId;
  };

  const goCard = (id) => {
    if (id === 'reader') return onOpenPassage(firstPassageId);
    onRoute({ name: id });
  };
  const goPath = (p) => {
    if (p.target.kind === 'ency') return onOpenEncy(p.target.id);
    if (p.target.kind === 'passage') {
      const id = p.target.id || firstPassageId;
      return onOpenPassage(id);
    }
    if (p.target.kind === 'research') return onRoute({ name: 'research' });
  };
  const goUpdate = (u) => {
    if (u.target.kind === 'ency') return onOpenEncy(u.target.id);
    if (u.target.kind === 'passage') return onOpenPassage(u.target.id);
    if (u.target.kind === 'research') return onRoute({ name: 'research' });
    if (u.target.kind === 'dict') return onRoute({ name: 'dictionary' });
  };

  const canons = [
    {
      ...window.CANON_DATA.daisho,
      shortKr: '신수대장경',
      tagKr: '한역(漢譯)',
      tagEn: 'Sinified Recension',
    },
    {
      ...window.CANON_DATA.pali,
      shortKr: '빨리대장경',
      titleSub: 'Pāli Canon',
      tagKr: '상좌부 결집',
      tagEn: 'Theravāda Canon',
    },
    {
      ...window.CANON_DATA.tibet,
      shortKr: '티벳대장경',
      titleSub: '깐규르·뗀규르·솜붐',
      tagKr: '깐규르·뗀규르·솜붐',
      tagEn: 'Kangyur–Tengyur–Sungbum',
    },
  ];

  const submitSearch = (e) => {
    e.preventDefault();
    /* 단순 위임 — 검색은 백과 인덱스에 던진다. 추후 통합검색 라우트로 분리 가능 */
    if (!q.trim()) return;
    onRoute({ name: 'encyclopedia' });
  };

  return (
    <div className="home" data-screen-label="00 홈">

      <div className="home__inner">

        {/* ============ Hero ============ */}
        <header className="home-hero">
          <div className="home-hero__eyebrow">DHAMMA READER · 한국어 불교 열람실 · v0.3 BETA</div>
          <h1 className="home-hero__title">
            불교 원전과 수행 지식을<br/>
            잇는 <em>읽기 플랫폼</em>
          </h1>
          <p className="home-hero__sub">
            신수대장경, 빨리대장경, 티벳대장경과 솜붐 자료를 한국어 정본 번역과 함께 읽고,
            그 안의 한 단어를 따라 백과·사전·연구로 건너가는 디지털 열람실.
          </p>
          <div className="home-hero__meta">
            <div className="home-hero__meta-item">
              <div className="home-hero__meta-key">CANONS</div>
              <div className="home-hero__meta-val">III</div>
            </div>
            <div className="home-hero__meta-item">
              <div className="home-hero__meta-key">ENTRIES</div>
              <div className="home-hero__meta-val">1,433</div>
            </div>
            <div className="home-hero__meta-item">
              <div className="home-hero__meta-key">EDITION</div>
              <div className="home-hero__meta-val">2026 · 봄</div>
            </div>
          </div>
        </header>

        {/* ============ 세 대장경 — 바로 읽기 ============ */}
        <section className="home-canons" aria-label="세 대장경 바로 읽기">
          <div className="home-canons__head">
            <div className="home-canons__eyebrow">세 대장경 · 바로 읽기</div>
            <div className="home-canons__sub">한 번 클릭으로 그 결집의 첫 권 첫 본문으로 들어갑니다.</div>
          </div>
          <div className="home-canons__grid">
            {canons.map((c, i) => (
              <button key={c.id} className="home-canon"
                onClick={() => onOpenPassage(firstOfCanon(c))}>
                <div className="home-canon__num">{c.roman}</div>
                <div className="home-canon__kr">{c.shortKr}</div>
                <div className="home-canon__zh">{c.titleSub || c.titleHan}</div>
                <div className="home-canon__tag">
                  <span>{c.tagKr}</span>
                  <span className="home-canon__tag-en">{c.tagEn}</span>
                </div>
                <div className="home-canon__meta">
                  <span>{c.meta.volumes}</span>
                  <span className="home-canon__meta-sep">·</span>
                  <span>{c.meta.period}</span>
                </div>
                <div className="home-canon__cta">
                  <span>바로 읽기</span>
                  <LIcon name="arrow-right" size={14}/>
                </div>
              </button>
            ))}
          </div>
        </section>

        {/* ============ 통합 검색 ============ */}
        <section className="home-search">
          <form className="home-search__form" onSubmit={submitSearch}>
            <LIcon name="search" size={20}/>
            <input
              ref={searchInputRef}
              className="home-search__input"
              placeholder="경전명 · 용어 · 인물 · 수행법 · 교리 검색"
              value={q}
              onChange={(e) => setQ(e.target.value)}
            />
            <button type="submit" className="home-search__submit">검색</button>
          </form>
          <div className="home-search__chips">
            <span className="home-search__chips-label">예시</span>
            {[
              { label: 'vedanā', tooltip: '느낌·受' },
              { label: '사념처', tooltip: 'satipaṭṭhāna' },
              { label: '마하시', tooltip: 'Mahasi Sayadaw' },
              { label: '보특가라', tooltip: 'pudgala' },
              { label: '공성', tooltip: 'śūnyatā', go: () => onOpenEncy('sunyata') },
            ].map((c) => (
              <button key={c.label} className="home-search__chip"
                title={c.tooltip}
                onClick={() => c.go ? c.go() : setQ(c.label)}>
                {c.label}
                <span className="home-search__chip-tip">{c.tooltip}</span>
              </button>
            ))}
          </div>
        </section>

        {onOpenCorpusPassage && corpusState?.status === 'ready' && corpusState?.manifest && (
          <CorpusSection
            corpusState={corpusState}
            externalLoading={externalLoading}
            onOpenCorpusPassage={onOpenCorpusPassage}
          />
        )}

        {/* ============ 4 핵심 카드 ============ */}
        <section className="home-core">
          {CORE_CARDS.map((c, i) => (
            <button key={c.id} className="home-core__card" onClick={() => goCard(c.id)}>
              <div className="home-core__card-num">{['I','II','III','IV'][i]}</div>
              <div className="home-core__card-kr">{c.kr}</div>
              <div className="home-core__card-en">{c.en}</div>
              <p className="home-core__card-desc">{c.desc}</p>
              <div className="home-core__card-meta">{c.meta}</div>
              <div className="home-core__card-cta">
                <span>들어가기</span>
                <LIcon name="arrow-right" size={14}/>
              </div>
            </button>
          ))}
        </section>

        {/* ============ 추천 경로 ============ */}
        <section className="home-paths">
          <div className="home-paths__head">
            <div className="home-paths__eyebrow">처음 온 독자라면</div>
            <h2 className="home-paths__title">네 갈래 입구</h2>
            <p className="home-paths__sub">방대한 대장경 앞에서 어디서 시작할지 막막할 때, 한 권의 책처럼 따라 읽을 수 있는 추천 경로.</p>
          </div>
          <div className="home-paths__list">
            {PATHS.map((p, i) => (
              <button key={p.id} className="home-paths__item" onClick={() => goPath(p)}>
                <div className="home-paths__item-num">{String(i+1).padStart(2,'0')}</div>
                <div className="home-paths__item-main">
                  <div className="home-paths__item-eyebrow">{p.eyebrow}</div>
                  <div className="home-paths__item-title">{p.title}</div>
                  <div className="home-paths__item-sub">{p.sub}</div>
                </div>
                <div className="home-paths__item-parts">{p.parts}편</div>
              </button>
            ))}
          </div>
        </section>

        {/* ============ 최근 업데이트 ============ */}
        <section className="home-updates">
          <div className="home-updates__head">
            <div className="home-updates__eyebrow">최근 업데이트</div>
            <button className="home-updates__more" onClick={() => onRoute({ name: 'research' })}>전체 보기 →</button>
          </div>
          <ul className="home-updates__list">
            {UPDATES.map((u, i) => (
              <li key={i}>
                <button className="home-updates__item" onClick={() => goUpdate(u)}>
                  <span className={'home-updates__kind home-updates__kind--' + u.kind}>{u.kind}</span>
                  <span className="home-updates__title">{u.title}</span>
                  <span className="home-updates__sub">{u.sub}</span>
                  <span className="home-updates__date">{u.date}</span>
                </button>
              </li>
            ))}
          </ul>
        </section>

      </div>

      <footer className="site-footer">
        <div className="site-footer__inner">
          <div className="site-footer__col">
            <div className="site-footer__brand">삼장각</div>
            <p>읽기·비교·연결·탐구·메모가 한 흐름으로 이어지는 불교 지식 플랫폼. 2026, 비영리 학술 프로젝트.</p>
          </div>
          <div className="site-footer__col">
            <h4>읽기</h4>
            <a onClick={() => onOpenPassage(firstPassageId)}>원전 리더</a>
            <a>다이쇼신수대장경</a>
            <a>빨리대장경</a>
            <a>티벳대장경과 솜붐</a>
          </div>
          <div className="site-footer__col">
            <h4>지식</h4>
            <a onClick={() => onRoute({name:'encyclopedia'})}>백과</a>
            <a onClick={() => onRoute({name:'dictionary'})}>사전</a>
            <a onClick={() => onRoute({name:'research'})}>연구노트</a>
            <a onClick={() => onRoute({name:'explore'})}>색인</a>
          </div>
          <div className="site-footer__col">
            <h4>안내</h4>
            <a onClick={() => onRoute({name:'about'})}>프로젝트 소개</a>
            <a>번역 원칙</a>
            <a>참여 방법</a>
            <a>라이선스</a>
          </div>
        </div>
        <div className="site-footer__legal">
          <span>© 2026 TRIPIṬAKA READING ROOM</span>
          <span>한국어 번역 정본 — CC BY-NC-SA 4.0</span>
        </div>
      </footer>

    </div>
  );
};
