// 威威知識分享 — knowledge-map content page (math / english), data-driven.
(function () {
  const { Icon } = window.WWIcons;
  const { useState, useEffect } = React;
  const WW = window.WW, CAT = window.WWCAT;

  const CFG = {
    math: {
      label: '數學', en: 'Mathematics', sc: 'var(--math)', scl: '#7fa6d0',
      lead: '從國一到高三，每個學期該掌握的核心知識點，與威威整理的題型講義、難題解析與觀念釐清——依 108 課綱排成一條看得見的學習路徑。',
      topicKey: 'type', topics: CAT.mathTypes, topicLabel: '主題',
      exams: CAT.mathExams, curr: WW.curriculum.math, arts: CAT.math,
    },
    english: {
      label: '英文', en: 'English', sc: 'var(--eng)', scl: '#e3a37e',
      lead: '字彙、文法、閱讀、寫作、聽力，到會考、學測、分科與多益托福檢定——把零散的英文學習，整理成依能力與年級展開的完整地圖。',
      topicKey: 'skill', topics: CAT.engSkills, topicLabel: '能力',
      exams: CAT.engExams, curr: WW.curriculum.english, arts: CAT.english,
    },
  };

  function MapPage({ subject }) {
    const c = CFG[subject];
    const [groupBy, setGroupBy] = useState('grade');
    const [exam, setExam] = useState('全部');
    const [diff, setDiff] = useState('全部');
    const [q, setQ] = useState('');
    const [open, setOpen] = useState({});

    useEffect(() => {
      const els = document.querySelectorAll('.ww-reveal');
      if (!('IntersectionObserver' in window)) { els.forEach((e) => e.classList.add('in')); return; }
      const io = new IntersectionObserver((ents) => ents.forEach((en) => {
        if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); }
      }), { threshold: 0.1, rootMargin: '0px 0px -6% 0px' });
      els.forEach((e) => io.observe(e));
      return () => io.disconnect();
    }, []);

    const filtered = c.arts.filter((a) =>
      (exam === '全部' || a.exams.includes(exam)) &&
      (diff === '全部' || a.diff === diff) &&
      (!q.trim() || a.t.toLowerCase().includes(q.trim().toLowerCase()))
    );

    // build groups
    let groups;
    if (groupBy === 'grade') {
      groups = CAT.grades.map((g) => {
        const pts = c.curr.filter((n) => n.g.startsWith(g)).flatMap((n) => n.pts);
        return { key: g, title: g, icon: g.replace(/[上下]/, ''), pts, items: filtered.filter((a) => a.grades.includes(g)) };
      });
    } else if (groupBy === 'topic') {
      groups = c.topics.map((t) => ({ key: t, title: t, icon: t[0], pts: [], items: filtered.filter((a) => a[c.topicKey] === t) }));
    } else {
      groups = c.exams.map((e) => ({ key: e, title: e, icon: e[0], pts: [], items: filtered.filter((a) => a.exams.includes(e)) }));
    }
    const isOpen = (k) => open[k] !== false; // default open
    const toggle = (k) => setOpen((o) => ({ ...o, [k]: o[k] === false ? true : false }));
    const total = c.arts.length;
    const nodeCount = c.curr.reduce((s, n) => s + n.n, 0);

    return (
      <div className="ww" style={{ '--sc': c.sc, '--sc-l': c.scl }}>
        <window.WWTop.Nav />

        <section className="ww-cphero">
          <div className="ww-cpheroin">
            <div className="ww-bc">
              <a href="/">首頁</a><span className="sep">/</span>
              <span>{c.label}知識地圖</span>
            </div>
            <div className="ww-cpeyebrow"><Icon name={subject === 'math' ? 'spark' : 'globe'} size={15} />108 課綱 · {c.en}</div>
            <h1 className="ww-cph1">{c.label}知識地圖</h1>
            <p className="ww-cplead">{c.lead}</p>
            <div className="ww-cpstats">
              <div className="ww-cpstat"><div className="n">{total}</div><div className="l">篇教材</div></div>
              <div className="ww-cpstat"><div className="n">12</div><div className="l">學期</div></div>
              <div className="ww-cpstat"><div className="n">{nodeCount}</div><div className="l">知識點</div></div>
            </div>
          </div>
        </section>

        <div className="ww-filter">
          <div className="ww-filterin">
            <div className="ww-frow">
              <span className="ww-flabel">分組</span>
              <div className="ww-seg">
                <button className={groupBy === 'grade' ? 'on' : ''} onClick={() => setGroupBy('grade')}>依年級</button>
                <button className={groupBy === 'topic' ? 'on' : ''} onClick={() => setGroupBy('topic')}>依{c.topicLabel}</button>
                <button className={groupBy === 'exam' ? 'on' : ''} onClick={() => setGroupBy('exam')}>依考試</button>
              </div>
              <div className="ww-srch" style={{ marginLeft: 'auto' }}>
                <Icon name="search" size={16} />
                <input placeholder={`搜尋${c.label}教材…`} value={q} onChange={(e) => setQ(e.target.value)} />
              </div>
            </div>
            <div className="ww-frow">
              <span className="ww-flabel">考試</span>
              <div className="ww-chips">
                {['全部', ...c.exams].map((e) => (
                  <button key={e} className={`ww-chip ${exam === e ? 'on' : ''}`} onClick={() => setExam(e)}>{e}</button>
                ))}
              </div>
            </div>
            <div className="ww-frow">
              <span className="ww-flabel">難度</span>
              <div className="ww-chips">
                {['全部', ...CAT.diffs].map((d) => (
                  <button key={d} className={`ww-chip ${diff === d ? 'on' : ''}`} onClick={() => setDiff(d)}>{d}</button>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div className="ww-cpbody">
          {filtered.length === 0 ? (
            <div className="ww-noresult"><b>找不到符合的教材</b>試試清除篩選或換個關鍵字。</div>
          ) : groups.map((g) => (
            <section className={`ww-grp ${isOpen(g.key) ? 'open' : ''} ${g.items.length === 0 ? 'is-empty' : ''}`} key={g.key}>
              <div className="ww-grphead" onClick={() => toggle(g.key)}>
                <div className="gi">{g.icon}</div>
                <div className="gt">{g.title}{groupBy === 'grade' ? '' : ''}</div>
                <span className="gc">{g.items.length} 篇{groupBy === 'grade' && g.pts.length ? ` · ${g.pts.length} 知識點` : ''}</span>
                <span className="gx"><Icon name="arrowDown" size={18} /></span>
              </div>
              {isOpen(g.key) && (
                <div className="ww-grpbody">
                  {groupBy === 'grade' && g.pts.length > 0 && (
                    <div className="ww-grppts">
                      <span className="lbl">知識點</span>
                      {g.pts.map((p, i) => <span key={i}>{p}</span>)}
                    </div>
                  )}
                  {g.items.length > 0 ? (
                    <div className="ww-arts">
                      {g.items.map((a) => (
                        <a className="ww-art" key={a.id + g.key} href={a.slug ? `/post?slug=${a.slug}` : '/blog'}>
                          <span className="atag">{a[c.topicKey]}</span>
                          <span className="abody">
                            <span className="atitle">{a.t}</span>
                            <span className="ameta">
                              <span className="adiff"><span className={`dot ww-d${a.diff}`}></span>{a.diff}</span>
                              {groupBy !== 'grade' && <span className="agrade">{a.grades.join('・')}</span>}
                              {a.exams.slice(0, 3).map((e) => <span className="axam" key={e}>{e}</span>)}
                              <span className="amin">{a.min} 分鐘</span>
                            </span>
                          </span>
                          <span className="aarrow"><Icon name="arrow" size={17} /></span>
                        </a>
                      ))}
                    </div>
                  ) : (
                    <div className="ww-grpempty"><b>教材籌備中</b>｜{groupBy === 'grade' && g.pts.length ? '上方是這個階段的核心知識點。' : ''}講義上線會第一個通知你——先<a href="#freebie" style={{ color: 'var(--sc)', fontWeight: 600 }}>領取免費資源包</a>。</div>
                  )}
                </div>
              )}
            </section>
          ))}
        </div>

        <window.WWBottom.Freebie />
        <window.WWBottom.Newsletter />
        <window.WWBottom.Footer />
      </div>
    );
  }

  window.WWMapPage = MapPage;
})();