"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import useSWR from "swr";
import { Loader2, Sparkles } from "lucide-react";
import { toast } from "sonner";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Switch } from "@/components/ui/switch";
import {
  ENHANCE_PRO_KREA_MODELS,
  defaultEnhanceProPresets,
  type EnhanceProKreaModel,
  type EnhanceProOutputFormat,
  type EnhanceProPreset,
  type EnhanceProSubjectDetection,
} from "@/lib/enhance-pro/config";
import { imageGenerationService, type EnhanceProImageResult } from "@/services/canvas";

const fetcher = (url: string) => fetch(url).then((res) => res.json());

function createEnhanceProClientRequestId() {
  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
    return crypto.randomUUID();
  }
  return `enhance-pro-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
}

function shouldPreserveEnhanceProRequestId(message: string) {
  return /任务.*已提交|避免重复提交|稍后重试查看结果|failed to fetch|network/i.test(
    String(message || "")
  );
}

function buildEnhanceProRequestSignature(params: {
  imageUrl: string;
  prompt: string;
  width: number;
  height: number;
  batchSize: number;
  seed: number;
  output_format: EnhanceProOutputFormat;
  subject_detection: EnhanceProSubjectDetection;
  face_enhancement: boolean;
  face_enhancement_creativity: number;
  face_enhancement_strength: number;
  crop_to_fill: boolean;
  model: EnhanceProKreaModel;
  upscaling_activated: boolean;
  image_scaling_factor: number;
  creativity: number;
  texture: number;
  sharpen: number;
  denoise: number;
  detail: number;
}) {
  return JSON.stringify(params);
}

type EnhanceProClientConfig = {
  enabled: boolean;
  providerName: string;
  baseUrl: string;
  defaultModel: EnhanceProKreaModel;
  availableModels: EnhanceProKreaModel[];
  defaultOutputFormat: EnhanceProOutputFormat;
  allowBatchSize: boolean;
  maxBatchSize: number;
  maxUpscaleFactor: number;
  maxOutputEdge: number;
  enableAdvancedControls: boolean;
  presets: EnhanceProPreset[];
};

type FormState = {
  prompt: string;
  width: number;
  height: number;
  batchSize: number;
  seed: number;
  output_format: EnhanceProOutputFormat;
  subject_detection: EnhanceProSubjectDetection;
  face_enhancement: boolean;
  face_enhancement_creativity: number;
  face_enhancement_strength: number;
  crop_to_fill: boolean;
  model: EnhanceProKreaModel;
  upscaling_activated: boolean;
  image_scaling_factor: number;
  creativity: number;
  texture: number;
  sharpen: number;
  denoise: number;
  detail: number;
};

const FALLBACK_CONFIG: EnhanceProClientConfig = {
  enabled: false,
  providerName: "Krea Topaz Generative",
  baseUrl: "https://api.krea.ai",
  defaultModel: "Redefine",
  availableModels: [...ENHANCE_PRO_KREA_MODELS],
  defaultOutputFormat: "jpg",
  allowBatchSize: true,
  maxBatchSize: 4,
  maxUpscaleFactor: 4,
  maxOutputEdge: 4096,
  enableAdvancedControls: true,
  presets: defaultEnhanceProPresets(),
};

function clampNumber(value: number, min: number, max: number) {
  return Math.min(max, Math.max(min, value));
}

function fitDimensions(width: number, height: number, maxOutputEdge: number) {
  const safeWidth = Math.max(1, Math.round(width || 1024));
  const safeHeight = Math.max(1, Math.round(height || 1024));
  const maxEdge = Math.max(512, Math.round(maxOutputEdge || FALLBACK_CONFIG.maxOutputEdge));
  const currentMax = Math.max(safeWidth, safeHeight);

  if (currentMax <= maxEdge) {
    return { width: safeWidth, height: safeHeight };
  }

  const scale = maxEdge / currentMax;
  return {
    width: Math.max(1, Math.round(safeWidth * scale)),
    height: Math.max(1, Math.round(safeHeight * scale)),
  };
}

function getAvailableEnhanceProModels(config: EnhanceProClientConfig) {
  return config.availableModels?.length
    ? config.availableModels
    : [...ENHANCE_PRO_KREA_MODELS];
}

function resolveEnhanceProModel(
  config: EnhanceProClientConfig,
  model?: EnhanceProKreaModel,
) {
  const availableModels = getAvailableEnhanceProModels(config);
  if (model && availableModels.includes(model)) {
    return model;
  }
  if (availableModels.includes(config.defaultModel)) {
    return config.defaultModel;
  }
  return availableModels[0] || "Redefine";
}

function createDefaultFormState(config: EnhanceProClientConfig, width: number, height: number): FormState {
  const size = fitDimensions(width, height, config.maxOutputEdge);
  return {
    prompt: "",
    width: size.width,
    height: size.height,
    batchSize: 1,
    seed: 1337,
    output_format: config.defaultOutputFormat,
    subject_detection: "All",
    face_enhancement: false,
    face_enhancement_creativity: 0.5,
    face_enhancement_strength: 0.5,
    crop_to_fill: false,
    model: resolveEnhanceProModel(config, config.defaultModel),
    upscaling_activated: false,
    image_scaling_factor: 1,
    creativity: 3,
    texture: 3,
    sharpen: 0.5,
    denoise: 0.5,
    detail: 0.5,
  };
}

function applyPresetToForm(
  config: EnhanceProClientConfig,
  width: number,
  height: number,
  preset?: EnhanceProPreset,
): FormState {
  const baseState = createDefaultFormState(config, width, height);

  if (!preset) {
    return baseState;
  }

  return {
    ...baseState,
    prompt: preset.prompt,
    batchSize: config.allowBatchSize
      ? clampNumber(Math.round(preset.batchSize || 1), 1, config.maxBatchSize)
      : 1,
    seed: Number.isFinite(Number(preset.seed)) ? Math.round(Number(preset.seed)) : baseState.seed,
    output_format: preset.outputFormat,
    subject_detection: preset.subjectDetection,
    face_enhancement: preset.faceEnhancement,
    face_enhancement_creativity: clampNumber(preset.faceEnhancementCreativity, 0, 1),
    face_enhancement_strength: clampNumber(preset.faceEnhancementStrength, 0, 1),
    crop_to_fill: preset.cropToFill,
    model: resolveEnhanceProModel(config, preset.model),
    upscaling_activated: preset.upscalingActivated,
    image_scaling_factor: clampNumber(
      preset.imageScalingFactor,
      1,
      config.maxUpscaleFactor
    ),
    creativity: clampNumber(Math.round(preset.creativity), 1, 6),
    texture: clampNumber(Math.round(preset.texture), 1, 5),
    sharpen: clampNumber(preset.sharpen, 0, 1),
    denoise: clampNumber(preset.denoise, 0, 1),
    detail: clampNumber(preset.detail, 0, 1),
  };
}

function getSubjectDetectionLabel(subjectDetection: EnhanceProSubjectDetection) {
  if (subjectDetection === "Foreground") {
    return "前景";
  }
  if (subjectDetection === "Background") {
    return "背景";
  }
  return "全部";
}

function buildImageLabel(index: number, total: number) {
  return total > 1 ? `图像增强 Pro #${index + 1}` : "图像增强 Pro";
}

