// 最简单的 React 函数组件
function HelloMessage({ name }) {
  return (
    <div className="greeting">
      <h1>Hello, {name}!</h1>
      <p>Welcome to React</p>
    </div>
  );
}

// 使用组件
const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(<HelloMessage name="Alice" />);

// 父组件：组合多个子组件
function UserDashboard() {
  const user = { name: "Alice", role: "admin" };

  return (
    <div className="dashboard">
      {/* 数据通过 props 向下流动 */}
      <UserHeader user={user} />
      <UserStats userId={user.id} />
      <UserActivity userId={user.id} />
    </div>
  );
}

// 子组件：接收 props 并渲染
function UserHeader({ user }) {
  return (
    <header>
      <h1>{user.name}</h1>
      <span className="badge">{user.role}</span>
    </header>
  );
}

function Counter() {
  const [count, setCount] = useState(0);
  const [step, setStep] = useState(1);

  // 副作用：每次 count 变化时更新标题
  useEffect(() => {
    document.title = `Count: ${count}`;
    return () => { document.title = "React App"; };
  }, [count]); // 依赖：只在 count 变化时执行

  // 计算属性：缓存计算结果
  const doubled = useMemo(() => count * 2, [count]);

  return (
    <div>
      <p>Count: {count} | Doubled: {doubled}</p>
      <button onClick={() => setCount(c => c + step)}>
        Increment by {step}
      </button>
    </div>
  );
}

// 简单的待办事项应用
function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState("");

  const addTodo = useCallback(() => {
    if (!input.trim()) return;
    setTodos(prev => [...prev, {
      id: Date.now(),
      text: input,
      completed: false
    }]);
    setInput("");
  }, [input]);

  const toggleTodo = useCallback((id) => {
    setTodos(prev => prev.map(todo =>
      todo.id === id
        ? { ...todo, completed: !todo.completed }
        : todo
    ));
  }, []);

  return (
    <div>
      <input value={input}
        onChange={e => setInput(e.target.value)}
        onKeyDown={e => e.key === 'Enter' && addTodo()}
      />
      <TodoList todos={todos} onToggle={toggleTodo} />
    </div>
  );
}

function UserProfile() {
  const [formData, setFormData] = useState({
    name: "", email: "", bio: ""
  });
  const [status, setStatus] = useState("idle");

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("submitting");
    try {
      await fetch('/api/profile', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });
      setStatus("success");
    } catch (err) {
      setStatus("error");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={formData.name}
        onChange={handleChange} />
      <button disabled={status === "submitting"}>
        {status === "submitting" ? "Saving..." : "Save"}
      </button>
    </form>
  );
}

// 1. 创建 Context
const ThemeContext = createContext('light');
const UserContext = createContext(null);

// 2. 在顶层组件提供数据
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <UserContext.Provider value={{ name: "Alice" }}>
        <Layout />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

// 3. 在任意深层组件中使用
function ThemedButton() {
  const theme = useContext(ThemeContext);
  const user = useContext(UserContext);

  return (
    <button className={`btn btn-${theme}`}>
      {user.name}'s Button
    </button>
  );
}

// 优化示例：综合运用 memo + useMemo + useCallback
const ExpensiveList = React.memo(({ items, onSelect }) => {
  // 只在 items 变化时重新排序
  const sorted = useMemo(
    () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
    [items]
  );

  return (
    <ul>
      {sorted.map(item => (
        <li key={item.id} onClick={() => onSelect(item.id)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
});

// 父组件中缓存回调
function Parent() {
  const [items, setItems] = useState([...]);
  const handleSelect = useCallback((id) => {
    console.log('Selected:', id);
  }, []); // 空依赖 → 函数引用不变

  return <ExpensiveList items={items} onSelect={handleSelect} />;
}

function TaskManager() {
  // TODO 1: 定义任务列表状态
  // TODO 2: 定义筛选条件状态
  // TODO 3: 定义搜索关键词状态

  // TODO 4: 实现添加任务
  const addTask = (text) => { /* ??? */ };

  // TODO 5: 实现切换完成状态
  const toggleTask = (id) => { /* ??? */ };

  // TODO 6: 用 useMemo 缓存筛选结果
  const filteredTasks = /* useMemo(...) */;

  return (
    <div>
      <TaskInput onAdd={addTask} />
      <TaskFilter value={filter} onChange={setFilter} />
      <TaskList tasks={filteredTasks} onToggle={toggleTask} />
    </div>
  );
}