"use client";

import Link from "next/link";
import { useEffect, useMemo, useRef, useState } from "react";
import useSWR from "swr";
import { toast } from "sonner";
import {
  ArrowLeft,
  Image as ImageIcon,
  Loader2,
  Plus,
  Save,
  Sparkles,
  Trash2,
  Upload,
} from "lucide-react";
import {
  defaultAgentWorkflowUiConfig,
  normalizeAgentWorkflowUiConfig,
} from "@/lib/agents/workflow-ui-config";
import {
  defaultAgentWorkflowBrandModelConfig,
  normalizeAgentWorkflowBrandModelConfig,
} from "@/lib/agents/workflow-brand-model-config";
import {
  defaultAgentWorkflowMaterialApiConfig,
  normalizeAgentWorkflowMaterialApiConfig,
} from "@/lib/agents/workflow-material-config";
import { fetchUploadWithRetry } from "@/lib/client/upload-with-retry";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import type {
  AgentWorkflowBrandModelConfig,
  AgentWorkflowMaterialApiConfig,
  AgentWorkflowOptionUiConfig,
  AgentWorkflowStepUiConfig,
  AgentWorkflowUiConfig,
} from "@/types/agent";

const fetcher = (url: string) => fetch(url, { cache: "no-store" }).then((res) => res.json());

function normalizeConfigOrdering(config: AgentWorkflowUiConfig): AgentWorkflowUiConfig {
  return {
    ...config,
    steps: config.steps.map((step, stepIndex) => ({
      ...step,
      sortOrder: stepIndex,
      options: step.options.map((option, optionIndex) => ({
        ...option,
        sortOrder: optionIndex,
      })),
    })),
  };
}

function createWorkflowSlug(value: string, fallback: string) {
  const normalized = value
    .trim()
    .replace(/\s+/g, "_")
    .replace(/[^\w-]/g, "_")
    .replace(/_+/g, "_")
    .replace(/^_+|_+$/g, "")
    .toLowerCase();
  return normalized || fallback;
}

function ensureUniqueWorkflowKey(baseKey: string, existingKeys: string[]) {
  const normalizedBase = createWorkflowSlug(baseKey, "item");
  const keySet = new Set(existingKeys);
  if (!keySet.has(normalizedBase)) {
    return normalizedBase;
  }

  let suffix = 2;
  let candidate = `${normalizedBase}_${suffix}`;
  while (keySet.has(candidate)) {
    suffix += 1;
    candidate = `${normalizedBase}_${suffix}`;
  }
  return candidate;
}

function createWorkflowOptionDraft(
  stepKey: string,
  optionIndex: number,
  existingOptionKeys: string[]
): AgentWorkflowOptionUiConfig {
  const optionKey = ensureUniqueWorkflowKey(
    `${stepKey}_option_${optionIndex + 1}`,
    existingOptionKeys
  );
  return {
    key: optionKey,
    buttonName: `选项${optionIndex + 1}`,
    description: "",
    previewImageUrl: "",
    enabled: true,
    sortOrder: optionIndex,
    promptFragment: `请按选项${optionIndex + 1}执行。`,
  };
}

function createWorkflowStepDraft(
  stepIndex: number,
  existingStepKeys: string[]
): AgentWorkflowStepUiConfig {
  const stepKey = ensureUniqueWorkflowKey(`step_${stepIndex + 1}`, existingStepKeys);
  return {
    key: stepKey,
    title: `新步骤${stepIndex + 1}`,
    description: "",
    enabled: true,
    sortOrder: stepIndex,
    options: [createWorkflowOptionDraft(stepKey, 0, [])],
  };
}

interface AgentWorkflowSettingsClientProps {
  backHref?: string;
  backLabel?: string;
}

