// HTML: <span id="count">0</span>
//       <button id="btn">+1</button>
 
let count = 0;
const span = document.getElementById('count');
const btn = document.getElementById('btn');
 
// 初始渲染 — 手动写一遍
span.textContent = count;
 
// 事件绑定 + 手动更新 — 再手动写一遍
btn.addEventListener('click', () => {
  count++;
  span.textContent = count;  // ← 每次状态变化都要手动同步 UI
});

function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

// HTML:
// <input id="todo-input" />
// <button id="add-btn">添加</button>
// <ul id="todo-list"></ul>
 
const input = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const list = document.getElementById('todo-list');
 
addBtn.addEventListener('click', () => {
  // 1. 创建 li
  const li = document.createElement('li');
 
  // 2. 创建 span（文字）
  const span = document.createElement('span');
  span.textContent = input.value;
  li.appendChild(span);
 
  // 3. 创建删除按钮
  const delBtn = document.createElement('button');
  delBtn.textContent = '删除';
  delBtn.addEventListener('click', () => {
    list.removeChild(li);  // ← 直接操作 DOM 删除
  });
  li.appendChild(delBtn);
 
  // 4. 插入 DOM
  list.appendChild(li);
 
  // 5. 清空输入框
  input.value = '';
});

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState('');
 
  function addTodo() {
    setTodos([...todos, { id: Date.now(), text }]);
    setText('');
  }
 
  function removeTodo(id) {
    setTodos(todos.filter(t => t.id !== id));
  }
 
  return (
    <div>
      <input value={text} onChange={e => setText(e.target.value)} />
      <button onClick={addTodo}>添加</button>
 
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <span>{todo.text}</span>
            <button onClick={() => removeTodo(todo.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

let users = [];                       // 原始数据
let filtered = [];                    // 过滤后的数据
 
// 获取数据
fetch('/api/users')
  .then(r => r.json())
  .then(data => {
    users = data;
    renderList(users);                // ← 手动渲染
  });
 
// 搜索
document.getElementById('search').addEventListener('input', (e) => {
  const keyword = e.target.value.toLowerCase();
  filtered = users.filter(u => u.name.toLowerCase().includes(keyword));
  renderList(filtered);               // ← 手动重新渲染
});
 
// 渲染函数 — 每次数据变都要手动调用
function renderList(items) {
  const list = document.getElementById('list');
  list.innerHTML = '';                // ← 清空
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.name;
    list.appendChild(li);            // ← 重建
  });
}

function UserList() {
  const [users, setUsers] = useState([]);
  const [keyword, setKeyword] = useState('');
 
  useEffect(() => {
    fetch('/api/users')
      .then(r => r.json())
      .then(setUsers);                // ← 只设数据，不调渲染
  }, []);
 
  const filtered = users.filter(u =>
    u.name.toLowerCase().includes(keyword.toLowerCase())
  );
 
  return (
    <div>
      <input value={keyword} onChange={e => setKeyword(e.target.value)} />
      <ul>
        {filtered.map(u => <li key={u.id}>{u.name}</li>)}
      </ul>
    </div>
  );
  // ← 没有 renderList 函数。filtered 变了，React 自动重渲染
}

// 声明式：一眼看出 UI 长什么样
<ul>
  {todos.map(todo => (
    <li key={todo.id}>
      <span>{todo.text}</span>
      <button onClick={() => removeTodo(todo.id)}>删除</button>
    </li>
  ))}
</ul>
 
// VS
 
// 命令式：UI 的样子藏在 createElement + appendChild 的序列里
// 想看出 UI 结构？你得在脑子里模拟这段代码的执行结果

// 声明式组件测试 = 给 props + state，看 JSX 输出
test('未完成 todo 不打删除线', () => {
  const { container } = render(<TodoItem done={false} text="买菜" />);
  expect(container.querySelector('span')).not.toHaveStyle('text-decoration: line-through');
});
 
// VS
 
// 命令式测试 = 要模拟 DOM 环境、mock fetch、验证 DOM 操作序列
// 代码量 x3，而且脆弱（DOM 结构一变测试就挂）

// 声明式的「魔法」让新手困惑
setTodos([...todos, newTodo])  // 为什么改了数组，列表就更新了？
useEffect(() => {...}, [count]) // 为什么 count 变了，副作用就跑？
React.memo(MyComponent)         // 为什么加个 memo 就跳过渲染了？

function VideoPlayer({ src }) {
  const videoRef = useRef(null);
 
  // 声明式：描述 UI
  return <video ref={videoRef} src={src} />;
}
 
// 命令式：直接操作 DOM — 通过 ref
function play() {
  videoRef.current.play();    // ← 直接调 DOM API
}
function pause() {
  videoRef.current.pause();
}
function seekTo(seconds) {
  videoRef.current.currentTime = seconds;
}

// 命令式思维（拿着 React 写 jQuery 风格）
function showModal() {
  document.getElementById('modal').style.display = 'block';
}
function hideModal() {
  document.getElementById('modal').style.display = 'none';
}
 
// 声明式思维（React 原生方式）
function App() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开</button>
      {isOpen && <Modal onClose={() => setIsOpen(false)} />}
    </div>
  );
}

// 命令式思维
function handleSubmit() {
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const error = document.getElementById('error');
 
  if (!name) {
    error.textContent = '名字不能为空';  // 手动改 DOM
    return;
  }
  error.textContent = '';              // 手动清空
 
  submit({ name, email });
}
 
// 声明式思维
function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
 
  function handleSubmit() {
    if (!name) return setError('名字不能为空');
    setError('');
    submit({ name, email });
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={e => setName(e.target.value)} />
      <input value={email} onChange={e => setEmail(e.target.value)} />
      {error && <p className="error">{error}</p>}
    </form>
  );
}