/* =============================================================
   三藏閣 — 연구 노트 (Research Notes)
   -------------------------------------------------------------
   네 갈래의 시리즈와 단편 노트, 그리고 개발일지.
   각 시리즈는 카드, 단편은 줄 리스트로.
   ============================================================= */

const { Icon: RIcon } = window;

const SERIES = [
  {
    id: 'bhavana-encyclopedia',
    eyebrow: '백과',
    title: '한국어 수행 백과 구축',
    sub: 'SEP식 소논문 항목과 공개 온톨로지',
    desc: '한국어 수행자와 명상지도사를 위해 불교 수행 개념을 정의·역사·전통별 차이·실천상의 주의점·참고문헌까지 갖춘 백과 항목으로 정리한다.',
    total: 10,
    done: 2,
    status: 'active',
    accent: true,
  },
  {
    id: 'vipassana-reconstructed',
    eyebrow: '수행론',
    title: '위빠사나의 재구성',
    sub: '고엔카, 마하시, 그리고 붓다의 명상',
    desc: '20세기 미얀마에서 정립된 두 위빠사나 전통을 초기 경전·청정도론과 견주어 다시 읽는다. 무엇이 보존되었고 무엇이 새로 만들어졌는가.',
    total: 12,
    done: 4,
    status: 'active',
  },
  {
    id: 'pre-lamrim',
    eyebrow: '티벳',
    title: '람림 이전의 람림',
    sub: '쫑카파 이전의 단계론들',
    desc: '14세기 쫑카파의 람림 체첸모가 어떤 인도·티벳 선행 텍스트 위에 세워졌는지 — 까담파의 단계론과 아띠샤의 보디파타프라디파를 중심으로.',
    total: 9,
    done: 2,
    status: 'active',
  },
  {
    id: 'abhidharma-practice',
    eyebrow: '부파',
    title: '부파불교 수행론',
    sub: '아비달마의 명상 체계',
    desc: '설일체유부와 유부 정통이 가르친 수행의 단계 — 오정심관(五停心觀)·사념처·사선근·견도와 수도의 구조를 한 자리에서.',
    total: 8,
    done: 1,
    status: 'active',
  },
  {
    id: 'meditation-brain',
    eyebrow: '과학',
    title: '명상과 뇌과학',
    sub: '교차 비판: 무엇이 입증되고 무엇이 과장되었는가',
    desc: '명상 연구의 메타 분석을 따라가며, 불교 교리적 주장과 신경과학적 발견 사이의 거리를 측정한다.',
    total: 6,
    done: 0,
    status: 'planned',
  },
  {
    id: 'modern-buddhism',
    eyebrow: '근대',
    title: '불교근대주의 비판',
    sub: '서구 mindfulness가 잃어버린 것',
    desc: '19세기 후반 식민지 경험에서 출발한 근대 불교 개혁운동의 계보. 오늘날 “과학적 명상”의 뿌리.',
    total: 7,
    done: 0,
    status: 'planned',
  },
  {
    id: 'devlog',
    eyebrow: '개발',
    title: '삼장각 개발일지',
    sub: 'Dhamma Reader가 만들어지는 과정',
    desc: '데이터 구조, 번역 원칙, 인터페이스 결정들의 기록. 학술 인용 가능한 라이선스 정책 등 비기술적 결정도 포함.',
    total: null,
    done: 12,
    status: 'rolling',
  },
];

const NOTES = [
  { date: '2026.06.01', series: '한국어 수행 백과 구축', title: '왜 한국어 수행 백과가 필요한가',       parts: '01 / 10' },
  { date: '2026.06.01', series: '한국어 수행 백과 구축', title: 'SEP식 소논문 항목을 백과에 적용하기', parts: '02 / 10' },
  { date: '2026.05.20', series: '위빠사나의 재구성',  title: '청정도론과 마하시 사이의 간극',       parts: '04 / 12' },
  { date: '2026.05.04', series: '위빠사나의 재구성',  title: '고엔카 코스의 십일일 구조 분석',     parts: '03 / 12' },
  { date: '2026.04.18', series: '위빠사나의 재구성',  title: '마하시 노팅 기법의 경전적 근거',     parts: '02 / 12' },
  { date: '2026.04.02', series: '위빠사나의 재구성',  title: '왜 위빠사나는 “재구성”되어야 하는가', parts: '01 / 12' },
  { date: '2026.03.21', series: '람림 이전의 람림',  title: '까담 까그달의 단계 체계',             parts: '02 / 09' },
  { date: '2026.03.07', series: '람림 이전의 람림',  title: '아띠샤의 보디파타프라디파 읽기',     parts: '01 / 09' },
  { date: '2026.02.24', series: '부파불교 수행론',    title: '오정심관: 다섯 가지 부정관과 그 차이', parts: '01 / 08' },
  { date: '2026.05.12', series: '개발일지',          title: '학술지 톤으로의 전환',                 parts: '12' },
  { date: '2026.04.30', series: '개발일지',          title: '백과 항목 검수 정책',                   parts: '11' },
];

