"use client";

import { MonitorSmartphone, Plus, Server, Trash2, Wrench } from "lucide-react";
import { useMemo, useState } from "react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import {
  createToolSimulation,
  getToolSimulationValidationMessage,
  type FixedInputTurn,
  type ToolSimulation,
  type ToolSimulationResponse,
} from "@/data/test-suites";
import { cn } from "@/lib/utils";

export type EditorToolOption = {
  id: string;
  functionName: string;
  label: string;
  type: "http" | "mcp" | "client";
  parameters: { name: string; description: string }[];
};

const TOOL_TYPE_LABEL: Record<EditorToolOption["type"], string> = {
  http: "服务端 · HTTP",
  mcp: "服务端 · MCP",
  client: "客户端交互",
};

export function ToolSimulationEditor({
  value,
  tools,
  turns,
  onChange,
}: {
  value: ToolSimulation[];
  tools: EditorToolOption[];
  turns: FixedInputTurn[];
  onChange: (value: ToolSimulation[]) => void;
}) {
  const [addOpen, setAddOpen] = useState(false);
  const configuredIds = useMemo(
    () => new Set(value.map((simulation) => simulation.toolId)),
    [value],
  );
  const availableTools = tools.filter((tool) => !configuredIds.has(tool.id));
  const turnIds = useMemo(() => new Set(turns.map((turn) => turn.id)), [turns]);

  function addTool(tool: EditorToolOption) {
    onChange([
      ...value,
      createToolSimulation({
        toolId: tool.id,
        functionName: tool.functionName,
        toolType: tool.type,
      }),
    ]);
    setAddOpen(false);
  }

  function updateSimulation(index: number, simulation: ToolSimulation) {
    onChange(
      value.map((item, itemIndex) =>
        itemIndex === index ? simulation : item,
      ),
    );
  }

  return (
    <div className="space-y-3">
      {value.length === 0 ? (
        <div className="rounded-xl border border-dashed border-hairline-strong bg-canvas-soft/50 px-4 py-7 text-center">
          <Wrench size={18} className="mx-auto text-muted-soft" />
          <p className="mt-2 text-xs font-medium text-foreground">
            暂未配置工具模拟
          </p>
          <p className="mx-auto mt-1 max-w-md text-[11px] leading-4 text-muted-soft">
            运行中调用未配置的外部工具将立即停止当前用例。
          </p>
        </div>
      ) : (
        <div className="space-y-2.5">
          {value.map((simulation, index) => {
            const tool =
              tools.find((candidate) => candidate.id === simulation.toolId) ??
              tools.find(
                (candidate) =>
                  candidate.functionName === simulation.functionName,
              ) ??
              null;
            return (
              <ToolSimulationCard
                key={simulation.toolId}
                simulation={simulation}
                tool={tool}
                validationMessage={getToolSimulationValidationMessage(
                  simulation,
                  turnIds,
                )}
                onChange={(next) => updateSimulation(index, next)}
                onRemove={() =>
                  onChange(value.filter((_, itemIndex) => itemIndex !== index))
                }
              />
            );
          })}
        </div>
      )}

      <Popover open={addOpen} onOpenChange={setAddOpen}>
        <PopoverTrigger asChild>
          <Button
            type="button"
            variant="outline"
            size="sm"
            className="h-8 gap-1.5 rounded-full border-hairline-strong text-xs text-muted-foreground"
            disabled={availableTools.length === 0}
          >
            <Plus size={14} />
            添加工具模拟
          </Button>
        </PopoverTrigger>
        <PopoverContent align="start" className="w-80 p-1.5">
          <div className="px-2.5 py-1.5 text-[11px] font-medium tracking-wide text-muted-soft uppercase">
            选择工具
          </div>
          {availableTools.length === 0 ? (
            <p className="px-2.5 py-3 text-xs text-muted-foreground">
              所有可用工具均已配置
            </p>
          ) : (
            availableTools.map((tool) => (
              <button
                key={tool.id}
                type="button"
                className="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left transition-colors hover:bg-surface-strong"
                onClick={() => addTool(tool)}
              >
                <ToolTypeIcon type={tool.type} />
                <span className="min-w-0 flex-1">
                  <span className="block truncate text-sm font-medium text-foreground">
                    {tool.label || tool.functionName}
                  </span>
                  <span className="block truncate font-mono text-[11px] text-muted-soft">
                    {tool.functionName}
                  </span>
                </span>
                <span className="shrink-0 rounded-full border border-hairline px-2 py-0.5 text-[10px] text-muted-soft">
                  {TOOL_TYPE_LABEL[tool.type]}
                </span>
              </button>
            ))
          )}
        </PopoverContent>
      </Popover>
    </div>
  );
}

