import { useQueryClient } from "@tanstack/react-query";
import { type AgentRunStatus, EventType } from "@umt/contracts";
import { ChevronDown, FlaskConical, ListChecks, RefreshCw, WifiOff } from "lucide-react";
import { useId, useRef, useState } from "react";
import { useNavigate } from "react-router";
import { toast } from "sonner";
import {
  type AgentSessionOptions,
  agentKeys,
  agentMockEnabled,
  isRunActive,
  type RunSnapshot,
  TRIGGER_LABEL,
  useAbortAgentRun,
  useAgentRun,
  useAppendAgentMessage,
  useCreateAgentRun,
  useRunApprovals,
  useRunInvocationAudit,
} from "~/api/agent.ts";
import { CHEVRON_CLASS, Disclosure } from "~/components/agentui/disclosure.tsx";
import { MessageScroller } from "~/components/agentui/message-scroller.tsx";
import { PromptInput } from "~/components/agentui/prompt-input.tsx";
import { ConfirmDialog } from "~/components/console/confirm-dialog.tsx";
import { ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
import { StatusBadge } from "~/components/console/status-badge.tsx";
import { TechInfo } from "~/components/console/tech-info.tsx";
import { formatUsd } from "~/components/schedules/labels.ts";
import { Button } from "~/components/ui/button.tsx";
import { errorMessage } from "~/lib/api.ts";
import { useSse, useSseStatus } from "~/lib/sse.ts";
import { formatTokens } from "~/lib/tokens.ts";
import { cn, formatDateTime } from "~/lib/utils.ts";
import {
  AgentConversation,
  ApprovalItem,
  ResultLine,
  RunAnnouncer,
  RunStatusBadge,
  runPlanIds,
} from "./agent-conversation.tsx";
import { RunPlan } from "./agent-interaction.tsx";
import { shortGoalTitle } from "./agent-store.ts";
import { SubagentTree } from "./agent-subagent-tree.tsx";
import { callCounts, sessionStatsParts, stepProgress } from "./conversation-model.ts";
import {
  NEW_RUN_COMMANDS,
  PROPOSE_FIRST,
  PROPOSE_FIRST_MESSAGE,
  parseCommand,
  RERUN,
  RUN_COMMANDS,
} from "./slash-commands.ts";
import { type AgentStreamState, useAgentStream } from "./use-agent-stream.ts";

/** 新目标的提交内容:`/先给方案` 开头 → proposeFirst(只作用于这一次) */
export function goalFromInput(text: string): { goal: string; opts: AgentSessionOptions } | null {
  const { command, rest } = parseCommand(text, NEW_RUN_COMMANDS);
  if (!rest) return null;
  return { goal: rest, opts: { proposeFirst: command === PROPOSE_FIRST.name } };
}

/**
 * 新目标输入:只有输入框和发送;`/先给方案` 让这一次先给方案。空态下面 3 个快捷目标,点一下填进输入框
 * (以空格或冒号结尾的是半句,光标停在末尾等补完)。上下文(当前页面的对象)显示成名称标签,可以去掉。
 */
export function GoalComposer({
  onSubmit,
  pending,
  context,
  onClearContext,
  defaultGoal = "",
  suggestions,
}: {
  onSubmit: (goal: string, opts: AgentSessionOptions) => void;
  pending: boolean;
  /** 上下文标签(对象名称) */
  context?: string | null;
  onClearContext?: () => void;
  defaultGoal?: string;
  /** 快捷目标:输入框为空时显示 */
  suggestions?: string[];
}) {
  const [goal, setGoal] = useState(defaultGoal);
  const box = useRef<HTMLDivElement>(null);
  const fill = (text: string) => {
    setGoal(text);
    requestAnimationFrame(() => {
      const ta = box.current?.querySelector("textarea");
      if (!ta) return;
      ta.focus();
      ta.setSelectionRange(text.length, text.length);
    });
  };
  const submit = (text: string) => {
    const g = goalFromInput(text);
    if (!g) {
      toast.error("在指令后面写上目标");
      return;
    }
    onSubmit(g.goal, g.opts);
  };
  return (
    <div ref={box} className="flex flex-col gap-3">
      <PromptInput
        value={goal}
        onValueChange={setGoal}
        onSubmit={submit}
        pending={pending}
        minRows={2}
        maxRows={10}
        maxLength={4000}
        aria-label="目标"
        placeholder="例如：把沙丘：第二部的 4K 收进来"
        submitLabel={pending ? "提交中" : "开始"}
        commands={NEW_RUN_COMMANDS}
        context={context}
        onClearContext={onClearContext}
      />
      {suggestions?.length && !goal.trim() ? (
        <ul aria-label="快捷目标" className="flex flex-col gap-1.5">
          {suggestions.slice(0, 3).map((s) => (
            <li key={s}>
              <button
                type="button"
                onClick={() => fill(s)}
                className="w-full cursor-pointer rounded-xl border border-border/70 px-3 py-2 text-left text-caption text-foreground/90 outline-none transition-colors duration-micro hover:bg-foreground/[0.04] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
              >
                {s.endsWith(" ") || s.endsWith("：") ? `${s.trimEnd()}…` : s}
              </button>
            </li>
          ))}
        </ul>
      ) : null}
    </div>
  );
}

/**
 * 顶部概况条:一行「步骤 4/5 · 当前：核对下载任务」;展开看步骤清单、子会话和技术信息(模型、预算、用量、ID)。
 * 不 sticky、不压在会话上;没有步骤和子会话时只在运行中显示状态。
 */
/**
 * 会话统计(AG-4):概况条上方恒定一行小字——工具调用、MCP、已用 token、距上限、费用;
 * 运行中随事件流实时更新,结束后固定为快照里的最终值。
 */
export function RunStatsLine({
  snapshot,
  live,
  className,
}: {
  snapshot: RunSnapshot;
  live: AgentStreamState;
  className?: string;
}) {
  const r = snapshot.run;
  const u = { ...r.usage, ...(live.usage ?? {}) };
  const n = callCounts(live.items.flatMap((i) => (i.kind === "tool" ? [i.call] : [])));
  const parts = sessionStatsParts(
    {
      toolCalls: Math.max(r.toolCallCount - n.mcp, n.tools),
      mcpCalls: n.mcp,
      totalTokens: u.totalTokens ?? null,
      maxTokens: r.budget.maxTokens ?? null,
      costUsd: u.costUsd ?? null,
    },
    { tokens: formatTokens, usd: formatUsd },
  );
  return (
    <section aria-label="会话统计" className={cn("shrink-0", className)}>
      {/* 窄屏折行,不截断(费用在最后) */}
      <p data-slot="run-stats" className="flex flex-wrap gap-x-1.5 px-1 text-meta text-muted-foreground tabular-nums">
        {parts.map((t, i) => (
          <span key={t} className="whitespace-nowrap">
            {i ? "· " : ""}
            {t}
          </span>
        ))}
      </p>
    </section>
  );
}

export function RunOverviewBar({
  snapshot,
  status,
  live,
  active,
  className,
}: {
  snapshot: RunSnapshot;
  status: AgentRunStatus;
  live: AgentStreamState;
  active: boolean;
  className?: string;
}) {
  const id = useId();
  const [open, setOpen] = useState(false);
  const r = snapshot.run;
  const steps = live.plan?.steps ?? [];
  const progress = stepProgress(steps);
  const failed = progress.failedStep;
  const family = (snapshot.children?.length ?? 0) > 0 || !!snapshot.parent;
  if (!steps.length && !family && !isRunActive(status)) return null;
  const u = { ...r.usage, ...(live.usage ?? {}) };
  return (
    <section aria-label="会话概况" className={cn("shrink-0 rounded-xl border border-border/70", className)}>
      <button
        type="button"
        aria-expanded={open}
        aria-controls={id}
        onClick={() => setOpen((v) => !v)}
        className="flex min-h-9 w-full min-w-0 cursor-pointer items-center gap-2 rounded-xl px-3 py-1 text-left text-meta outline-none transition-colors duration-micro hover:bg-foreground/[0.03] focus-visible:ring-2 focus-visible:ring-ring"
      >
        {isRunActive(status) ? <RunStatusBadge status={status} /> : null}
        {steps.length ? (
          <>
            <ListChecks
              aria-hidden
              className={cn("size-3.5 shrink-0 text-muted-foreground", failed && "text-destructive")}
            />
            <span className="shrink-0 text-foreground tabular-nums">
              步骤 {progress.done}/{progress.total}
            </span>
            <span className="min-w-0 flex-1 truncate text-muted-foreground">{progress.status}</span>
          </>
        ) : (
          <span className="min-w-0 flex-1 truncate text-muted-foreground">
            {family ? `${snapshot.children?.length ?? 0} 个子会话` : ""}
          </span>
        )}
        <ChevronDown aria-hidden className={cn("size-3.5 shrink-0", CHEVRON_CLASS, open && "rotate-180")} />
      </button>
      {steps.length ? (
        <div className="mx-3 mb-1.5 h-0.5 overflow-hidden rounded-full bg-foreground/[0.08]" aria-hidden>
          <div
            className={cn(
              "h-full rounded-full transition-[width] duration-layout ease-standard motion-reduce:transition-none",
              failed ? "bg-destructive" : "bg-foreground/60",
            )}
            style={{ width: `${progress.pct}%` }}
          />
        </div>
      ) : null}
      <Disclosure id={id} open={open}>
        <div className="max-h-[50dvh] space-y-3 overflow-y-auto border-t border-border/60 p-3">
          <RunPlan plan={live.plan} active={active} fill />
          <SubagentTree snapshot={snapshot} className="p-2.5" />
          <p className="text-meta text-muted-foreground">
            {TRIGGER_LABEL[r.trigger]} · {formatDateTime(r.createdAt)}
          </p>
          <TechInfo
            items={[
              { label: "模型", value: r.model ? `${r.provider ? `${r.provider}/` : ""}${r.model}` : null },
              {
                label: "费用",
                value: u.costUsd
                  ? `约 ${formatUsd(u.costUsd)}${r.budget.maxCostUsd ? ` / 上限 ${formatUsd(r.budget.maxCostUsd)}` : ""}`
                  : null,
              },
              { label: "token", value: u.totalTokens !== undefined ? formatTokens(u.totalTokens) : null },
              {
                label: "工具调用",
                value: `${r.toolCallCount}${r.budget.maxToolCalls ? ` / ${r.budget.maxToolCalls}` : ""}`,
              },
              { label: "会话 ID", value: r.id, wide: true },
            ]}
          />
        </div>
      </Disclosure>
    </section>
  );
}

/**
 * 一次运行:顶部概况条 → 会话流(统一最大宽度)→ 底部输入区(只有输入框和发送 / 停止)。
 * 输入区的 `/重跑` 用同一个目标新开;`/先给方案` 让智能体先给方案。compact 用于抽屉。
 */
export function AgentRunPanel({
  runId,
  compact = false,
  className,
  onCreated,
}: {
  runId: string;
  compact?: boolean;
  className?: string;
  /** /重跑 之后:缺省跳到新会话页;抽屉里改成在抽屉内打开 */
  onCreated?: (runId: string) => void;
}) {
  const run = useAgentRun(runId);
  const active = isRunActive(run.data?.run.status);
  const live = useAgentStream(runId, active || !run.data);
  const abort = useAbortAgentRun();
  const append = useAppendAgentMessage();
  const create = useCreateAgentRun();
  const navigate = useNavigate();
  const [msg, setMsg] = useState("");
  const [confirmStop, setConfirmStop] = useState(false);
  const sseStatus = useSseStatus();
  const qc = useQueryClient();
  const toolCount = live.items.filter((i) => i.kind === "tool" && i.call.status !== "running").length;
  const audit = useRunInvocationAudit(runId, toolCount > 0, toolCount);
  const approvals = useRunApprovals(runPlanIds(live.items, run.data?.report ?? null));
  // 会话内审批卡已在对应步骤处显示,这里只补本次运行计划上还在等的其它审批
  const inline = new Set(live.items.flatMap((i) => (i.kind === "approval" ? [i.view.approvalId] : [])));
  // run 状态变化(queued → running → 终态)经 SSE 推送:到达即刷新快照,不等 3 秒轮询
  const related = new Set([
    runId,
    ...(run.data?.children ?? []).map((c) => c.id),
    ...(run.data?.parent ? [run.data.parent.id] : []),
  ]);
  useSse(
    [EventType.agentRunStatus, EventType.agentToolCall],
    (e) => {
      const p = e.payload as { runId?: string; capabilityId?: string } | null;
      if (!p?.runId) return;
      const hit =
        e.type === EventType.agentRunStatus
          ? related.has(p.runId)
          : p.runId === runId && p.capabilityId === "agent.spawn";
      if (hit) void qc.invalidateQueries({ queryKey: agentKeys.run(runId) });
    },
    !agentMockEnabled(),
  );

  if (run.isPending) return <LoadingState rows={4} />;
  if (run.error || !run.data) return <ErrorState plain error={run.error} onRetry={() => void run.refetch()} />;
  const { run: r, report, messages } = run.data;
  const finished = !isRunActive(r.status) || live.finished;
  const streaming = active && !live.finished;
  const shownStatus: AgentRunStatus =
    // 事件流已结束但快照还没刷到终态时按运行中显示;waiting(等待下载/入库核验)照实显示
    (live.finished && (r.status === "queued" || r.status === "running")) ||
    (r.status === "queued" && live.events.length > 0)
      ? "running"
      : r.status;
  const ended = !isRunActive(r.status);
  const created = onCreated ?? ((id: string) => navigate(`/console/agent/${id}${agentMockEnabled() ? "?mock=1" : ""}`));

  const send = (text: string) => {
    const { command, rest } = parseCommand(text, RUN_COMMANDS);
    if (command === RERUN.name) {
      create.mutate(
        { goal: r.goal, proposeFirst: r.scope.proposeFirst === true },
        {
          onSuccess: (n) => {
            setMsg("");
            created(n.id);
          },
          onError: (e) => toast.error(errorMessage(e)),
        },
      );
      return;
    }
    const body = command === PROPOSE_FIRST.name ? `${PROPOSE_FIRST_MESSAGE}${rest ? `\n${rest}` : ""}` : text;
    append.mutate(
      { id: r.id, text: body },
      {
        onSuccess: () => {
          setMsg("");
          void run.refetch();
        },
        onError: (err) => toast.error(errorMessage(err)),
      },
    );
  };

  const column = "mx-auto w-full max-w-[88ch]";

  return (
    <div className={cn("flex min-h-0 flex-col gap-3", className)}>
      <RunAnnouncer status={shownStatus} finished={live.finished} />
      {agentMockEnabled() && !compact ? (
        <div className={column}>
          <StatusBadge tone="warning">
            <FlaskConical className="size-3" />
            演示数据
          </StatusBadge>
        </div>
      ) : null}
      <RunStatsLine snapshot={run.data} live={live} className={column} />
      <RunOverviewBar
        snapshot={run.data}
        status={shownStatus}
        live={live}
        active={streaming || r.status === "waiting"}
        className={column}
      />

      {streaming && sseStatus === "reconnecting" ? (
        <div
          role="status"
          className={cn(
            column,
            "flex items-center gap-2 rounded-xl border border-warning/40 bg-warning/10 px-3 py-2 text-caption text-warning",
          )}
        >
          <WifiOff aria-hidden className="size-4 shrink-0" />
          <span className="min-w-0 flex-1">实时连接中断，正在重连。</span>
        </div>
      ) : null}
      {live.error ? (
        <div
          role="alert"
          className={cn(
            column,
            "flex flex-wrap items-center gap-2 rounded-xl border border-destructive/40 bg-destructive/10 px-3 py-2 text-caption text-destructive",
          )}
        >
          <span className="min-w-0 flex-1 break-words">事件读取失败：{live.error}</span>
          <Button size="xs" variant="outline" onClick={live.retry}>
            <RefreshCw />
            重试
          </Button>
        </div>
      ) : null}

      <MessageScroller
        className={cn("min-h-48 flex-1", compact && "min-h-40")}
        viewportClassName="pr-1"
        contentClassName={column}
        busy={streaming}
        label="智能体会话记录"
      >
        <AgentConversation
          run={r}
          live={live}
          knownNames={[
            ...(run.data.children ?? []).map((c) => [c.id, shortGoalTitle(c.goal, 24)] as [string, string]),
            ...(run.data.parent
              ? [[run.data.parent.id, shortGoalTitle(run.data.parent.goal, 24)] as [string, string]]
              : []),
          ]}
          audit={audit.data}
          userMessages={messages.map((m) => ({ at: m.createdAt, text: m.text, pending: m.status === "pending" }))}
          after={
            <>
              {approvals.items
                .filter((a) => !inline.has(a.id) && a.status === "pending")
                .map((a) => (
                  <ApprovalItem key={a.id} approval={a} />
                ))}
              {finished ? (
                <ResultLine
                  run={r}
                  report={report}
                  live={live}
                  subagents={(run.data.children ?? []).filter((c) => c.parentRunId === r.id).length}
                  showCost={false}
                />
              ) : null}
            </>
          }
        />
      </MessageScroller>

      <div className={cn(column, "shrink-0")}>
        <PromptInput
          value={msg}
          onValueChange={setMsg}
          onSubmit={send}
          pending={append.isPending || create.isPending}
          loading={streaming}
          onStop={() => setConfirmStop(true)}
          stopLabel={abort.isPending ? "停止中…" : "停止"}
          minRows={1}
          maxRows={6}
          maxLength={8000}
          aria-label="发消息"
          placeholder={ended ? "接着说，输入 / 看指令" : "补充或纠正"}
          commands={RUN_COMMANDS}
        />
      </div>

      <ConfirmDialog
        open={confirmStop}
        onOpenChange={setConfirmStop}
        title="停止这次运行？"
        description="后续步骤不再执行，已完成的动作（如已提交的下载）不会撤销。"
        confirmLabel="停止运行"
        destructive
        onConfirm={() =>
          abort.mutateAsync(r.id).then(
            () => toast.success("已请求停止"),
            (e) => {
              toast.error(errorMessage(e));
              throw e;
            },
          )
        }
      />
    </div>
  );
}