interface EnhanceProDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  imageUrl: string;
  onComplete?: (images: EnhanceProImageResult[]) => void;
}

export function EnhanceProDialog({
  open,
  onOpenChange,
  imageUrl,
  onComplete,
}: EnhanceProDialogProps) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [naturalSize, setNaturalSize] = useState({ width: 1024, height: 1024 });
  const [selectedPresetId, setSelectedPresetId] = useState("");
  const requestIdRef = useRef<string | null>(null);
  const requestSignatureRef = useRef<string | null>(null);
  const [formState, setFormState] = useState<FormState>(() =>
    createDefaultFormState(FALLBACK_CONFIG, 1024, 1024),
  );

  const { data: configPayload, isLoading } = useSWR<{ success?: boolean; config?: EnhanceProClientConfig }>(
    open ? "/api/enhance/pro/config" : null,
    fetcher,
  );

  const config = useMemo(
    () => configPayload?.config || FALLBACK_CONFIG,
    [configPayload?.config],
  );
  const presets = useMemo(
    () => {
      const availableModels = getAvailableEnhanceProModels(config);
      return (config.presets.length ? config.presets : FALLBACK_CONFIG.presets)
        .filter((preset) => availableModels.includes(preset.model));
    },
    [config],
  );
  const availableModels = useMemo(
    () => getAvailableEnhanceProModels(config),
    [config],
  );

  useEffect(() => {
    if (!open || !imageUrl) return;

    const image = new window.Image();
    image.onload = () => {
      setNaturalSize({
        width: image.naturalWidth || 1024,
        height: image.naturalHeight || 1024,
      });
    };
    image.onerror = () => {
      setNaturalSize({ width: 1024, height: 1024 });
    };
    image.src = imageUrl;
  }, [open, imageUrl]);

  useEffect(() => {
    if (!open) return;
    const defaultPreset = presets.find((preset) => preset.isDefault) || presets[0];
    setSelectedPresetId(defaultPreset?.id || "");
    setFormState(applyPresetToForm(config, naturalSize.width, naturalSize.height, defaultPreset));
  }, [config, naturalSize.height, naturalSize.width, open, presets]);

  const handleNumericField = <K extends keyof FormState>(key: K, nextValue: number) => {
    setFormState((prev) => ({
      ...prev,
      [key]: nextValue,
    }));
  };

  const handleOpenChange = (nextOpen: boolean) => {
    if (isSubmitting) return;
    onOpenChange(nextOpen);
  };

  const handleSelectPreset = (presetId: string) => {
    const preset = presets.find((item) => item.id === presetId);
    setSelectedPresetId(presetId);
    setFormState(applyPresetToForm(config, naturalSize.width, naturalSize.height, preset));
  };

  const handleSubmit = async () => {
    if (!config.enabled) {
      toast.error("图像增强 Pro 当前未开启，请先在系统设置中启用");
      return;
    }

    setIsSubmitting(true);
    const requestParams = {
      imageUrl,
      prompt: formState.prompt.trim() || "图像增强 Pro",
      width: clampNumber(Math.round(formState.width), 1, config.maxOutputEdge),
      height: clampNumber(Math.round(formState.height), 1, config.maxOutputEdge),
      batchSize: config.allowBatchSize
        ? clampNumber(Math.round(formState.batchSize), 1, config.maxBatchSize)
        : 1,
      seed: Math.round(formState.seed),
      output_format: formState.output_format,
      subject_detection: formState.subject_detection,
      face_enhancement: formState.face_enhancement,
      face_enhancement_creativity: clampNumber(formState.face_enhancement_creativity, 0, 1),
      face_enhancement_strength: clampNumber(formState.face_enhancement_strength, 0, 1),
      crop_to_fill: formState.crop_to_fill,
      model: resolveEnhanceProModel(config, formState.model),
      upscaling_activated: formState.upscaling_activated,
      image_scaling_factor: clampNumber(
        formState.image_scaling_factor,
        1,
        config.maxUpscaleFactor
      ),
      creativity: clampNumber(Math.round(formState.creativity), 1, 6),
      texture: clampNumber(Math.round(formState.texture), 1, 5),
      sharpen: clampNumber(formState.sharpen, 0, 1),
      denoise: clampNumber(formState.denoise, 0, 1),
      detail: clampNumber(formState.detail, 0, 1),
    };
    const requestSignature = buildEnhanceProRequestSignature(requestParams);
    const clientRequestId =
      requestIdRef.current && requestSignatureRef.current === requestSignature
        ? requestIdRef.current
        : createEnhanceProClientRequestId();
    requestIdRef.current = clientRequestId;
    requestSignatureRef.current = requestSignature;
    try {
      const result = await imageGenerationService.enhanceImagePro({
        ...requestParams,
        clientRequestId,
      });

      if (!result.success || !result.data?.images?.length) {
        throw new Error(result.error || "图像增强 Pro 失败");
      }

      onComplete?.(result.data.images);
      requestIdRef.current = null;
      requestSignatureRef.current = null;
      toast.success(`图像增强 Pro 完成，已生成 ${result.data.images.length} 张结果`);
      onOpenChange(false);
    } catch (error) {
      const message = error instanceof Error ? error.message : "图像增强 Pro 失败";
      if (!shouldPreserveEnhanceProRequestId(message)) {
        requestIdRef.current = null;
        requestSignatureRef.current = null;
      }
      toast.error(message);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent
        overlayClassName="bg-black"
        className="sm:max-w-[840px] border-slate-200 bg-white shadow-2xl dark:border-slate-700 dark:bg-slate-950"
        onInteractOutside={(event) => {
          if (isSubmitting) event.preventDefault();
        }}
        onEscapeKeyDown={(event) => {
          if (isSubmitting) event.preventDefault();
        }}
      >
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Sparkles className="h-5 w-5" />
            图像增强 Pro
          </DialogTitle>
          <DialogDescription>
            使用 {config.providerName} 对当前图片执行更可控的增强与重建。处理完成后会把结果直接添加到无限画布。
          </DialogDescription>
        </DialogHeader>

        <div className="max-h-[70vh] space-y-6 overflow-y-auto pr-1">
          {isLoading ? (
            <div className="flex items-center gap-2 rounded-lg border p-4 text-sm text-muted-foreground">
              <Loader2 className="h-4 w-4 animate-spin" />
              正在加载图像增强 Pro 配置...
            </div>
          ) : null}

          {!config.enabled && !isLoading ? (
            <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
              当前未启用图像增强 Pro。请前往系统设置的“本地AI设置”页签完成 Krea 配置后再使用。
            </div>
          ) : null}

          <div className="rounded-lg border bg-slate-50/60 p-4 text-sm text-muted-foreground dark:bg-slate-900/40">
            原图尺寸：{naturalSize.width} x {naturalSize.height}
            <span className="mx-2">|</span>
            当前最大输出长边：{config.maxOutputEdge}px
          </div>

          {presets.length ? (
            <div className="space-y-3">
              <div>
                <Label className="text-base">增强预设</Label>
                <p className="mt-1 text-xs text-muted-foreground">
                  先选一个更贴近场景的预设，再按图片情况继续微调参数。
                </p>
              </div>
              <div className="grid gap-3 md:grid-cols-3">
                {presets.map((preset) => {
                  const isSelected = preset.id === selectedPresetId;
                  return (
                    <button
                      key={preset.id}
                      type="button"
                      className={`rounded-xl border p-4 text-left transition ${
                        isSelected
                          ? "border-sky-500 bg-sky-50 shadow-sm"
                          : "border-slate-200 bg-white hover:border-slate-300"
                      }`}
                      onClick={() => handleSelectPreset(preset.id)}
                    >
                      <div className="flex items-start justify-between gap-3">
                        <div className="space-y-1">
                          <div className="font-medium text-slate-900">{preset.name}</div>
                          <p className="text-xs text-muted-foreground">
                            {preset.description || "使用这一组默认参数快速开始增强。"}
                          </p>
                        </div>
                        {preset.isDefault ? (
                          <span className="rounded-full bg-slate-900 px-2 py-0.5 text-[11px] text-white">
                            默认
                          </span>
                        ) : null}
                      </div>
                      <div className="mt-3 text-[11px] text-slate-600">
                        {preset.model} · {getSubjectDetectionLabel(preset.subjectDetection)}
                        {preset.faceEnhancement ? " · 人像增强" : ""}
                      </div>
                    </button>
                  );
                })}
              </div>
            </div>
          ) : null}

          <div className="space-y-2">
            <Label htmlFor="enhance-pro-prompt">增强提示词</Label>
            <Textarea
              id="enhance-pro-prompt"
              rows={3}
              value={formState.prompt}
              onChange={(event) =>
                setFormState((prev) => ({
                  ...prev,
                  prompt: event.target.value,
                }))
              }
              placeholder="例如：保持原图风格不变，提升细节层次，减少压缩噪点，让人物皮肤更自然。"
            />
          </div>

          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="enhance-pro-width">输出宽度</Label>
              <Input
                id="enhance-pro-width"
                type="number"
                min="1"
                max={config.maxOutputEdge}
                value={formState.width}
                onChange={(event) =>
                  handleNumericField(
                    "width",
                    clampNumber(Number.parseInt(event.target.value, 10) || 1, 1, config.maxOutputEdge),
                  )
                }
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="enhance-pro-height">输出高度</Label>
              <Input
                id="enhance-pro-height"
                type="number"
                min="1"
                max={config.maxOutputEdge}
                value={formState.height}
                onChange={(event) =>
                  handleNumericField(
                    "height",
                    clampNumber(Number.parseInt(event.target.value, 10) || 1, 1, config.maxOutputEdge),
                  )
                }
              />
            </div>
          </div>

          <div className="grid gap-4 md:grid-cols-3">
            <div className="space-y-2">
              <Label>增强模式</Label>
              <Select
                value={formState.model}
                onValueChange={(value) =>
                  setFormState((prev) => ({
                    ...prev,
                    model: value as FormState["model"],
                  }))
                }
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {availableModels.map((model) => (
                    <SelectItem key={model} value={model}>
                      {model}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label>输出格式</Label>
              <Select
                value={formState.output_format}
                onValueChange={(value) =>
                  setFormState((prev) => ({
                    ...prev,
                    output_format: value as FormState["output_format"],
                  }))
                }
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="jpg">JPG</SelectItem>
                  <SelectItem value="png">PNG</SelectItem>
                  <SelectItem value="webp">WEBP</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label>作用区域</Label>
              <Select
                value={formState.subject_detection}
                onValueChange={(value) =>
                  setFormState((prev) => ({
                    ...prev,
                    subject_detection: value as FormState["subject_detection"],
                  }))
                }
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="All">全部</SelectItem>
                  <SelectItem value="Foreground">前景</SelectItem>
                  <SelectItem value="Background">背景</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="grid gap-4 md:grid-cols-3">
            {config.allowBatchSize ? (
              <div className="space-y-2">
                <Label>候选结果数</Label>
                <Select
                  value={String(formState.batchSize)}
                  onValueChange={(value) =>
                    handleNumericField(
                      "batchSize",
                      clampNumber(Number.parseInt(value, 10) || 1, 1, config.maxBatchSize),
                    )
                  }
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {Array.from({ length: config.maxBatchSize }, (_, index) => index + 1).map((item) => (
                      <SelectItem key={item} value={String(item)}>
                        {item} 张
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            ) : null}

            <div className="space-y-2">
              <Label htmlFor="enhance-pro-seed">Seed</Label>
              <Input
                id="enhance-pro-seed"
                type="number"
                value={formState.seed}
                onChange={(event) =>
                  handleNumericField("seed", Number.parseInt(event.target.value, 10) || 1337)
                }
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="enhance-pro-image-scaling">放大倍数</Label>
              <Input
                id="enhance-pro-image-scaling"
                type="number"
                min="1"
                max={config.maxUpscaleFactor}
                step="0.25"
                value={formState.image_scaling_factor}
                onChange={(event) =>
                  handleNumericField(
                    "image_scaling_factor",
                    clampNumber(
                      Number.parseFloat(event.target.value) || 1,
                      1,
                      config.maxUpscaleFactor
                    ),
                  )
                }
              />
            </div>
          </div>

          <div className="grid gap-4 md:grid-cols-3">
            <div className="flex items-center justify-between rounded-lg border p-4">
              <div className="space-y-0.5 pr-4">
                <Label className="text-sm">人脸增强</Label>
                <div className="text-xs text-muted-foreground">适合人像、半身图和证件风修复。</div>
              </div>
              <Switch
                checked={formState.face_enhancement}
                onCheckedChange={(checked) =>
                  setFormState((prev) => ({ ...prev, face_enhancement: checked }))
                }
              />
            </div>

            <div className="flex items-center justify-between rounded-lg border p-4">
              <div className="space-y-0.5 pr-4">
                <Label className="text-sm">启用放大</Label>
                <div className="text-xs text-muted-foreground">允许模型在增强时同时执行更强的上采样。</div>
              </div>
              <Switch
                checked={formState.upscaling_activated}
                onCheckedChange={(checked) =>
                  setFormState((prev) => ({ ...prev, upscaling_activated: checked }))
                }
              />
            </div>

            <div className="flex items-center justify-between rounded-lg border p-4">
              <div className="space-y-0.5 pr-4">
                <Label className="text-sm">裁剪铺满</Label>
                <div className="text-xs text-muted-foreground">输出尺寸与原图比例不同时，裁切并铺满目标画布。</div>
              </div>
              <Switch
                checked={formState.crop_to_fill}
                onCheckedChange={(checked) =>
                  setFormState((prev) => ({ ...prev, crop_to_fill: checked }))
                }
              />
            </div>
          </div>

          {config.enableAdvancedControls ? (
            <>
              <Separator />
              <div className="space-y-3">
                <div>
                  <Label className="text-base">高级调节</Label>
                  <p className="mt-1 text-xs text-muted-foreground">
                    这些参数会直接映射到 Krea Topaz Generative，对结果风格与细节影响更明显。
                  </p>
                </div>

                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                  <div className="space-y-2">
                    <Label htmlFor="enhance-pro-creativity">Creativity (1-6)</Label>
                    <Input
                      id="enhance-pro-creativity"
                      type="number"
                      min="1"
                      max="6"
                      value={formState.creativity}
                      onChange={(event) =>
                        handleNumericField(
                          "creativity",
                          clampNumber(Number.parseInt(event.target.value, 10) || 3, 1, 6),
                        )
                      }
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="enhance-pro-texture">Texture (1-5)</Label>
                    <Input
                      id="enhance-pro-texture"
                      type="number"
                      min="1"
                      max="5"
                      value={formState.texture}
                      onChange={(event) =>
                        handleNumericField(
                          "texture",
                          clampNumber(Number.parseInt(event.target.value, 10) || 3, 1, 5),
                        )
                      }
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="enhance-pro-detail">Detail (0-1)</Label>
                    <Input
                      id="enhance-pro-detail"
                      type="number"
                      min="0"
                      max="1"
                      step="0.1"
                      value={formState.detail}
                      onChange={(event) =>
                        handleNumericField(
                          "detail",
                          clampNumber(Number.parseFloat(event.target.value) || 0, 0, 1),
                        )
                      }
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="enhance-pro-sharpen">Sharpen (0-1)</Label>
                    <Input
                      id="enhance-pro-sharpen"
                      type="number"
                      min="0"
                      max="1"
                      step="0.1"
                      value={formState.sharpen}
                      onChange={(event) =>
                        handleNumericField(
                          "sharpen",
                          clampNumber(Number.parseFloat(event.target.value) || 0, 0, 1),
                        )
                      }
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="enhance-pro-denoise">Denoise (0-1)</Label>
                    <Input
                      id="enhance-pro-denoise"
                      type="number"
                      min="0"
                      max="1"
                      step="0.1"
                      value={formState.denoise}
                      onChange={(event) =>
                        handleNumericField(
                          "denoise",
                          clampNumber(Number.parseFloat(event.target.value) || 0, 0, 1),
                        )
                      }
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="enhance-pro-face-strength">Face Strength (0-1)</Label>
                    <Input
                      id="enhance-pro-face-strength"
                      type="number"
                      min="0"
                      max="1"
                      step="0.1"
                      value={formState.face_enhancement_strength}
                      onChange={(event) =>
                        handleNumericField(
                          "face_enhancement_strength",
                          clampNumber(Number.parseFloat(event.target.value) || 0, 0, 1),
                        )
                      }
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="enhance-pro-face-creativity">Face Creativity (0-1)</Label>
                    <Input
                      id="enhance-pro-face-creativity"
                      type="number"
                      min="0"
                      max="1"
                      step="0.1"
                      value={formState.face_enhancement_creativity}
                      onChange={(event) =>
                        handleNumericField(
                          "face_enhancement_creativity",
                          clampNumber(Number.parseFloat(event.target.value) || 0, 0, 1),
                        )
                      }
                    />
                  </div>
                </div>
              </div>
            </>
          ) : null}

          <div className="rounded-lg border border-blue-200 bg-blue-50 p-4 text-xs text-blue-900">
            <p>处理完成后，结果会保存到相册和存储桶，并作为新图片节点添加到当前画布。</p>
            {config.allowBatchSize ? (
              <p className="mt-1">
                当前设置允许返回多张候选结果。画布中会按 {buildImageLabel(0, formState.batchSize)}
                的方式依次创建新节点。
              </p>
            ) : null}
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}>
            取消
          </Button>
          <Button onClick={handleSubmit} disabled={isSubmitting || isLoading || !config.enabled}>
            {isSubmitting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Sparkles className="mr-2 h-4 w-4" />}
            开始增强 Pro
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

export default EnhanceProDialog;