import React, { useState, useEffect } from 'react';
import '../style/Admin.css';

function UserManagement() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => setUsers(data))
      .catch(console.error);
  }, []);

  const handleUserAction = (id, action) => {
    fetch(`/api/users/${id}/${action}`, { method: 'POST' })
      .then(res => res.ok && setUsers(us => us.filter(u => u.id !== id)))
      .catch(console.error);
  };

  return (
    <div className="admin-container">
      <h2>用户管理</h2>
      <table className="admin-table">
        <thead>
          <tr><th>用户名</th><th>角色</th><th>操作</th></tr>
        </thead>
        <tbody>
          {users.map(u => (
            <tr key={u.id}>
              <td>{u.username}</td>
              <td>{u.role}</td>
              <td>
                <button onClick={() => handleUserAction(u.id, 'ban')}>封禁</button>
                <button onClick={() => handleUserAction(u.id, 'promote')}>提升权限</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default UserManagement;