import {
  DndContext,
  DragOverlay,
  KeyboardSensor,
  PointerSensor,
  closestCenter,
  useSensor,
  useSensors,
  type DragEndEvent,
} from "@dnd-kit/core";
import {
  SortableContext,
  arrayMove,
  rectSortingStrategy,
  sortableKeyboardCoordinates,
  useSortable,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import {
  BotIcon,
  ChevronDownIcon,
  CircleAlertIcon,
  CpuIcon,
  EyeIcon,
  GripVerticalIcon,
  KeyRoundIcon,
  LoaderCircleIcon,
  PlusIcon,
  RefreshCwIcon,
  Settings2Icon,
  SparklesIcon,
  Trash2Icon,
  WrenchIcon,
} from "lucide-react";
import { useMemo, useState, type ReactNode } from "react";
import {
  Button as TButton,
  Dialog,
  Input,
  InputNumber,
  MessagePlugin,
  Select,
  Switch,
  Tag,
  Textarea,
} from "tdesign-react";

import {
  type ManagedModel,
  type ModelSavePayload,
  useDeleteManagedModel,
  useManagedModels,
  useReorderManagedModels,
  useSaveManagedModel,
  useTestManagedModel,
} from "@/core/model-management";
import {
  WorkspaceBody,
  WorkspaceContainer,
  WorkspaceHeader,
} from "@/components/workspace/workspace-container";

type ModelDraft = ModelSavePayload & {
  api_key: string;
  keep_existing_key: boolean;
  extra_settings_text: string;
};

const PROVIDER_OPTIONS = [
  { label: "OpenAI 兼容接口", value: "langchain_openai:ChatOpenAI" },
  { label: "Anthropic", value: "langchain_anthropic:ChatAnthropic" },
  { label: "Google Gemini", value: "langchain_google_genai:ChatGoogleGenerativeAI" },
  { label: "Groq", value: "langchain_groq:ChatGroq" },
  { label: "Ollama", value: "langchain_ollama:ChatOllama" },
];

const emptyDraft = (): ModelDraft => ({
  name: "",
  display_name: "",
  description: "",
  use: "langchain_openai:ChatOpenAI",
  model: "",
  api_key: "",
  keep_existing_key: false,
  clear_api_key: false,
  base_url: "",
  request_timeout: 30,
  max_retries: 2,
  max_tokens: undefined,
  temperature: undefined,
  stream_usage: true,
  supports_thinking: false,
  supports_reasoning_effort: false,
  supports_vision: false,
  when_thinking_enabled: null,
  when_thinking_disabled: null,
  thinking: null,
  use_responses_api: null,
  output_version: null,
  extra_settings: {},
  extra_settings_text: "{}",
});

function draftFromModel(model: ManagedModel): ModelDraft {
  return {
    ...model,
    api_key: "",
    keep_existing_key: model.api_key_configured,
    clear_api_key: false,
    extra_settings_text: JSON.stringify(model.extra_settings ?? {}, null, 2),
  };
}

function optionalString(value: string | null | undefined): string | null {
  const normalized = (value ?? "").trim();
  return normalized || null;
}

function toNumber(value: number | string | null | undefined): number | undefined {
  if (value === "" || value === null || value === undefined) return undefined;
  const parsed = Number(value);
  return Number.isFinite(parsed) ? parsed : undefined;
}

function buildPayload(draft: ModelDraft): ModelSavePayload {
  let extraSettings: Record<string, unknown> = {};
  try {
    const parsed = JSON.parse(draft.extra_settings_text || "{}") as unknown;
    if (!parsed || Array.isArray(parsed) || typeof parsed !== "object") {
      throw new Error("额外参数必须是 JSON 对象");
    }
    extraSettings = parsed as Record<string, unknown>;
  } catch (error) {
    throw error instanceof Error ? error : new Error("额外参数不是有效 JSON");
  }
  const payload: ModelSavePayload = {
    name: draft.name.trim(),
    display_name: optionalString(draft.display_name),
    description: optionalString(draft.description),
    use: draft.use.trim(),
    model: draft.model.trim(),
    clear_api_key: Boolean(draft.clear_api_key),
    base_url: optionalString(draft.base_url),
    request_timeout: toNumber(draft.request_timeout),
    max_retries: toNumber(draft.max_retries),
    max_tokens: toNumber(draft.max_tokens),
    temperature: toNumber(draft.temperature),
    stream_usage: draft.stream_usage,
    supports_thinking: draft.supports_thinking,
    supports_reasoning_effort: draft.supports_reasoning_effort,
    supports_vision: draft.supports_vision,
    when_thinking_enabled: draft.when_thinking_enabled,
    when_thinking_disabled: draft.when_thinking_disabled,
    thinking: draft.thinking,
    use_responses_api: draft.use_responses_api,
    output_version: optionalString(draft.output_version),
    extra_settings: extraSettings,
  };
  if (draft.api_key.trim()) payload.api_key = draft.api_key.trim();
  return payload;
}

function StatCard({ icon: Icon, label, value }: { icon: typeof CpuIcon; label: string; value: number }) {
  return (
    <div className="flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3 shadow-sm">
      <span className="flex size-10 items-center justify-center rounded-lg bg-primary/10 text-primary"><Icon className="size-5" /></span>
      <div><div className="text-xl font-semibold tabular-nums">{value}</div><div className="text-xs text-muted-foreground">{label}</div></div>
    </div>
  );
}

function Field({ label, required = false, children }: { label: string; required?: boolean; children: ReactNode }) {
  return <label className="space-y-1.5 text-sm font-medium">{label}{required && <span className="ml-1 text-destructive">*</span>}{children}</label>;
}

function ModelCapabilityBadge({
  icon: Icon,
  label,
  className,
}: {
  icon?: typeof KeyRoundIcon;
  label: string;
  className: string;
}) {
  return (
    <span className={`inline-flex h-7 items-center gap-1 whitespace-nowrap rounded px-2 text-xs font-medium leading-none ${className}`}>
      {Icon && <Icon aria-hidden className="block size-3.5 shrink-0" />}
      <span className="block leading-none">{label}</span>
    </span>
  );
}

function SortableModelCard({
  model,
  isDefault,
  dragEnabled,
  onConfigure,
  onDelete,
}: {
  model: ManagedModel;
  isDefault: boolean;
  dragEnabled: boolean;
  onConfigure: () => void;
  onDelete: () => void;
}) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: model.name,
    disabled: !dragEnabled,
  });

  return (
    <article
      ref={setNodeRef}
      style={{
        transform: CSS.Transform.toString(transform),
        transition,
        opacity: isDragging ? 0.45 : 1,
      }}
      className={`rounded-lg border border-border bg-background p-4 transition-[border-color,box-shadow] ${
        dragEnabled ? "hover:border-primary/35 hover:shadow-sm" : ""
      }`}
    >
      <div className="flex items-start justify-between gap-3">
        <div className="flex min-w-0 items-start gap-2">
          <button
            type="button"
            className={`mt-0.5 shrink-0 rounded p-1 text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
              dragEnabled
                ? "cursor-grab touch-none hover:bg-muted hover:text-foreground active:cursor-grabbing"
                : "cursor-not-allowed opacity-40"
            }`}
            title={dragEnabled ? "拖动调整顺序" : "请清空搜索和筛选后再调整顺序"}
            aria-label={`${model.display_name || model.name}：${dragEnabled ? "拖动调整顺序" : "当前不可调整顺序"}`}
            {...(dragEnabled ? attributes : {})}
            {...(dragEnabled ? listeners : {})}
          >
            <GripVerticalIcon className="size-4" aria-hidden />
          </button>
          <div className="min-w-0">
            <div className="flex flex-wrap items-center gap-2">
              <h2 className="truncate font-semibold">{model.display_name || model.name}</h2>
              {isDefault && <Tag theme="primary" variant="light" size="small">默认模型</Tag>}
              <Tag theme="success" variant="light" size="small">config.yaml</Tag>
            </div>
            <p className="mt-1 truncate font-mono text-xs text-muted-foreground">{model.name}</p>
          </div>
        </div>
        <div className="flex shrink-0 items-center gap-1">
          <TButton theme="default" variant="outline" size="small" onClick={onConfigure}>
            配置
          </TButton>
          <TButton
            theme="danger"
            variant="text"
            size="small"
            aria-label={`删除模型 ${model.display_name || model.name}`}
            onClick={onDelete}
          >
            <Trash2Icon className="mr-1 size-3.5" />删除
          </TButton>
        </div>
      </div>
      {model.description ? (
        <p className="mt-3 line-clamp-2 min-h-10 text-sm leading-5 text-muted-foreground">{model.description}</p>
      ) : (
        <p className="mt-3 min-h-10 text-sm leading-5 text-muted-foreground">未填写描述</p>
      )}
      <div className="mt-3 grid gap-2 border-t pt-3 text-xs text-muted-foreground sm:grid-cols-2">
        <span className="truncate" title={model.use}>驱动：{model.use}</span>
        <span className="truncate" title={model.model}>模型：{model.model}</span>
      </div>
      <div className="mt-3 flex flex-wrap items-center gap-1.5">
        {model.api_key_configured && (
          <ModelCapabilityBadge icon={KeyRoundIcon} label="已配置密钥" className="bg-muted text-foreground" />
        )}
        {model.supports_thinking && (
          <ModelCapabilityBadge icon={SparklesIcon} label="思考" className="bg-primary/10 text-primary" />
        )}
        {model.supports_vision && (
          <ModelCapabilityBadge icon={EyeIcon} label="视觉" className="bg-amber-500/10 text-amber-700 dark:text-amber-300" />
        )}
        {model.supports_reasoning_effort && (
          <ModelCapabilityBadge label="推理档位" className="bg-muted text-muted-foreground" />
        )}
      </div>
    </article>
  );
}

