import type { PiUpstream, PiUpstreamTestResult } from "@umt/contracts";
import { LoaderCircle, PlugZap, Send } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { useTestPiUpstream } from "~/api/pi.ts";
import { StatusBadge } from "~/components/console/status-badge.tsx";
import { Button } from "~/components/ui/button.tsx";
import { errorMessage } from "~/lib/api.ts";

// 上游测试:默认只验凭据与模型(不产生费用);"发一次最小补全"真实调用一次模型

const ERROR_KIND: Record<string, string> = {
  auth: "凭证被拒",
  oauth: "登录失效",
  model: "模型不可用",
  network: "网络错误",
  config: "配置错误",
  other: "失败",
};

export function PiTestPanel({ upstream, model }: { upstream: PiUpstream; model?: string | null }) {
  const test = useTestPiUpstream();
  const [result, setResult] = useState<PiUpstreamTestResult | null>(null);
  const [running, setRunning] = useState<"auth" | "completion" | null>(null);

  const run = async (mode: "auth" | "completion") => {
    setRunning(mode);
    try {
      const r = await test.mutateAsync({ id: upstream.id, body: { mode, ...(model ? { model } : {}) } });
      setResult(r);
      if (r.ok) toast.success(mode === "auth" ? "凭证可用" : "补全成功");
      else toast.error(r.message ?? "测试失败");
    } catch (err) {
      setResult(null);
      toast.error(errorMessage(err, "测试失败"));
    } finally {
      setRunning(null);
    }
  };

  return (
    <div className="grid gap-2">
      <div className="flex flex-wrap gap-2">
        <Button type="button" size="sm" variant="outline" disabled={!!running} onClick={() => run("auth")}>
          {running === "auth" ? <LoaderCircle className="animate-spin" /> : <PlugZap />}
          测试
        </Button>
        <Button type="button" size="sm" variant="ghost" disabled={!!running} onClick={() => run("completion")}>
          {running === "completion" ? <LoaderCircle className="animate-spin" /> : <Send />}
          发一次最小补全
        </Button>
      </div>
      <p className="text-meta text-muted-foreground">
        「测试」只检查凭证和模型,不产生费用。最小补全会调用一次模型(最多 16 个 token)。
      </p>
      {result ? (
        <div className="flex flex-wrap items-center gap-2 text-caption">
          <StatusBadge tone={result.ok ? "success" : "destructive"}>
            {result.ok ? "通过" : ERROR_KIND[result.errorKind ?? "other"]}
          </StatusBadge>
          <span className="text-muted-foreground">
            {result.latencyMs} ms{result.model ? ` · ${result.model}` : ""}
            {result.source ? ` · ${result.source}` : ""}
          </span>
          {!result.ok && result.message ? (
            <span className="w-full break-words text-destructive">{result.message}</span>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}