import { useState } from "react";
import { useConsole } from "../context";
import { Card, Bar } from "../components/ui";

export default function AdminSection() {
  const ctx = useConsole();
  const [setUser, setSetUser] = useState("");
  const [setUsd, setSetUsd] = useState("");
  return (
    <Card id="adminCard" title={<>管理区 <span className="muted">（仅全局管理员）</span></>}>
      <div className="muted">{ctx.adminGate}</div>
      {ctx.adminBody ? (
        <>
          <Bar>
            <input type="text" placeholder="要查配额的用户 id" value={ctx.adminUserId} onChange={(e) => ctx.setAdminUserId(e.target.value)} />
            <button onClick={ctx.adminQuota}>查该用户配额</button>
          </Bar>
          <Bar>
            <input type="text" placeholder="要设置配额的用户 id" value={setUser} onChange={(e) => setSetUser(e.target.value)} />
            <input type="text" placeholder="美元配额（留空 = 不限额）" value={setUsd} onChange={(e) => setSetUsd(e.target.value)} />
            <button className="primary" onClick={() => ctx.adminSetQuota(setUser, setUsd)}>设置配额</button>
          </Bar>
          <Bar>
            <button onClick={ctx.adminSweep}>手动触发 sweep（清理陈旧 running 任务）</button>
            <button onClick={ctx.adminBackup}>手动触发备份</button>
          </Bar>
          <div className="muted">{ctx.adminResult}</div>
        </>
      ) : null}
    </Card>
  );
}