function showGlobalMessage(
  theme: "success" | "error" | "warning",
  content: string,
) {
  // Schedule after the modal state update so the message is rendered above
  // the page, rather than inside or behind a closing dialog.
  window.setTimeout(() => {
    MessagePlugin.closeAll();
    void MessagePlugin[theme]({
      content,
      duration: 5_000,
      placement: "top",
      zIndex: 10_000,
      attach: () => document.body,
    });
  }, 0);
}

function ModelEditor({ model, onClose }: { model: ManagedModel | null; onClose: () => void }) {
  const isNew = model === null;
  const [draft, setDraft] = useState<ModelDraft>(() => model ? draftFromModel(model) : emptyDraft());
  const [advanced, setAdvanced] = useState(false);
  const [testResult, setTestResult] = useState<{ success: boolean; latency: number; message: string; preview?: string | null } | null>(null);
  const save = useSaveManagedModel();
  const test = useTestManagedModel();
  const patch = (next: Partial<ModelDraft>) => setDraft((current) => ({ ...current, ...next }));

  const handleTest = async () => {
    try {
      const payload = buildPayload(draft);
      const result = await test.mutateAsync(payload);
      setTestResult({ success: result.success, latency: result.latency_ms, message: result.message, preview: result.preview });
      if (!result.success) return void showGlobalMessage("error", `连接失败：${result.message}`);
      showGlobalMessage("success", `连接成功${result.latency_ms ? `，${result.latency_ms} ms` : ""}`);
    } catch (error) {
      showGlobalMessage("error", error instanceof Error ? error.message : "连接测试失败");
    }
  };

  const handleSave = async () => {
    try {
      const payload = buildPayload(draft);
      if (!payload.name || !payload.use || !payload.model) {
        return void showGlobalMessage("warning", "请填写模型标识、驱动与实际模型名");
      }
      await save.mutateAsync({ name: model?.name ?? payload.name, payload, isNew });
      onClose();
      showGlobalMessage(
        "success",
        isNew
          ? `模型“${payload.name}”已添加，所有页面的模型选择器已刷新。`
          : `模型“${payload.name}”的配置已保存并立即生效。`,
      );
    } catch (error) {
      showGlobalMessage("error", error instanceof Error ? error.message : "保存模型配置失败");
    }
  };

  return (
    <Dialog
      visible
      header={isNew ? "添加模型" : `编辑模型：${model?.display_name || model?.name}`}
      placement="center"
      width={860}
      zIndex={3200}
      confirmBtn={{ content: isNew ? "添加并启用" : "保存配置", theme: "primary" }}
      cancelBtn="取消"
      confirmLoading={save.isPending}
      onClose={onClose}
      onConfirm={() => void handleSave()}
      onCancel={onClose}
    >
      <div className="max-h-[70vh] space-y-5 overflow-y-auto px-1 py-1 pr-3">
        <div className="rounded-lg border border-primary/20 bg-primary/5 px-3 py-2 text-sm text-muted-foreground">
          保存会直接更新当前部署的 <code className="rounded bg-background px-1 py-0.5">config.yaml</code> 模型段，自动备份并热刷新；不会中断已开始的会话。
        </div>
        <section className="grid gap-4 md:grid-cols-2">
          <Field label="稳定标识" required><Input value={draft.name} disabled={!isNew} placeholder="例如 deepseek-chat" tips={isNew ? "保存后不可修改，用于智能体和运行配置引用。" : "稳定标识不可修改，避免已有配置失效。"} onChange={(value) => patch({ name: String(value) })} /></Field>
          <Field label="显示名称"><Input value={draft.display_name ?? ""} placeholder="例如 DeepSeek Chat" onChange={(value) => patch({ display_name: String(value) })} /></Field>
          <Field label="模型驱动" required><Select value={draft.use} options={PROVIDER_OPTIONS} filterable creatable inputProps={{ placeholder: "选择或输入 use 类路径" }} onChange={(value) => patch({ use: String(value) })} /></Field>
          <Field label="实际模型名" required><Input value={draft.model} placeholder="例如 deepseek-chat" onChange={(value) => patch({ model: String(value) })} /></Field>
          <Field label="Base URL"><Input value={draft.base_url ?? ""} type="url" placeholder="https://api.example.com/v1" onChange={(value) => patch({ base_url: String(value) })} /></Field>
          <Field label="API Key"><Input value={draft.api_key} type="password" placeholder={draft.keep_existing_key && !draft.clear_api_key ? "已配置，留空则保持不变" : "可填写密钥或 $ENVIRONMENT_VARIABLE"} onChange={(value) => patch({ api_key: String(value), clear_api_key: false })} /></Field>
          {draft.keep_existing_key && !draft.api_key && <div className="md:col-span-2 flex items-center gap-2 text-xs text-muted-foreground"><KeyRoundIcon className="size-3.5" />已配置密钥{model?.api_key_source ? `（环境变量 ${model.api_key_source}）` : ""}，不会回显。<TButton theme="default" variant="text" size="small" onClick={() => patch({ clear_api_key: !draft.clear_api_key })}>{draft.clear_api_key ? "撤销清除" : "清除密钥"}</TButton></div>}
          <div className="md:col-span-2"><Field label="描述"><Textarea value={draft.description ?? ""} autosize={{ minRows: 2, maxRows: 4 }} placeholder="说明模型适用的任务与限制" onChange={(value) => patch({ description: String(value) })} /></Field></div>
        </section>
        <section className="rounded-lg border border-border p-4">
          <div className="mb-2"><h3 className="font-medium">能力声明</h3><p className="mt-1 text-xs text-muted-foreground">这些标识决定哪些页面会向模型提供思考、视觉或工具调用入口。</p></div>
          <div className="flex flex-wrap gap-x-5 gap-y-3 text-sm"><span className="flex items-center gap-2"><Switch value={draft.supports_thinking} onChange={(value) => patch({ supports_thinking: Boolean(value) })} />支持思考</span><span className="flex items-center gap-2"><Switch value={draft.supports_vision} onChange={(value) => patch({ supports_vision: Boolean(value) })} />支持视觉</span><span className="flex items-center gap-2"><Switch value={draft.supports_reasoning_effort} onChange={(value) => patch({ supports_reasoning_effort: Boolean(value) })} />推理档位</span></div>
        </section>
        <div className="flex items-center justify-between border-t pt-4"><TButton theme="default" variant="outline" loading={test.isPending} onClick={() => void handleTest()}><WrenchIcon className="mr-1.5 size-4" />测试连接</TButton><TButton theme="default" variant="text" onClick={() => setAdvanced((value) => !value)}><Settings2Icon className="mr-1.5 size-4" />高级配置 <ChevronDownIcon className={`ml-1 size-4 transition-transform ${advanced ? "rotate-180" : ""}`} /></TButton></div>
        {testResult && <div className={`rounded-lg border px-3 py-2 text-sm ${testResult.success ? "border-primary/20 bg-primary/5 text-foreground" : "border-destructive/25 bg-destructive/5 text-destructive"}`}><div className="font-medium">{testResult.success ? "连接成功" : "连接失败"}{testResult.success && testResult.latency ? ` · ${testResult.latency} ms` : ""}</div><p className="mt-1 break-words text-xs opacity-80">{testResult.preview || testResult.message}</p></div>}
        {advanced && <section className="space-y-4 rounded-lg border border-dashed border-border bg-muted/10 p-4"><div className="grid gap-4 md:grid-cols-3"><Field label="请求超时（秒）"><InputNumber value={draft.request_timeout ?? ""} min={1} max={600} onChange={(value) => patch({ request_timeout: toNumber(value) })} /></Field><Field label="最大重试次数"><InputNumber value={draft.max_retries ?? ""} min={0} max={20} onChange={(value) => patch({ max_retries: toNumber(value) })} /></Field><Field label="最大输出 Token"><InputNumber value={draft.max_tokens ?? ""} min={1} max={1_000_000} onChange={(value) => patch({ max_tokens: toNumber(value) })} /></Field><Field label="温度"><InputNumber value={draft.temperature ?? ""} min={0} max={2} step={0.1} decimalPlaces={1} onChange={(value) => patch({ temperature: toNumber(value) })} /></Field><span className="flex items-end gap-2 pb-1 text-sm font-medium"><Switch value={draft.stream_usage ?? true} onChange={(value) => patch({ stream_usage: Boolean(value) })} />流式 Token 统计</span></div><Field label="额外参数 JSON"><Textarea value={draft.extra_settings_text} autosize={{ minRows: 4, maxRows: 10 }} placeholder={'{\n  "extra_body": {}\n}'} onChange={(value) => patch({ extra_settings_text: String(value) })} /><p className="text-xs font-normal text-muted-foreground">保留并编辑配置文件中未在基础表单展示的兼容参数。必须为 JSON 对象。</p></Field></section>}
      </div>
    </Dialog>
  );
}