export function AgentWorkflowSettingsClient({
  backHref = "/settings",
  backLabel = "返回设置",
}: AgentWorkflowSettingsClientProps = {}) {
  const { data, isLoading, mutate } = useSWR<{
    agentWorkflowUiConfig?: AgentWorkflowUiConfig;
    agentWorkflowMaterialApiConfig?: AgentWorkflowMaterialApiConfig;
    agentWorkflowBrandModelConfig?: AgentWorkflowBrandModelConfig;
  }>("/api/site-settings", fetcher);
  const [config, setConfig] = useState<AgentWorkflowUiConfig>(defaultAgentWorkflowUiConfig);
  const [materialApiConfig, setMaterialApiConfig] = useState<AgentWorkflowMaterialApiConfig>(
    defaultAgentWorkflowMaterialApiConfig
  );
  const [brandModelConfig, setBrandModelConfig] = useState<AgentWorkflowBrandModelConfig>(
    defaultAgentWorkflowBrandModelConfig
  );
  const [isSaving, setIsSaving] = useState(false);
  const [uploadingKey, setUploadingKey] = useState<string | null>(null);
  const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({});

  useEffect(() => {
    if (!data) return;
    setConfig(normalizeAgentWorkflowUiConfig(data.agentWorkflowUiConfig));
    setMaterialApiConfig(
      normalizeAgentWorkflowMaterialApiConfig(data.agentWorkflowMaterialApiConfig)
    );
    setBrandModelConfig(
      normalizeAgentWorkflowBrandModelConfig(data.agentWorkflowBrandModelConfig)
    );
  }, [data]);

  const configuredBrands = useMemo(
    () => config.inputOptions?.brands || defaultAgentWorkflowUiConfig.inputOptions?.brands || [],
    [config.inputOptions?.brands]
  );
  const brandModelBrands = useMemo(() => {
    return Array.from(
      new Set([
        ...configuredBrands,
        ...brandModelConfig.entries.map((entry) => entry.brandName),
      ])
    ).sort((left, right) => left.localeCompare(right, "zh-CN"));
  }, [brandModelConfig.entries, configuredBrands]);

  const sortedSteps = useMemo(
    () => [...config.steps].sort((left, right) => left.sortOrder - right.sortOrder),
    [config.steps]
  );

  const updateStep = (
    stepKey: string,
    updater: (step: AgentWorkflowUiConfig["steps"][number]) => AgentWorkflowUiConfig["steps"][number]
  ) => {
    setConfig((prev) =>
      normalizeConfigOrdering({
        ...prev,
        steps: prev.steps.map((step) => (step.key === stepKey ? updater(step) : step)),
      })
    );
  };

  const updateOption = (
    stepKey: string,
    optionKey: string,
    updater: (
      option: AgentWorkflowUiConfig["steps"][number]["options"][number]
    ) => AgentWorkflowUiConfig["steps"][number]["options"][number]
  ) => {
    updateStep(stepKey, (step) => ({
      ...step,
      options: step.options.map((option) =>
        option.key === optionKey ? updater(option) : option
      ),
    }));
  };

  const handleAddStep = () => {
    setConfig((prev) =>
      normalizeConfigOrdering({
        ...prev,
        steps: [
          ...prev.steps,
          createWorkflowStepDraft(prev.steps.length, prev.steps.map((step) => step.key)),
        ],
      })
    );
  };

  const handleRemoveStep = (stepKey: string) => {
    setConfig((prev) =>
      normalizeConfigOrdering({
        ...prev,
        steps: prev.steps.filter((step) => step.key !== stepKey),
      })
    );
  };

  const handleAddOption = (stepKey: string) => {
    updateStep(stepKey, (step) => ({
      ...step,
      options: [
        ...step.options,
        createWorkflowOptionDraft(step.key, step.options.length, step.options.map((item) => item.key)),
      ],
    }));
  };

  const handleRemoveOption = (stepKey: string, optionKey: string) => {
    updateStep(stepKey, (step) => ({
      ...step,
      options: step.options.filter((option) => option.key !== optionKey),
    }));
  };

  const handleUploadPreview = async (stepKey: string, optionKey: string, file: File) => {
    if (!file.type.startsWith("image/")) {
      toast.error("请上传图片文件");
      return;
    }

    const refKey = `${stepKey}:${optionKey}`;
    try {
      setUploadingKey(refKey);
      const formData = new FormData();
      formData.append("file", file);

      const response = await fetchUploadWithRetry(formData);
      const result = await response.json();

      if (!response.ok || !result?.url) {
        throw new Error(result?.error || "上传失败");
      }

      updateOption(stepKey, optionKey, (option) => ({
        ...option,
        previewImageUrl: result.url,
      }));
      toast.success("预览图上传成功");
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "预览图上传失败");
    } finally {
      setUploadingKey(null);
    }
  };

  const handleSave = async () => {
    try {
      setIsSaving(true);
      const response = await fetch("/api/site-settings", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          agentWorkflowUiConfig: config,
          agentWorkflowMaterialApiConfig: materialApiConfig,
          agentWorkflowBrandModelConfig: brandModelConfig,
        }),
      });

      if (!response.ok) {
        throw new Error("保存失败");
      }

      toast.success("智能体工作流配置已保存");
      await mutate();
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "保存失败");
    } finally {
      setIsSaving(false);
    }
  };

  const updateBrandModelEntry = (
    brandName: string,
    updater: (
      entry: NonNullable<AgentWorkflowBrandModelConfig["entries"][number]>
    ) => NonNullable<AgentWorkflowBrandModelConfig["entries"][number]>
  ) => {
    setBrandModelConfig((prev) => {
      const entryIndex = prev.entries.findIndex((entry) => entry.brandName === brandName);
      const currentEntry =
        entryIndex >= 0
          ? prev.entries[entryIndex]
          : {
              brandName,
              images: [],
            };
      const nextEntry = updater(currentEntry);
      const nextEntries =
        entryIndex >= 0
          ? prev.entries.map((entry, index) => (index === entryIndex ? nextEntry : entry))
          : [...prev.entries, nextEntry];

      return {
        entries: nextEntries
          .filter((entry) => entry.images.length > 0 || configuredBrands.includes(entry.brandName))
          .map((entry) => ({
            ...entry,
            images: entry.images
              .slice()
              .sort((left, right) => left.sortOrder - right.sortOrder)
              .map((image, index) => ({
                ...image,
                sortOrder: index,
              })),
          })),
      };
    });
  };

  const handleUploadBrandModelImages = async (brandName: string, files: FileList | null) => {
    const pickedFiles = Array.from(files || []).filter((file) => file.type.startsWith("image/"));
    if (pickedFiles.length === 0) {
      toast.error("请先选择图片文件");
      return;
    }

    const refKey = `brand-model:${brandName}`;
    try {
      setUploadingKey(refKey);
      const uploadedImages: AgentWorkflowBrandModelConfig["entries"][number]["images"] = [];

      for (const file of pickedFiles) {
        const formData = new FormData();
        formData.append("file", file);

        const response = await fetchUploadWithRetry(formData);
        const result = await response.json();

        if (!response.ok || !result?.url) {
          throw new Error(result?.error || "上传失败");
        }

        uploadedImages.push({
          id:
            (typeof result.assetId === "string" && result.assetId.trim()) ||
            `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`,
          assetId: typeof result.assetId === "string" ? result.assetId : null,
          imageUrl: result.url,
          displayName: file.name,
          mimeType: file.type || null,
          sortOrder: 0,
        });
      }

      updateBrandModelEntry(brandName, (entry) => ({
        ...entry,
        images: [
          ...entry.images,
          ...uploadedImages.map((image, index) => ({
            ...image,
            sortOrder: entry.images.length + index,
          })),
        ],
      }));
      toast.success(
        uploadedImages.length === 1 ? "模特图上传成功" : `已上传 ${uploadedImages.length} 张模特图`
      );
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "模特图上传失败");
    } finally {
      setUploadingKey(null);
    }
  };

  const handleRemoveBrandModelImage = (brandName: string, imageId: string) => {
    updateBrandModelEntry(brandName, (entry) => ({
      ...entry,
      images: entry.images.filter((image) => image.id !== imageId),
    }));
  };

  return (
    <div className="container mx-auto space-y-6 p-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="space-y-1">
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <Sparkles className="h-4 w-4" />
            智能体配置中心
          </div>
          <h1 className="text-2xl font-semibold">智能体工作流配置</h1>
          <p className="text-sm text-muted-foreground">
            单独维护智能体页面左侧每个环节的功能按钮名称、说明、Prompt 片段和预览图。
          </p>
        </div>

        <div className="flex items-center gap-2">
          <Button asChild variant="outline">
            <Link href={backHref}>
              <ArrowLeft className="mr-2 h-4 w-4" />
              {backLabel}
            </Link>
          </Button>
          <Button onClick={handleSave} disabled={isSaving}>
            {isSaving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Save className="mr-2 h-4 w-4" />}
            保存配置
          </Button>
        </div>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>功能说明</CardTitle>
          <CardDescription>
            这里配置的是智能体工作流页面的功能卡片。网站设置页只保留入口，不再承载这些详细配置。
          </CardDescription>
        </CardHeader>
      </Card>

      {isLoading ? (
        <Card>
          <CardContent className="flex items-center justify-center py-12">
            <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
          </CardContent>
        </Card>
      ) : (
        <div className="space-y-5">
          <Card>
            <CardHeader>
              <CardTitle>素材搜索接口配置</CardTitle>
              <CardDescription>
                配置主 SPU / 搭配 SKU 搜图所需的接口地址与 API Key。Key 会按系统设置方式存储到数据库中，不会下发到前台页面。
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between rounded-xl border bg-muted/20 px-4 py-3">
                <div className="space-y-1">
                  <div className="text-sm font-medium">启用素材搜索</div>
                  <div className="text-xs text-muted-foreground">
                    开启后，智能体工作流页面支持搜索并选择白底素材图。
                  </div>
                </div>
                <Switch
                  checked={materialApiConfig.enabled}
                  onCheckedChange={(checked) =>
                    setMaterialApiConfig((prev) => ({
                      ...prev,
                      enabled: checked,
                    }))
                  }
                />
              </div>

              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label>接口基地址</Label>
                  <Input
                    value={materialApiConfig.baseUrl}
                    onChange={(event) =>
                      setMaterialApiConfig((prev) => ({
                        ...prev,
                        baseUrl: event.target.value,
                      }))
                    }
                    placeholder="https://sc.jiansun.vip/api/external"
                  />
                </div>
                <div className="space-y-2">
                  <Label>API Key</Label>
                  <Input
                    type="password"
                    value={materialApiConfig.apiKey}
                    onChange={(event) =>
                      setMaterialApiConfig((prev) => ({
                        ...prev,
                        apiKey: event.target.value,
                      }))
                    }
                    placeholder="请输入素材搜索 API Key"
                  />
                </div>
              </div>

              <div className="text-xs text-muted-foreground">
                当前适配的是白底图搜索接口；前台不会直接暴露 Key，而是由服务端代查并转存图片。
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>基础下拉配置</CardTitle>
              <CardDescription>
                工作流左侧“品牌 / 店铺”采用后台配置的候选列表，前台支持输入关键字匹配下拉选择。
              </CardDescription>
            </CardHeader>
            <CardContent className="grid grid-cols-1 gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label>品牌列表</Label>
                <Textarea
                  value={(config.inputOptions?.brands || []).join("\n")}
                  onChange={(event) =>
                    setConfig((prev) => ({
                      ...prev,
                      inputOptions: {
                        brands: event.target.value
                          .split("\n")
                          .map((item) => item.trim())
                          .filter(Boolean),
                        stores: prev.inputOptions?.stores || [],
                      },
                    }))
                  }
                  rows={10}
                  placeholder={"例如：\n宜家\n顾家家居\n林氏家居"}
                />
              </div>
              <div className="space-y-2">
                <Label>店铺列表</Label>
                <Textarea
                  value={(config.inputOptions?.stores || []).join("\n")}
                  onChange={(event) =>
                    setConfig((prev) => ({
                      ...prev,
                      inputOptions: {
                        brands: prev.inputOptions?.brands || [],
                        stores: event.target.value
                          .split("\n")
                          .map((item) => item.trim())
                          .filter(Boolean),
                      },
                    }))
                  }
                  rows={10}
                  placeholder={"例如：\n天猫旗舰店\n京东自营店\n抖音官方店"}
                />
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>品牌模特图库</CardTitle>
              <CardDescription>
                第二步会根据第一步选择的品牌，展示这里配置的品牌模特图供用户单选，并自动带入生图流程的模特图槽位。
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {brandModelBrands.length > 0 ? (
                brandModelBrands.map((brandName) => {
                  const refKey = `brand-model:${brandName}`;
                  const entry =
                    brandModelConfig.entries.find((item) => item.brandName === brandName) || null;
                  const images = entry?.images || [];
                  const isUploading = uploadingKey === refKey;

                  return (
                    <div key={brandName} className="rounded-2xl border bg-muted/10 p-4">
                      <div className="flex flex-wrap items-start justify-between gap-3">
                        <div>
                          <div className="text-sm font-medium">{brandName}</div>
                          <div className="mt-1 text-xs text-muted-foreground">
                            当前已配置 {images.length} 张模特图
                          </div>
                        </div>
                        <div className="flex items-center gap-2">
                          <input
                            ref={(element) => {
                              fileInputRefs.current[refKey] = element;
                            }}
                            type="file"
                            accept="image/*"
                            multiple
                            className="hidden"
                            onChange={(event) => {
                              void handleUploadBrandModelImages(brandName, event.target.files);
                              event.target.value = "";
                            }}
                          />
                          <Button
                            type="button"
                            variant="outline"
                            size="sm"
                            onClick={() => fileInputRefs.current[refKey]?.click()}
                            disabled={isUploading}
                          >
                            {isUploading ? (
                              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                            ) : (
                              <Upload className="mr-2 h-4 w-4" />
                            )}
                            上传模特图
                          </Button>
                        </div>
                      </div>

                      {images.length > 0 ? (
                        <div className="mt-4 grid grid-cols-2 gap-3 md:grid-cols-4 xl:grid-cols-6">
                          {images.map((image) => (
                            <div
                              key={image.id}
                              className="overflow-hidden rounded-2xl border bg-background"
                            >
                              <div className="relative aspect-square overflow-hidden bg-muted/30">
                                <img
                                  src={image.imageUrl}
                                  alt={image.displayName || `${brandName} 模特图`}
                                  className="h-full w-full object-cover"
                                  loading="lazy"
                                  decoding="async"
                                />
                              </div>
                              <div className="flex items-center justify-between gap-2 px-3 py-2">
                                <div className="min-w-0 text-[11px] text-muted-foreground">
                                  <div className="truncate">
                                    {image.displayName || `${brandName} 模特图`}
                                  </div>
                                </div>
                                <Button
                                  type="button"
                                  variant="ghost"
                                  size="sm"
                                  className="h-7 px-2 text-xs text-destructive hover:text-destructive"
                                  onClick={() =>
                                    handleRemoveBrandModelImage(brandName, image.id)
                                  }
                                >
                                  删除
                                </Button>
                              </div>
                            </div>
                          ))}
                        </div>
                      ) : (
                        <div className="mt-4 rounded-2xl border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
                          当前品牌还没有上传模特图，上传后第二步会自动按品牌展示给用户选择。
                        </div>
                      )}
                    </div>
                  );
                })
              ) : (
                <div className="rounded-2xl border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
                  先在上方“品牌列表”里配置品牌，随后即可为每个品牌上传对应的模特图。
                </div>
              )}
            </CardContent>
          </Card>

          <div className="flex justify-end">
            <Button type="button" variant="outline" onClick={handleAddStep}>
              <Plus className="mr-2 h-4 w-4" />
              新增步骤
            </Button>
          </div>

          {sortedSteps.length > 0 ? (
            sortedSteps.map((step) => (
            <Card key={step.key}>
              <CardHeader>
                <div className="flex items-start justify-between gap-4">
                  <div className="flex-1 space-y-3">
                    <div className="space-y-1">
                      <div className="text-xs font-medium text-muted-foreground">
                        步骤 Key：{step.key}
                      </div>
                      <div className="text-xs text-muted-foreground">
                        新增步骤后系统会自动生成唯一 Key，用于前台保存和读取选择结果。
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label>步骤标题</Label>
                      <Input
                        value={step.title}
                        onChange={(event) =>
                          updateStep(step.key, (current) => ({
                            ...current,
                            title: event.target.value,
                          }))
                        }
                        placeholder="步骤标题"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>步骤说明</Label>
                      <Textarea
                        value={step.description || ""}
                        onChange={(event) =>
                          updateStep(step.key, (current) => ({
                            ...current,
                            description: event.target.value,
                          }))
                        }
                        rows={2}
                        placeholder="步骤说明"
                      />
                    </div>
                  </div>

                  <div className="flex flex-wrap items-center justify-end gap-2 pt-2">
                    <Button type="button" variant="outline" size="sm" onClick={() => handleAddOption(step.key)}>
                      <Plus className="mr-1 h-4 w-4" />
                      新增选项
                    </Button>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      className="text-destructive hover:text-destructive"
                      onClick={() => handleRemoveStep(step.key)}
                    >
                      <Trash2 className="mr-1 h-4 w-4" />
                      删除步骤
                    </Button>
                    <Label htmlFor={`workflow-step-${step.key}`}>启用</Label>
                    <Switch
                      id={`workflow-step-${step.key}`}
                      checked={step.enabled}
                      onCheckedChange={(checked) =>
                        updateStep(step.key, (current) => ({
                          ...current,
                          enabled: checked,
                        }))
                      }
                    />
                  </div>
                </div>
              </CardHeader>

              <CardContent>
                {step.options.length > 0 ? (
                  <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
                  {step.options
                    .slice()
                    .sort((left, right) => left.sortOrder - right.sortOrder)
                    .map((option) => {
                      const refKey = `${step.key}:${option.key}`;
                      const isUploading = uploadingKey === refKey;

                      return (
                        <div key={option.key} className="rounded-xl border bg-muted/20 p-4 space-y-4">
                          <div className="flex items-start justify-between gap-4">
                            <div>
                              <div className="text-sm font-medium">{option.key}</div>
                              <div className="mt-1 text-xs text-muted-foreground">
                                配置按钮名称与预览图
                              </div>
                            </div>
                            <div className="flex items-center gap-2">
                              <Button
                                type="button"
                                variant="ghost"
                                size="sm"
                                className="h-8 px-2 text-xs text-destructive hover:text-destructive"
                                onClick={() => handleRemoveOption(step.key, option.key)}
                              >
                                <Trash2 className="mr-1 h-3.5 w-3.5" />
                                删除选项
                              </Button>
                              <Label
                                htmlFor={`workflow-option-${step.key}-${option.key}`}
                                className="text-xs text-muted-foreground"
                              >
                                启用
                              </Label>
                              <Switch
                                id={`workflow-option-${step.key}-${option.key}`}
                                checked={option.enabled}
                                onCheckedChange={(checked) =>
                                  updateOption(step.key, option.key, (current) => ({
                                    ...current,
                                    enabled: checked,
                                  }))
                                }
                              />
                            </div>
                          </div>

                          <div className="grid grid-cols-[148px_minmax(0,1fr)] gap-4">
                            <div className="space-y-3">
                              <div className="flex h-[120px] items-center justify-center overflow-hidden rounded-xl border bg-background">
                                {option.previewImageUrl ? (
                                  <img
                                    src={option.previewImageUrl}
                                    alt={option.buttonName}
                                    className="h-full w-full object-cover"
                                  />
                                ) : (
                                  <div className="px-3 text-center text-xs text-muted-foreground">
                                    <ImageIcon className="mx-auto mb-2 h-5 w-5 opacity-60" />
                                    暂无预览图
                                  </div>
                                )}
                              </div>

                              <input
                                ref={(element) => {
                                  fileInputRefs.current[refKey] = element;
                                }}
                                type="file"
                                accept="image/*"
                                className="hidden"
                                onChange={(event) => {
                                  const file = event.target.files?.[0];
                                  if (!file) return;
                                  void handleUploadPreview(step.key, option.key, file);
                                  event.target.value = "";
                                }}
                              />

                              <div className="grid grid-cols-1 gap-2">
                                <Button
                                  type="button"
                                  variant="outline"
                                  size="sm"
                                  disabled={isUploading}
                                  onClick={() => fileInputRefs.current[refKey]?.click()}
                                >
                                  {isUploading ? (
                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                  ) : (
                                    <Upload className="mr-2 h-4 w-4" />
                                  )}
                                  上传图片
                                </Button>
                                <Button
                                  type="button"
                                  variant="ghost"
                                  size="sm"
                                  onClick={() =>
                                    updateOption(step.key, option.key, (current) => ({
                                      ...current,
                                      previewImageUrl: "",
                                    }))
                                  }
                                >
                                  清空图片
                                </Button>
                              </div>
                            </div>

                            <div className="space-y-3">
                              <div className="space-y-2">
                                <Label>按钮名称</Label>
                                <Input
                                  value={option.buttonName}
                                  onChange={(event) =>
                                    updateOption(step.key, option.key, (current) => ({
                                      ...current,
                                      buttonName: event.target.value,
                                    }))
                                  }
                                  placeholder="按钮名称"
                                />
                              </div>
                              <div className="space-y-2">
                                <Label>说明文案</Label>
                                <Textarea
                                  value={option.description || ""}
                                  onChange={(event) =>
                                    updateOption(step.key, option.key, (current) => ({
                                      ...current,
                                      description: event.target.value,
                                    }))
                                  }
                                  rows={2}
                                  placeholder="说明文案"
                                />
                              </div>
                              <div className="space-y-2">
                                <Label>预览图链接</Label>
                                <Input
                                  value={option.previewImageUrl || ""}
                                  onChange={(event) =>
                                    updateOption(step.key, option.key, (current) => ({
                                      ...current,
                                      previewImageUrl: event.target.value,
                                    }))
                                  }
                                  placeholder="https://..."
                                />
                              </div>
                              <div className="space-y-2">
                                <Label>Prompt 片段</Label>
                                <Textarea
                                  value={option.promptFragment || ""}
                                  onChange={(event) =>
                                    updateOption(step.key, option.key, (current) => ({
                                      ...current,
                                      promptFragment: event.target.value,
                                    }))
                                  }
                                  rows={3}
                                  placeholder="用于执行时注入的提示片段"
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                ) : (
                  <div className="rounded-2xl border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
                    当前步骤还没有选项，请先新增一个选项。
                  </div>
                )}
              </CardContent>
            </Card>
            ))
          ) : (
            <Card>
              <CardContent className="rounded-2xl border border-dashed px-4 py-10 text-center text-sm text-muted-foreground">
                还没有配置工作流步骤，点击上方“新增步骤”开始搭建第一步页面。
              </CardContent>
            </Card>
          )}
        </div>
      )}
    </div>
  );
}