window.Research = ({ onRoute }) => {
  const [tab, setTab] = React.useState('all');
  const filtered = tab === 'all' ? SERIES : SERIES.filter(s => s.status === tab);

  return (
    <div className="research" data-screen-label="04 연구 노트">

      <header className="research__hero">
        <div className="research__hero-inner">
          <div className="research__hero-eyebrow">연구 노트 · RESEARCH NOTES</div>
          <h1 className="research__hero-title">
            연구 노트
          </h1>
          <p className="research__hero-sub">
            백과는 중립적인 학술 항목, 연구노트는 편집자의 관점과 작업 과정이 드러나는 자리.
            한국어 수행 백과를 왜 만들고, 어떤 자료와 원칙으로 항목을 세우는지 이곳에 기록합니다.
            위빠사나, 람림, 부파불교 수행론, 개발일지가 함께 이어집니다.
          </p>
          <div className="research__hero-meta">
            <div className="research__hero-meta-cell">
              <div className="research__hero-meta-key">시리즈</div>
              <div className="research__hero-meta-val">{SERIES.filter(s=>s.status!=='planned').length}</div>
            </div>
            <div className="research__hero-meta-cell">
              <div className="research__hero-meta-key">노트</div>
              <div className="research__hero-meta-val">{NOTES.length}</div>
            </div>
            <div className="research__hero-meta-cell">
              <div className="research__hero-meta-key">최근</div>
              <div className="research__hero-meta-val">{NOTES[0].date}</div>
            </div>
          </div>
        </div>
      </header>

      <div className="research__inner">

        <section className="research__focus">
          <div className="research__focus-copy">
            <div className="research__focus-eyebrow">PROJECT ESSAY · 한국어 수행 백과</div>
            <h2>한국어로 공부하고 지도하는 수행자를 위한 공개 지식 기반</h2>
            <p>
              영어권에는 불교와 철학을 공부할 수 있는 고품질 사이트와 사전이 여럿 있습니다.
              그러나 한국어로 수행을 배우고 지도하는 사람에게 필요한 자료는 여전히 흩어져 있습니다.
              불교 사전은 있지만, 명상지도사와 실제 수행자가 “사띠”, “삼매”, “위빠사나”, “공성”, “보리심”을
              전통별 맥락과 실천상의 주의점까지 함께 읽을 수 있는 공개 백과는 부족합니다.
            </p>
            <p>
              이 프로젝트는 그 빈자리를 메우려는 시도입니다. 한국불교, 남방불교, 티벳불교를 함께 공부하고,
              신수대장경·빨리대장경·티벳대장경 번역 작업과 연결해 각 항목을 원전과 현대 연구 위에 세웁니다.
              The goal is to build an open Korean-language encyclopedia of Buddhist meditation and practice,
              readable by practitioners, teachers, scholars, and international reviewers.
            </p>
            <div className="research__focus-actions">
              <button onClick={() => onRoute && onRoute({ name: 'encyclopedia', cat: 'practice' })}>
                수행 백과 열기
              </button>
              <button className="is-ghost" onClick={() => onRoute && onRoute({ name: 'encyclopedia', cat: 'practice' })}>
                수행 항목 보기
              </button>
            </div>
          </div>
          <div className="research__focus-points">
            <div>
              <b>형식</b>
              <span>한 줄 정의가 아니라 정의, 역사, 교리, 실천, 쟁점, 참고문헌을 갖춘 소논문형 항목</span>
            </div>
            <div>
              <b>자료</b>
              <span>명상·수행 관련 500권 이상 자료에서 추출한 온톨로지와 대장경 번역 결과</span>
            </div>
            <div>
              <b>공개</b>
              <span>GitHub에서 편집 과정을 열고, 검수된 항목은 dhammareader.com 백과 탭에 배포</span>
            </div>
          </div>
        </section>

        {/* ============ 시리즈 ============ */}
        <section className="research__section">
          <div className="research__section-head">
            <div>
              <div className="research__section-eyebrow">연재 시리즈</div>
              <h2 className="research__section-title">시리즈</h2>
            </div>
            <div className="research__tabs" role="tablist">
              {[
                { id: 'all',     label: '전체' },
                { id: 'active',  label: '연재 중' },
                { id: 'planned', label: '예고' },
                { id: 'rolling', label: '롤링' },
              ].map(t => (
                <button key={t.id} role="tab"
                  className={'research__tab' + (tab === t.id ? ' is-active' : '')}
                  onClick={() => setTab(t.id)}>
                  {t.label}
                </button>
              ))}
            </div>
          </div>

          <div className="research__series">
            {filtered.map(s => {
              const pct = s.total ? Math.round((s.done / s.total) * 100) : null;
              return (
                <article key={s.id} className={'research__series-card' + (s.accent ? ' is-accent' : '') + ' is-' + s.status}>
                  <div className="research__series-eyebrow">
                    <span>{s.eyebrow}</span>
                    <span className={'research__series-status research__series-status--' + s.status}>
                      {s.status === 'active' ? '연재 중' : s.status === 'planned' ? '예고' : '롤링'}
                    </span>
                  </div>
                  <h3 className="research__series-title">{s.title}</h3>
                  <div className="research__series-sub">{s.sub}</div>
                  <p className="research__series-desc">{s.desc}</p>
                  <div className="research__series-meta">
                    {s.total ? (
                      <React.Fragment>
                        <span className="research__series-prog">
                          <span className="research__series-prog-bar">
                            <span className="research__series-prog-fill" style={{ width: (pct || 0) + '%' }}/>
                          </span>
                          <span className="research__series-prog-text">{s.done} / {s.total} 편</span>
                        </span>
                      </React.Fragment>
                    ) : (
                      <span className="research__series-prog-text">{s.done} 편 · 계속 업데이트</span>
                    )}
                    {s.status !== 'planned' && (
                      <button className="research__series-cta">
                        읽기 시작 <RIcon name="arrow-right" size={14}/>
                      </button>
                    )}
                  </div>
                </article>
              );
            })}
          </div>
        </section>

        {/* ============ 최근 노트 ============ */}
        <section className="research__section">
          <div className="research__section-head">
            <div>
              <div className="research__section-eyebrow">최근 노트</div>
              <h2 className="research__section-title">최근 글</h2>
            </div>
          </div>
          <ul className="research__notes">
            {NOTES.map((n, i) => (
              <li key={i}>
                <button className="research__note">
                  <span className="research__note-date">{n.date}</span>
                  <span className="research__note-series">{n.series}</span>
                  <span className="research__note-title">{n.title}</span>
                  <span className="research__note-parts">{n.parts}</span>
                </button>
              </li>
            ))}
          </ul>
        </section>

        {/* ============ 라이선스 · 인용 ============ */}
        <section className="research__section">
          <div className="research__section-head">
            <div>
              <div className="research__section-eyebrow">라이선스 · 인용</div>
              <h2 className="research__section-title">사용·인용 안내</h2>
            </div>
          </div>
          <div className="research__legal">
            <div className="research__legal-col">
              <window.LicenseBadge preset="self"/>
              <p>연구노트의 본문은 삼장각의 자체 저작물입니다. 학술·비영리 인용은 자유롭게 가능하며, 출처와 최근 수정일을 함께 표기해주세요.</p>
            </div>
            <div className="research__legal-col">
              <window.CitationButton
                entry={{
                  author: 'Dhamma Reader',
                  title: '연구노트 · Research Notes',
                  year: 2026,
                  updated: '2026.06.01',
                  id: 'dhamma-reader-research',
                }}
                label="연구노트 인용 포맷"
              />
              <p>Chicago · MLA · APA · BibTeX 포맷으로 자동 생성됩니다. 개별 글을 인용할 때는 글 페이지 하단의 인용 버튼을 사용하세요.</p>
            </div>
          </div>
        </section>

      </div>
    </div>
  );
};