import { useState, useEffect } from 'react'

function SearchDemo() {
  const [keyword, setKeyword] = useState('')
  const [results, setResults] = useState([])

  // 每当 keyword 变化时，重新执行过滤
  useEffect(() => {
    console.log('keyword 变为：', keyword)
    // 这里可以执行搜索逻辑
    setResults(/* 过滤结果 */)
  }, [keyword])  // 依赖 keyword

  return (
    <div>
      <input
        value={keyword}
        onChange={e => setKeyword(e.target.value)}
        placeholder="搜索..."
      />
      <p>当前搜索：{keyword}</p>
    </div>
  )
}

import { useState, useEffect } from 'react'

function useDebounce(value, delay = 300) {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    // 设置定时器：delay ms 后更新 debouncedValue
    const timer = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

    // 清理函数：如果 value 在 delay 内又变了，清除上一个定时器
    return () => clearTimeout(timer)
  }, [value, delay])

  return debouncedValue
}

// 使用防抖
function SearchInput() {
  const [keyword, setKeyword] = useState('')
  const debouncedKeyword = useDebounce(keyword, 300)

  // 只在防抖后的值变化时才执行（如发请求）
  useEffect(() => {
    if (debouncedKeyword) {
      console.log('真正执行搜索：', debouncedKeyword)
      // fetch(`/api/search?q=${debouncedKeyword}`)
    }
  }, [debouncedKeyword])

  return (
    <input
      value={keyword}
      onChange={e => setKeyword(e.target.value)}
      placeholder="搜索..."
    />
  )
}

// 文件路径：src/pages/HomePage.jsx
import { useState, useEffect, useMemo } from 'react'
import BlogCard from '../components/BlogCard'
import CategoryFilter from '../components/CategoryFilter'

function HomePage() {
  const [articles, setArticles] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState(null)
  const [activeCategory, setActiveCategory] = useState('全部')
  const [keyword, setKeyword] = useState('')   // 搜索关键词

  // 加载数据
  useEffect(() => {
    let cancelled = false
    async function fetchPosts() {
      setIsLoading(true)
      try {
        const res = await fetch('/posts.json')
        const data = await res.json()
        if (!cancelled) setArticles(data)
      } catch (err) {
        if (!cancelled) setError(err.message)
      } finally {
        if (!cancelled) setIsLoading(false)
      }
    }
    fetchPosts()
    return () => { cancelled = true }
  }, [])

  const categories = useMemo(() => {
    return ['全部', ...new Set(articles.map(a => a.category))]
  }, [articles])

  // 筛选 + 搜索：同时按分类和关键词过滤
  const filteredArticles = useMemo(() => {
    let result = articles

    // 先按分类过滤
    if (activeCategory !== '全部') {
      result = result.filter(a => a.category === activeCategory)
    }

    // 再按关键词过滤
    if (keyword.trim()) {
      const kw = keyword.trim().toLowerCase()
      result = result.filter(a =>
        a.title.toLowerCase().includes(kw) ||
        a.summary.toLowerCase().includes(kw)
      )
    }

    return result
  }, [articles, activeCategory, keyword])

  return (
    <div>
      <h2 className="section-title">最新文章</h2>

      {/* 搜索框 */}
      <div className="search-bar">
        <input
          type="text"
          value={keyword}
          onChange={e => setKeyword(e.target.value)}
          placeholder="搜索文章标题或摘要..."
          className="search-input"
        />
        {keyword && (
          <span className="clear-btn" onClick={() => setKeyword('')}>✕</span>
        )}
      </div>

      {isLoading && <p className="status-msg">加载中...</p>}

      {error && (
        <div className="status-msg error">
          <p>加载失败：{error}</p>
          <button onClick={() => window.location.reload()}>重试</button>
        </div>
      )}

      {!isLoading && !error && (
        <>
          <CategoryFilter
            categories={categories}
            activeCategory={activeCategory}
            onCategoryChange={setActiveCategory}
          />
          <p className="result-info">
            共 {filteredArticles.length} 篇
            {keyword && `，搜索「${keyword}」`}
          </p>
          {filteredArticles.length === 0 ? (
            <p className="empty-tip">没有找到匹配的文章</p>
          ) : (
            <div className="article-grid">
              {filteredArticles.map(article => (
                <BlogCard key={article.id} {...article} />
              ))}
            </div>
          )}
        </>
      )}
    </div>
  )
}

export default HomePage

/* 搜索框样式（追加到 App.css） */
.search-bar {
  position: relative;
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 2px solid #eee;
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}

.search-input:focus {
  border-color: #1976d2;
}

.clear-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #999;
  font-size: 18px;
}

.status-msg {
  text-align: center;
  padding: 60px 0;
  font-size: 16px;
  color: #999;
}

.status-msg.error {
  color: #e74c3c;
}

.status-msg.error button {
  margin-left: 10px;
  padding: 4px 12px;
  cursor: pointer;
}