"use client";

import {
  ArrowDown,
  ArrowUp,
  Check,
  Layers,
  Menu,
  Move3D,
  Plus,
  RefreshCw,
  Save,
  Trash2,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";
import {
  ENHANCE_PRO_KREA_DEFAULT_BASE_URL,
  ENHANCE_PRO_KREA_DEFAULT_MODEL,
  ENHANCE_PRO_KREA_MODELS,
  type EnhanceProKreaModel,
  type EnhanceProPreset,
} from "@/lib/enhance-pro/config";
import { cn } from "@/lib/utils";
import type {
  EnhanceProKeyRow,
  LocalAiImagePipelineSectionsProps,
} from "../../_lib/types";
import {
  LocalAiGroupHeading,
  LocalAiSectionShell,
  LocalAiSectionSummary,
} from "../local-ai-section-shell";

export function LocalAiImagePipelineSections({
  rmbgConfig,
  setRmbgConfig,
  enhanceConfig,
  setEnhanceConfig,
  enhanceProConfig,
  setEnhanceProConfig,
  enhanceProApiKeysDraft,
  setEnhanceProApiKeysDraft,
  enhanceProApiKeysDraftCount,
  draftEnhanceProKeyRows,
  savedEnhanceProKeyRows,
  enhanceProPresetEditorMode,
  setEnhanceProPresetEditorMode,
  selectedEnhanceProPresetId,
  setSelectedEnhanceProPresetId,
  selectedEnhanceProPreset,
  selectedEnhanceProPresetIndex,
  draggingEnhanceProPresetId,
  extendConfig,
  setExtendConfig,
  watermarkRemoveConfig,
  setWatermarkRemoveConfig,
  angleEditConfig,
  setAngleEditConfig,
  layerSplitConfig,
  setLayerSplitConfig,
  isLocalAiSectionExpanded,
  toggleLocalAiSection,
  renderEnhanceProPresetEditor,
  getEnhanceProPresetSummary,
  handleSaveRmbgConfig,
  handleSaveEnhanceConfig,
  handleSaveEnhanceProConfig,
  handleAddEnhanceProPoolKey,
  handleDeleteEnhanceProPoolKey,
  handleToggleEnhanceProModelVisible,
  handleAddEnhanceProPreset,
  handleResetEnhanceProPresets,
  handleEnhanceProPresetDragStart,
  handleEnhanceProPresetDragEnd,
  handleEnhanceProPresetDrop,
  handleMoveEnhanceProPreset,
  handleSaveExtendConfig,
  handleSaveWatermarkRemoveConfig,
  handleSaveAngleEditConfig,
  handleSaveLayerSplitConfig,
}: LocalAiImagePipelineSectionsProps) {
  return (
    <>
      {/* 抠图API配置 */}
      <LocalAiGroupHeading
        description="把抠图、增强、拓展、去水印、角度编辑和图层拆分归到一组，按用户处理链路顺序阅读。"
        eyebrow="Image Pipeline"
        title="图像处理能力"
      />

      <LocalAiSectionShell
        description={
          <>
            配置背景移除API，用于画图标注功能中的抠图处理。支持自部署RMBG、PhotoRoom和AOS云服务。
          </>
        }
        expanded={isLocalAiSectionExpanded("rmbg")}
        id="local-ai-section-rmbg"
        onToggle={() => toggleLocalAiSection("rmbg")}
        summary={
          <LocalAiSectionSummary
            items={[
              {
                label: `当前 ${
                  rmbgConfig.provider === "photoroom"
                    ? "PhotoRoom"
                    : rmbgConfig.provider === "aoscdn"
                      ? "AOS"
                      : "RMBG"
                }`,
                tone: "neutral",
              },
              {
                label:
                  rmbgConfig.apiKey ||
                  rmbgConfig.photoroomApiKey ||
                  rmbgConfig.aosApiKey
                    ? "Key 已配置"
                    : "Key 待配置",
                tone:
                  rmbgConfig.apiKey ||
                  rmbgConfig.photoroomApiKey ||
                  rmbgConfig.aosApiKey
                    ? "enabled"
                    : "warning",
              },
            ]}
          />
        }
        title="抠图API配置"
      >
        {/* 服务提供商选择 */}
        <div className="space-y-3">
          <Label>抠图服务提供商</Label>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
            <div
              className={`relative flex cursor-pointer items-center gap-3 rounded-lg border p-4 transition-all hover:bg-accent ${
                rmbgConfig.provider === "rmbg"
                  ? "border-primary bg-accent ring-1 ring-primary"
                  : ""
              }`}
              onClick={() => setRmbgConfig({ ...rmbgConfig, provider: "rmbg" })}
            >
              <div
                className={`flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-primary ${
                  rmbgConfig.provider === "rmbg"
                    ? "bg-primary text-primary-foreground"
                    : "bg-transparent"
                }`}
              >
                {rmbgConfig.provider === "rmbg" && (
                  <Check className="h-3 w-3" />
                )}
              </div>
              <div className="space-y-1">
                <p className="font-medium text-sm leading-none">
                  RMBG-2.0 (自部署)
                </p>
              </div>
            </div>

            <div
              className={`relative flex cursor-pointer items-center gap-3 rounded-lg border p-4 transition-all hover:bg-accent ${
                rmbgConfig.provider === "photoroom"
                  ? "border-primary bg-accent ring-1 ring-primary"
                  : ""
              }`}
              onClick={() =>
                setRmbgConfig({ ...rmbgConfig, provider: "photoroom" })
              }
            >
              <div
                className={`flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-primary ${
                  rmbgConfig.provider === "photoroom"
                    ? "bg-primary text-primary-foreground"
                    : "bg-transparent"
                }`}
              >
                {rmbgConfig.provider === "photoroom" && (
                  <Check className="h-3 w-3" />
                )}
              </div>
              <div className="space-y-1">
                <p className="font-medium text-sm leading-none">
                  PhotoRoom (云服务)
                </p>
              </div>
            </div>

            <div
              className={`relative flex cursor-pointer items-center gap-3 rounded-lg border p-4 transition-all hover:bg-accent ${
                rmbgConfig.provider === "aoscdn"
                  ? "border-primary bg-accent ring-1 ring-primary"
                  : ""
              }`}
              onClick={() =>
                setRmbgConfig({ ...rmbgConfig, provider: "aoscdn" })
              }
            >
              <div
                className={`flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-primary ${
                  rmbgConfig.provider === "aoscdn"
                    ? "bg-primary text-primary-foreground"
                    : "bg-transparent"
                }`}
              >
                {rmbgConfig.provider === "aoscdn" && (
                  <Check className="h-3 w-3" />
                )}
              </div>
              <div className="space-y-1">
                <p className="font-medium text-sm leading-none">
                  AOS Segmentation
                </p>
              </div>
            </div>
          </div>
        </div>

        <Separator />

        {/* RMBG 配置 */}
        {rmbgConfig.provider === "rmbg" && (
          <>
            <div className="font-medium text-muted-foreground text-sm">
              RMBG-2.0 配置
            </div>
            <div className="space-y-2">
              <Label htmlFor="rmbgApiUrl">API地址 *</Label>
              <Input
                id="rmbgApiUrl"
                onChange={(e) =>
                  setRmbgConfig({ ...rmbgConfig, apiUrl: e.target.value })
                }
                placeholder="http://156.225.27.52:8000"
                value={rmbgConfig.apiUrl}
              />
              <div className="text-muted-foreground text-xs">
                请输入完整的API地址，例如: http://156.225.27.52:8000
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="rmbgApiKey">API密钥（可选）</Label>
              <Input
                id="rmbgApiKey"
                onChange={(e) =>
                  setRmbgConfig({ ...rmbgConfig, apiKey: e.target.value })
                }
                placeholder="如果API需要密钥，请在此输入"
                type="password"
                value={rmbgConfig.apiKey}
              />
            </div>
            <div className="space-y-2 rounded-lg border border-blue-200 bg-blue-50 p-4">
              <div className="font-medium text-blue-900 text-sm">
                RMBG-2.0 说明
              </div>
              <div className="space-y-1 text-blue-800 text-xs">
                <p>• 需要自行部署RMBG-2.0服务</p>
                <p>• 系统会自动调用 /rmbg/base64 接口进行抠图处理</p>
                <p>• 支持的图片格式：JPG, PNG, JPEG等常见格式</p>
              </div>
            </div>
          </>
        )}

        {/* PhotoRoom 配置 */}
        {rmbgConfig.provider === "photoroom" && (
          <>
            <div className="font-medium text-muted-foreground text-sm">
              PhotoRoom 配置
            </div>
            <div className="space-y-2">
              <Label htmlFor="photoroomApiKey">API密钥 *</Label>
              <Input
                id="photoroomApiKey"
                onChange={(e) =>
                  setRmbgConfig({
                    ...rmbgConfig,
                    photoroomApiKey: e.target.value,
                  })
                }
                placeholder="输入PhotoRoom API密钥"
                type="password"
                value={rmbgConfig.photoroomApiKey}
              />
              <div className="text-muted-foreground text-xs">
                在 PhotoRoom 开发者平台获取API密钥
              </div>
            </div>
            <div className="space-y-2 rounded-lg border border-green-200 bg-green-50 p-4">
              <div className="font-medium text-green-900 text-sm">
                PhotoRoom 说明
              </div>
              <div className="space-y-1 text-green-800 text-xs">
                <p>• 使用 PhotoRoom 云服务进行高清抠图</p>
                <p>• 支持 HD 高清背景移除，效果更好</p>
                <p>• API文档：https://www.photoroom.com/api</p>
                <p>• 按调用次数计费，请注意用量</p>
              </div>
            </div>
          </>
        )}

        {/* AOS 配置 */}
        {rmbgConfig.provider === "aoscdn" && (
          <>
            <div className="font-medium text-muted-foreground text-sm">
              AOS Segmentation 配置
            </div>
            <div className="space-y-2">
              <Label htmlFor="aosApiKey">API密钥 *</Label>
              <Input
                id="aosApiKey"
                onChange={(e) =>
                  setRmbgConfig({
                    ...rmbgConfig,
                    aosApiKey: e.target.value,
                  })
                }
                placeholder="输入 AOS X-API-KEY"
                type="password"
                value={rmbgConfig.aosApiKey}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="aosApiBaseUrl">API地址</Label>
              <Input
                id="aosApiBaseUrl"
                onChange={(e) =>
                  setRmbgConfig({
                    ...rmbgConfig,
                    aosApiBaseUrl: e.target.value,
                  })
                }
                placeholder="https://techsz.aoscdn.com"
                value={rmbgConfig.aosApiBaseUrl}
              />
              <div className="text-muted-foreground text-xs">
                默认使用官方地址，可按需替换。
              </div>
            </div>
            <div className="grid gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label>前景类型</Label>
                <Select
                  onValueChange={(
                    value: "auto" | "person" | "object" | "stamp"
                  ) =>
                    setRmbgConfig({
                      ...rmbgConfig,
                      aosForegroundType: value,
                    })
                  }
                  value={rmbgConfig.aosForegroundType}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="auto">自动识别</SelectItem>
                    <SelectItem value="person">人物</SelectItem>
                    <SelectItem value="object">物体</SelectItem>
                    <SelectItem value="stamp">图章</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>输出格式</Label>
                <Select
                  onValueChange={(value: "png" | "jpg") =>
                    setRmbgConfig({ ...rmbgConfig, aosFormat: value })
                  }
                  value={rmbgConfig.aosFormat}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="png">PNG（透明背景）</SelectItem>
                    <SelectItem value="jpg">JPG（白底）</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="flex items-center justify-between rounded-lg border p-3">
              <div className="space-y-0.5">
                <Label className="text-sm">裁剪到主体边缘</Label>
                <div className="text-muted-foreground text-xs">
                  关闭时保持原图尺寸，开启时按主体区域裁剪。
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Switch
                  checked={rmbgConfig.aosCrop}
                  onCheckedChange={(checked) =>
                    setRmbgConfig({ ...rmbgConfig, aosCrop: checked })
                  }
                />
                <span className="min-w-[3rem] font-medium text-muted-foreground text-sm">
                  {rmbgConfig.aosCrop ? "已开启" : "已关闭"}
                </span>
              </div>
            </div>
            <div className="space-y-2 rounded-lg border border-indigo-200 bg-indigo-50 p-4">
              <div className="font-medium text-indigo-900 text-sm">
                AOS 说明
              </div>
              <div className="space-y-1 text-indigo-800 text-xs">
                <p>• 使用异步任务模式（1秒轮询，最多30秒）</p>
                <p>• 接口返回链接有效期1小时，系统会自动转存到你的存储桶</p>
                <p>• 官方限制：图片最大20MB，分辨率最大4096x4096</p>
              </div>
            </div>
          </>
        )}

        <Button onClick={handleSaveRmbgConfig}>
          <Save className="mr-2 h-4 w-4" /> 保存配置
        </Button>
      </LocalAiSectionShell>

      {/* 变清晰API配置 */}
      <LocalAiSectionShell
        description={
          <>
            配置图片变清晰API，用于画图标注功能中的图片增强处理。支持主API和备用API切换。
          </>
        }
        expanded={isLocalAiSectionExpanded("enhance")}
        id="local-ai-section-enhance"
        onToggle={() => toggleLocalAiSection("enhance")}
        summary={
          <LocalAiSectionSummary
            items={[
              {
                label: enhanceConfig.useBackupApi
                  ? "备用 Real-ESRGAN"
                  : "主 API",
                tone: "neutral",
              },
              {
                label:
                  enhanceConfig.apiKey || enhanceConfig.backupApiKey
                    ? "Key 已配置"
                    : "Key 待配置",
                tone:
                  enhanceConfig.apiKey || enhanceConfig.backupApiKey
                    ? "enabled"
                    : "warning",
              },
            ]}
          />
        }
        title="变清晰API配置"
      >
        {/* API切换开关 */}
        <div className="flex items-center justify-between rounded-lg border p-4">
          <div className="space-y-0.5">
            <Label className="text-base">使用备用API (Real-ESRGAN)</Label>
            <div className="text-muted-foreground text-sm">
              启用后将使用Real-ESRGAN本地模型进行图片增强，效果更好
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Switch
              checked={enhanceConfig.useBackupApi}
              onCheckedChange={(checked) =>
                setEnhanceConfig({
                  ...enhanceConfig,
                  useBackupApi: checked,
                })
              }
            />
            <span className="min-w-[3rem] font-medium text-muted-foreground text-sm">
              {enhanceConfig.useBackupApi ? "已开启" : "已关闭"}
            </span>
          </div>
        </div>

        {/* 主API配置 */}
        {!enhanceConfig.useBackupApi && (
          <>
            <Separator />
            <div className="font-medium text-muted-foreground text-sm">
              主API配置 (第三方云服务)
            </div>
            <div className="space-y-2">
              <Label htmlFor="enhanceApiUrl">API地址 *</Label>
              <Input
                id="enhanceApiUrl"
                onChange={(e) =>
                  setEnhanceConfig({
                    ...enhanceConfig,
                    apiUrl: e.target.value,
                  })
                }
                placeholder="https://techsz.aoscdn.com"
                value={enhanceConfig.apiUrl}
              />
              <div className="text-muted-foreground text-xs">
                请输入完整的API地址，例如: https://techsz.aoscdn.com
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="enhanceApiKey">API密钥 *</Label>
              <Input
                id="enhanceApiKey"
                onChange={(e) =>
                  setEnhanceConfig({
                    ...enhanceConfig,
                    apiKey: e.target.value,
                  })
                }
                placeholder="请输入API密钥"
                type="password"
                value={enhanceConfig.apiKey}
              />
              <div className="text-muted-foreground text-xs">
                API密钥是必需的，请从服务提供商获取
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="enhanceType">修复类型</Label>
              <Select
                onValueChange={(value) =>
                  setEnhanceConfig({ ...enhanceConfig, type: value })
                }
                value={enhanceConfig.type}
              >
                <SelectTrigger id="enhanceType">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="clean">通用放大清晰化</SelectItem>
                  <SelectItem value="face">人像放大清晰化</SelectItem>
                </SelectContent>
              </Select>
              <div className="text-muted-foreground text-xs">
                选择图片类型：通用或人像（人像模式最多同时处理10个人）
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="enhanceScaleFactor">放大倍数（可选）</Label>
              <Select
                onValueChange={(value) =>
                  setEnhanceConfig({
                    ...enhanceConfig,
                    scaleFactor: value,
                  })
                }
                value={enhanceConfig.scaleFactor}
              >
                <SelectTrigger id="enhanceScaleFactor">
                  <SelectValue placeholder="自动缩放" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="auto">自动缩放</SelectItem>
                  <SelectItem value="1">不放大</SelectItem>
                  <SelectItem value="2">2倍放大</SelectItem>
                  <SelectItem value="4">4倍放大</SelectItem>
                </SelectContent>
              </Select>
              <div className="text-muted-foreground text-xs">
                选择放大倍数：自动（根据图片尺寸智能选择）、不放大、2倍或4倍
              </div>
            </div>
            <div className="space-y-2 rounded-lg border border-blue-200 bg-blue-50 p-4">
              <div className="font-medium text-blue-900 text-sm">
                主API文档说明
              </div>
              <div className="space-y-1 text-blue-800 text-xs">
                <p>
                  • API地址应指向服务根地址，例如: https://techsz.aoscdn.com
                </p>
                <p>
                  • 系统会自动调用 /api/tasks/visual/scale 接口进行变清晰处理
                </p>
                <p>• 支持的图片格式：JPG, JPEG, PNG, BMP, WEBP, TIFF等</p>
                <p>
                  • 图片大小：不超过50MB，不限制分辨率（建议按业务需求控制尺寸）
                </p>
                <p>• 返回的链接有效期为1小时，系统会自动下载并存储到S3</p>
              </div>
            </div>
          </>
        )}

        {/* 备用API配置 (Real-ESRGAN) */}
        {enhanceConfig.useBackupApi && (
          <>
            <Separator />
            <div className="font-medium text-muted-foreground text-sm">
              备用API配置 (Real-ESRGAN 本地模型)
            </div>
            <div className="space-y-2">
              <Label htmlFor="backupApiUrl">API地址 *</Label>
              <Input
                id="backupApiUrl"
                onChange={(e) =>
                  setEnhanceConfig({
                    ...enhanceConfig,
                    backupApiUrl: e.target.value,
                  })
                }
                placeholder="http://156.225.27.52:5233"
                value={enhanceConfig.backupApiUrl}
              />
              <div className="text-muted-foreground text-xs">
                Real-ESRGAN API服务地址，默认: http://156.225.27.52:5233
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="backupApiKey">API密钥 *</Label>
              <Input
                id="backupApiKey"
                onChange={(e) =>
                  setEnhanceConfig({
                    ...enhanceConfig,
                    backupApiKey: e.target.value,
                  })
                }
                placeholder="请输入Real-ESRGAN API密钥"
                type="password"
                value={enhanceConfig.backupApiKey}
              />
              <div className="text-muted-foreground text-xs">
                API密钥用于认证，请从管理员处获取
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="backupScale">放大倍数</Label>
                <Select
                  onValueChange={(value) =>
                    setEnhanceConfig({
                      ...enhanceConfig,
                      backupScale: value,
                    })
                  }
                  value={enhanceConfig.backupScale}
                >
                  <SelectTrigger id="backupScale">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="2">2倍放大</SelectItem>
                    <SelectItem value="4">4倍放大（推荐）</SelectItem>
                    <SelectItem value="8">8倍放大</SelectItem>
                  </SelectContent>
                </Select>
                <div className="text-muted-foreground text-xs">
                  推荐使用4倍放大，效果最佳
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="backupModel">模型选择</Label>
                <Select
                  onValueChange={(value) =>
                    setEnhanceConfig({
                      ...enhanceConfig,
                      backupModel: value,
                    })
                  }
                  value={enhanceConfig.backupModel}
                >
                  <SelectTrigger id="backupModel">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="RealESRGAN_x2plus">
                      RealESRGAN x2plus (2倍)
                    </SelectItem>
                    <SelectItem value="RealESRGAN_x4plus">
                      RealESRGAN x4plus (推荐)
                    </SelectItem>
                    <SelectItem value="RealESRGAN_x8plus">
                      RealESRGAN x8plus (8倍)
                    </SelectItem>
                    <SelectItem value="RealESRGAN_animevideov3">
                      动漫视频模型 (4倍)
                    </SelectItem>
                  </SelectContent>
                </Select>
                <div className="text-muted-foreground text-xs">
                  不同模型适用于不同场景
                </div>
              </div>
            </div>
            <div className="space-y-2 rounded-lg border border-green-200 bg-green-50 p-4">
              <div className="font-medium text-green-900 text-sm">
                Real-ESRGAN API说明
              </div>
              <div className="space-y-1 text-green-800 text-xs">
                <p>• 基于Real-ESRGAN深度学习模型，图像超分辨率效果更好</p>
                <p>• 使用URL方式上传图片，处理后自动保存到S3存储</p>
                <p>• 支持2x、4x、8x放大倍数</p>
                <p>• 处理时间：通常1-10秒，取决于图片大小</p>
                <p>• 支持格式：JPG, PNG, JPEG等常见图片格式</p>
                <p>• 文件限制：最大50MB</p>
              </div>
            </div>
          </>
        )}

        <Button onClick={handleSaveEnhanceConfig}>
          <Save className="mr-2 h-4 w-4" /> 保存配置
        </Button>
      </LocalAiSectionShell>

      <LocalAiSectionShell
        description={
          <>配置 Krea Topaz Generative，用于无限画布中的“图像增强 Pro”能力。</>
        }
        expanded={isLocalAiSectionExpanded("enhance-pro")}
        id="local-ai-section-enhance-pro"
        onToggle={() => toggleLocalAiSection("enhance-pro")}
        summary={
          <LocalAiSectionSummary
            items={[
              {
                label: enhanceProConfig.enabled ? "功能启用" : "功能关闭",
                tone: enhanceProConfig.enabled ? "enabled" : "disabled",
              },
              {
                label: `${enhanceProConfig.apiKeys.length} 个 Key`,
                tone:
                  enhanceProConfig.apiKey || enhanceProConfig.apiKeys.length > 0
                    ? "enabled"
                    : "warning",
              },
              {
                label:
                  enhanceProConfig.defaultModel ||
                  ENHANCE_PRO_KREA_DEFAULT_MODEL,
                tone: "neutral",
              },
            ]}
          />
        }
        title="图像增强 Pro 配置"
      >
        <div className="flex items-center justify-between rounded-lg border p-4">
          <div className="space-y-0.5">
            <Label className="text-base">启用图像增强 Pro</Label>
            <div className="text-muted-foreground text-sm">
              关闭后无限画布仍保留普通“高清增强”，但不再开放 Krea Topaz
              Generative 参数面板。
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Switch
              checked={enhanceProConfig.enabled}
              onCheckedChange={(checked) =>
                setEnhanceProConfig((prev) => ({
                  ...prev,
                  enabled: checked,
                }))
              }
            />
            <span className="min-w-[3rem] font-medium text-muted-foreground text-sm">
              {enhanceProConfig.enabled ? "已开启" : "已关闭"}
            </span>
          </div>
        </div>

        <div className="grid gap-4 md:grid-cols-2">
          <div className="space-y-2">
            <Label htmlFor="enhanceProProviderName">显示名称</Label>
            <Input
              id="enhanceProProviderName"
              onChange={(e) =>
                setEnhanceProConfig((prev) => ({
                  ...prev,
                  providerName: e.target.value,
                }))
              }
              placeholder="Krea Topaz Generative"
              value={enhanceProConfig.providerName}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="enhanceProBaseUrl">API地址</Label>
            <Input
              id="enhanceProBaseUrl"
              onChange={(e) =>
                setEnhanceProConfig((prev) => ({
                  ...prev,
                  baseUrl: e.target.value,
                }))
              }
              placeholder={ENHANCE_PRO_KREA_DEFAULT_BASE_URL}
              value={enhanceProConfig.baseUrl}
            />
          </div>
        </div>

        <div className="space-y-2">
          <Label htmlFor="enhanceProApiKey">API Key</Label>
          <div className="flex flex-col gap-2 md:flex-row">
            <Input
              id="enhanceProApiKey"
              onChange={(e) =>
                setEnhanceProConfig((prev) => ({
                  ...prev,
                  apiKey: e.target.value,
                }))
              }
              placeholder="请输入 Krea Bearer Token"
              type="password"
              value={enhanceProConfig.apiKey}
            />
            <Button
              onClick={handleAddEnhanceProPoolKey}
              type="button"
              variant="outline"
            >
              <Plus className="mr-2 h-4 w-4" />
              添加为新 Key
            </Button>
          </div>
          <div className="text-muted-foreground text-xs">
            和 Tripo3D 一样，单个 Key
            可以直接加入池；批量导入仍支持一次粘贴多行。
          </div>
        </div>

        <div className="space-y-4 rounded-xl border p-4">
          <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
            <div>
              <div className="font-medium text-sm">Krea Key 池</div>
              <div className="text-muted-foreground text-xs">
                当前共 {enhanceProConfig.apiKeys.length} 个 Key
                {enhanceProApiKeysDraft.trim()
                  ? `，本次保存会替换为 ${enhanceProApiKeysDraftCount} 个 Key`
                  : "，留空保存不会覆盖已保存池"}
                。增强 Pro 任务会轮询使用可用 Key。
              </div>
            </div>
            <div className="flex flex-wrap gap-2">
              <Button
                disabled={!enhanceProApiKeysDraft.trim()}
                onClick={() => setEnhanceProApiKeysDraft("")}
                size="sm"
                type="button"
                variant="ghost"
              >
                清空输入
              </Button>
              <Button
                disabled={enhanceProConfig.apiKeys.length === 0}
                onClick={() => {
                  setEnhanceProConfig((prev) => ({
                    ...prev,
                    apiKeys: [],
                  }));
                  setEnhanceProApiKeysDraft("");
                }}
                size="sm"
                type="button"
                variant="outline"
              >
                清空已保存 Key 池
              </Button>
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="enhanceProApiKeys">批量导入 Key</Label>
            <Textarea
              id="enhanceProApiKeys"
              onChange={(e) => setEnhanceProApiKeysDraft(e.target.value)}
              placeholder="为安全起见不回显已保存 Key；每行一个新 Krea Bearer Token，保存后会替换当前 Key 池。留空保存则保持当前池不变。"
              rows={4}
              value={enhanceProApiKeysDraft}
            />
            <div className="text-muted-foreground text-xs">
              异步查询会绑定回创建任务时使用的 Key，避免轮询切换 Key
              后查不到任务。
            </div>
          </div>

          <div className="space-y-3">
            {draftEnhanceProKeyRows.length ? (
              <div className="rounded-lg border border-emerald-200 bg-emerald-50/70 p-4">
                <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
                  <div className="font-medium text-emerald-900 text-sm">
                    待保存 Key 预览
                  </div>
                  <span className="rounded-full bg-emerald-500/10 px-2 py-0.5 text-emerald-700 text-xs">
                    {draftEnhanceProKeyRows.length} 个
                  </span>
                </div>
                <div className="space-y-2">
                  {draftEnhanceProKeyRows.map((item: EnhanceProKeyRow) => (
                    <div
                      className="flex flex-col gap-2 rounded-lg border bg-background p-3 lg:flex-row lg:items-center lg:justify-between"
                      key={item.id}
                    >
                      <div className="min-w-0 flex-1 space-y-1">
                        <div className="flex flex-wrap items-center gap-2">
                          <div className="font-medium">{item.name}</div>
                          <span className="rounded-full bg-emerald-500/10 px-2 py-0.5 text-emerald-600 text-xs">
                            待保存
                          </span>
                        </div>
                        <div className="font-mono text-muted-foreground text-xs">
                          Key: {item.maskedKey}
                        </div>
                        <div className="text-muted-foreground text-xs">
                          API:{" "}
                          {enhanceProConfig.baseUrl ||
                            ENHANCE_PRO_KREA_DEFAULT_BASE_URL}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ) : null}

            {savedEnhanceProKeyRows.length ? (
              savedEnhanceProKeyRows.map((item: EnhanceProKeyRow) => (
                <div
                  className="flex flex-col gap-4 rounded-lg border p-4 lg:flex-row lg:items-center lg:justify-between"
                  key={item.id}
                >
                  <div className="min-w-0 flex-1 space-y-2">
                    <div className="flex flex-wrap items-center gap-2">
                      <div className="font-medium">{item.name}</div>
                      <span
                        className={cn(
                          "rounded-full px-2 py-0.5 text-xs",
                          enhanceProConfig.enabled
                            ? "bg-emerald-500/10 text-emerald-600"
                            : "bg-zinc-200 text-zinc-600"
                        )}
                      >
                        {enhanceProConfig.enabled ? "已启用" : "已禁用"}
                      </span>
                    </div>
                    <div className="font-mono text-muted-foreground text-xs">
                      Key: {item.maskedKey}
                    </div>
                    <div className="text-muted-foreground text-xs">
                      API:{" "}
                      {enhanceProConfig.baseUrl ||
                        ENHANCE_PRO_KREA_DEFAULT_BASE_URL}
                    </div>
                  </div>
                  <div className="flex flex-wrap items-center gap-2">
                    <Button
                      onClick={() => {
                        if (typeof item.index === "number") {
                          handleDeleteEnhanceProPoolKey(item.index);
                        }
                      }}
                      size="sm"
                      type="button"
                      variant="destructive"
                    >
                      <Trash2 className="mr-1 h-4 w-4" />
                      删除
                    </Button>
                  </div>
                </div>
              ))
            ) : (
              <div className="rounded-lg border border-dashed p-6 text-center text-muted-foreground text-sm">
                当前还没有导入任何 Krea Key。
              </div>
            )}
          </div>
        </div>

        <div className="grid gap-4 md:grid-cols-2">
          <div className="space-y-2">
            <Label htmlFor="enhanceProDefaultModel">默认模型</Label>
            <Select
              onValueChange={(value) =>
                setEnhanceProConfig((prev) => ({
                  ...prev,
                  defaultModel: value as EnhanceProKreaModel,
                }))
              }
              value={enhanceProConfig.defaultModel}
            >
              <SelectTrigger id="enhanceProDefaultModel">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {ENHANCE_PRO_KREA_MODELS.map((model: EnhanceProKreaModel) => {
                  const isHidden =
                    enhanceProConfig.hiddenModels.includes(model);
                  return (
                    <SelectItem disabled={isHidden} key={model} value={model}>
                      {model}
                      {isHidden ? "（已隐藏）" : ""}
                    </SelectItem>
                  );
                })}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label htmlFor="enhanceProDefaultOutputFormat">默认输出格式</Label>
            <Select
              onValueChange={(value) =>
                setEnhanceProConfig((prev) => ({
                  ...prev,
                  defaultOutputFormat: value as "png" | "jpg" | "webp",
                }))
              }
              value={enhanceProConfig.defaultOutputFormat}
            >
              <SelectTrigger id="enhanceProDefaultOutputFormat">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="jpg">JPG</SelectItem>
                <SelectItem value="png">PNG</SelectItem>
                <SelectItem value="webp">WEBP</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        <div className="space-y-3 rounded-lg border p-4">
          <div className="space-y-1">
            <Label className="text-sm">前台可见模型</Label>
            <div className="text-muted-foreground text-xs">
              关闭后用户端不会展示该模型，旧客户端继续请求时服务端也会直接拒绝，适合临时屏蔽异常模型。
            </div>
          </div>
          <div className="grid gap-3 md:grid-cols-4">
            {ENHANCE_PRO_KREA_MODELS.map((model: EnhanceProKreaModel) => {
              const isVisible = !enhanceProConfig.hiddenModels.includes(model);
              const visibleCount = ENHANCE_PRO_KREA_MODELS.filter(
                (item: EnhanceProKreaModel) =>
                  !enhanceProConfig.hiddenModels.includes(item)
              ).length;
              return (
                <div
                  className="flex items-center justify-between rounded-lg border px-3 py-2"
                  key={model}
                >
                  <div className="space-y-0.5">
                    <div className="font-medium text-sm">{model}</div>
                    <div className="text-muted-foreground text-xs">
                      {isVisible ? "用户可选" : "已隐藏"}
                    </div>
                  </div>
                  <Switch
                    checked={isVisible}
                    disabled={isVisible && visibleCount <= 1}
                    onCheckedChange={(checked) =>
                      handleToggleEnhanceProModelVisible(model, checked)
                    }
                  />
                </div>
              );
            })}
          </div>
        </div>

        <div className="grid gap-4 md:grid-cols-3">
          <div className="space-y-2">
            <Label htmlFor="enhanceProMaxBatchSize">最大候选图数量</Label>
            <Select
              onValueChange={(value) => {
                const nextMaxBatchSize = Number.parseInt(value, 10) || 1;
                setEnhanceProConfig((prev) => ({
                  ...prev,
                  maxBatchSize: nextMaxBatchSize,
                  presets: prev.presets.map((preset: EnhanceProPreset) => ({
                    ...preset,
                    batchSize: Math.min(
                      Math.max(1, preset.batchSize || 1),
                      nextMaxBatchSize
                    ),
                  })),
                }));
              }}
              value={String(enhanceProConfig.maxBatchSize)}
            >
              <SelectTrigger id="enhanceProMaxBatchSize">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="1">1 张</SelectItem>
                <SelectItem value="2">2 张</SelectItem>
                <SelectItem value="3">3 张</SelectItem>
                <SelectItem value="4">4 张</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label htmlFor="enhanceProMaxUpscaleFactor">最大放大倍数</Label>
            <Input
              id="enhanceProMaxUpscaleFactor"
              max="32"
              min="1"
              onChange={(e) => {
                const nextMaxUpscaleFactor = Math.min(
                  32,
                  Math.max(1, Number.parseFloat(e.target.value) || 4)
                );
                setEnhanceProConfig((prev) => ({
                  ...prev,
                  maxUpscaleFactor: nextMaxUpscaleFactor,
                  presets: prev.presets.map((preset: EnhanceProPreset) => ({
                    ...preset,
                    imageScalingFactor: Math.min(
                      Math.max(1, preset.imageScalingFactor || 1),
                      nextMaxUpscaleFactor
                    ),
                  })),
                }));
              }}
              step="0.5"
              type="number"
              value={enhanceProConfig.maxUpscaleFactor}
            />
            <p className="text-muted-foreground text-xs">
              默认建议 2-4 倍；需要时仍可放宽到 Krea 支持的更高倍数。
            </p>
          </div>
          <div className="space-y-2">
            <Label htmlFor="enhanceProMaxOutputEdge">最大输出长边</Label>
            <Input
              id="enhanceProMaxOutputEdge"
              max="16384"
              min="512"
              onChange={(e) =>
                setEnhanceProConfig((prev) => ({
                  ...prev,
                  maxOutputEdge: Number.parseInt(e.target.value, 10) || 4096,
                }))
              }
              step="1"
              type="number"
              value={enhanceProConfig.maxOutputEdge}
            />
          </div>
        </div>

        <div className="grid gap-4 md:grid-cols-2">
          <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-muted-foreground text-xs">
                开启后用户可在画布里选择 1-4
                张候选结果，系统会按数量生成多个新节点。
              </div>
            </div>
            <Switch
              checked={enhanceProConfig.allowBatchSize}
              onCheckedChange={(checked) =>
                setEnhanceProConfig((prev) => ({
                  ...prev,
                  allowBatchSize: 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-muted-foreground text-xs">
                控制是否在画布对话框中展示 creativity、texture、denoise
                等高级调节项。
              </div>
            </div>
            <Switch
              checked={enhanceProConfig.enableAdvancedControls}
              onCheckedChange={(checked) =>
                setEnhanceProConfig((prev) => ({
                  ...prev,
                  enableAdvancedControls: checked,
                }))
              }
            />
          </div>
        </div>

        <div className="space-y-4 rounded-xl border p-4">
          <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
            <div className="space-y-1">
              <Label className="text-base">增强预设</Label>
              <div className="text-muted-foreground text-sm">
                管理员可以预设一组适合不同场景的默认参数，画布用户打开“图像增强
                Pro”时可直接选择。
              </div>
            </div>
            <div className="flex flex-wrap gap-2">
              <Button
                onClick={handleResetEnhanceProPresets}
                size="sm"
                type="button"
                variant="outline"
              >
                <RefreshCw className="mr-2 h-4 w-4" />
                恢复默认预设
              </Button>
              <Button
                onClick={handleAddEnhanceProPreset}
                size="sm"
                type="button"
                variant="outline"
              >
                <Plus className="mr-2 h-4 w-4" />
                添加预设
              </Button>
            </div>
          </div>

          <Tabs
            className="space-y-4"
            onValueChange={(value) =>
              setEnhanceProPresetEditorMode(value as "simple" | "advanced")
            }
            value={enhanceProPresetEditorMode}
          >
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="simple">简化模式</TabsTrigger>
              <TabsTrigger value="advanced">完整模式</TabsTrigger>
            </TabsList>

            <TabsContent className="space-y-4" value="simple">
              <div className="grid gap-4 xl:grid-cols-[280px_minmax(0,1fr)]">
                <div className="space-y-3 rounded-xl border bg-slate-50/60 p-3">
                  <div className="space-y-1">
                    <div className="font-medium text-sm">预设列表</div>
                    <div className="text-muted-foreground text-xs">
                      拖拽、上下移动或点击卡片切换当前编辑预设。
                    </div>
                  </div>

                  <div className="space-y-2">
                    {enhanceProConfig.presets.map(
                      (preset: EnhanceProPreset, index: number) => {
                        const isSelected =
                          preset.id === selectedEnhanceProPresetId;
                        const isDragging =
                          draggingEnhanceProPresetId === preset.id;

                        return (
                          <div
                            className={`flex items-center gap-2 rounded-xl border p-2 transition ${
                              isSelected
                                ? "border-sky-400 bg-sky-50"
                                : "border-slate-200 bg-white"
                            } ${isDragging ? "opacity-60" : ""}`}
                            draggable={enhanceProConfig.presets.length > 1}
                            key={preset.id}
                            onDragEnd={handleEnhanceProPresetDragEnd}
                            onDragOver={(event) => event.preventDefault()}
                            onDragStart={(event) =>
                              handleEnhanceProPresetDragStart(event, preset.id)
                            }
                            onDrop={(event) =>
                              handleEnhanceProPresetDrop(event, preset.id)
                            }
                          >
                            <div className="rounded-lg border bg-white p-2 text-slate-500">
                              <Menu className="h-4 w-4" />
                            </div>

                            <button
                              className="min-w-0 flex-1 text-left"
                              onClick={() =>
                                setSelectedEnhanceProPresetId(preset.id)
                              }
                              type="button"
                            >
                              <div className="flex items-start justify-between gap-2">
                                <span className="min-w-0 flex-1 truncate font-medium text-sm">
                                  {preset.name || `预设 ${index + 1}`}
                                </span>
                                {preset.isDefault ? (
                                  <span className="shrink-0 rounded-full bg-slate-900 px-2 py-0.5 text-[11px] text-white">
                                    默认
                                  </span>
                                ) : null}
                              </div>
                              <div className="mt-1 truncate text-muted-foreground text-xs">
                                {preset.description ||
                                  getEnhanceProPresetSummary(preset)}
                              </div>
                            </button>

                            <div className="flex items-center gap-1">
                              <Button
                                disabled={index === 0}
                                onClick={() =>
                                  handleMoveEnhanceProPreset(index, index - 1)
                                }
                                size="icon"
                                type="button"
                                variant="ghost"
                              >
                                <ArrowUp className="h-4 w-4" />
                              </Button>
                              <Button
                                disabled={
                                  index === enhanceProConfig.presets.length - 1
                                }
                                onClick={() =>
                                  handleMoveEnhanceProPreset(index, index + 1)
                                }
                                size="icon"
                                type="button"
                                variant="ghost"
                              >
                                <ArrowDown className="h-4 w-4" />
                              </Button>
                            </div>
                          </div>
                        );
                      }
                    )}
                  </div>
                </div>

                <div className="space-y-3">
                  <div className="rounded-xl border border-dashed p-3 text-muted-foreground text-sm">
                    当前只展开一个预设，适合日常配置和快速调参。
                  </div>
                  {selectedEnhanceProPreset ? (
                    renderEnhanceProPresetEditor(
                      selectedEnhanceProPreset,
                      selectedEnhanceProPresetIndex
                    )
                  ) : (
                    <div className="rounded-xl border border-dashed p-6 text-muted-foreground text-sm">
                      暂无可编辑预设，请先添加一个预设。
                    </div>
                  )}
                </div>
              </div>
            </TabsContent>

            <TabsContent className="space-y-4" value="advanced">
              <div className="rounded-xl border border-dashed p-3 text-muted-foreground text-sm">
                完整模式会一次展开全部预设，适合集中对比和批量调整。
              </div>
              <div className="space-y-4">
                {enhanceProConfig.presets.map(
                  (preset: EnhanceProPreset, index: number) =>
                    renderEnhanceProPresetEditor(preset, index, true)
                )}
              </div>
            </TabsContent>
          </Tabs>
        </div>

        <div className="space-y-2 rounded-lg border border-amber-200 bg-amber-50 p-4">
          <div className="font-medium text-amber-900 text-sm">
            Krea Topaz Generative 说明
          </div>
          <div className="space-y-1 text-amber-800 text-xs">
            <p>
              • 使用异步 Job
              模式，服务端会自动短轮询并在完成后转存到你的存储桶。
            </p>
            <p>
              • 无限画布将向用户开放 width / height / model / prompt / subject
              detection / face enhancement / upscaling 等参数。
            </p>
            <p>• 如果启用多候选结果，用户一次可回收多张增强图到画布。</p>
            <p>• 建议控制最大输出长边与候选图数量，避免时延和成本过高。</p>
          </div>
        </div>

        <Button onClick={handleSaveEnhanceProConfig}>
          <Save className="mr-2 h-4 w-4" /> 保存图像增强 Pro 配置
        </Button>
      </LocalAiSectionShell>

      {/* 图像拓展API配置 */}
      <LocalAiSectionShell
        description={
          <>
            配置阿里云Dashscope图像拓展API，用于画图标注功能中的图像智能扩展处理
          </>
        }
        expanded={isLocalAiSectionExpanded("extend")}
        id="local-ai-section-extend"
        onToggle={() => toggleLocalAiSection("extend")}
        summary={
          <LocalAiSectionSummary
            items={[
              {
                label: extendConfig.apiKey ? "Key 已配置" : "Key 待配置",
                tone: extendConfig.apiKey ? "enabled" : "warning",
              },
              {
                label: `${extendConfig.xScale}x / ${extendConfig.yScale}x`,
                tone: "neutral",
              },
            ]}
          />
        }
        title="图像拓展API配置"
      >
        <div className="space-y-2">
          <Label htmlFor="extendApiKey">API密钥 *</Label>
          <Input
            id="extendApiKey"
            onChange={(e) =>
              setExtendConfig({ ...extendConfig, apiKey: e.target.value })
            }
            placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
            type="password"
            value={extendConfig.apiKey}
          />
          <div className="text-muted-foreground text-xs">
            请输入阿里云Dashscope API密钥，例如:
            sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
          </div>
        </div>
        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label htmlFor="extendXScale">X轴放大倍数 *</Label>
            <Input
              id="extendXScale"
              max="2.0"
              min="1.0"
              onChange={(e) =>
                setExtendConfig({
                  ...extendConfig,
                  xScale: e.target.value,
                })
              }
              placeholder="1.5"
              step="0.1"
              type="number"
              value={extendConfig.xScale}
            />
            <div className="text-muted-foreground text-xs">
              X轴放大倍数（1.0-2.0），推荐1.5
            </div>
          </div>
          <div className="space-y-2">
            <Label htmlFor="extendYScale">Y轴放大倍数 *</Label>
            <Input
              id="extendYScale"
              max="2.0"
              min="1.0"
              onChange={(e) =>
                setExtendConfig({
                  ...extendConfig,
                  yScale: e.target.value,
                })
              }
              placeholder="1.5"
              step="0.1"
              type="number"
              value={extendConfig.yScale}
            />
            <div className="text-muted-foreground text-xs">
              Y轴放大倍数（1.0-2.0），推荐1.5
            </div>
          </div>
        </div>
        <div className="space-y-2 rounded-lg border border-blue-200 bg-blue-50 p-4">
          <div className="font-medium text-blue-900 text-sm">API文档说明</div>
          <div className="space-y-1 text-blue-800 text-xs">
            <p>• 使用阿里云Dashscope图像拓展API（image-out-painting模型）</p>
            <p>
              • API端点:
              https://dashscope.aliyuncs.com/api/v1/services/aigc/image2image/out-painting
            </p>
            <p>• 支持的图片格式：JPG, PNG, WebP等常见格式</p>
            <p>• 最大图片大小：4MB</p>
            <p>• 处理时间：约5-15秒/张</p>
            <p>• 放大倍数范围：1.0-2.0（推荐1.5倍等比例扩展）</p>
          </div>
        </div>
        <Button onClick={handleSaveExtendConfig}>
          <Save className="mr-2 h-4 w-4" /> 保存配置
        </Button>
      </LocalAiSectionShell>

      {/* 去水印API配置 */}
      <LocalAiSectionShell
        description={<>配置PicWish去水印API，用于自动去除图片中的水印</>}
        expanded={isLocalAiSectionExpanded("watermark-remove")}
        id="local-ai-section-watermark-remove"
        onToggle={() => toggleLocalAiSection("watermark-remove")}
        summary={
          <LocalAiSectionSummary
            items={[
              {
                label: watermarkRemoveConfig.apiKey
                  ? "Key 已配置"
                  : "Key 待配置",
                tone: watermarkRemoveConfig.apiKey ? "enabled" : "warning",
              },
              { label: "PicWish", tone: "neutral" },
            ]}
          />
        }
        title={
          <span className="flex items-center gap-2">
            <svg
              className="h-5 w-5"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              viewBox="0 0 24 24"
            >
              <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
              <line x1="4" x2="20" y1="4" y2="20" />
            </svg>
            去水印API配置
          </span>
        }
      >
        <div className="space-y-2">
          <Label htmlFor="watermarkRemoveApiKey">API密钥 *</Label>
          <Input
            id="watermarkRemoveApiKey"
            onChange={(e) =>
              setWatermarkRemoveConfig({
                ...watermarkRemoveConfig,
                apiKey: e.target.value,
              })
            }
            placeholder="输入PicWish API密钥"
            type="password"
            value={watermarkRemoveConfig.apiKey}
          />
          <div className="text-muted-foreground text-xs">
            在 PicWish 开发者平台获取API密钥
          </div>
        </div>
        <div className="space-y-2 rounded-lg border border-purple-200 bg-purple-50 p-4">
          <div className="font-medium text-purple-900 text-sm">
            PicWish API 说明
          </div>
          <div className="space-y-1 text-purple-800 text-xs">
            <p>• 使用 PicWish 云服务进行智能去水印</p>
            <p>• 支持各种类型的水印去除（文字、图片水印）</p>
            <p>• API文档：https://picwish.com/developer</p>
            <p>• 处理时间：约10-30秒/张</p>
          </div>
        </div>
        <Button onClick={handleSaveWatermarkRemoveConfig}>
          <Save className="mr-2 h-4 w-4" /> 保存配置
        </Button>
      </LocalAiSectionShell>

      {/* 角度编辑API配置 */}
      <LocalAiSectionShell
        description={
          <>配置 fal.ai 多角度图像编辑 API，用于对同一图像生成不同视角的变体</>
        }
        expanded={isLocalAiSectionExpanded("angle-edit")}
        id="local-ai-section-angle-edit"
        onToggle={() => toggleLocalAiSection("angle-edit")}
        summary={
          <LocalAiSectionSummary
            items={[
              {
                label: angleEditConfig.enabled ? "功能启用" : "功能关闭",
                tone: angleEditConfig.enabled ? "enabled" : "disabled",
              },
              {
                label: angleEditConfig.falApiKey ? "Key 已配置" : "Key 待配置",
                tone: angleEditConfig.falApiKey ? "enabled" : "warning",
              },
              {
                label: `${angleEditConfig.inferenceSteps} steps`,
                tone: "neutral",
              },
            ]}
          />
        }
        title={
          <span className="flex items-center gap-2">
            <Move3D className="h-5 w-5" />
            角度编辑API配置
          </span>
        }
      >
        {/* 启用开关 */}
        <div className="flex items-center justify-between">
          <div className="space-y-0.5">
            <Label>启用角度编辑功能</Label>
            <div className="text-muted-foreground text-xs">
              开启后用户可在图片编辑器中使用角度编辑功能
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Switch
              checked={angleEditConfig.enabled}
              onCheckedChange={(checked) =>
                setAngleEditConfig({
                  ...angleEditConfig,
                  enabled: checked,
                })
              }
            />
            <span className="min-w-[3rem] font-medium text-muted-foreground text-sm">
              {angleEditConfig.enabled ? "已开启" : "已关闭"}
            </span>
          </div>
        </div>

        <Separator />

        {/* API Key */}
        <div className="space-y-2">
          <Label htmlFor="falApiKey">
            fal.ai API Key <span className="text-destructive">*</span>
          </Label>
          <Input
            disabled={!angleEditConfig.enabled}
            id="falApiKey"
            onChange={(e) =>
              setAngleEditConfig({
                ...angleEditConfig,
                falApiKey: e.target.value,
              })
            }
            placeholder="fal_xxxxxxxxxxxxx"
            type="password"
            value={angleEditConfig.falApiKey}
          />
          <div className="text-muted-foreground text-xs">
            从{" "}
            <a
              className="underline hover:text-primary"
              href="https://fal.ai/dashboard/keys"
              rel="noopener noreferrer"
              target="_blank"
            >
              fal.ai Dashboard
            </a>{" "}
            获取 API Key
          </div>
        </div>

        <Separator />

        {/* LoRA 强度 */}
        <div className="space-y-3">
          <div className="flex justify-between">
            <Label>默认变换强度</Label>
            <span className="text-muted-foreground text-sm">
              {(angleEditConfig.loraScale * 100).toFixed(0)}%
            </span>
          </div>
          <Input
            className="w-full"
            disabled={!angleEditConfig.enabled}
            max={1.0}
            min={0.5}
            onChange={(e) =>
              setAngleEditConfig({
                ...angleEditConfig,
                loraScale: Number.parseFloat(e.target.value),
              })
            }
            step={0.05}
            type="range"
            value={angleEditConfig.loraScale}
          />
          <div className="text-muted-foreground text-xs">
            值越高角度变化越明显，值越低保留原图特征越多（推荐 85%-95%）
          </div>
        </div>

        <Separator />

        {/* 高级设置 */}
        <div className="space-y-4">
          <Label className="font-medium text-base">高级设置</Label>

          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="inferenceSteps">推理步数</Label>
              <Input
                disabled={!angleEditConfig.enabled}
                id="inferenceSteps"
                max={50}
                min={10}
                onChange={(e) =>
                  setAngleEditConfig({
                    ...angleEditConfig,
                    inferenceSteps: Number.parseInt(e.target.value) || 28,
                  })
                }
                type="number"
                value={angleEditConfig.inferenceSteps}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="guidanceScale">引导系数</Label>
              <Input
                disabled={!angleEditConfig.enabled}
                id="guidanceScale"
                max={10}
                min={1}
                onChange={(e) =>
                  setAngleEditConfig({
                    ...angleEditConfig,
                    guidanceScale: Number.parseFloat(e.target.value) || 4.5,
                  })
                }
                step={0.5}
                type="number"
                value={angleEditConfig.guidanceScale}
              />
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="maxImageSize">最大图片(MB)</Label>
              <Input
                disabled={!angleEditConfig.enabled}
                id="maxImageSize"
                max={50}
                min={1}
                onChange={(e) =>
                  setAngleEditConfig({
                    ...angleEditConfig,
                    maxImageSize: Number.parseInt(e.target.value) || 10,
                  })
                }
                type="number"
                value={angleEditConfig.maxImageSize}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="timeout">超时时间(秒)</Label>
              <Input
                disabled={!angleEditConfig.enabled}
                id="timeout"
                max={300}
                min={30}
                onChange={(e) =>
                  setAngleEditConfig({
                    ...angleEditConfig,
                    timeout: Number.parseInt(e.target.value) || 120,
                  })
                }
                type="number"
                value={angleEditConfig.timeout}
              />
            </div>
          </div>
        </div>

        <div className="space-y-2 rounded-lg border border-blue-200 bg-blue-50 p-4">
          <div className="font-medium text-blue-900 text-sm">功能说明</div>
          <div className="space-y-1 text-blue-800 text-xs">
            <p>• 使用 Qwen-Image-Edit-2511-Multiple-Angles-LoRA 模型</p>
            <p>• 支持 96 种相机姿态（4 仰角 × 8 方位角 × 3 距离）</p>
            <p>• 可生成正面、侧面、俯视、仰视等多角度图像</p>
            <p>• 处理时间：约 10-30 秒/张</p>
            <p>• 费用：约 $0.02-0.05/张（fal.ai 按量计费）</p>
          </div>
        </div>

        <Button onClick={handleSaveAngleEditConfig}>
          <Save className="mr-2 h-4 w-4" /> 保存配置
        </Button>
      </LocalAiSectionShell>

      <LocalAiSectionShell
        description={
          <>
            配置 Replicate 上的 Qwen-Image-Layered
            模型，用于将单张图片拆分为多个可编辑图层并回写到无限画布。
          </>
        }
        expanded={isLocalAiSectionExpanded("layer-split")}
        id="local-ai-section-layer-split"
        onToggle={() => toggleLocalAiSection("layer-split")}
        summary={
          <LocalAiSectionSummary
            items={[
              {
                label: layerSplitConfig.enabled ? "功能启用" : "功能关闭",
                tone: layerSplitConfig.enabled ? "enabled" : "disabled",
              },
              {
                label: layerSplitConfig.replicateApiToken
                  ? "Token 已配置"
                  : "Token 待配置",
                tone: layerSplitConfig.replicateApiToken
                  ? "enabled"
                  : "warning",
              },
              { label: `${layerSplitConfig.layers} 图层`, tone: "neutral" },
            ]}
          />
        }
        title={
          <span className="flex items-center gap-2">
            <Layers className="h-5 w-5" />
            图层拆分API配置
          </span>
        }
      >
        <div className="flex items-center justify-between">
          <div className="space-y-0.5">
            <Label>启用图层拆分功能</Label>
            <div className="text-muted-foreground text-xs">
              开启后，用户在无限画布中选中图片可使用“图层拆分”工具。
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Switch
              checked={layerSplitConfig.enabled}
              onCheckedChange={(checked) =>
                setLayerSplitConfig({
                  ...layerSplitConfig,
                  enabled: checked,
                })
              }
            />
            <span className="min-w-[3rem] font-medium text-muted-foreground text-sm">
              {layerSplitConfig.enabled ? "已开启" : "已关闭"}
            </span>
          </div>
        </div>

        <Separator />

        <div className="space-y-2">
          <Label htmlFor="layerSplitReplicateApiToken">
            Replicate API Token <span className="text-destructive">*</span>
          </Label>
          <Input
            disabled={!layerSplitConfig.enabled}
            id="layerSplitReplicateApiToken"
            onChange={(e) =>
              setLayerSplitConfig({
                ...layerSplitConfig,
                replicateApiToken: e.target.value,
              })
            }
            placeholder="r8_xxxxxxxxxxxxx"
            type="password"
            value={layerSplitConfig.replicateApiToken}
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="layerSplitReplicateModel">Replicate 模型</Label>
          <Input
            disabled={!layerSplitConfig.enabled}
            id="layerSplitReplicateModel"
            onChange={(e) =>
              setLayerSplitConfig({
                ...layerSplitConfig,
                replicateModel: e.target.value,
              })
            }
            placeholder="qwen/qwen-image-layered"
            value={layerSplitConfig.replicateModel}
          />
        </div>

        <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
          <div className="space-y-2">
            <Label htmlFor="layerSplitLayers">默认层数</Label>
            <Input
              disabled={!layerSplitConfig.enabled}
              id="layerSplitLayers"
              max={12}
              min={2}
              onChange={(e) =>
                setLayerSplitConfig({
                  ...layerSplitConfig,
                  layers: Math.max(
                    2,
                    Math.min(12, Number(e.target.value) || 4)
                  ),
                })
              }
              type="number"
              value={layerSplitConfig.layers}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="layerSplitResolution">分辨率</Label>
            <Input
              disabled={!layerSplitConfig.enabled}
              id="layerSplitResolution"
              max={1536}
              min={256}
              onChange={(e) =>
                setLayerSplitConfig({
                  ...layerSplitConfig,
                  resolution: Math.max(
                    256,
                    Math.min(1536, Number(e.target.value) || 640)
                  ),
                })
              }
              step={64}
              type="number"
              value={layerSplitConfig.resolution}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="layerSplitCfg">true_cfg_scale</Label>
            <Input
              disabled={!layerSplitConfig.enabled}
              id="layerSplitCfg"
              max={12}
              min={1}
              onChange={(e) =>
                setLayerSplitConfig({
                  ...layerSplitConfig,
                  trueCfgScale: Math.max(
                    1,
                    Math.min(12, Number(e.target.value) || 4)
                  ),
                })
              }
              step={0.5}
              type="number"
              value={layerSplitConfig.trueCfgScale}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="layerSplitSteps">推理步数</Label>
            <Input
              disabled={!layerSplitConfig.enabled}
              id="layerSplitSteps"
              max={80}
              min={1}
              onChange={(e) =>
                setLayerSplitConfig({
                  ...layerSplitConfig,
                  numInferenceSteps: Math.max(
                    1,
                    Math.min(80, Number(e.target.value) || 30)
                  ),
                })
              }
              type="number"
              value={layerSplitConfig.numInferenceSteps}
            />
          </div>
        </div>

        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
          <div className="flex items-center justify-between rounded-lg border p-3">
            <div className="space-y-0.5">
              <Label className="text-sm">cfg_normalize</Label>
              <div className="text-muted-foreground text-xs">
                保持前景/背景透明边缘更稳定
              </div>
            </div>
            <Switch
              checked={layerSplitConfig.cfgNormalize}
              disabled={!layerSplitConfig.enabled}
              onCheckedChange={(checked) =>
                setLayerSplitConfig({
                  ...layerSplitConfig,
                  cfgNormalize: checked,
                })
              }
            />
          </div>

          <div className="flex items-center justify-between rounded-lg border p-3">
            <div className="space-y-0.5">
              <Label className="text-sm">use_en_prompt</Label>
              <div className="text-muted-foreground text-xs">
                使用英文提示增强兼容性
              </div>
            </div>
            <Switch
              checked={layerSplitConfig.useEnPrompt}
              disabled={!layerSplitConfig.enabled}
              onCheckedChange={(checked) =>
                setLayerSplitConfig({
                  ...layerSplitConfig,
                  useEnPrompt: checked,
                })
              }
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="layerSplitTimeout">超时时间（毫秒）</Label>
            <Input
              disabled={!layerSplitConfig.enabled}
              id="layerSplitTimeout"
              max={900_000}
              min={30_000}
              onChange={(e) =>
                setLayerSplitConfig({
                  ...layerSplitConfig,
                  timeoutMs: Math.max(
                    30_000,
                    Math.min(900_000, Number(e.target.value) || 300_000)
                  ),
                })
              }
              step={1000}
              type="number"
              value={layerSplitConfig.timeoutMs}
            />
          </div>
        </div>

        <div className="space-y-2">
          <Label htmlFor="layerSplitNegativePrompt">负向提示词（可选）</Label>
          <Textarea
            disabled={!layerSplitConfig.enabled}
            id="layerSplitNegativePrompt"
            onChange={(e) =>
              setLayerSplitConfig({
                ...layerSplitConfig,
                negativePrompt: e.target.value,
              })
            }
            placeholder="例如：text, watermark, logo, artifacts"
            rows={3}
            value={layerSplitConfig.negativePrompt}
          />
        </div>

        <div className="space-y-2 rounded-lg border border-blue-200 bg-blue-50 p-4">
          <div className="font-medium text-blue-900 text-sm">
            Qwen-Image-Layered 说明
          </div>
          <div className="space-y-1 text-blue-800 text-xs">
            <p>• 用途：将单张图片拆成多个独立图层（RGBA layer）</p>
            <p>• 平台：Replicate 托管推理，无需自建 GPU 服务器</p>
            <p>• 默认模型：qwen/qwen-image-layered</p>
            <p>
              • 使用后会将每个图层转存到你的存储桶，并在无限画布中新增图片节点
            </p>
          </div>
        </div>

        <Button onClick={handleSaveLayerSplitConfig}>
          <Save className="mr-2 h-4 w-4" /> 保存图层拆分配置
        </Button>
      </LocalAiSectionShell>
    </>
  );
}