import { useState } from "react";
import { ShieldCheck, Check, X } from "lucide-react";
import { pendingApproval, type RunState } from "../lib/run";
import { approveTask } from "../lib/api";
import { Badge } from "../ui";

// ApprovalBar：HITL 人工审批中断条 —— 全局常驻（任务停在审批节点时，不管在哪个页面都要能看见+操作）。
// 触发以「后端状态 waiting」为准（落 PG，可靠）；exec 的 await 事件仅用于丰富摘要（可能抢跑丢失）。
// 决定经 approveTask 发回；dispatcher 续跑后状态轮询/SSE 更新，本条随 waiting 解除自动消失。
export function ApprovalBar({ run }: { run: RunState }) {
  const approval =
    run.taskId && run.lifecycle === "waiting"
      ? pendingApproval(run.exec) ?? { node: "", title: run.detail || "人工审批", summary: "" }
      : null;
  if (!approval || !run.taskId) return null;
  // key=taskId：换任务时重新挂载，重置 submitted 等本地状态，避免上一个审批的「已提交」残留。
  return <Bar key={run.taskId} taskId={run.taskId} node={approval.node} title={approval.title} summary={approval.summary} />;
}

function Bar({ taskId, node, title, summary }: { taskId: string; node: string; title: string; summary: string }) {
  const [note, setNote] = useState("");
  const [busy, setBusy] = useState<"approve" | "reject" | null>(null);
  const [submitted, setSubmitted] = useState(false); // 决定已发出；正常情况下任务续跑后本条随 waiting 解除自动消失
  const [err, setErr] = useState("");

  const decide = async (approved: boolean) => {
    setBusy(approved ? "approve" : "reject");
    setErr("");
    try {
      await approveTask(taskId, approved, { node, note });
      setSubmitted(true); // 关键：成功后置「已提交」而非停在 spinner —— 否则任务若恢复不了会永远卡「提交中…」
    } catch (e) {
      setErr((e as Error).message);
    } finally {
      setBusy(null);
    }
  };

  return (
    <div className="flex shrink-0 flex-col gap-2 border-b border-amber-500/30 bg-amber-500/10 px-4 py-2">
      <div className="flex items-center gap-2 text-[12px] text-amber-200">
        <ShieldCheck className="h-4 w-4 text-amber-400" strokeWidth={2.2} />
        <span className="font-semibold">人工审批</span>
        <span className="text-amber-300/80">{title}</span>
        <Badge tone="warn">{submitted ? "已提交决定" : "等待决定"}</Badge>
      </div>
      {summary && <pre className="max-h-20 overflow-auto whitespace-pre-wrap font-mono text-[11px] leading-relaxed text-amber-100/80">{summary}</pre>}
      {submitted ? (
        <p className="text-[11px] text-amber-200/80">决定已发出，等待任务续跑…（若长时间无响应，该任务可能已失效）</p>
      ) : (
        <div className="flex items-center gap-2">
          <input
            value={note}
            onChange={(e) => setNote(e.target.value)}
            placeholder="备注（可选，拒绝原因等）"
            className="min-w-0 flex-1 rounded border border-line bg-ink-950/60 px-2 py-1 text-[11px] text-slate-200 placeholder:text-slate-600 focus:border-amber-500/50 focus:outline-none"
          />
          <button onClick={() => decide(true)} disabled={busy !== null}
            className="flex items-center gap-1 rounded bg-success/20 px-2.5 py-1 text-[11px] font-medium text-success hover:bg-success/30 disabled:opacity-50">
            <Check className="h-3.5 w-3.5" /> {busy === "approve" ? "提交中…" : "批准"}
          </button>
          <button onClick={() => decide(false)} disabled={busy !== null}
            className="flex items-center gap-1 rounded bg-danger/20 px-2.5 py-1 text-[11px] font-medium text-danger hover:bg-danger/30 disabled:opacity-50">
            <X className="h-3.5 w-3.5" /> {busy === "reject" ? "提交中…" : "拒绝"}
          </button>
        </div>
      )}
      {err && <p className="text-[11px] text-danger">提交失败：{err}</p>}
    </div>
  );
}