// 이 파일이 하는 일: 개발 용어 사전 — 강좌에 나오는 용어를 초보 눈높이로 검색한다.
// 학습 포인트: 데이터(용어 목록)는 lib/glossary.js에 두고, 이 파일은 "검색·표시"만 한다.
//   데이터와 화면을 나누면, 용어를 추가할 때 이 화면 코드는 건드릴 필요가 없다.
import { useMemo, useState } from 'react';
import { Link } from 'react-router-dom';
import { GLOSSARY, GLOSSARY_CATEGORIES } from '../lib/glossary';

export default function GlossaryPage() {
  const [query, setQuery] = useState('');
  const [cat, setCat] = useState('전체');

  // 검색: 용어·한줄요약·설명 어디든 포함되면 매칭. 대소문자 무시.
  // useMemo — query/cat이 바뀔 때만 다시 거른다(입력마다 전체 재계산 방지).
  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    return GLOSSARY.filter((t) => {
      if (cat !== '전체' && t.category !== cat) return false;
      if (!q) return true;
      return (
        t.term.toLowerCase().includes(q) ||
        t.short.toLowerCase().includes(q) ||
        t.desc.toLowerCase().includes(q)
      );
    });
  }, [query, cat]);

  return (
    <div>
      <div className="hero compact">
        <div className="eyebrow">Glossary</div>
        <h1>개발 용어 사전</h1>
        <p>
          강좌를 보다 모르는 단어가 나오면 여기서 찾아보세요. {GLOSSARY.length}개 용어를
          <strong> 초보 눈높이</strong>로 풀었어요. "이게 뭐지?" 하는 순간의 마찰을 줄여 줍니다.
        </p>
      </div>

      {/* 검색창 */}
      <input
        className="input"
        style={{ marginBottom: 12 }}
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="용어 검색 (예: API, 해시, 컴파일…)"
        autoFocus
      />

      {/* 카테고리 필터 */}
      <div className="tabs">
        {['전체', ...GLOSSARY_CATEGORIES].map((c) => (
          <button
            key={c}
            type="button"
            className={`tab${c === cat ? ' active' : ''}`}
            onClick={() => setCat(c)}
          >
            {c}
          </button>
        ))}
      </div>

      {filtered.length === 0 ? (
        <p className="empty">
          "{query}"에 해당하는 용어가 없어요. 다른 말로 검색하거나, 멘토에게 물어보고
          이 사전에 추가하면 다음 사람에게 도움이 됩니다.
        </p>
      ) : (
        <div style={{ display: 'grid', gap: 10 }}>
          {filtered.map((t) => (
            <div key={t.term} className="card" style={{ padding: '14px 16px' }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
                <span style={{ fontSize: 16, fontWeight: 800 }}>{t.term}</span>
                <span className="badge badge-primary" style={{ fontSize: 11 }}>{t.category}</span>
                <span className="muted" style={{ fontSize: 13.5 }}>{t.short}</span>
              </div>
              <p className="muted" style={{ fontSize: 13.5, marginTop: 6, lineHeight: 1.7 }}>{t.desc}</p>
            </div>
          ))}
        </div>
      )}

      <p className="muted" style={{ fontSize: 12.5, marginTop: 16 }}>
        찾는 용어가 없다면? <Link to="/learn">학습 센터</Link>의 관련 강좌를 열거나 멘토에게 물어보세요.
      </p>
    </div>
  );
}