export default function ModelManagementPage() {
  const { data, isLoading, error, refetch, isFetching } = useManagedModels();
  const [search, setSearch] = useState("");
  const [filter, setFilter] = useState<"all" | "thinking" | "vision">("all");
  const [editor, setEditor] = useState<ManagedModel | null | "new">(null);
  const [deleteTarget, setDeleteTarget] = useState<ManagedModel | null>(null);
  const [pendingOrder, setPendingOrder] = useState<string[] | null>(null);
  const [activeDragId, setActiveDragId] = useState<string | null>(null);
  const remove = useDeleteManagedModel();
  const reorder = useReorderManagedModels();
  const sourceModels = data?.models ?? [];
  const orderedModels = useMemo(() => {
    if (!pendingOrder || pendingOrder.length !== sourceModels.length) return sourceModels;
    const byName = new Map(sourceModels.map((model) => [model.name, model]));
    const reordered = pendingOrder.map((name) => byName.get(name)).filter((model): model is ManagedModel => Boolean(model));
    return reordered.length === sourceModels.length ? reordered : sourceModels;
  }, [pendingOrder, sourceModels]);
  const models = useMemo(() => {
    const keyword = search.trim().toLowerCase();
    return orderedModels.filter((model) => {
      const matchesFilter = filter === "all" || (filter === "thinking" ? model.supports_thinking : model.supports_vision);
      const matchesSearch = !keyword || [model.name, model.display_name, model.model, model.use].filter(Boolean).join(" ").toLowerCase().includes(keyword);
      return matchesFilter && matchesSearch;
    });
  }, [filter, orderedModels, search]);
  const stats = useMemo(() => ({ total: data?.models.length ?? 0, thinking: data?.models.filter((item) => item.supports_thinking).length ?? 0, vision: data?.models.filter((item) => item.supports_vision).length ?? 0 }), [data?.models]);
  const handleDelete = async () => {
    if (!deleteTarget)
      return;
    try {
      await remove.mutateAsync(deleteTarget.name);
      const deletedName = deleteTarget.name;
      setDeleteTarget(null);
      showGlobalMessage("success", `模型“${deletedName}”已删除，配置已立即生效。`);
    }
    catch (error) {
      showGlobalMessage("error", error instanceof Error ? error.message : "删除模型失败，请稍后重试。");
    }
  };
  const dragEnabled = filter === "all" && !search.trim() && !reorder.isPending;
  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
  );
  const handleDragEnd = async ({ active, over }: DragEndEvent) => {
    setActiveDragId(null);
    if (!dragEnabled || !over || active.id === over.id) return;
    const oldIndex = orderedModels.findIndex((model) => model.name === active.id);
    const newIndex = orderedModels.findIndex((model) => model.name === over.id);
    if (oldIndex < 0 || newIndex < 0) return;

    const nextOrder = arrayMove(orderedModels.map((model) => model.name), oldIndex, newIndex);
    setPendingOrder(nextOrder);
    try {
      await reorder.mutateAsync(nextOrder);
      showGlobalMessage("success", `模型顺序已更新，“${nextOrder[0]}”现在是默认模型。`);
    } catch (error) {
      setPendingOrder(null);
      showGlobalMessage("error", error instanceof Error ? error.message : "调整模型顺序失败，请稍后重试。");
    }
  };
  return (
    <WorkspaceContainer>
      <WorkspaceHeader />
      <WorkspaceBody>
        <main className="flex size-full min-h-0 flex-col overflow-y-auto bg-background px-6 py-5 md:px-8">
          <div className="mx-auto flex w-full max-w-7xl flex-col gap-5">
            <header className="flex flex-wrap items-start justify-between gap-4">
              <div>
                <div className="flex items-center gap-2">
                  <span className="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
                    <CpuIcon className="size-5" />
                  </span>
                  <h1 className="text-2xl font-semibold tracking-tight">模型配置</h1>
                </div>
                <p className="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">
                  管理当前部署 <code className="rounded bg-muted px-1 py-0.5">config.yaml</code> 中的对话模型。保存后所有页面立即可选；密钥仅可写入，永不回显。
                </p>
              </div>
              <div className="flex flex-wrap items-center gap-2">
                <TButton theme="default" variant="outline" loading={isFetching} onClick={() => void refetch()}>
                  <RefreshCwIcon className="mr-1.5 size-4" />刷新
                </TButton>
                <TButton theme="primary" onClick={() => setEditor("new")}>
                  <PlusIcon className="mr-1.5 size-4" />添加模型
                </TButton>
              </div>
            </header>

            <div className="grid gap-3 sm:grid-cols-3">
              <StatCard icon={BotIcon} label="已配置模型" value={stats.total} />
              <StatCard icon={SparklesIcon} label="支持思考" value={stats.thinking} />
              <StatCard icon={EyeIcon} label="支持视觉" value={stats.vision} />
            </div>

            <section className="rounded-xl border border-border bg-card shadow-sm">
              <div className="flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3">
                <div className="flex flex-wrap items-center gap-2">
                  {([
                    ["all", "全部"],
                    ["thinking", "支持思考"],
                    ["vision", "支持视觉"],
                  ] as const).map(([value, label]) => (
                    <TButton
                      key={value}
                      theme={filter === value ? "primary" : "default"}
                      variant={filter === value ? "base" : "text"}
                      size="small"
                      onClick={() => setFilter(value)}
                    >
                      {label}
                    </TButton>
                  ))}
                </div>
                <Input
                  value={search}
                  placeholder="搜索名称、模型或驱动"
                  clearable
                  className="w-full sm:w-72"
                  onChange={(value) => setSearch(String(value))}
                />
              </div>

              {isLoading && (
                <div className="flex h-52 items-center justify-center gap-2 text-sm text-muted-foreground">
                  <LoaderCircleIcon className="size-4 animate-spin" />加载模型配置…
                </div>
              )}
              {error && (
                <div className="m-4 flex items-start gap-2 rounded-lg border border-destructive/25 bg-destructive/5 p-3 text-sm text-destructive">
                  <CircleAlertIcon className="mt-0.5 size-4" />{error.message}
                </div>
              )}
              {!isLoading && !error && models.length === 0 && (
                <div className="flex h-52 flex-col items-center justify-center gap-2 text-sm text-muted-foreground">
                  <CpuIcon className="size-7" />没有匹配的模型配置
                </div>
              )}
              {!isLoading && !error && models.length > 0 && (
                <DndContext
                  sensors={sensors}
                  collisionDetection={closestCenter}
                  onDragStart={({ active }) => setActiveDragId(String(active.id))}
                  onDragCancel={() => setActiveDragId(null)}
                  onDragEnd={(event) => void handleDragEnd(event)}
                >
                  <div className="border-b bg-muted/20 px-4 py-2.5 text-xs text-muted-foreground">
                    拖动卡片左侧手柄即可调整顺序；排在第一位的模型会作为默认模型。
                    {!dragEnabled && " 请清空搜索和筛选条件后再调整顺序。"}
                  </div>
                  <SortableContext items={models.map((model) => model.name)} strategy={rectSortingStrategy}>
                    <div className="grid gap-3 p-4 lg:grid-cols-2">
                      {models.map((model) => (
                        <SortableModelCard
                          key={model.name}
                          model={model}
                          isDefault={model.name === orderedModels[0]?.name}
                          dragEnabled={dragEnabled}
                          onConfigure={() => setEditor(model)}
                          onDelete={() => setDeleteTarget(model)}
                        />
                      ))}
                    </div>
                  </SortableContext>
                  <DragOverlay>
                    {activeDragId ? (
                      <div className="rounded-lg border border-primary/30 bg-background px-4 py-3 text-sm font-medium shadow-lg">
                        {orderedModels.find((model) => model.name === activeDragId)?.display_name || activeDragId}
                      </div>
                    ) : null}
                  </DragOverlay>
                </DndContext>
              )}
            </section>

            {data?.config_path && (
              <p className="text-xs text-muted-foreground">
                当前配置文件：<code>{data.config_path}</code>
                {data.updated_at ? " · 最近更新 " + new Date(data.updated_at).toLocaleString() : ""}
              </p>
            )}
          </div>
        </main>
      </WorkspaceBody>

      {editor !== null && (
        <ModelEditor
          key={editor === "new" ? "new" : editor.name}
          model={editor === "new" ? null : editor}
          onClose={() => setEditor(null)}
        />
      )}

      {deleteTarget && (
        <Dialog
          visible
          header="删除模型"
          placement="center"
          width={440}
          zIndex={3200}
          confirmBtn={{ content: "删除", theme: "danger" }}
          cancelBtn="取消"
          confirmLoading={remove.isPending}
          onClose={() => {
            if (!remove.isPending) setDeleteTarget(null);
          }}
          onCancel={() => {
            if (!remove.isPending) setDeleteTarget(null);
          }}
          onConfirm={() => void handleDelete()}
        >
          <p className="text-sm leading-6 text-muted-foreground">
            确定要删除模型 <code className="rounded bg-muted px-1 py-0.5">{deleteTarget.name}</code> 吗？删除后会立即更新运行中的模型配置，依赖它的智能体或任务可能无法继续使用。
          </p>
        </Dialog>
      )}
    </WorkspaceContainer>
  );
}