"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";

export function HostRevokeButton({ hostId }: { hostId: string }) {
  const router = useRouter();
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");

  async function revoke() {
    if (!window.confirm("撤销后 daemon 令牌立即失效并释放槽位。保留主机 identity.json 时可通过新的配对码安全恢复。确定继续？")) return;
    setBusy(true);
    setError("");
    try {
      const response = await fetch("/api/hosts/revoke", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ hostId, reason: "用户从主机列表撤销设备凭据" }),
      });
      const body = (await response.json()) as { message?: string };
      if (!response.ok) throw new Error(body.message || "撤销失败");
      router.refresh();
    } catch (revokeError) {
      setError(revokeError instanceof Error ? revokeError.message : "撤销失败");
    } finally {
      setBusy(false);
    }
  }

  return (
    <div>
      <button className="button button-secondary" type="button" onClick={revoke} disabled={busy}>
        {busy ? "正在撤销…" : "撤销主机"}
      </button>
      {error && <small className="form-error" role="alert">{error}</small>}
    </div>
  );
}