function ToolSimulationCard({
  simulation,
  tool,
  validationMessage,
  onChange,
  onRemove,
}: {
  simulation: ToolSimulation;
  tool: EditorToolOption | null;
  validationMessage: string | null;
  onChange: (simulation: ToolSimulation) => void;
  onRemove: () => void;
}) {
  const toolType = tool?.type;
  const response =
    simulation.mode === "fixed"
      ? simulation.response
      : simulation.steps[0]
        ? responseFromLegacyStep(simulation.steps[0])
        : defaultResponse(toolType, simulation.functionName);

  function updateFixedResponse(nextResponse: ToolSimulationResponse) {
    onChange({
      toolId: simulation.toolId,
      functionName: simulation.functionName,
      mode: "fixed",
      response: nextResponse,
    });
  }

  return (
    <div
      className={cn(
        "rounded-xl border border-hairline bg-canvas-soft/30 p-3",
        validationMessage && "border-destructive/40",
      )}
    >
      <div className="flex items-start gap-2.5">
        <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-surface-strong text-muted-foreground">
          {toolType ? <ToolTypeIcon type={toolType} /> : <Wrench size={14} />}
        </div>
        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-2">
            <span className="truncate text-sm font-medium text-foreground">
              {tool?.label || simulation.functionName}
            </span>
            <span className="rounded-full border border-hairline px-2 py-0.5 text-[10px] text-muted-soft">
              {toolType ? TOOL_TYPE_LABEL[toolType] : "工具已不可用"}
            </span>
          </div>
          <div className="mt-0.5 truncate font-mono text-[11px] text-muted-soft">
            {simulation.functionName}
          </div>
        </div>
        <Button
          type="button"
          variant="ghost"
          size="icon-sm"
          className="h-7 w-7 shrink-0 text-muted-soft hover:text-destructive"
          onClick={onRemove}
          aria-label={`删除 ${simulation.functionName} 工具模拟`}
        >
          <Trash2 size={13} />
        </Button>
      </div>

      {simulation.mode === "sequence" ? (
        <div className="mt-3 flex flex-wrap items-center justify-between gap-2 rounded-lg border border-hairline bg-surface-strong/45 px-3 py-2">
          <p className="text-[11px] leading-4 text-muted-foreground">
            这是旧版顺序配置。转换后将复用第一条响应作为固定返回。
          </p>
          <button
            type="button"
            className="h-7 rounded-full border border-hairline-strong px-2.5 text-[11px] text-foreground transition-colors hover:bg-background"
            onClick={() => updateFixedResponse(response)}
          >
            转为固定返回
          </button>
        </div>
      ) : null}

      <div className="mt-3 rounded-lg border border-hairline bg-background/60 p-2.5">
        <SimulationResponseFields
          value={response}
          toolType={toolType}
          ariaPrefix={`${simulation.functionName} 固定返回`}
          onChange={updateFixedResponse}
        />
        <p className="mt-2 text-[11px] leading-4 text-muted-soft">
          每次调用都返回此结果；调用次数仍由预期行为单独判断。
        </p>
      </div>

      {validationMessage ? (
        <p className="mt-2 text-[11px] text-destructive" role="alert">
          {validationMessage}
        </p>
      ) : null}
    </div>
  );
}

function SimulationResponseFields({
  value,
  toolType,
  ariaPrefix,
  onChange,
}: {
  value: ToolSimulationResponse;
  toolType: EditorToolOption["type"] | undefined;
  ariaPrefix: string;
  onChange: (value: ToolSimulationResponse) => void;
}) {
  return (
    <div className="space-y-2">
      <div className="grid gap-2 sm:grid-cols-[minmax(0,1fr)_112px]">
        <Select
          value={value.outcome}
          onValueChange={(outcome) =>
            onChange({ ...value, outcome: outcome as "success" | "error" })
          }
        >
          <SelectTrigger
            aria-label={`${ariaPrefix}状态`}
            className="h-8 border-hairline-strong bg-background text-xs"
          >
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="success">成功响应</SelectItem>
            <SelectItem value="error">错误响应</SelectItem>
          </SelectContent>
        </Select>
        <div className="flex items-center gap-1.5">
          <Input
            type="number"
            min={0}
            max={60000}
            step={100}
            value={value.delayMs}
            onChange={(event) => {
              const next = Number(event.target.value);
              onChange({
                ...value,
                delayMs: Number.isFinite(next)
                  ? Math.min(60000, Math.max(0, Math.round(next)))
                  : 0,
              });
            }}
            aria-label={`${ariaPrefix}延迟`}
            className="h-8 border-hairline-strong bg-background text-xs"
          />
          <span className="text-[11px] text-muted-soft">ms</span>
        </div>
      </div>
      <Textarea
        value={value.body}
        onChange={(event) => onChange({ ...value, body: event.target.value })}
        rows={5}
        aria-label={`${ariaPrefix} JSON`}
        placeholder={
          toolType === "client"
            ? '{\n  "action": "selected",\n  "value": "basic"\n}'
            : '{\n  "status": "ok"\n}'
        }
        className="field-sizing-fixed min-h-[112px] resize-y border-hairline-strong bg-background font-mono text-xs"
      />
      {toolType === "client" ? (
        <p className="text-[11px] leading-4 text-muted-soft">
          JSON 表示客户端回传给 Agent 的用户操作，例如选择、关闭或取消。
        </p>
      ) : null}
    </div>
  );
}

function defaultResponse(
  toolType: EditorToolOption["type"] | undefined,
  functionName: string,
): ToolSimulationResponse {
  return {
    outcome: "success",
    body:
      toolType === "client"
        ? functionName === "show_message"
          ? '{\n  "action": "confirmed"\n}'
          : '{\n  "action": "selected",\n  "value": ""\n}'
        : '{\n  "status": "ok"\n}',
    delayMs: 0,
  };
}

function responseFromLegacyStep(
  step: Extract<ToolSimulation, { mode: "sequence" }>["steps"][number],
): ToolSimulationResponse {
  return {
    outcome: step.outcome,
    body: step.body,
    delayMs: step.delayMs,
  };
}

function ToolTypeIcon({ type }: { type: EditorToolOption["type"] }) {
  if (type === "client") {
    return <MonitorSmartphone size={14} className="shrink-0" />;
  }
  return <Server size={14} className="shrink-0" />;
}