// 威威知識分享 — blog landing. Broad writing across all categories.
(function () {
  const { Icon } = window.WWIcons;
  const { useState, useEffect } = React;
  const WW = window.WW, CAT = window.WWCAT;

  // Pull subject teaching materials in as blog entries too (recent-ish),
  // plus the dedicated blog posts. Category colors.
  const CATCOLOR = {
    math: 'var(--math)', english: 'var(--eng)', finance: 'var(--fin)',
    learning: '#7a5bb0', mindset: '#b1474a', current: '#3a8a9c', time: '#c08a2e', story: '#7e6d5a',
  };
  const CATLABEL = { math: '數學', english: '英文', finance: '理財', learning: '學習方法', mindset: '觀念心態', current: '時事觀察', time: '時間管理', story: '教學故事' };

  // All real written posts, newest first.
  function buildPosts() {
    return [...CAT.blogPosts].sort((a, b) => (a.date < b.date ? 1 : -1));
  }

  function Blog() {
    const [cat, setCat] = useState('all');
    const [q, setQ] = useState('');
    const posts = buildPosts();

    useEffect(() => {
      const h = (location.hash || '').replace('#', '');
      if (h && CATLABEL[h]) setCat(h);
      const els = document.querySelectorAll('.ww-reveal');
      const io = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }), { threshold: 0.1 });
      els.forEach((e) => io.observe(e));
      return () => io.disconnect();
    }, []);

    const filtered = posts.filter((p) =>
      (cat === 'all' || p.cat === cat) &&
      (!q.trim() || p.t.toLowerCase().includes(q.trim().toLowerCase()))
    );
    const countFor = (k) => posts.filter((p) => p.cat === k).length;

    return (
      <div className="ww" style={{ '--sc': 'var(--accent)', '--sc-l': '#e3a37e' }}>
        <window.WWTop.Nav />

        <section className="ww-cphero" style={{ '--sc': 'var(--accent)' }}>
          <div className="ww-cpheroin">
            <div className="ww-bc"><a href="/">首頁</a><span className="sep">/</span><span>部落格</span></div>
            <div className="ww-cpeyebrow"><Icon name="book" size={15} />WEIWEI · BLOG</div>
            <h1 className="ww-cph1">威威的學習筆記</h1>
            <p className="ww-cplead">數學與英文的教材，加上學習方法、觀念心態、時間管理與教學現場的觀察。比起把知識倒給你，我更想分享「怎麼學」這件事。</p>
          </div>
        </section>

        {/* category tiles */}
        <div className="ww-cpbody" style={{ paddingBottom: 20 }}>
          <div className="ww-blogcats ww-reveal">
            {CAT.blogCats.map((b) => {
              const n = countFor(b.key);
              return (
                <a className="ww-bcat" key={b.key} style={{ '--bc': CATCOLOR[b.key] }}
                  onClick={(e) => { e.preventDefault(); setCat(b.key); window.scrollTo({ top: 360, behavior: 'smooth' }); }} href={`#${b.key}`}>
                  <div className="bt">{b.t}</div>
                  <div className="bd">{b.d}</div>
                  {n > 0 ? <div className="bn">{n} 篇文章 →</div> : <div className="bsoon">內容準備中</div>}
                </a>
              );
            })}
          </div>
        </div>

        {/* filter + posts */}
        <div className="ww-filter" style={{ '--sc': 'var(--accent)', position: 'static' }}>
          <div className="ww-filterin">
            <div className="ww-frow">
              <span className="ww-flabel">分類</span>
              <div className="ww-chips">
                {['all', ...CAT.blogCats.map((b) => b.key)].map((k) => (
                  <button key={k} className={`ww-chip ${cat === k ? 'on' : ''}`} onClick={() => setCat(k)}>
                    {k === 'all' ? '全部' : CATLABEL[k]}
                  </button>
                ))}
              </div>
              <div className="ww-srch" style={{ marginLeft: 'auto' }}>
                <Icon name="search" size={16} />
                <input placeholder="搜尋文章…" value={q} onChange={(e) => setQ(e.target.value)} />
              </div>
            </div>
          </div>
        </div>

        <div className="ww-cpbody" style={{ paddingTop: 30 }}>
          {filtered.length === 0 ? (
            <div className="ww-noresult">
              <b>這個分類的文章正在籌備中</b>
              先訂閱電子報，新文章上線會第一個通知你。
            </div>
          ) : (
            <div className="ww-postlist">
              {filtered.map((p, i) => (
                <a className="ww-post" key={i} href={p.slug ? `/post?slug=${p.slug}` : '#'} onClick={p.slug ? undefined : (e) => e.preventDefault()}>
                  <span className="pcat" style={{ background: CATCOLOR[p.cat] }}>{CATLABEL[p.cat]}</span>
                  <div>
                    <h4>{p.t}</h4>
                    <p>{p.excerpt}</p>
                    <div className="pm">{p.date} · 閱讀 {p.min} 分鐘</div>
                  </div>
                </a>
              ))}
            </div>
          )}
        </div>

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

  window.WWBlog = Blog;
})();