import type { CurrentUser, SiteSettings } from '../../env';
import { AdminLayout } from './layout';

export function AdminUsersPage(props: {
  settings: SiteSettings;
  currentUser: CurrentUser;
  csrfToken: string;
  users: Array<{ id: string; username: string; email: string; display_name: string; role: string; status: string; created_at: number }>;
}) {
  return (
    <AdminLayout title="用户管理" settings={props.settings} currentUser={props.currentUser} csrfToken={props.csrfToken} active="/admin/users">
      <section class="admin-panel">
        <table class="admin-table">
          <thead><tr><th>用户</th><th>邮箱</th><th>角色</th><th>状态</th><th>操作</th></tr></thead>
          <tbody>
            {props.users.map((user) => (
              <tr data-user-id={user.id}>
                <td><strong>{user.display_name}</strong><small>@{user.username}</small></td>
                <td>{user.email}</td>
                <td>
                  <select data-admin-user-role>
                    {['subscriber', 'author', 'admin'].map((role) => <option value={role} selected={role === user.role}>{role}</option>)}
                  </select>
                </td>
                <td>{user.status}</td>
                <td><button data-admin-action="ban-user">{user.status === 'banned' ? '恢复' : '封禁'}</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </AdminLayout>
  );
}
