// todo.types.ts
export interface Todo {
  id: string
  text: string
  completed: boolean
  createdAt: Date
}

export type Filter = 'all' | 'active' | 'completed'

// TodoItem.tsx
import React, { useState } from 'react'
import { Todo } from './todo.types'

interface TodoItemProps {
  todo: Todo
  onToggle: (id: string) => void
  onDelete: (id: string) => void
  onEdit: (id: string, text: string) => void
}

export function TodoItem({ todo, onToggle, onDelete, onEdit }: TodoItemProps) {
  const [isEditing, setIsEditing] = useState(false)
  const [editText, setEditText] = useState(todo.text)

  const handleEdit = () => {
    if (editText.trim()) {
      onEdit(todo.id, editText.trim())
      setIsEditing(false)
    }
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleEdit()
    } else if (e.key === 'Escape') {
      setEditText(todo.text)
      setIsEditing(false)
    }
  }

  return (
    <li className={`todo-item ${todo.completed ? 'completed' : ''}`}>
      {isEditing ? (
        <input
          type="text"
          value={editText}
          onChange={(e) => setEditText(e.target.value)}
          onKeyDown={handleKeyDown}
          autoFocus
          className="edit-input"
        />
      ) : (
        <>
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() => onToggle(todo.id)}
            className="todo-checkbox"
          />
          <span className="todo-text">{todo.text}</span>
          <div className="todo-actions">
            <button 
              onClick={() => setIsEditing(true)}
              className="btn btn-edit"
            >
              编辑
            </button>
            <button 
              onClick={() => onDelete(todo.id)}
              className="btn btn-delete"
            >
              删除
            </button>
          </div>
        </>
      )}
    </li>
  )
}

// useTodos.ts
import { useState, useEffect } from 'react'
import { Todo, Filter } from './todo.types'

interface UseTodosReturn {
  todos: Todo[]
  filter: Filter
  addTodo: (text: string) => void
  toggleTodo: (id: string) => void
  deleteTodo: (id: string) => void
  editTodo: (id: string, text: string) => void
  setFilter: (filter: Filter) => void
  filteredTodos: Todo[]
}

export function useTodos(): UseTodosReturn {
  // 状态管理
  const [todos, setTodos] = useState<Todo[]>(() => {
    const saved = localStorage.getItem('todos')
    return saved ? JSON.parse(saved) : []
  })
  
  const [filter, setFilter] = useState<Filter>('all')

  // 持久化到本地存储
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos))
  }, [todos])

  // 添加TODO
  const addTodo = (text: string) => {
    const newTodo: Todo = {
      id: Date.now().toString(),
      text,
      completed: false,
      createdAt: new Date()
    }
    setTodos(prev => [...prev, newTodo])
  }

  // 切换TODO状态
  const toggleTodo = (id: string) => {
    setTodos(prev => 
      prev.map(todo => 
        todo.id === id 
          ? { ...todo, completed: !todo.completed }
          : todo
      )
    )
  }

  // 删除TODO
  const deleteTodo = (id: string) => {
    setTodos(prev => prev.filter(todo => todo.id !== id))
  }

  // 编辑TODO
  const editTodo = (id: string, text: string) => {
    setTodos(prev => 
      prev.map(todo => 
        todo.id === id 
          ? { ...todo, text }
          : todo
      )
    )
  }

  // 过滤TODO
  const filteredTodos = todos.filter(todo => {
    if (filter === 'active') return !todo.completed
    if (filter === 'completed') return todo.completed
    return true
  })

  return {
    todos,
    filter,
    addTodo,
    toggleTodo,
    deleteTodo,
    editTodo,
    setFilter,
    filteredTodos
  }
}

// App.tsx
import React, { useState, useCallback } from 'react'
import { TodoItem } from './TodoItem'
import { useTodos } from './useTodos'
import './App.css'

