"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import useSWR from "swr";
import { Loader2, Square, ArrowUp, RotateCcw } from "lucide-react";
import { toast } from "sonner";
import type { AgentRunView } from "@/lib/ai/canvas-agent-runtime/protocol";

export function CanvasAgentRunPanel(props: {
  enabled: boolean;
  chatId: string;
  projectId: string;
  busy: boolean;
  onResume: (runId: string) => void;
  onResults: (projectId: string, nodeIds: string[]) => void;
  onRunChange?: (run: AgentRunView | null) => void;
}) {
  const [text, setText] = useState("");
  const [sending, setSending] = useState(false);
  const [stopping, setStopping] = useState(false);
  const activeScope = useRef("");
  activeScope.current = `${props.chatId}:${props.projectId}`;
  const resultSignature = useRef("");
  const key = props.enabled
    ? `/api/canvas/agent-runs?${new URLSearchParams({ chatId: props.chatId, projectId: props.projectId })}`
    : null;
  const { data, mutate } = useSWR<{ run: AgentRunView | null }>(
    key,
    async (url: string) => {
      const response = await fetch(url, { cache: "no-store" });
      if (!response.ok) return { run: null };
      return response.json();
    },
    {
      refreshInterval: (latest) => (latest?.run?.status === "running" || props.busy ? 2000 : 0),
      revalidateOnFocus: true,
      shouldRetryOnError: false,
    },
  );
  const run = data?.run;
  useEffect(() => {
    if (data) props.onRunChange?.(data.run);
  }, [data, props.onRunChange]);
  useEffect(() => {
    setText("");
    setStopping(false);
    resultSignature.current = "";
  }, [props.chatId, props.projectId]);
  useEffect(() => {
    if (!props.enabled) return;
    const handler = (event: Event) => {
      const update = (event as CustomEvent<AgentRunView>).detail;
      if (update?.chatId === props.chatId && update?.projectId === props.projectId)
        void mutate({ run: update }, false);
    };
    window.addEventListener("canvas-agent-run:update", handler);
    return () => window.removeEventListener("canvas-agent-run:update", handler);
  }, [props.enabled, props.chatId, props.projectId, mutate]);
  useEffect(() => {
    if (!run?.resultNodeIds.length) return;
    const signature = `${run.id}:${run.resultNodeIds.join(",")}:${run.status}`;
    if (signature === resultSignature.current) return;
    resultSignature.current = signature;
    props.onResults(run.projectId, run.resultNodeIds);
  }, [run, props.onResults]);
  const control = useCallback(
    async (action: "steer" | "cancel") => {
      if (!run || sending) return;
      const scope = activeScope.current;
      setSending(true);
      try {
        const response = await fetch("/api/canvas/agent-runs", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            action,
            chatId: props.chatId,
            projectId: props.projectId,
            runId: run.id,
            ...(action === "steer" ? { inputId: crypto.randomUUID(), text: text.trim() } : {}),
          }),
        });
        const result = await response.json();
        if (!response.ok) throw new Error(result.error || "操作失败，请重试");
        if (scope !== activeScope.current) return;
        await mutate(result, false);
        if (action === "steer") {
          setText("");
          toast.message("补充要求已收到，将在下一步应用");
        } else {
          setStopping(true);
          toast.message("将停止后续步骤，已发出的生成请求会先收好结果");
        }
      } catch (error) {
        toast.error(error instanceof Error ? error.message : "操作失败");
      } finally {
        if (scope === activeScope.current) setSending(false);
      }
    },
    [run, sending, props.chatId, props.projectId, text, mutate],
  );
  if (!props.enabled || !run || run.status === "completed") return null;
  const running = run.status === "running";
  const stopPending = stopping || run.cancelRequested;
  return (
    <div
      className="mb-2 rounded-2xl border border-zinc-200 bg-zinc-50 px-3 py-2.5 text-xs dark:border-zinc-800 dark:bg-zinc-900"
      data-testid="canvas-agent-run"
    >
      <div
        className="flex items-center gap-2 text-zinc-700 dark:text-zinc-200"
        role="status"
        aria-live="polite"
      >
        {running ? <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin" /> : null}
        <span className="min-w-0 flex-1">
          {stopPending && running ? "正在停止后续步骤，等待当前生成结果" : run.message}
        </span>
        {running ? (
          <button
            type="button"
            onClick={() => void control("cancel")}
            disabled={sending || stopPending}
            className="rounded-lg p-1.5 hover:bg-zinc-200 disabled:opacity-40 dark:hover:bg-zinc-800"
            title="停止后续步骤"
            aria-label="停止后续步骤"
          >
            <Square className="h-3.5 w-3.5" />
          </button>
        ) : run.resumable ? (
          <button
            type="button"
            onClick={() => props.onResume(run.id)}
            disabled={props.busy}
            className="flex shrink-0 items-center gap-1 rounded-lg px-2 py-1.5 hover:bg-zinc-200 disabled:opacity-40 dark:hover:bg-zinc-800"
          >
            <RotateCcw className="h-3.5 w-3.5" />
            继续任务
          </button>
        ) : null}
      </div>
      <div className="mt-1 text-[11px] text-zinc-500">
        {run.runtime?.engine === "zcode" ? <span className="mr-2">ZCode · {!run.runtime.sandbox ? "尚未启动沙箱" : run.runtime.state === "starting" ? "正在启动独立沙箱" : run.runtime.state === "running" ? "独立沙箱运行中" : "沙箱已停止"}</span> : null}
        已处理 {run.steps} 轮 · {run.toolCount} 个工具步骤
      </div>
      {run.inputs.slice(-2).map((input) => (
        <div key={input.id} className="mt-1 truncate text-zinc-500" title={input.text}>
          {input.applied ? "已应用" : "待应用"}：{input.text}
        </div>
      ))}
      {running && !stopPending ? (
        <form
          className="mt-2 flex items-center gap-2"
          onSubmit={(event) => {
            event.preventDefault();
            if (text.trim()) void control("steer");
          }}
        >
          <input
            value={text}
            onChange={(event) => setText(event.target.value)}
            maxLength={2000}
            disabled={sending}
            placeholder="补充要求，将从下一步生效"
            aria-label="补充任务要求"
            className="min-w-0 flex-1 rounded-xl border border-zinc-200 bg-white px-3 py-2 outline-none focus:border-zinc-400 dark:border-zinc-700 dark:bg-zinc-950"
          />
          <button
            type="submit"
            disabled={sending || !text.trim()}
            title="发送补充要求"
            aria-label="发送补充要求"
            className="rounded-full bg-zinc-200 p-2 text-zinc-700 disabled:opacity-40 dark:bg-zinc-800 dark:text-zinc-100"
          >
            <ArrowUp className="h-3.5 w-3.5" />
          </button>
        </form>
      ) : null}
    </div>
  );
}