// 威威知識分享 — full-text search page.
// Searches across all English articles and math catalog, grouped by category.
(function () {
  const { Icon } = window.WWIcons;
  const { useState, useEffect, useRef } = React;
  const WW = window.WW, CAT = window.WWCAT;

  // Build a unified article list from both data sources
  function buildAllArticles() {
    const items = [];

    // English articles from ww-data.js
    const engPillar = WW.pillars.find((p) => p.key === 'english');
    if (engPillar) {
      engPillar.articles.forEach((a) => {
        items.push({
          t: a.t, tag: a.tag, date: a.date, slug: a.slug || '',
          subject: 'english', cat: tagToCat(a.tag),
        });
      });
    }

    // English catalog articles from ww-catalog.js
    if (CAT && CAT.english) {
      CAT.english.forEach((a) => {
        // Avoid duplicates by checking title
        if (!items.some((x) => x.t === a.t)) {
          items.push({
            t: a.t, tag: a.skill, date: '', slug: '',
            subject: 'english', cat: skillToCat(a.skill),
            grades: a.grades, diff: a.diff, min: a.min,
          });
        }
      });
    }

    // Math catalog articles
    if (CAT && CAT.math) {
      CAT.math.forEach((a) => {
        items.push({
          t: a.t, tag: a.type, date: '', slug: a.slug || '',
          subject: 'math', cat: '數學',
          grades: a.grades, diff: a.diff, min: a.min,
        });
      });
    }

    // Blog posts
    if (CAT && CAT.blogPosts) {
      CAT.blogPosts.forEach((p) => {
        items.push({
          t: p.t, tag: p.cat, date: p.date, slug: p.slug,
          subject: p.cat === 'math' ? 'math' : p.cat === 'english' ? 'english' : p.cat === 'learning' ? 'learning' : 'other',
          cat: blogCatToLabel(p.cat),
          excerpt: p.excerpt, min: p.min,
        });
      });
    }

    return items;
  }

  function tagToCat(tag) {
    const map = {
      '流行文化': '故事型學習', '體育英文': '故事型學習', '影劇學英文': '故事型學習',
      '演講學英文': '故事型學習', '時事學英文': '故事型學習', 'K-pop': '故事型學習',
      'AI': '故事型學習', '社群': '故事型學習', '時事': '故事型學習',
      '旅行': '故事型學習', '日常': '故事型學習', '學術': '故事型學習',
      '簡報英文': '故事型學習', '商業英文': '故事型學習', '電影': '故事型學習',
      '遊戲': '故事型學習', '演講': '故事型學習', '學習策略': '故事型學習',
      '錯誤分析': '故事型學習', '考試': '考試準備', '學測': '考試準備',
      '文法': '文法', '閱讀': '閱讀', '寫作': '寫作', '字彙': '字彙', '聽力': '考試準備',
    };
    return map[tag] || '其他';
  }

  function skillToCat(skill) {
    const map = {
      '基礎': '基礎打底', '字彙': '字彙', '文法': '文法', '閱讀': '閱讀',
      '寫作': '寫作', '聽力': '聽力', '考試': '考試準備',
    };
    return map[skill] || '其他';
  }

  function blogCatToLabel(cat) {
    const map = {
      math: '數學', english: '英文', finance: '理財', learning: '學習方法',
      mindset: '觀念心態', current: '時事觀察', time: '時間管理', story: '教學故事',
    };
    return map[cat] || '其他';
  }

  const ALL = buildAllArticles();

  // Group labels with colors
  const GROUP_COLORS = {
    '故事型學習': '#b15a36', '文法': '#35608c', '閱讀': '#2f7d5b',
    '寫作': '#7a5dc7', '字彙': '#c08a2e', '考試準備': '#b1474a',
    '基礎打底': '#6a9e54', '聽力': '#4a8fa8', '數學': '#35608c',
    '理財': '#2f7d5b', '學習方法': '#7a5dc7', '觀念心態': '#c08a2e',
    '時事觀察': '#b1474a', '時間管理': '#4a8fa8', '教學故事': '#b15a36',
    '英文': '#b15a36', '其他': '#857e72',
  };

  function SearchPage() {
    const [q, setQ] = useState('');
    const [filter, setFilter] = useState('all'); // all | english | math | blog
    const inputRef = useRef(null);

    useEffect(() => {
      // Auto-focus search box
      if (inputRef.current) inputRef.current.focus();
      // Reveal animation
      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 });
      els.forEach((e) => io.observe(e));
      return () => io.disconnect();
    }, []);

    // Also check URL params
    useEffect(() => {
      const params = new URLSearchParams(window.location.search);
      const urlQ = params.get('q');
      if (urlQ) setQ(urlQ);
    }, []);

    const lowerQ = q.trim().toLowerCase();
    const keywords = lowerQ.split(/\s+/).filter(Boolean);

    const filtered = ALL.filter((a) => {
      if (filter === 'english' && a.subject !== 'english') return false;
      if (filter === 'math' && a.subject !== 'math') return false;
      if (filter === 'blog' && !['learning', 'other'].includes(a.subject)) return false;
      if (keywords.length === 0) return true; // show all when no query
      const haystack = [a.t, a.tag, a.cat, a.excerpt || '', (a.grades || []).join(' ')].join(' ').toLowerCase();
      return keywords.every((kw) => haystack.includes(kw));
    });

    // Group results
    const grouped = {};
    filtered.forEach((a) => {
      const g = a.cat || '其他';
      if (!grouped[g]) grouped[g] = [];
      grouped[g].push(a);
    });
    const groupKeys = Object.keys(grouped).sort((a, b) => grouped[b].length - grouped[a].length);

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

        {/* Hero */}
        <section className="ww-cphero">
          <div className="ww-cpheroin">
            <div className="ww-bc">
              <a href="/">首頁</a><span className="sep">/</span>
              <span>全文搜尋</span>
            </div>
            <div className="ww-cpeyebrow"><Icon name="search" size={15} />Search</div>
            <h1 className="ww-cph1">搜尋所有教材</h1>
            <p className="ww-cplead">
              從英文知識地圖到數學題型，從部落格文章到考試準備——輸入關鍵字，一次搜完。
            </p>
          </div>
        </section>

        {/* Search area */}
        <div className="ww-filter" style={{ top: 0, position: 'relative' }}>
          <div className="ww-filterin">
            <div className="ww-frow">
              <span className="ww-flabel">搜尋</span>
              <div className="ww-srch" style={{ flex: 1, minWidth: 300 }}>
                <Icon name="search" size={16} />
                <input
                  ref={inputRef}
                  placeholder="輸入關鍵字，例如：時態、介系詞、排列組合…"
                  value={q}
                  onChange={(e) => setQ(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === 'Escape') setQ('');
                  }}
                  style={{ fontSize: 16 }}
                />
                {q && (
                  <button
                    onClick={() => setQ('')}
                    style={{ background: 'none', border: 'none', color: 'var(--gray)', cursor: 'pointer', padding: '0 4px' }}
                    aria-label="清除"
                  >&#x2715;</button>
                )}
              </div>
            </div>
            <div className="ww-frow">
              <span className="ww-flabel">範圍</span>
              <div className="ww-seg">
                {[
                  { key: 'all', label: '全部' },
                  { key: 'english', label: '英文' },
                  { key: 'math', label: '數學' },
                  { key: 'blog', label: '部落格' },
                ].map((f) => (
                  <button key={f.key} className={filter === f.key ? 'on' : ''} onClick={() => setFilter(f.key)}>
                    {f.label}
                  </button>
                ))}
              </div>
              {keywords.length > 0 && (
                <span style={{ fontSize: 13, color: 'var(--gray)', fontFamily: 'var(--mono)', marginLeft: 'auto' }}>
                  找到 {filtered.length} 筆結果
                </span>
              )}
            </div>
          </div>
        </div>

        {/* Results */}
        <div className="ww-cpbody">
          {keywords.length === 0 ? (
            <div className="ww-noresult ww-reveal">
              <Icon name="search" size={48} style={{ color: 'var(--line2)', marginBottom: 16 }} />
              <b>輸入關鍵字開始搜尋</b>
              <p>試試「時態」「介系詞」「排列組合」「Taylor Swift」</p>
              {/* Suggested searches */}
              <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 10, marginTop: 28 }}>
                {['時態', '介系詞', '比較級', '排列組合', 'Taylor Swift', '閱讀策略', '寫作', '字根', '會考'].map((s) => (
                  <button
                    key={s}
                    className="ww-chip"
                    onClick={() => setQ(s)}
                    style={{ cursor: 'pointer' }}
                  >
                    {s}
                  </button>
                ))}
              </div>
            </div>
          ) : filtered.length === 0 ? (
            <div className="ww-noresult ww-reveal">
              <b>找不到符合「{q}」的教材</b>
              <p>試試其他關鍵字，或<a href="/english" style={{ color: 'var(--eng)', fontWeight: 600 }}>瀏覽英文知識地圖</a>。</p>
            </div>
          ) : (
            groupKeys.map((gk) => (
              <section className="ww-grp open ww-reveal" key={gk}>
                <div className="ww-grphead" style={{ cursor: 'default' }}>
                  <div className="gi" style={{
                    background: `color-mix(in srgb, ${GROUP_COLORS[gk] || '#857e72'} 12%, transparent)`,
                    color: GROUP_COLORS[gk] || '#857e72',
                  }}>{gk[0]}</div>
                  <div className="gt">{gk}</div>
                  <span className="gc">{grouped[gk].length} 筆</span>
                </div>
                <div className="ww-grpbody">
                  <div className="ww-arts">
                    {grouped[gk].map((a, i) => (
                      <a
                        className="ww-art"
                        key={i}
                        href={a.slug ? `/post/${a.slug}` : (a.subject === 'math' ? '/math' : a.subject === 'english' ? '/english' : '/blog')}
                      >
                        <span className="atag" style={{
                          color: GROUP_COLORS[a.cat] || 'var(--sc)',
                          background: `color-mix(in srgb, ${GROUP_COLORS[a.cat] || 'var(--sc)'} 11%, transparent)`,
                        }}>{a.tag}</span>
                        <span className="atitle">{highlightMatch(a.t, keywords)}</span>
                        <span className="ameta">
                          {a.grades && <span className="agrade">{a.grades.join('・')}</span>}
                          {a.diff && <span className="adiff"><span className={`dot ww-d${a.diff}`}></span>{a.diff}</span>}
                          {a.min && <span className="amin">{a.min} 分</span>}
                          {a.date && !a.grades && <span className="agrade">{a.date}</span>}
                          <span className="axam" style={{
                            color: a.subject === 'math' ? 'var(--math)' : 'var(--eng)',
                            borderColor: a.subject === 'math' ? 'color-mix(in srgb, var(--math) 30%, transparent)' : 'color-mix(in srgb, var(--eng) 30%, transparent)',
                          }}>{a.subject === 'math' ? '數學' : a.subject === 'english' ? '英文' : '部落格'}</span>
                        </span>
                      </a>
                    ))}
                  </div>
                </div>
              </section>
            ))
          )}
        </div>

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

  function highlightMatch(text, keywords) {
    if (!keywords.length) return text;
    // Simple highlight: wrap matched parts in <mark>
    const escaped = keywords.map((k) => k.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
    const pattern = `(${escaped.join('|')})`;
    const parts = text.split(new RegExp(pattern, 'gi'));
    return parts.map((p, i) =>
      new RegExp(pattern, 'gi').test(p) ? React.createElement('mark', {
        key: i,
        style: { background: 'color-mix(in srgb, var(--eng) 18%, transparent)', color: 'inherit', borderRadius: 3, padding: '0 2px' },
      }, p) : p
    );
  }

  window.WWSearchPage = SearchPage;
})();