function App() {
  const { todos, filter, addTodo, toggleTodo, deleteTodo, editTodo, setFilter, filteredTodos } = useTodos()
  const [newTodo, setNewTodo] = useState('')
  const [filterVisible, setFilterVisible] = useState(false)

  const handleAddTodo = useCallback((e: React.FormEvent) => {
    e.preventDefault()
    if (newTodo.trim()) {
      addTodo(newTodo.trim())
      setNewTodo('')
    }
  }, [addTodo, newTodo])

  const toggleFilter = useCallback(() => {
    setFilterVisible(!filterVisible)
  }, [filterVisible])

  return (
    <div className="app">
      <header className="app-header">
        <h1>React TODO App</h1>
      </header>

      <main className="app-main">
        <form onSubmit={handleAddTodo} className="todo-form">
          <input
            type="text"
            value={newTodo}
            onChange={(e) => setNewTodo(e.target.value)}
            placeholder="添加新的TODO..."
            className="todo-input"
          />
          <button type="submit" className="btn btn-primary">
            添加
          </button>
        </form>

        <div className="todo-controls">
          <div className="todo-stats">
            <span>总计: {todos.length}</span>
            <span>已完成: {todos.filter(todo => todo.completed).length}</span>
            <span>未完成: {todos.filter(todo => !todo.completed).length}</span>
          </div>
          
          <button onClick={toggleFilter} className="btn btn-secondary">
            {filterVisible ? '隐藏' : '显示'}筛选
          </button>
        </div>

        {filterVisible && (
          <div className="todo-filters">
            <button 
              onClick={() => setFilter('all')}
              className={`filter-btn ${filter === 'all' ? 'active' : ''}`}
            >
              全部
            </button>
            <button 
              onClick={() => setFilter('active')}
              className={`filter-btn ${filter === 'active' ? 'active' : ''}`}
            >
              未完成
            </button>
            <button 
              onClick={() => setFilter('completed')}
              className={`filter-btn ${filter === 'completed' ? 'active' : ''}`}
            >
              已完成
            </button>
          </div>
        )}

        <ul className="todo-list">
          {filteredTodos.map(todo => (
            <TodoItem
              key={todo.id}
              todo={todo}
              onToggle={toggleTodo}
              onDelete={deleteTodo}
              onEdit={editTodo}
            />
          ))}
        </ul>

        {filteredTodos.length === 0 && (
          <div className="empty-state">
            {todos.length === 0 ? '暂无TODO，添加一个吧！' : '没有匹配的TODO'}
          </div>
        )}
      </main>

      <footer className="app-footer">
        <p>使用React Hooks构建的TODO应用</p>
      </footer>
    </div>
  )
}

export default App

// context/AuthContext.tsx
import React, { createContext, useContext, useState, useEffect } from 'react'

interface User {
  id: string
  name: string
  email: string
}

interface AuthContextType {
  user: User | null
  login: (email: string, password: string) => Promise<void>
  logout: () => void
  loading: boolean
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // 检查本地存储中的用户信息
    const savedUser = localStorage.getItem('user')
    if (savedUser) {
      setUser(JSON.parse(savedUser))
    }
    setLoading(false)
  }, [])

  const login = async (email: string, password: string) => {
    setLoading(true)
    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
      })
      
      const data = await response.json()
      if (data.user) {
        setUser(data.user)
        localStorage.setItem('user', JSON.stringify(data.user))
      } else {
        throw new Error(data.error || '登录失败')
      }
    } catch (error) {
      throw error
    } finally {
      setLoading(false)
    }
  }

  const logout = () => {
    setUser(null)
    localStorage.removeItem('user')
  }

  return (
    <AuthContext.Provider value={{ user, login, logout, loading }}>
      {children}
    </AuthContext.Provider>
  )
}

export function useAuth() {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error('useAuth must be used within an AuthProvider')
  }
  return context
}

// 使用示例
function ProtectedComponent() {
  const { user, logout, loading } = useAuth()

  if (loading) return <div>加载中...</div>
  if (!user) return <div>请先登录</div>

  return (
    <div>
      <h1>欢迎, {user.name}!</h1>
      <button onClick={logout}>退出登录</button>
    </div>
  )
}

import React, { useMemo, useState } from 'react'

function UserList({ users }) {
  const [filter, setFilter] = useState('all')
  
  // 使用useMemo优化过滤操作
  const filteredUsers = useMemo(() => {
    console.log('过滤用户...')
    return users.filter(user => {
      if (filter === 'active') return !user.completed
      if (filter === 'completed') return user.completed
      return true
    })
  }, [users, filter])

  return (
    <div>
      <div>
        <button onClick={() => setFilter('all')}>全部</button>
        <button onClick={() => setFilter('active')}>活跃</button>
        <button onClick={() => setFilter('completed')}>已完成</button>
      </div>
      <ul>
        {filteredUsers.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  )
}

import React, { useCallback, useState } from 'react'

function ParentComponent() {
  const [count, setCount] = useState(0)
  
  // 使用useCallback缓存函数
  const handleIncrement = useCallback(() => {
    setCount(prev => prev + 1)
  }, [])

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onIncrement={handleIncrement} />
    </div>
  )
}

function ChildComponent({ onIncrement }) {
  console.log('ChildComponent 渲染')
  return <button onClick={onIncrement}>增加</button>
}

import { useState, useEffect } from 'react'

function useDebounce(value: string, delay: number) {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

    return () => {
      clearTimeout(handler)
    }
  }, [value, delay])

  return debouncedValue
}

// 使用示例
function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('')
  const debouncedSearchTerm = useDebounce(searchTerm, 500)

  useEffect(() => {
    if (debouncedSearchTerm) {
      // 执行搜索
      console.log('搜索:', debouncedSearchTerm)
    }
  }, [debouncedSearchTerm])

  return (
    <input
      type="text"
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      placeholder="搜索..."
    />
  )
}