"use client";

import {
  ArrowDown,
  ArrowLeft,
  ArrowUp,
  BarChart3,
  Bell,
  Bot,
  Box,
  Brain,
  Calendar,
  Check,
  CheckCircle2,
  ChevronLeft,
  ChevronRight,
  Clock,
  Copy,
  Crop,
  Crosshair,
  Database,
  Download,
  Edit,
  Eraser,
  Expand,
  ExternalLink,
  Eye,
  EyeOff,
  FlipHorizontal2,
  FolderOpen,
  GitBranch,
  Globe2,
  Grid3X3,
  Hand,
  HardDrive,
  Home,
  Image as ImageIcon,
  ImagePlus,
  Key,
  Layers,
  Layers3,
  Loader2,
  type LucideIcon,
  Maximize2,
  Menu,
  MessageSquare,
  MessageSquarePlus,
  MoreHorizontal,
  MoreVertical,
  MousePointer,
  Move3D,
  Paintbrush,
  Paperclip,
  Pause,
  PenTool,
  Play,
  Plus,
  Redo2,
  RefreshCw,
  Save,
  Scan,
  Scissors,
  Search,
  Settings,
  SlidersHorizontal,
  Sparkles,
  Square,
  StickyNote,
  Tag,
  Trash2,
  TrendingUp,
  Type,
  Undo2,
  Upload,
  User,
  Users,
  Video,
  Volume2,
  VolumeX,
  Wand2,
  Waypoints,
  Wrench,
  X,
  ZoomIn,
  ZoomOut,
} from "lucide-react";
import Link from "next/link";
import {
  type ChangeEvent,
  type DragEvent,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { toast } from "sonner";
import useSWR from "swr";
import { ExternalImageApiSettingsCard } from "@/components/admin/external-image-api-settings-card";
import {
  CANVAS_SKILL_ICON_OPTIONS,
  getCanvasSkillIconComponent,
} from "@/components/canvas/canvas-skill-icons";
import { HomeAnimationEmbed } from "@/components/home/home-animation-embed";
import {
  DEFAULT_OPENCLAW_CHAT_BASE_URL,
  OPENCLAW_CHAT_CONFIG_KEY,
  type OpenClawChatConfig,
} from "@/lib/openclaw-chat/config";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
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 } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";
import {
  defaultAgentWorkflowUiConfig,
  normalizeAgentWorkflowUiConfig,
} from "@/lib/agents/workflow-ui-config";
import {
  BLTCY_BFL_BASE_URL,
  BLTCY_BFL_MODEL_PRESETS,
  BLTCY_BFL_PROVIDER_PRESET,
  BLTCY_IMAGE_MODEL_PRESETS,
  BLTCY_IMAGE_OPENAI_BASE_URL,
  BLTCY_IMAGE_PROVIDER_PRESET,
} from "@/lib/ai/bltcy-image-models";
import {
  BLTCY_VIDEO_MODEL_PRESETS,
  BLTCY_VIDEO_PROVIDER_PRESET,
} from "@/lib/ai/bltcy-video-models";
import {
  DETAIL_AGENT_LOCAL_MOONSHOT_BASE_URL,
  DETAIL_AGENT_LOCAL_MOONSHOT_DISPLAY_NAME,
  DETAIL_AGENT_LOCAL_MOONSHOT_MODEL_ID,
  DETAIL_AGENT_LOCAL_MOONSHOT_OPTION_ID,
  DETAIL_AGENT_LOCAL_MOONSHOT_SETTING_KEY,
  isDetailAgentLocalMoonshotBaseUrl,
  normalizeDetailAgentLocalMoonshotBaseUrl,
  normalizeDetailAgentLocalMoonshotConfig,
} from "@/lib/ai/detail-agent-model-config";
import { FAL_IMAGE_MODEL_PRESETS } from "@/lib/ai/fal-image-models";
import { RUXA_IMAGE_MODEL_PRESETS } from "@/lib/ai/ruxa-image-models";
import { SNAPGEN_IMAGE_MODEL_PRESETS } from "@/lib/ai/snapgen-image-models";
import { BANANAIMAGE_MODEL_PRESETS } from "@/lib/ai/bananaimage-models";
import { VISIONARY_MODEL_PRESETS } from "@/lib/ai/visionary-models";
import {
  formatImageModelCreditDiscountLabel,
  getGenerationCreditCostFromImageGenConfig,
  getImageSizeCreditMultiplier,
} from "@/lib/ai/image-model-pricing";
import {
  is3DModelDescriptor,
  isImageGenerationModelDescriptor,
  isVideoModelDescriptor,
} from "@/lib/ai/model-classification";
import {
  buildVideoDurationCostMap,
  getConfiguredVideoDurationOptions,
  getVideoCreditCostFromConfig,
  normalizeVideoDurationOptions,
  recommendedVideoDurationOptions,
  recommendedVideoDurationReferenceCosts,
  recommendedVideoResolutionBaseCosts,
} from "@/lib/ai/video-model-config";
import {
  CANVAS_IMAGE_TASK_QUEUE_CONFIG_KEY,
  type CanvasImageTaskQueueConfig,
  DEFAULT_CANVAS_IMAGE_BATCH_DISPATCH_INTERVAL_MS,
  DEFAULT_CANVAS_IMAGE_TASK_CONCURRENCY,
  MAX_CANVAS_IMAGE_BATCH_DISPATCH_INTERVAL_MS,
  MAX_CANVAS_IMAGE_TASK_CONCURRENCY,
  MIN_CANVAS_IMAGE_BATCH_DISPATCH_INTERVAL_MS,
  MIN_CANVAS_IMAGE_TASK_CONCURRENCY,
  normalizeCanvasImageTaskQueueConfig,
} from "@/lib/canvas/image-task-config";
import {
  CANVAS_LOCAL_EDIT_CONFIG_KEY,
  defaultCanvasLocalEditConfig,
  normalizeCanvasLocalEditConfig,
} from "@/lib/canvas/local-edit-config";
import {
  type CanvasSkillCategory,
  type CanvasSkillTag,
  DEFAULT_CANVAS_SKILL_TAGS,
  DEFAULT_CANVAS_SKILL_TAGS_TITLE,
  normalizeCanvasSkillCategories,
  normalizeCanvasSkillTags,
} from "@/lib/canvas-skill-tags";
import {
  type CanvasToolbarConfig,
  type CanvasToolbarItemKey,
  DEFAULT_CANVAS_TOOLBAR_ITEMS,
  MAX_SELECTED_IMAGE_INLINE_ACTION_COUNT,
  MIN_SELECTED_IMAGE_INLINE_ACTION_COUNT,
  defaultCanvasToolbarConfig,
  getDefaultCanvasToolbarItem,
  normalizeCanvasToolbarConfig,
} from "@/lib/canvas-toolbar-config";
import {
  defaultCanvasAgentFeatureSettings,
  normalizeCanvasAgentFeatureSettings,
  type CanvasAgentFeatureSettings,
} from "@/lib/canvas/agent-feature-flags";
import { fetchUploadWithRetry } from "@/lib/client/upload-with-retry";
import {
  AI_WASH_CONFIG_KEY,
  defaultAiWashConfig,
  normalizeAiWashConfig,
} from "@/lib/ai-wash/config";
import {
  defaultEnhanceProKreaConfig,
  defaultEnhanceProPresets,
  ENHANCE_PRO_KREA_DEFAULT_BASE_URL,
  ENHANCE_PRO_KREA_DEFAULT_MODEL,
  ENHANCE_PRO_KREA_DEFAULT_OUTPUT_FORMAT,
  ENHANCE_PRO_KREA_MODELS,
  ENHANCE_PRO_KREA_SETTING_KEY,
  type EnhanceProKreaModel,
  type EnhanceProPreset,
  normalizeEnhanceProKreaConfig,
} from "@/lib/enhance-pro/config";
import {
  DEFAULT_LOVART_HOME_SIDEBAR_ITEMS,
  defaultLovartHomeSidebarConfig,
  getDefaultLovartHomeSidebarItem,
  type LovartHomeSidebarConfig,
  type LovartHomeSidebarItemKey,
  normalizeLovartHomeSidebarConfig,
} from "@/lib/home/lovart-sidebar-config";
import {
  defaultMembershipConfig,
  defaultMembershipUserOverrides,
  type MembershipFaqItem,
  type MembershipPlanConfig,
  normalizeMembershipConfig,
  normalizeMembershipUserOverrides,
} from "@/lib/membership/config";
import {
  defaultThreeDModelAliasConfig,
  normalizeThreeDModelAliasConfig,
  THREED_MODEL_ALIAS_CONFIG_SETTING_KEY,
  type ThreeDModelAliasEntry,
} from "@/lib/model3d/model-alias-config";
import {
  DINGTALK_NOTIFICATION_DRAFT_CONFIG_KEY,
  type DingTalkNotificationDraftConfig,
  defaultDingTalkNotificationDraftConfig,
  normalizeDingTalkNotificationDraftConfig,
} from "@/lib/notifications/dingtalk-notification-draft-config";
import {
  DINGTALK_ROBOT_NOTIFICATION_CONFIG_KEY,
  type DingTalkRobotNotificationConfig,
  defaultDingTalkRobotNotificationConfig,
  normalizeDingTalkRobotNotificationConfig,
} from "@/lib/notifications/dingtalk-robot-config";
import {
  type DulupayConfig,
  defaultDulupayConfig,
  normalizeDulupayConfig,
} from "@/lib/payment/dulupay-config";
import {
  defaultPointsPackages,
  defaultPointsSystemConfig,
  type EnhanceProPointsResolutionBucket,
  normalizePointsPackages,
  normalizePointsSystemConfig,
  POINTS_SYSTEM_CONFIG_KEY,
  type PointsPackage,
  type PointsSystemConfig,
} from "@/lib/points/config";
import {
  defaultProductPlanningApiConfig,
  normalizeProductPlanningApiConfig,
  PRODUCT_PLANNING_API_CONFIG_KEY,
  type ProductPlanningApiConfig,
} from "@/lib/product-planning/config";
import {
  defaultProductPlanningAiModelConfig,
  normalizeProductPlanningAiModelConfig,
  PRODUCT_PLANNING_AI_MODEL_CONFIG_KEY,
  PRODUCT_PLANNING_AI_MODEL_DEFAULT_BASE_URL,
  PRODUCT_PLANNING_AI_MODEL_DEFAULT_MODEL_ID,
  type ProductPlanningAiModelConfig,
} from "@/lib/product-planning/model-config";
import {
  defaultThirdPartySqlServerConfig,
  THIRD_PARTY_SQLSERVER_CONFIG_KEY,
} from "@/lib/sqlserver/config";
import { cn, formatBeijingTime } from "@/lib/utils";
import {
  defaultWorldLabsKeyPoolConfig,
  normalizeWorldLabsKeyPoolConfig,
  WORLDLABS_KEY_POOL_CONFIG_KEY,
} from "@/lib/worldlabs/key-pool-config-shared";
import type { AgentWorkflowUiConfig } from "@/types/agent";
import { AdminSettingsNavigation } from "./_components/admin-settings-navigation";
import { AccessSecurityDashboard } from "./_components/access-security-dashboard";
import { LocalAiCommandCenter } from "./_components/local-ai-command-center";
import { LocalAiGroupHeading } from "./_components/local-ai-section-shell";
import { LocalAiImagePipelineSections } from "./_components/local-ai-sections/image-pipeline-sections";
import { LocalAiModel3dSections } from "./_components/local-ai-sections/model3d-sections";
import { LocalAiPlanningSections } from "./_components/local-ai-sections/planning-sections";
import { LocalAiRuntimeSections } from "./_components/local-ai-sections/runtime-sections";
import {
  DEFAULT_LOCAL_AI_EXPANDED_SECTIONS,
  LOCAL_AI_EXPANDED_STORAGE_KEY,
} from "./_lib/local-ai-sections";
import { ADMIN_SETTINGS_NAV_ITEMS } from "./_lib/settings-navigation";
import type {
  LocalAiOverviewItem,
  LocalAiPlanningSectionsProps,
  LocalAiQuickLink,
} from "./_lib/types";

const fetcher = (url: string) => fetch(url).then((res) => res.json());
const DEFAULT_BFL_REALTIME_MODEL = "flux-2-klein-4b";
const DEFAULT_BFL_BASE_URL = "https://api.bfl.ai";
const HOME_CHAT_ANIMATION_MAX_BYTES = 1024 * 1024;
const HOME_CHAT_ANIMATION_CONFIG_KEY = "home_chat_animation_config";
const VIDEO_PRICING_PREVIEW_RESOLUTIONS = ["480p", "720p", "1080p"] as const;
const IMAGE_PRICING_PREVIEW_SIZES = ["1K", "2K", "4K"] as const;
type AdminVideoResolution = (typeof VIDEO_PRICING_PREVIEW_RESOLUTIONS)[number];
const DEFAULT_VIDEO_RESOLUTION_MULTIPLIERS: Record<
  AdminVideoResolution,
  number
> = {
  "480p": 1,
  "720p": 1.5,
  "1080p": 2,
};

function normalizeAdminVideoResolutions(
  value: unknown
): AdminVideoResolution[] {
  if (!Array.isArray(value)) return [];
  const allowed = new Set<string>(VIDEO_PRICING_PREVIEW_RESOLUTIONS);
  return Array.from(
    new Set(
      value
        .map((item) =>
          String(item || "")
            .trim()
            .toLowerCase()
        )
        .filter((item): item is AdminVideoResolution => allowed.has(item))
    )
  );
}

function getAdminVideoSupportedResolutions(
  capabilities: unknown
): AdminVideoResolution[] {
  if (!capabilities || typeof capabilities !== "object") {
    return [...VIDEO_PRICING_PREVIEW_RESOLUTIONS];
  }
  const configured = normalizeAdminVideoResolutions(
    (capabilities as { supportedResolutions?: unknown }).supportedResolutions
  );
  return configured.length
    ? configured
    : [...VIDEO_PRICING_PREVIEW_RESOLUTIONS];
}

function updateAdminVideoSupportedResolutions(
  capabilities: Record<string, unknown> | null | undefined,
  nextResolutions: AdminVideoResolution[]
) {
  return {
    ...(capabilities || {}),
    supportedResolutions: nextResolutions,
  };
}

function formatCompactNumber(value: number, fractionDigits = 2) {
  if (!Number.isFinite(value)) return "0";
  const fixed = value.toFixed(fractionDigits);
  return fixed.replace(/\.?0+$/, "");
}

function normalizeAdminMultiplier(value: unknown, fallback = 1) {
  const parsedValue = Number(value);
  if (!Number.isFinite(parsedValue) || parsedValue <= 0) return fallback;
  return Math.min(20, Math.max(0.01, Number(parsedValue.toFixed(2))));
}

function roundCreditCost(value: unknown) {
  const parsedValue = Number(value);
  return Number.isFinite(parsedValue) && parsedValue > 0
    ? Math.max(1, Math.round(parsedValue))
    : 0;
}

function createEmptyCanvasSkillTag(): CanvasSkillTag {
  return {
    id: `tag-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
    name: "",
    prompt: "",
    placeholder: "",
    iconName: "message-circle",
    iconUrl: "",
  };
}

function createEmptyCanvasSkillCategory(): CanvasSkillCategory {
  return {
    id: `category-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
    name: "新分类",
  };
}

function createEmptyEnhanceProPreset(): EnhanceProPreset {
  const timestamp = Date.now();
  return {
    id: `enhance-pro-preset-${timestamp}-${Math.random().toString(36).slice(2, 6)}`,
    name: "新预设",
    description: "",
    isDefault: false,
    prompt: "",
    batchSize: 1,
    seed: 1337,
    outputFormat: ENHANCE_PRO_KREA_DEFAULT_OUTPUT_FORMAT,
    subjectDetection: "All",
    faceEnhancement: false,
    faceEnhancementCreativity: 0.5,
    faceEnhancementStrength: 0.5,
    cropToFill: false,
    model: ENHANCE_PRO_KREA_DEFAULT_MODEL,
    upscalingActivated: false,
    imageScalingFactor: 1,
    creativity: 3,
    texture: 3,
    sharpen: 0.5,
    denoise: 0.5,
    detail: 0.5,
  };
}

type AdminDingTalkNotificationTaskStatus =
  | "pending"
  | "sending"
  | "sent"
  | "failed"
  | "cancelled";

type AdminDingTalkNotificationTask = {
  id: string;
  title: string;
  content: string;
  status: AdminDingTalkNotificationTaskStatus;
  scheduledAt: string;
  attempts: number;
  sentAt?: string | null;
  cancelledAt?: string | null;
  lastError?: string | null;
  createdAt: string;
  updatedAt: string;
};

function formatDingTalkNotificationTaskStatus(
  status: AdminDingTalkNotificationTaskStatus
) {
  if (status === "pending") return "待发送";
  if (status === "sending") return "发送中";
  if (status === "sent") return "已发送";
  if (status === "failed") return "发送失败";
  if (status === "cancelled") return "已取消";
  return status;
}

function getDingTalkNotificationTaskStatusClassName(
  status: AdminDingTalkNotificationTaskStatus
) {
  if (status === "sent") {
    return "border border-emerald-200 bg-emerald-50 text-emerald-700";
  }
  if (status === "failed") {
    return "border border-red-200 bg-red-50 text-red-600";
  }
  if (status === "cancelled") {
    return "border border-slate-200 bg-slate-100 text-slate-500";
  }
  if (status === "sending") {
    return "border border-blue-200 bg-blue-50 text-blue-600";
  }
  return "border border-amber-200 bg-amber-50 text-amber-700";
}

function toDateTimeLocalInputValue(value: Date) {
  const offsetMs = value.getTimezoneOffset() * 60 * 1000;
  return new Date(value.getTime() - offsetMs).toISOString().slice(0, 16);
}

function loadLocalAiExpandedSections() {
  if (typeof window === "undefined") return DEFAULT_LOCAL_AI_EXPANDED_SECTIONS;

  try {
    const raw = window.localStorage.getItem(LOCAL_AI_EXPANDED_STORAGE_KEY);
    if (!raw) return DEFAULT_LOCAL_AI_EXPANDED_SECTIONS;
    const parsed = JSON.parse(raw);
    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
      return DEFAULT_LOCAL_AI_EXPANDED_SECTIONS;
    }
    return {
      ...DEFAULT_LOCAL_AI_EXPANDED_SECTIONS,
      ...(parsed as Record<string, boolean>),
    };
  } catch {
    return DEFAULT_LOCAL_AI_EXPANDED_SECTIONS;
  }
}

function maskAdminSecret(value: string) {
  const normalized = String(value || "").trim();
  if (!normalized) return "未填写";
  if (normalized.length <= 10) return "••••••";
  return `${normalized.slice(0, 6)}••••${normalized.slice(-4)}`;
}

function reorderEnhanceProPresets(
  presets: EnhanceProPreset[],
  fromIndex: number,
  toIndex: number
) {
  if (
    fromIndex === toIndex ||
    fromIndex < 0 ||
    toIndex < 0 ||
    fromIndex >= presets.length ||
    toIndex >= presets.length
  ) {
    return presets;
  }

  const nextPresets = [...presets];
  const [movedPreset] = nextPresets.splice(fromIndex, 1);
  if (!movedPreset) {
    return presets;
  }
  nextPresets.splice(toIndex, 0, movedPreset);
  return nextPresets;
}

function getEnhanceProPresetSummary(preset: EnhanceProPreset) {
  const parts = [
    preset.model,
    preset.subjectDetection === "Foreground"
      ? "前景"
      : preset.subjectDetection === "Background"
        ? "背景"
        : "全部",
  ];

  if (preset.faceEnhancement) {
    parts.push("人像增强");
  }

  if (preset.upscalingActivated) {
    parts.push(`${preset.imageScalingFactor}x`);
  }

  return parts.join(" · ");
}

// 类型定义
type User = {
  id: string;
  email: string;
  name: string | null;
  department: string | null;
  role: "guest" | "regular" | "admin" | "agent_admin";
  isHighVip: boolean;
  isActive: boolean;
  monthlyImageLimit: number | null;
  pointsBalance: number;
  pointsGiftedTotal: number;
  createdAt: string;
};

const ROLE_LABELS: Record<User["role"], string> = {
  guest: "访客用户",
  regular: "普通用户",
  admin: "管理员",
  agent_admin: "风格化管理员",
};

type ToolConfig = {
  toolName: string;
  isEnabled: boolean;
  description?: string;
  config?: any;
};

type AiProvider = {
  id: string;
  name: string;
  type:
    | "alibaba"
    | "openai"
    | "custom"
    | "local"
    | "gemini"
    | "bltcy-video"
    | "grsai-gpt-image"
    | "grsai-video"
    | "huanke-gemini"
    | "qianwen-video"
    | "doubao-video"
    | "ruxa-video"
    | "volcano-vision"
    | "volcano-video"
    | "alibaba-image"
    | "bfl-image"
    | "ruxa-image"
    | "fal-image"
    | "snapgen-image"
    | "openai-image"
    | "bananaimage"
    | "visionary"
    | "atlascloud"
    | "vip98k"
    | "stepfun-image"
    | "midjourney"
    | "fal-video"
    | "zhipu"
    | "tripo-3d"
    | "worldlabs-3d"
    | "kittycad-cad"
    | "runway"
    | "krea"
    | "volcano-multimodal";
  baseUrl: string;
  apiKey: string;
  isEnabled: boolean;
  createdAt: string;
};

// 🆕 图片生成模型特性配置
type ImageGenConfig = {
  maxImages?: number; // 最大输出图片数，如阿里 1-6，Gemini 1-2
  supportsSize?: boolean; // 是否支持自定义分辨率
  supports1K?: boolean; // 是否支持 1K 分辨率
  supports2K?: boolean; // 是否支持 2K 分辨率
  supports4K?: boolean; // 是否支持 4K 分辨率
  supportsPromptExtend?: boolean; // 是否支持提示词智能优化
  supportsNegativePrompt?: boolean; // 是否支持反向提示词
  supportsWatermark?: boolean; // 是否支持水印开关
  supportsSeed?: boolean; // 是否支持随机种子
  supportedAspectRatios?: string[]; // 支持的图片比例
  supportedImageSizes?: string[]; // 支持的分辨率/K 数
  maxReferenceImages?: number; // 最大参考图数量
  maxVideoReferences?: number; // 最大参考视频数量
  supportsQuality?: boolean; // 是否支持质量档位
  creditCostPerImage?: number; // 每张图片积分消耗
  creditCostMultiplierBySize?: Record<string, number>; // 各图片尺寸积分倍率
  creditDiscountRate?: number; // 积分折扣，按“折”配置，如 5 = 5折
  creditCostPerVideo?: number; // 每条视频积分消耗
  videoDurationOptions?: number[]; // 视频秒数选项
  creditCostPerVideoByDuration?: Record<string, number>; // 各秒数积分
  creditCostPerVideoByResolution?: Record<string, number>; // 各分辨率积分
  enableLoadingPlaceholder?: boolean; // 是否启用加载占位图
  loadingColor?: string; // 占位图主题色，如 "purple", "blue", "green"
  vip98k?: Record<string, unknown>; // VIP98K 目录元数据
};

function createDefaultImageGenConfig(): ImageGenConfig {
  return {
    maxImages: 2,
    supportsSize: false,
    supports1K: true,
    supports2K: true,
    supports4K: true,
    supportsPromptExtend: false,
    supportsNegativePrompt: false,
    supportsWatermark: false,
    supportsSeed: false,
    creditCostPerImage: 0,
    creditCostMultiplierBySize: {
      "1K": 1,
      "2K": 1,
      "4K": 1,
    },
    creditCostPerVideo: 0,
    videoDurationOptions: [],
    creditCostPerVideoByDuration: {},
    creditCostPerVideoByResolution: {},
    enableLoadingPlaceholder: true,
    loadingColor: "purple",
  };
}

function formatVideoDurationOptionsInput(options?: number[]) {
  return getConfiguredVideoDurationOptions({
    videoDurationOptions: options,
  }).join(", ");
}

function parseVideoDurationOptionsInput(value: string) {
  return normalizeVideoDurationOptions(
    String(value || "")
      .split(/[,\n，、;；|/\\\s]+/)
      .map((item) => item.trim())
      .filter(Boolean)
  );
}

function syncVideoDurationPricing(
  config: ImageGenConfig | undefined,
  durationOptions: number[]
) {
  const nextConfig = config || createDefaultImageGenConfig();
  return {
    ...nextConfig,
    videoDurationOptions: durationOptions,
    creditCostPerVideoByDuration:
      buildVideoDurationCostMap({
        durationOptions,
        costMap: nextConfig.creditCostPerVideoByDuration,
        fallbackCost: nextConfig.creditCostPerVideo,
      }) || {},
  };
}

function applyRecommendedVideoPricing(config: ImageGenConfig | undefined) {
  return {
    ...(config || createDefaultImageGenConfig()),
    creditCostPerVideo: recommendedVideoResolutionBaseCosts["480p"],
    videoDurationOptions: [...recommendedVideoDurationOptions],
    creditCostPerVideoByDuration: {
      ...recommendedVideoDurationReferenceCosts,
    },
    creditCostPerVideoByResolution: {
      ...recommendedVideoResolutionBaseCosts,
    },
  };
}

function getVideoReferenceDurationCost(config: ImageGenConfig | undefined) {
  const durationCostEntries = Object.entries(
    config?.creditCostPerVideoByDuration || {}
  )
    .map(([durationKey, cost]) => ({
      duration: Number(durationKey),
      cost: roundCreditCost(cost),
    }))
    .filter((item) => Number.isFinite(item.duration) && item.cost > 0)
    .sort((left, right) => left.duration - right.duration);
  return (
    durationCostEntries[durationCostEntries.length - 1]?.cost ||
    roundCreditCost(config?.creditCostPerVideo) ||
    recommendedVideoDurationReferenceCosts[
      String(
        recommendedVideoDurationOptions[
          recommendedVideoDurationOptions.length - 1
        ]
      )
    ] ||
    1
  );
}

function getVideoResolutionMultiplier(
  config: ImageGenConfig | undefined,
  resolution: (typeof VIDEO_PRICING_PREVIEW_RESOLUTIONS)[number]
) {
  const referenceCost = getVideoReferenceDurationCost(config);
  const rawCost =
    config?.creditCostPerVideoByResolution?.[resolution] ??
    referenceCost * DEFAULT_VIDEO_RESOLUTION_MULTIPLIERS[resolution];
  if (referenceCost <= 0) {
    return DEFAULT_VIDEO_RESOLUTION_MULTIPLIERS[resolution];
  }
  return normalizeAdminMultiplier(
    Number(rawCost) / referenceCost,
    DEFAULT_VIDEO_RESOLUTION_MULTIPLIERS[resolution]
  );
}

function getEnhanceProScaleMultiplier(
  pricing: PointsSystemConfig["enhanceProPricing"],
  factorKey: string,
  cost: number
) {
  const baseCost = roundCreditCost(pricing.fixedCost);
  if (baseCost <= 0) return normalizeAdminMultiplier(factorKey);
  return normalizeAdminMultiplier(
    Number(cost) / baseCost,
    normalizeAdminMultiplier(factorKey)
  );
}

function applyRecommendedEnhanceProPricing(
  pricing: PointsSystemConfig["enhanceProPricing"]
): PointsSystemConfig["enhanceProPricing"] {
  const recommended = defaultPointsSystemConfig.enhanceProPricing;
  const baseCost = roundCreditCost(pricing.fixedCost || recommended.fixedCost);
  return {
    ...pricing,
    chargeMode: recommended.chargeMode,
    fixedCost: baseCost,
    chargeOnlyWhenUpscaling: recommended.chargeOnlyWhenUpscaling,
    batchSizeMultiplierEnabled: recommended.batchSizeMultiplierEnabled,
    scaleFactorCosts: Object.fromEntries(
      Object.keys(recommended.scaleFactorCosts).map((factorKey) => [
        factorKey,
        roundCreditCost(baseCost * normalizeAdminMultiplier(factorKey)),
      ])
    ),
    modelMultipliers: { ...recommended.modelMultipliers },
  };
}

type PointsCostField =
  | "creditCostPer3DModelPbr"
  | "creditCostPer3DModelSmartLowPoly"
  | "creditCostPer3DModelQuad"
  | "creditCostPer3DModelRefine"
  | "creditCostPer3DModelTexture"
  | "creditCostPer3DModelAutoRig"
  | "creditCostPer3DModelHighpolyToLowpoly"
  | "creditCostPerImageMultiView"
  | "creditCostPerImageRemoveBackground"
  | "creditCostPerImageBoxCutout"
  | "creditCostPerImageWatermarkRemove"
  | "creditCostPerImageExtend"
  | "creditCostPerImageRepaint"
  | "creditCostPerImageAngleEdit";

const THREE_D_GENERATION_POINT_FIELDS: Array<{
  key: PointsCostField;
  label: string;
  description: string;
}> = [
  {
    key: "creditCostPer3DModelPbr",
    label: "PBR 材质",
    description: "勾选 PBR 材质时，在 3D 模型基础积分上额外扣除。",
  },
  {
    key: "creditCostPer3DModelSmartLowPoly",
    label: "智能低模",
    description: "勾选智能低模时额外扣除。",
  },
  {
    key: "creditCostPer3DModelQuad",
    label: "四边面优化",
    description: "勾选四边面优化时额外扣除。",
  },
];

const THREE_D_EDIT_POINT_FIELDS: Array<{
  key: PointsCostField;
  label: string;
  description: string;
}> = [
  {
    key: "creditCostPer3DModelRefine",
    label: "模型精修",
    description: "提交 refine_model 精修任务时扣除。",
  },
  {
    key: "creditCostPer3DModelTexture",
    label: "纹理重绘",
    description: "提交 texture_model 纹理重绘任务时扣除。",
  },
  {
    key: "creditCostPer3DModelAutoRig",
    label: "自动绑定",
    description: "提交 animate_rig 自动绑定任务时扣除。",
  },
  {
    key: "creditCostPer3DModelHighpolyToLowpoly",
    label: "模型减面",
    description: "提交 highpoly_to_lowpoly 减面任务时扣除。",
  },
];

const IMAGE_TOOL_POINT_FIELDS: Array<{
  key: PointsCostField;
  label: string;
  description: string;
}> = [
  {
    key: "creditCostPerImageMultiView",
    label: "多视角",
    description: "角色三视图 / 多机位九宫格等多视角图像生成时扣除。",
  },
  {
    key: "creditCostPerImageRemoveBackground",
    label: "抠图",
    description: "调用图片抠图功能时扣除。",
  },
  {
    key: "creditCostPerImageBoxCutout",
    label: "框选抠图",
    description: "调用框选抠图功能时扣除。",
  },
  {
    key: "creditCostPerImageWatermarkRemove",
    label: "去水印",
    description: "调用去水印功能并成功创建任务后扣除。",
  },
  {
    key: "creditCostPerImageExtend",
    label: "扩图",
    description: "调用图片拓展 / 扩图功能时扣除。",
  },
  {
    key: "creditCostPerImageRepaint",
    label: "重绘",
    description: "调用图片提示词重绘功能时扣除。",
  },
  {
    key: "creditCostPerImageAngleEdit",
    label: "多角度",
    description: "调用 fal.ai 多角度 / 角度编辑功能时扣除。",
  },
];

type AiModel = {
  id: string;
  providerId: string;
  modelId: string;
  displayName: string;
  avatarUrl?: string;
  description?: string;
  supportsVision: boolean;
  supportsImageGen: boolean;
  isEnabled: boolean;
  isHidden: boolean;
  isDefault: boolean;
  isDefaultTextEditModel?: boolean;
  isSubModel?: boolean;
  parentModelId?: string | null;
  sortOrder: number;
  fallbackModelId1?: string;
  fallbackModelId2?: string;
  excludeFromFailover?: boolean;
  excludeFromHealthBan?: boolean;
  healthStatus?: "healthy" | "degraded" | "auto_disabled";
  healthConsecutiveFailures?: number;
  healthLastEventType?: string | null;
  healthLastError?: string | null;
  healthLastFailureAt?: string | null;
  healthLastSuccessAt?: string | null;
  healthAutoDisabledAt?: string | null;
  healthAutoDisabledReason?: string | null;
  healthRecoverySuccessStreak?: number;
  healthObservationStartedAt?: string | null;
  isAgentModel?: boolean;
  agentCodingModelId?: string;
  isMultimodal?: boolean;
  capabilities?: Record<string, unknown> | null;
  imageGenConfig?: ImageGenConfig; // 🆕 图片生成特性配置
};

type AiModelHealthEvent = {
  id: string;
  modelId?: string | null;
  providerId?: string | null;
  modelRuntimeId?: string | null;
  modelDisplayName?: string | null;
  providerType?: string | null;
  providerName?: string | null;
  eventType: string;
  severity: string;
  context?: string | null;
  counted: boolean;
  consecutiveFailures: number;
  autoDisabled: boolean;
  elapsedMs?: number | null;
  requestId?: string | null;
  errorMessage?: string | null;
  createdAt: string;
};

type StorageConfig = {
  id: string;
  name: string;
  type: "s3" | "local" | "aliyun-oss" | "qiniu-kodo";
  endpoint?: string;
  region?: string;
  bucket?: string;
  accessKeyId?: string;
  secretAccessKey?: string;
  publicUrl?: string;
  isDefault: boolean;
  isEnabled: boolean;
};

type RealtimeCanvasModeIconConfig = {
  realtimeIconUrl: string;
  enhanceIconUrl: string;
  realtimeLabel: string;
  enhanceLabel: string;
};

type RealtimeCanvasModeIconKey = "realtimeIconUrl" | "enhanceIconUrl";

const CANVAS_TOOLBAR_FALLBACK_ICONS: Record<CanvasToolbarItemKey, LucideIcon> =
  {
    selectTool: MousePointer,
    panTool: Hand,
    saveCanvas: Save,
    cloudFiles: FolderOpen,
    markerPanel: Tag,
    workflowConnection: GitBranch,
    styleMode: Wand2,
    stylePro: Sparkles,
    batchProcessing: Layers,
    addImage: ImagePlus,
    addAgentImageSlot: ImagePlus,
    addImageInput: ImagePlus,
    addText: Type,
    addScriptNode: Type,
    addVideoInput: Video,
    workflowNodeLibrary: Grid3X3,
    realtimeCanvas: PenTool,
    enhanceCanvas: Sparkles,
    model3d: Box,
    exportVideoCanvas: Download,
    importVideoCanvas: Upload,
    newCanvas: Plus,
    newVideoCanvas: Plus,
    undo: Undo2,
    redo: Redo2,
    zoomOut: ZoomOut,
    resetZoom: RefreshCw,
    zoomIn: ZoomIn,
    downloadFolder: Download,
    imageNodeMore: MoreVertical,
    imageAddToChat: MessageSquarePlus,
    imagePickObject: Crosshair,
    imageEnhance: Sparkles,
    imageRemoveBackground: Scissors,
    imageBoxCutout: Scan,
    imageLocalEdit: Wand2,
    imageRemoveWatermark: Eraser,
    imageResize: Maximize2,
    imageTextEdit: Type,
    imageMultiAngle: Box,
    imageAdjust: SlidersHorizontal,
    imageFlipRotate: FlipHorizontal2,
    imageGenerate3dModel: Box,
    imageGenerate3dWorld: Globe2,
    imageLayerSplit: Layers,
    imageExtend: Expand,
    imageCrop: Crop,
    imagePromptRegenerate: RefreshCw,
    imageNote: StickyNote,
    imageRename: Edit,
    imageDownload: Download,
    imageDelete: Trash2,
    imageCompare: Scan,
    imageConfirmCutout: CheckCircle2,
    imageCancelCutout: X,
    textDelete: Trash2,
    uiScreenReview: Wand2,
    uiScreenDelete: Trash2,
    uiScreenSaveText: Check,
    videoUpload: Video,
    videoPlay: Play,
    videoPause: Pause,
    videoMute: Volume2,
    videoUnmute: VolumeX,
    videoMore: MoreVertical,
    videoDownload: Download,
    videoDelete: Trash2,
    workflowDelete: Trash2,
    model3dOpen3d: ExternalLink,
    model3dOpenWorld: Globe2,
    model3dMore: MoreVertical,
    model3dOpenMesh: Box,
    model3dOpenImage: ImageIcon,
    model3dDownload: Download,
    model3dCopy: Copy,
    model3dDelete: Trash2,
    world3dViewSplat: Sparkles,
    world3dViewImage: ImageIcon,
    world3dViewMesh: Box,
    world3dFirstPerson: Waypoints,
    world3dHotspot: Crosshair,
    world3dMore: MoreHorizontal,
    world3dOpenMesh: Box,
    world3dOpenImage: ImageIcon,
    world3dDownload: Download,
    world3dCopy: Copy,
    world3dDelete: Trash2,
    realtimeReturnCanvas: ArrowLeft,
    realtimeModeRealtime: Paintbrush,
    realtimeModeEnhance: Wand2,
    realtimeLayerPanel: Layers,
    realtimeLayerSplitImport: Layers,
    realtimeAddImageLayer: Upload,
    realtimeDownloadPreview: Download,
    realtimeSelectTool: MousePointer,
    realtimeBrushTool: Paintbrush,
    realtimeEraserTool: Eraser,
    realtimeShapeTool: Square,
    realtimeSaveProject: Save,
    realtimeProjectList: FolderOpen,
    realtimeNewBlank: Plus,
    realtimeGenerate: Sparkles,
    realtimeSendToCanvas: ArrowUp,
    chatModeAgentActive: Sparkles,
    chatModePresetAgent: Bot,
    chatModeAgentMenu: Sparkles,
    chatModeDetailActive: Grid3X3,
    chatModeDetailMenu: Grid3X3,
    chatModeImageActive: ImagePlus,
    chatModeImageMenu: ImagePlus,
    chatModeVideoActive: Video,
    chatModeVideoMenu: Video,
    chatAttach: Paperclip,
    chatDeepThinking: Brain,
    chatModelSelector: Bot,
    chatPoints: Sparkles,
    chatSend: ArrowUp,
    chatStartGeneration: Sparkles,
  };

const LOVART_HOME_SIDEBAR_FALLBACK_ICONS: Record<
  LovartHomeSidebarItemKey,
  LucideIcon
> = {
  newProject: Plus,
  home: Home,
  projects: FolderOpen,
  profile: User,
  gallery: ImageIcon,
  tutorial: Play,
  imageEditor: Edit,
  aiCad: Box,
  model3d: Box,
  scene: Layers3,
  agent: Wand2,
  videoCanvas: Video,
  flowBoard: GitBranch,
  productPlanning: BarChart3,
  toolbox1: Wrench,
  toolbox2: Wrench,
  settings: Settings,
};

type SiteSettings = {
  siteName: string;
  siteLogo: string | null;
  siteLogoDark: string | null;
  favicon: string | null;
  showAutoModel: boolean;
  usageTimeEnabled: boolean;
  usageTimeStart: string;
  usageTimeEnd: string;
  usageTimeMessage: string;
  defaultTheme: "light" | "dark" | "system";
  bannerEnabled: boolean;
  bannerText: string;
  bannerLink: string | null;
  bannerActionText: string;
  toolbox1Name: string;
  toolbox1Enabled: boolean;
  toolbox2Name: string;
  toolbox2Enabled: boolean;
  tutorialVideoUrl: string | null;
  tutorialEnabled: boolean;
  rankingEnabled: boolean;
  productPlanningEnabled: boolean;
  canvasEnabled: boolean;
  agentEnabled: boolean;
  canvasAgentModeEnabled: boolean;
  canvasAgentFeatureSettings: CanvasAgentFeatureSettings;
  videoCanvasEnabled: boolean;
  videoCanvasSidebarEnabled: boolean;
  agentCategoryTreeConfig: {
    productCategories: string[];
    audienceTags: string[];
    usageScenarios: string[];
    brands: string[];
  };
  agentSecondaryTypeConfig: {
    image: string[];
    video: string[];
    text: string[];
  };
  agentWorkflowUiConfig: AgentWorkflowUiConfig;
  realtimeCanvasEnabled: boolean;
  realtimeCanvasModeIconConfig: RealtimeCanvasModeIconConfig;
  canvasToolbarConfig: CanvasToolbarConfig;
  lovartHomeSidebarConfig: LovartHomeSidebarConfig;
  aiDetailGenerationEnabled: boolean;
  canvasDefaultModelId: string | null;
  canvasAutoModeDefaultModelId: string | null;
  agentWorkflowDefaultModelId: string | null;
  canvasDetailDefaultModelId: string | null;
  canvasDetailAgentModelId: string | null;
  lovartComposerPrefix: string;
  lovartComposerPreviewTexts: string[];
  lovartPromptTagVisibility: LovartPromptTagVisibility;
  contactConfig: ContactConfig;
  storageFailoverConfig: StorageFailoverConfig;
  ossImageMigrationConfig: OssImageMigrationConfig;
  pointsSystemConfig: PointsSystemConfig;
  pointsPackages: PointsPackage[];
  dulupayConfig: DulupayConfig;
  lovartPromoText: string;
  lovartPromoActionText: string;
  lovartHeroTitle: string;
  lovartHeroSubtitle: string;
  surpriseCategories: string[];
  membershipConfig: ReturnType<typeof normalizeMembershipConfig>;
  membershipUserOverrides: ReturnType<typeof normalizeMembershipUserOverrides>;
};

type LovartPromptTagVisibility = {
  nanoBananaPro: boolean;
  design: boolean;
  branding: boolean;
  illustration: boolean;
  ecommerce: boolean;
  video: boolean;
};

type ContactConfig = {
  phone: string;
  wechatQrUrl: string;
};

type StorageFailoverConfig = {
  enabled: boolean;
  backupStorageConfigId: string;
};

type OssImageMigrationConfig = {
  enabled: boolean;
  preferAliyunForUploads: boolean;
  sourceStorageConfigId: string;
  targetStorageConfigId: string;
  migrateAfterHours: number;
  cleanupAfterHours: number;
  batchSize: number;
};

type HomeAnimationConfig = {
  enabled: boolean;
  fileName: string;
  htmlContent: string;
  updatedAt: string | null;
};

const defaultLovartPromptTagVisibility: LovartPromptTagVisibility = {
  nanoBananaPro: true,
  design: true,
  branding: true,
  illustration: true,
  ecommerce: true,
  video: true,
};

function stableStringifyComparableValue(value: unknown): string {
  if (value === null || typeof value !== "object") {
    return JSON.stringify(value) ?? "null";
  }

  if (Array.isArray(value)) {
    return `[${value.map((item) => stableStringifyComparableValue(item)).join(",")}]`;
  }

  const entries = Object.entries(value as Record<string, unknown>)
    .filter(([, item]) => item !== undefined)
    .sort(([left], [right]) => left.localeCompare(right));

  return `{${entries
    .map(
      ([key, item]) =>
        `${JSON.stringify(key)}:${stableStringifyComparableValue(item)}`
    )
    .join(",")}}`;
}

function areComparableValuesEqual(left: unknown, right: unknown) {
  return (
    stableStringifyComparableValue(left) ===
    stableStringifyComparableValue(right)
  );
}

function pickChangedTopLevelFields<T extends Record<string, unknown>>(
  current: T,
  baseline: Partial<T> | null | undefined
) {
  if (!baseline) return { ...current };

  const changed: Partial<T> = {};
  for (const [key, value] of Object.entries(current) as Array<
    [keyof T, T[keyof T]]
  >) {
    if (!areComparableValuesEqual(value, baseline[key])) {
      changed[key] = value;
    }
  }
  return changed;
}

const defaultContactConfig: ContactConfig = {
  phone: "",
  wechatQrUrl: "",
};

const defaultRealtimeCanvasModeIconConfig: RealtimeCanvasModeIconConfig = {
  realtimeIconUrl: "",
  enhanceIconUrl: "",
  realtimeLabel: "实时画布模式",
  enhanceLabel: "图像增强模式",
};

function normalizeRealtimeCanvasModeIconConfig(
  value: unknown
): RealtimeCanvasModeIconConfig {
  const raw =
    value && typeof value === "object" && !Array.isArray(value)
      ? (value as Record<string, unknown>)
      : {};
  const normalizeLabel = (input: unknown, fallback: string) => {
    const label = String(input || "")
      .trim()
      .slice(0, 32);
    return label || fallback;
  };

  return {
    realtimeIconUrl: String(raw.realtimeIconUrl || "").trim(),
    enhanceIconUrl: String(raw.enhanceIconUrl || "").trim(),
    realtimeLabel: normalizeLabel(raw.realtimeLabel, "实时画布模式"),
    enhanceLabel: normalizeLabel(raw.enhanceLabel, "图像增强模式"),
  };
}

const defaultStorageFailoverConfig: StorageFailoverConfig = {
  enabled: false,
  backupStorageConfigId: "",
};

const defaultOssImageMigrationConfig: OssImageMigrationConfig = {
  enabled: true,
  preferAliyunForUploads: true,
  sourceStorageConfigId: "",
  targetStorageConfigId: "",
  migrateAfterHours: 48,
  cleanupAfterHours: 72,
  batchSize: 20,
};

const lovartPromptTagOptions: Array<{
  key: keyof LovartPromptTagVisibility;
  label: string;
}> = [
  { key: "nanoBananaPro", label: "Nano Banana Pro" },
  { key: "design", label: "Design" },
  { key: "branding", label: "Branding" },
  { key: "illustration", label: "Illustration" },
  { key: "ecommerce", label: "E-Commerce" },
  { key: "video", label: "Video" },
];

type NavLink = {
  id: string;
  name: string;
  url: string;
  order: number;
  isEnabled: boolean;
  toolboxGroup: number; // 1 或 2
};

type TutorialVideo = {
  id: string;
  title: string;
  videoUrl: string;
  coverUrl: string | null;
  description: string | null;
  order: number;
  isEnabled: boolean;
};

type DingTalkOrganization = {
  id: string;
  name: string;
  appKey: string;
  appSecret: string;
};

type AuthSettings = {
  // 保留单一配置用于兼容旧数据（后端会自动同步为第一个组织）
  dingTalkAppKey?: string | null;
  dingTalkAppSecret?: string | null;
  googleClientId?: string | null;
  googleClientSecret?: string | null;
  authUrl?: string | null;
  isDingTalkEnabled: boolean;
  isGoogleEnabled: boolean;
  isRegistrationEnabled?: boolean;
  isEmailVerificationEnabled?: boolean;
  emailVerificationExpiresMinutes?: number;
  resendApiKey?: string | null;
  resendFromEmail?: string | null;
  isEmailServiceConfigured?: boolean;
  dingTalkOrganizations: DingTalkOrganization[];
};

type GeneratedImageRecord = {
  id: string;
  sourceMessageId?: string;
  userId: string;
  userName: string | null;
  userEmail: string;
  userDepartment: string | null;
  thumbnailUrl: string;
  originalUrl: string;
  videoUrl?: string | null;
  recordType?: "image" | "video";
  imageSize: string | null;
  prompt: string | null;
  modelId: string | null;
  isFeatured: boolean;
  featuredCategory: string | null;
  featuredAt: string | null;
  createdAt: string;
  chatId: string | null;
};

type ImageAnalytics = {
  overview: {
    totalImages: number;
    totalUsers: number;
    todayImages: number;
    todayUsers: number;
    weekImages: number;
    weekUsers: number;
    monthImages: number;
    monthUsers: number;
  };
  userStats: Array<{
    userId: string;
    userName: string | null;
    userEmail: string;
    imageCount: number;
  }>;
  dailyStats: Array<{ date: string; count: number }>;
  sizeStats: Array<{ imageSize: string | null; count: number }>;
  modelStats: Array<{ modelId: string | null; count: number }>;
  modelDetailStats: Array<{
    modelId: string | null;
    count: number;
    userCount: number;
    modelName: string | null;
    providerName: string | null;
    providerType: string | null;
  }>;
  providerTypeStats: Array<{
    providerType: string | null;
    providerName: string | null;
    count: number;
  }>;
  modelTrendStats: Array<{
    date: string;
    modelId: string | null;
    modelName: string | null;
    providerName: string | null;
    providerType: string | null;
    count: number;
  }>;
  monthlyStats: Array<{ month: string; count: number }>;
  hourlyStats: Array<{ hour: number; count: number }>;
};

type RuntimeModelMeta = {
  modelName: string | null;
  providerName: string | null;
  providerType: string | null;
};

type RuntimeModelCandidate = RuntimeModelMeta & {
  modelId: string | null;
  isEnabled?: boolean;
  isHidden?: boolean;
  isDefault?: boolean;
  isSubModel?: boolean;
  sortOrder?: number | null;
};

const analyticsNumberFormatter = new Intl.NumberFormat("zh-CN");
const UUID_LIKE_REGEX =
  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;

function scoreRuntimeModelCandidate(candidate: RuntimeModelCandidate) {
  return (
    (candidate.isEnabled ? 100 : 0) +
    (!candidate.isHidden ? 20 : 0) +
    (!candidate.isSubModel ? 10 : 0) +
    (candidate.isDefault ? 8 : 0) +
    Math.max(0, 1000 - Number(candidate.sortOrder ?? 999))
  );
}

function buildRuntimeModelMetaMap(candidates: RuntimeModelCandidate[]) {
  const map = new Map<string, RuntimeModelMeta & { score: number }>();

  candidates.forEach((candidate) => {
    const modelId = String(candidate.modelId || "").trim();
    if (!modelId) return;
    const score = scoreRuntimeModelCandidate(candidate);
    const current = map.get(modelId);
    if (current && current.score >= score) return;
    map.set(modelId, {
      score,
      modelName: candidate.modelName || null,
      providerName: candidate.providerName || null,
      providerType: candidate.providerType || null,
    });
  });

  return map;
}

function resolveRuntimeModelMeta(
  runtimeModelMetaById: Map<string, RuntimeModelMeta & { score: number }>,
  modelId: string | null
): RuntimeModelMeta {
  if (!modelId) {
    return {
      modelName: null,
      providerName: null,
      providerType: null,
    };
  }

  const resolved = runtimeModelMetaById.get(modelId);
  return {
    modelName: resolved?.modelName || null,
    providerName: resolved?.providerName || null,
    providerType: resolved?.providerType || null,
  };
}

function formatAnalyticsNumber(value: number | null | undefined) {
  return analyticsNumberFormatter.format(value || 0);
}

function formatAnalyticsRatio(count: number, total: number) {
  if (!total) return "0%";
  return `${((count / total) * 100).toFixed(1)}%`;
}

function formatAnalyticsMonthLabel(value: string) {
  const [year, month] = String(value || "").split("-");
  if (!year || !month) return value || "本月";
  return `${year} 年 ${month} 月`;
}

function formatAnalyticsModelLabel(
  meta: RuntimeModelMeta | null | undefined,
  modelId: string | null | undefined
) {
  if (meta?.modelName) return meta.modelName;
  const normalizedModelId = String(modelId || "").trim();
  if (!normalizedModelId) return "未知模型";
  if (UUID_LIKE_REGEX.test(normalizedModelId)) return "未映射模型";
  return normalizedModelId;
}

const AVAILABLE_TOOLS = [
  { name: "getWeather", description: "获取天气信息" },
  { name: "createDocument", description: "创建文档" },
  { name: "updateDocument", description: "更新文档" },
  { name: "requestSuggestions", description: "请求文档建议" },
];

const PROVIDER_TYPES = [
  { value: "alibaba", label: "阿里云通义千问" },
  { value: "alibaba-image", label: "阿里生图模型" }, // 🆕 千问图片生成/编辑
  { value: "bfl-image", label: "BFL FLUX.2 图片编辑" },
  { value: "ruxa-image", label: "RUXA生图" },
  { value: "fal-image", label: "FAL 图片生成/编辑" },
  { value: "snapgen-image", label: "SnapGen 生图" },
  { value: "openai-image", label: "OpenAI 图片兼容" },
  { value: "bananaimage", label: "BananaImage 生图" },
  { value: "visionary", label: "Visionary 生图" },
  { value: "atlascloud", label: "Atlas Cloud 图片 / 视频 / 3D 模型" },
  { value: "vip98k", label: "VIP98K 混合模型服务" },
  { value: "stepfun-image", label: "阶跃星辰 Step Image Edit" },
  { value: "bltcy-video", label: "柏拉图统一视频" },
  { value: "grsai-gpt-image", label: "Grsai GPT Image" },
  { value: "grsai-video", label: "Grsai 视频模型" },
  { value: "midjourney", label: "Midjourney" },
  { value: "tripo-3d", label: "Tripo3D 模型生成" },
  { value: "worldlabs-3d", label: "World Labs 3D 世界生成" },
  { value: "kittycad-cad", label: "KittyCAD / Zoo CAD" },
  { value: "runway", label: "Runway API" },
  { value: "krea", label: "Krea API" },
  { value: "zhipu", label: "智普官方 4.7" },
  { value: "volcano-multimodal", label: "火山引擎多模态" },
  { value: "openai", label: "OpenAI 兼容" },
  { value: "custom", label: "自定义 OpenAI 兼容" },
  { value: "local", label: "本地模型" },
  { value: "gemini", label: "Gemini中转" },
  { value: "huanke-gemini", label: "环科Gemini生图" }, // 🆕 环科 Gemini 原生格式 API
  { value: "qianwen-video", label: "千问视频生成" },
  { value: "doubao-video", label: "豆包AI视频" },
  { value: "ruxa-video", label: "RUXA 视频生成" },
  { value: "volcano-vision", label: "火山引擎视觉" },
  { value: "volcano-video", label: "火山引擎视频" },
  { value: "fal-video", label: "FAL 视频生成" },
];

const PROVIDER_DEFAULT_BASE_URL: Record<string, string> = {
  alibaba: "https://dashscope.aliyuncs.com/compatible-mode/v1",
  "alibaba-image":
    "https://dashscope.aliyuncs.com/api/v1/services/aigc/multimodal-generation/generation",
  "bfl-image": "https://api.bfl.ai",
  "ruxa-image": "https://api.ruxa.ai",
  "fal-image": "https://fal.run",
  "snapgen-image": "https://api.snapgen.ai",
  "openai-image": "https://api.openai.com/v1",
  bananaimage: "https://bananaimage.aigenmedia.art",
  visionary: "https://api.visionary.beer",
  atlascloud: "https://api.atlascloud.ai",
  vip98k: "https://api.vip98k.com",
  "stepfun-image": "https://api.stepfun.com",
  "bltcy-video": "https://api.bltcy.ai",
  "grsai-gpt-image": "https://grsai.dakka.com.cn",
  "grsai-video": "https://grsai.dakka.com.cn",
  midjourney: "https://your-midjourney-api.example.com",
  "fal-video": "https://fal.run",
  "tripo-3d": "https://api.tripo3d.ai/v2/openapi",
  "worldlabs-3d": "https://api.vip98k.com",
  "kittycad-cad": "https://api.zoo.dev",
  runway: "https://api.dev.runwayml.com",
  krea: "https://api.krea.ai",
  zhipu: "https://open.bigmodel.cn/api/paas/v4",
  "volcano-multimodal": "https://ark.cn-beijing.volces.com/api/v3",
  openai: "https://api.openai.com/v1",
  "huanke-gemini": "https://api.huandutech.com/v1",
  "qianwen-video":
    "https://dashscope.aliyuncs.com/api/v1/services/aigc/video-generation",
  "doubao-video": "https://ark.cn-beijing.volces.com/api/v3",
  "ruxa-video": "https://api.ruxa.ai",
  "volcano-vision": "https://ark.cn-beijing.volces.com",
  "volcano-video": "https://ark.cn-beijing.volces.com/api/v3",
};

const LEMON_OPENAI_BASE_URL = "https://new.lemonapi.site/v1";
const HTTP_URL_REGEX = /^https?:\/\//i;
const TRAILING_SLASHES_REGEX = /\/+$/;
const TRAILING_V1_REGEX = /\/v1$/i;
const BLTCY_IMAGE_NORMALIZED_BASE_URL = BLTCY_IMAGE_OPENAI_BASE_URL.replace(
  TRAILING_SLASHES_REGEX,
  ""
);
const BLTCY_IMAGE_BASE_URL_WITHOUT_V1 = BLTCY_IMAGE_OPENAI_BASE_URL.replace(
  TRAILING_V1_REGEX,
  ""
);
const BLTCY_BFL_NORMALIZED_BASE_URL = BLTCY_BFL_BASE_URL.replace(
  TRAILING_SLASHES_REGEX,
  ""
);
const LEMON_PROVIDER_PRESET = {
  name: "LemonAPI Gemini",
  type: "openai" as const,
  baseUrl: LEMON_OPENAI_BASE_URL,
};

const LEMON_MODEL_PRESETS = [
  {
    modelId: "[L]gemini-3.1-pro-preview",
    displayName: "Gemini-3.1-pro-preview",
    supportsVision: true,
    supportsImageGen: false,
    isMultimodal: true,
    description: "LemonAPI OpenAI兼容 Gemini 3.1 Pro 预设模型",
  },
];

function getProviderDefaultBaseUrl(type?: string) {
  if (!type) return "";
  return PROVIDER_DEFAULT_BASE_URL[type] || "";
}

function isHttpUrlLike(value: string) {
  return HTTP_URL_REGEX.test(value.trim());
}

function isLemonApiBaseUrl(value?: string | null) {
  const normalized = String(value || "")
    .trim()
    .replace(TRAILING_SLASHES_REGEX, "");
  return normalized === LEMON_OPENAI_BASE_URL;
}

function isBltcyImageBaseUrl(value?: string | null) {
  const normalized = String(value || "")
    .trim()
    .replace(TRAILING_SLASHES_REGEX, "");
  return (
    normalized === BLTCY_IMAGE_NORMALIZED_BASE_URL ||
    normalized === BLTCY_IMAGE_BASE_URL_WITHOUT_V1
  );
}

function isBltcyBflBaseUrl(value?: string | null) {
  const normalized = String(value || "")
    .trim()
    .replace(TRAILING_SLASHES_REGEX, "");
  return (
    normalized === BLTCY_BFL_NORMALIZED_BASE_URL ||
    normalized === `${BLTCY_BFL_NORMALIZED_BASE_URL}/bfl` ||
    normalized === `${BLTCY_BFL_NORMALIZED_BASE_URL}/bfl/v1`
  );
}

function isMoonshotOfficialBaseUrl(value?: string | null) {
  return isDetailAgentLocalMoonshotBaseUrl(value);
}

export function AdminSettingsClient() {
  const [activeTab, setActiveTab] = useState("users");

  useEffect(() => {
    const requestedTab = new URLSearchParams(window.location.search).get("tab");
    if (
      requestedTab &&
      ADMIN_SETTINGS_NAV_ITEMS.some(
        (item) => item.value === requestedTab && !item.href
      )
    ) {
      setActiveTab(requestedTab);
    }
  }, []);

  const handleActiveTabChange = (value: string) => {
    setActiveTab(value);
    const url = new URL(window.location.href);
    url.searchParams.set("tab", value);
    window.history.replaceState(null, "", url);
  };

  // 用户管理状态
  const [userSearch, setUserSearch] = useState("");
  const [userPage, setUserPage] = useState(1);
  const [userLimit] = useState(10);
  const [giftPointsDraftByUser, setGiftPointsDraftByUser] = useState<
    Record<string, string>
  >({});
  const [deductPointsDraftByUser, setDeductPointsDraftByUser] = useState<
    Record<string, string>
  >({});

  // 批量设置出图限额状态
  const [showBatchLimitDialog, setShowBatchLimitDialog] = useState(false);
  const [batchLimitType, setBatchLimitType] = useState<
    "all" | "department" | "no_department"
  >("all");
  const [batchLimitValue, setBatchLimitValue] = useState<string>("");
  const [batchLimitDepartment, setBatchLimitDepartment] = useState<string>("");

  // 🆕 生图记录状态
  const [imageSearch, setImageSearch] = useState("");
  const [imagePage, setImagePage] = useState(1);
  const [imageStartDate, setImageStartDate] = useState("");
  const [imageEndDate, setImageEndDate] = useState("");
  const [selectedImage, setSelectedImage] =
    useState<GeneratedImageRecord | null>(null);

  // 🆕 数据分析状态
  const [selectedMonth, setSelectedMonth] = useState(() => {
    const now = new Date();
    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
  });
  const [selectedDate, setSelectedDate] = useState<string | null>(null); // 选中的日期，用于联动高峰时段
  const [hoveredBar, setHoveredBar] = useState<{
    type: string;
    index: number;
    value: number;
    label: string;
  } | null>(null);

  // API 数据获取
  const { data: usersData, mutate: mutateUsers } = useSWR<{
    users: User[];
    total: number;
    page: number;
    totalPages: number;
  }>(
    `/api/admin/users?page=${userPage}&limit=${userLimit}&search=${encodeURIComponent(userSearch)}`,
    fetcher
  );

  // 获取部门列表（用于批量设置）
  const { data: departmentsData } = useSWR<{ departments: string[] }>(
    "/api/admin/users/batch-limit",
    fetcher
  );
  const { data: providersData, mutate: mutateProviders } = useSWR<{
    providers: AiProvider[];
  }>("/api/admin/ai-providers", fetcher);
  const { data: modelsData, mutate: mutateModels } = useSWR<{
    models: AiModel[];
  }>("/api/admin/ai-models", fetcher);
  const { data: modelHealthData, mutate: mutateModelHealth } = useSWR<{
    events: AiModelHealthEvent[];
  }>("/api/admin/ai-model-health?limit=120", fetcher);
  const { data: storageData, mutate: mutateStorage } = useSWR<{
    configs: StorageConfig[];
  }>("/api/admin/storage", fetcher);
  const { data: siteSettingsData, mutate: mutateSiteSettings } =
    useSWR<SiteSettings>("/api/site-settings", fetcher);
  const { data: navLinksData, mutate: mutateNavLinks } = useSWR<{
    links: NavLink[];
  }>("/api/nav-links", fetcher);
  const { data: tutorialVideosData, mutate: mutateTutorialVideos } = useSWR<{
    videos: TutorialVideo[];
  }>("/api/tutorial-videos", fetcher);
  const { data: authSettingsData, mutate: mutateAuthSettings } = useSWR<any>(
    "/api/auth-settings",
    fetcher
  );
  const {
    data: moonshotDetailAgentSettingData,
    mutate: mutateMoonshotDetailAgentSetting,
  } = useSWR<{ setting?: { value?: unknown } }>(
    `/api/admin/settings?key=${DETAIL_AGENT_LOCAL_MOONSHOT_SETTING_KEY}`,
    fetcher
  );
  const {
    data: productPlanningAiModelConfigData,
    mutate: mutateProductPlanningAiModelConfig,
  } = useSWR<{ setting?: { value?: unknown } }>(
    `/api/admin/settings?key=${PRODUCT_PLANNING_AI_MODEL_CONFIG_KEY}`,
    fetcher
  );
  const {
    data: worldlabsKeyPoolConfigData,
    mutate: mutateWorldlabsKeyPoolConfig,
  } = useSWR<{ setting?: { value?: unknown } }>(
    `/api/admin/settings?key=${WORLDLABS_KEY_POOL_CONFIG_KEY}`,
    fetcher
  );
  const {
    data: dingTalkRobotNotificationConfigData,
    mutate: mutateDingTalkRobotNotificationConfig,
  } = useSWR<{ setting?: { value?: unknown } }>(
    `/api/admin/settings?key=${DINGTALK_ROBOT_NOTIFICATION_CONFIG_KEY}`,
    fetcher
  );
  const {
    data: dingTalkNotificationDraftData,
    mutate: mutateDingTalkNotificationDraft,
  } = useSWR<{ setting?: { value?: unknown } }>(
    `/api/admin/settings?key=${DINGTALK_NOTIFICATION_DRAFT_CONFIG_KEY}`,
    fetcher
  );
  const {
    data: dingTalkNotificationTasksData,
    mutate: mutateDingTalkNotificationTasks,
  } = useSWR<{ tasks?: AdminDingTalkNotificationTask[] }>(
    "/api/admin/dingtalk-robot/notifications?limit=30",
    fetcher
  );
  const {
    data: threeDModelAliasConfigData,
    mutate: mutateThreeDModelAliasConfig,
  } = useSWR<{ setting?: { value?: unknown } }>(
    `/api/admin/settings?key=${THREED_MODEL_ALIAS_CONFIG_SETTING_KEY}`,
    fetcher
  );
  const { data: enhanceProConfigData, mutate: mutateEnhanceProConfig } =
    useSWR<{ setting?: { value?: unknown } }>(
      `/api/admin/settings?key=${ENHANCE_PRO_KREA_SETTING_KEY}`,
      fetcher
    );
  const { data: aiWashConfigData, mutate: mutateAiWashConfig } = useSWR<{
    setting?: { value?: unknown };
  }>(`/api/admin/settings?key=${AI_WASH_CONFIG_KEY}`, fetcher);
  const {
    data: canvasLocalEditConfigData,
    mutate: mutateCanvasLocalEditConfig,
  } = useSWR<{ setting?: { value?: unknown } }>(
    `/api/admin/settings?key=${CANVAS_LOCAL_EDIT_CONFIG_KEY}`,
    fetcher
  );
  const {
    data: canvasImageTaskQueueConfigData,
    mutate: mutateCanvasImageTaskQueueConfig,
  } = useSWR<{ setting?: { value?: unknown } }>(
    `/api/admin/settings?key=${CANVAS_IMAGE_TASK_QUEUE_CONFIG_KEY}`,
    fetcher
  );
  const { data: homeAnimationSettingData, mutate: mutateHomeAnimationSetting } =
    useSWR<{ setting?: { value?: unknown } }>(
      `/api/admin/settings?key=${HOME_CHAT_ANIMATION_CONFIG_KEY}`,
      fetcher
    );
  const { data: openClawChatSettingData, mutate: mutateOpenClawChatSetting } =
    useSWR<{ setting?: { value?: unknown } }>(
      `/api/admin/settings?key=${OPENCLAW_CHAT_CONFIG_KEY}`,
      fetcher
    );

  // 🆕 生图记录数据
  const imageQueryParams = new URLSearchParams({
    page: imagePage.toString(),
    pageSize: "200",
    ...(imageSearch && { search: imageSearch }),
    ...(imageStartDate && { startDate: imageStartDate }),
    ...(imageEndDate && { endDate: imageEndDate }),
  });
  const { data: imagesData, mutate: mutateImages } = useSWR<{
    images: GeneratedImageRecord[];
    pagination: {
      page: number;
      pageSize: number;
      total: number;
      totalPages: number;
      totalImages?: number;
      totalVideos?: number;
    };
  }>(`/api/admin/images?${imageQueryParams}`, fetcher);

  // 🆕 生图数据分析
  const analyticsUrl =
    activeTab === "analytics"
      ? `/api/admin/images/analytics?month=${selectedMonth}${selectedDate ? `&date=${selectedDate}` : ""}`
      : null;
  const { data: analyticsData } = useSWR<ImageAnalytics>(analyticsUrl, fetcher);

  const runtimeModelMetaById = useMemo(() => {
    const providerMetaById = new Map<
      string,
      { providerName: string | null; providerType: string | null }
    >();
    (providersData?.providers || []).forEach((provider) => {
      providerMetaById.set(provider.id, {
        providerName: provider.name,
        providerType: provider.type,
      });
    });

    const candidates: RuntimeModelCandidate[] = [];

    (modelsData?.models || []).forEach((model) => {
      const providerMeta = providerMetaById.get(model.providerId);
      const sharedMeta = {
        modelId: model.modelId,
        modelName: model.displayName,
        providerName: providerMeta?.providerName || null,
        providerType: providerMeta?.providerType || null,
        isEnabled: model.isEnabled,
        isHidden: model.isHidden,
        isDefault: model.isDefault,
        isSubModel: model.isSubModel,
        sortOrder: model.sortOrder,
      };
      candidates.push(sharedMeta);
      candidates.push({
        ...sharedMeta,
        modelId: model.id,
      });
    });

    (analyticsData?.modelDetailStats || []).forEach((stat) => {
      candidates.push({
        modelId: stat.modelId,
        modelName: stat.modelName,
        providerName: stat.providerName,
        providerType: stat.providerType,
      });
    });

    (analyticsData?.modelTrendStats || []).forEach((stat) => {
      candidates.push({
        modelId: stat.modelId,
        modelName: stat.modelName,
        providerName: stat.providerName,
        providerType: stat.providerType,
      });
    });

    return buildRuntimeModelMetaMap(candidates);
  }, [
    analyticsData?.modelDetailStats,
    analyticsData?.modelTrendStats,
    modelsData?.models,
    providersData?.providers,
  ]);

  const analyticsOverviewCards = useMemo(() => {
    const currentMonth = `${new Date().getFullYear()}-${String(
      new Date().getMonth() + 1
    ).padStart(2, "0")}`;
    return [
      {
        key: "total-images",
        label: "总生成量",
        value: formatAnalyticsNumber(analyticsData?.overview.totalImages),
        note: "累计图片资产",
        icon: ImageIcon,
        tone: "from-zinc-950 via-zinc-900 to-zinc-800 text-white",
      },
      {
        key: "total-users",
        label: "活跃用户",
        value: formatAnalyticsNumber(analyticsData?.overview.totalUsers),
        note: "参与生成的用户数",
        icon: Users,
        tone: "from-emerald-500/15 via-emerald-500/5 to-transparent text-emerald-700 dark:text-emerald-200",
      },
      {
        key: "today-images",
        label: "今日生成",
        value: formatAnalyticsNumber(analyticsData?.overview.todayImages),
        note: `${formatAnalyticsNumber(analyticsData?.overview.todayUsers)} 位用户`,
        icon: TrendingUp,
        tone: "from-amber-500/20 via-amber-500/5 to-transparent text-amber-700 dark:text-amber-200",
      },
      {
        key: "month-images",
        label: selectedMonth === currentMonth ? "本月生成" : formatAnalyticsMonthLabel(selectedMonth),
        value: formatAnalyticsNumber(analyticsData?.overview.monthImages),
        note: `${formatAnalyticsNumber(analyticsData?.overview.monthUsers)} 位用户`,
        icon: Calendar,
        tone: "from-lime-400/25 via-lime-300/10 to-transparent text-lime-700 dark:text-lime-200",
      },
    ];
  }, [analyticsData?.overview, selectedMonth]);

  const analyticsPeakHour = useMemo(() => {
    return (analyticsData?.hourlyStats || []).reduce<{
      hour: number;
      count: number;
    } | null>((best, stat) => {
      if (!best || stat.count > best.count) {
        return { hour: stat.hour, count: stat.count };
      }
      return best;
    }, null);
  }, [analyticsData?.hourlyStats]);

  const analyticsRecentMonths = useMemo(
    () => analyticsData?.monthlyStats?.slice(-6) || [],
    [analyticsData?.monthlyStats]
  );

  const analyticsTrendDays = useMemo(() => {
    const grouped = new Map<
      string,
      {
        date: string;
        total: number;
        models: ImageAnalytics["modelTrendStats"];
      }
    >();

    (analyticsData?.modelTrendStats || []).forEach((stat) => {
      const current = grouped.get(stat.date) || {
        date: stat.date,
        total: 0,
        models: [],
      };
      current.total += stat.count;
      current.models.push(stat);
      grouped.set(stat.date, current);
    });

    return Array.from(grouped.values())
      .sort((left, right) => left.date.localeCompare(right.date))
      .slice(-7)
      .map((item) => ({
        ...item,
        models: [...item.models].sort((left, right) => right.count - left.count),
      }));
  }, [analyticsData?.modelTrendStats]);

  const analyticsModelTotal = useMemo(
    () =>
      (analyticsData?.modelDetailStats || []).reduce(
        (sum, stat) => sum + stat.count,
        0
      ),
    [analyticsData?.modelDetailStats]
  );

  const detailAgentModelOptions = useMemo(
    () =>
      (modelsData?.models || []).filter((model) => {
        if (model.supportsImageGen || !model.isEnabled) return false;
        const provider = (providersData?.providers || []).find(
          (item) => item.id === model.providerId
        );
        const descriptor = {
          providerType: provider?.type,
          modelId: model.modelId,
          capabilities: (model as any).capabilities,
          supportsImageGen: model.supportsImageGen,
        };
        return (
          !is3DModelDescriptor(descriptor) &&
          !isVideoModelDescriptor(descriptor)
        );
      }),
    [modelsData?.models, providersData?.providers]
  );
  const imageGenerationModelOptions = useMemo(
    () =>
      (modelsData?.models || []).filter(
        (model) =>
          model.supportsImageGen && model.isEnabled && !model.isSubModel
      ),
    [modelsData?.models]
  );
  const modelProviderNameById = useMemo(() => {
    const map = new Map<string, string>();
    (providersData?.providers || []).forEach((provider) => {
      map.set(provider.id, provider.name);
    });
    return map;
  }, [providersData?.providers]);
  const modelHealthEventsByModelId = useMemo(() => {
    const map = new Map<string, AiModelHealthEvent[]>();
    (modelHealthData?.events || []).forEach((event) => {
      const modelId = String(event.modelId || "");
      if (!modelId) return;
      const list = map.get(modelId) || [];
      if (list.length < 5) {
        list.push(event);
      }
      map.set(modelId, list);
    });
    return map;
  }, [modelHealthData?.events]);
  const recentCriticalModelHealthEvents = useMemo(
    () =>
      (modelHealthData?.events || [])
        .filter((event) => event.counted || event.autoDisabled)
        .slice(0, 12),
    [modelHealthData?.events]
  );

  // 网站设置状态
  const [siteSettings, setSiteSettings] = useState<SiteSettings>({
    siteName: "AI Chatbot",
    siteLogo: "",
    siteLogoDark: "",
    favicon: "",
    showAutoModel: true,
    usageTimeEnabled: false,
    usageTimeStart: "08:00",
    usageTimeEnd: "20:00",
    usageTimeMessage: "由壹点累了也是需要休息的",
    defaultTheme: "system",
    bannerEnabled: true,
    bannerText: "限时特惠：升级会员最高立享 45% OFF!",
    bannerLink: null,
    bannerActionText: "立即查看",
    toolbox1Name: "工具箱",
    toolbox1Enabled: true,
    toolbox2Name: "工具箱2",
    toolbox2Enabled: false,
    tutorialVideoUrl: null,
    tutorialEnabled: false,
    rankingEnabled: true,
    productPlanningEnabled: true,
    canvasEnabled: true,
    agentEnabled: true,
    canvasAgentModeEnabled: true,
    canvasAgentFeatureSettings: defaultCanvasAgentFeatureSettings,
    videoCanvasEnabled: true,
    videoCanvasSidebarEnabled: true,
    agentCategoryTreeConfig: {
      productCategories: [],
      audienceTags: [],
      usageScenarios: [],
      brands: [],
    },
    agentSecondaryTypeConfig: {
      image: [],
      video: [],
      text: [],
    },
    agentWorkflowUiConfig: defaultAgentWorkflowUiConfig,
    realtimeCanvasEnabled: true,
    realtimeCanvasModeIconConfig: defaultRealtimeCanvasModeIconConfig,
    canvasToolbarConfig: defaultCanvasToolbarConfig,
    lovartHomeSidebarConfig: defaultLovartHomeSidebarConfig,
    aiDetailGenerationEnabled: false,
    canvasDefaultModelId: null,
    canvasAutoModeDefaultModelId: null,
    agentWorkflowDefaultModelId: null,
    canvasDetailDefaultModelId: null,
    canvasDetailAgentModelId: null,
    lovartComposerPrefix: "让「由壹点AI」",
    lovartComposerPreviewTexts: [
      "打造引人注目的社交媒体视觉",
      "帮我把这张产品图做成高级电商海报",
      "基于参考图延展 3 套同风格方案",
    ],
    lovartPromptTagVisibility: defaultLovartPromptTagVisibility,
    contactConfig: defaultContactConfig,
    storageFailoverConfig: defaultStorageFailoverConfig,
    ossImageMigrationConfig: defaultOssImageMigrationConfig,
    pointsSystemConfig: defaultPointsSystemConfig,
    pointsPackages: defaultPointsPackages,
    dulupayConfig: defaultDulupayConfig,
    lovartPromoText:
      "现在升级，立享 Kling 3.0 与 Nano Banana Pro，最高 5 折优惠",
    lovartPromoActionText: "立即升级",
    lovartHeroTitle: "由壹点AI 让设计更简单",
    lovartHeroSubtitle: "懂你的设计代理，帮你搞定一切",
    surpriseCategories: ["全部", "精选"],
    membershipConfig: defaultMembershipConfig,
    membershipUserOverrides: defaultMembershipUserOverrides,
  });
  const [homeAnimationConfig, setHomeAnimationConfig] =
    useState<HomeAnimationConfig>({
      enabled: false,
      fileName: "",
      htmlContent: "",
      updatedAt: null,
    });
  const [openClawChatConfig, setOpenClawChatConfig] =
    useState<OpenClawChatConfig>({
      enabled: false,
      baseUrl: DEFAULT_OPENCLAW_CHAT_BASE_URL,
      token: "",
      timeoutMs: 600_000,
    });
  const [openClawChatTokenConfigured, setOpenClawChatTokenConfigured] =
    useState(false);
  const lastLoadedSiteSettingsRef = useRef<SiteSettings | null>(null);
  const lastLoadedHomeAnimationConfigRef = useRef<HomeAnimationConfig | null>(
    null
  );
  const [newOverrideUserId, setNewOverrideUserId] = useState("");
  const [newOverrideEmail, setNewOverrideEmail] = useState("");
  const [newOverridePlanId, setNewOverridePlanId] = useState("");
  const pointsSystemConfig = useMemo(
    () => normalizePointsSystemConfig(siteSettings.pointsSystemConfig),
    [siteSettings.pointsSystemConfig]
  );

  useEffect(() => {
    if (siteSettingsData) {
      const normalizedMembershipConfig = normalizeMembershipConfig(
        (siteSettingsData as any).membershipConfig
      );
      const normalizedMembershipOverrides = normalizeMembershipUserOverrides(
        (siteSettingsData as any).membershipUserOverrides
      );
      const normalizedPointsSystemConfig = normalizePointsSystemConfig(
        (siteSettingsData as any).pointsSystemConfig
      );
      const normalizedPointsPackages = normalizePointsPackages(
        (siteSettingsData as any).pointsPackages
      );
      const normalizedDulupayConfig = normalizeDulupayConfig(
        (siteSettingsData as any).dulupayConfig
      );

      const nextSiteSettings: SiteSettings = {
        siteName: siteSettingsData.siteName || "AI Chatbot",
        siteLogo: siteSettingsData.siteLogo || "",
        siteLogoDark: siteSettingsData.siteLogoDark || "",
        favicon: siteSettingsData.favicon || "",
        showAutoModel: siteSettingsData.showAutoModel ?? true,
        usageTimeEnabled: siteSettingsData.usageTimeEnabled ?? false,
        usageTimeStart: siteSettingsData.usageTimeStart || "08:00",
        usageTimeEnd: siteSettingsData.usageTimeEnd || "20:00",
        usageTimeMessage:
          siteSettingsData.usageTimeMessage || "由壹点累了也是需要休息的",
        defaultTheme: siteSettingsData.defaultTheme || "system",
        bannerEnabled: siteSettingsData.bannerEnabled ?? true,
        bannerText:
          siteSettingsData.bannerText || "限时特惠：升级会员最高立享 45% OFF!",
        bannerLink: siteSettingsData.bannerLink || null,
        bannerActionText: siteSettingsData.bannerActionText || "立即查看",
        toolbox1Name: siteSettingsData.toolbox1Name || "工具箱",
        toolbox1Enabled: siteSettingsData.toolbox1Enabled ?? true,
        toolbox2Name: siteSettingsData.toolbox2Name || "工具箱2",
        toolbox2Enabled: siteSettingsData.toolbox2Enabled ?? false,
        tutorialVideoUrl: siteSettingsData.tutorialVideoUrl || null,
        tutorialEnabled: siteSettingsData.tutorialEnabled ?? false,
        rankingEnabled: siteSettingsData.rankingEnabled ?? true,
        productPlanningEnabled:
          (siteSettingsData as any).productPlanningEnabled ?? true,
        canvasEnabled: siteSettingsData.canvasEnabled ?? true,
        agentEnabled: (siteSettingsData as any).agentEnabled ?? true,
        canvasAgentModeEnabled:
          (siteSettingsData as any).canvasAgentModeEnabled ?? true,
        canvasAgentFeatureSettings: normalizeCanvasAgentFeatureSettings(
          (siteSettingsData as any).canvasAgentFeatureSettings
        ),
        videoCanvasEnabled:
          (siteSettingsData as any).videoCanvasEnabled ??
          (siteSettingsData as any).videoCanvasSidebarEnabled ??
          true,
        videoCanvasSidebarEnabled:
          (siteSettingsData as any).videoCanvasSidebarEnabled ?? true,
        agentCategoryTreeConfig: {
          productCategories: Array.isArray(
            (siteSettingsData as any).agentCategoryTreeConfig?.productCategories
          )
            ? (siteSettingsData as any).agentCategoryTreeConfig
                .productCategories
            : [],
          audienceTags: Array.isArray(
            (siteSettingsData as any).agentCategoryTreeConfig?.audienceTags
          )
            ? (siteSettingsData as any).agentCategoryTreeConfig.audienceTags
            : [],
          usageScenarios: Array.isArray(
            (siteSettingsData as any).agentCategoryTreeConfig?.usageScenarios
          )
            ? (siteSettingsData as any).agentCategoryTreeConfig.usageScenarios
            : [],
          brands: Array.isArray(
            (siteSettingsData as any).agentCategoryTreeConfig?.brands
          )
            ? (siteSettingsData as any).agentCategoryTreeConfig.brands
            : [],
        },
        agentSecondaryTypeConfig: {
          image: Array.isArray(
            (siteSettingsData as any).agentSecondaryTypeConfig?.image
          )
            ? (siteSettingsData as any).agentSecondaryTypeConfig.image
            : [],
          video: Array.isArray(
            (siteSettingsData as any).agentSecondaryTypeConfig?.video
          )
            ? (siteSettingsData as any).agentSecondaryTypeConfig.video
            : [],
          text: Array.isArray(
            (siteSettingsData as any).agentSecondaryTypeConfig?.text
          )
            ? (siteSettingsData as any).agentSecondaryTypeConfig.text
            : [],
        },
        agentWorkflowUiConfig: normalizeAgentWorkflowUiConfig(
          (siteSettingsData as any).agentWorkflowUiConfig
        ),
        realtimeCanvasEnabled:
          (siteSettingsData as any).realtimeCanvasEnabled ?? true,
        realtimeCanvasModeIconConfig: normalizeRealtimeCanvasModeIconConfig(
          (siteSettingsData as any).realtimeCanvasModeIconConfig
        ),
        canvasToolbarConfig: normalizeCanvasToolbarConfig(
          (siteSettingsData as any).canvasToolbarConfig
        ),
        lovartHomeSidebarConfig: normalizeLovartHomeSidebarConfig(
          (siteSettingsData as any).lovartHomeSidebarConfig
        ),
        aiDetailGenerationEnabled:
          siteSettingsData.aiDetailGenerationEnabled ?? false,
        canvasDefaultModelId: siteSettingsData.canvasDefaultModelId || null,
        canvasAutoModeDefaultModelId:
          siteSettingsData.canvasAutoModeDefaultModelId || null,
        agentWorkflowDefaultModelId:
          (siteSettingsData as any).agentWorkflowDefaultModelId || null,
        canvasDetailDefaultModelId:
          siteSettingsData.canvasDetailDefaultModelId || null,
        canvasDetailAgentModelId:
          (siteSettingsData as any).canvasDetailAgentModelId || null,
        lovartComposerPrefix:
          String((siteSettingsData as any).lovartComposerPrefix || "").trim() ||
          "让「由壹点AI」",
        lovartComposerPreviewTexts: Array.isArray(
          siteSettingsData.lovartComposerPreviewTexts
        )
          ? siteSettingsData.lovartComposerPreviewTexts
              .map((item: any) => String(item).trim())
              .filter(Boolean)
          : [
              "打造引人注目的社交媒体视觉",
              "帮我把这张产品图做成高级电商海报",
              "基于参考图延展 3 套同风格方案",
            ],
        lovartPromptTagVisibility: {
          nanoBananaPro:
            (siteSettingsData as any).lovartPromptTagVisibility
              ?.nanoBananaPro !== false,
          design:
            (siteSettingsData as any).lovartPromptTagVisibility?.design !==
            false,
          branding:
            (siteSettingsData as any).lovartPromptTagVisibility?.branding !==
            false,
          illustration:
            (siteSettingsData as any).lovartPromptTagVisibility
              ?.illustration !== false,
          ecommerce:
            (siteSettingsData as any).lovartPromptTagVisibility?.ecommerce !==
            false,
          video:
            (siteSettingsData as any).lovartPromptTagVisibility?.video !==
            false,
        },
        contactConfig: {
          phone: String(
            (siteSettingsData as any).contactConfig?.phone || ""
          ).trim(),
          wechatQrUrl: String(
            (siteSettingsData as any).contactConfig?.wechatQrUrl || ""
          ).trim(),
        },
        storageFailoverConfig: {
          enabled:
            (siteSettingsData as any).storageFailoverConfig?.enabled === true,
          backupStorageConfigId: String(
            (siteSettingsData as any).storageFailoverConfig
              ?.backupStorageConfigId || ""
          ).trim(),
        },
        ossImageMigrationConfig: {
          enabled:
            (siteSettingsData as any).ossImageMigrationConfig?.enabled !==
            false,
          preferAliyunForUploads:
            (siteSettingsData as any).ossImageMigrationConfig
              ?.preferAliyunForUploads !== false,
          sourceStorageConfigId: String(
            (siteSettingsData as any).ossImageMigrationConfig
              ?.sourceStorageConfigId || ""
          ).trim(),
          targetStorageConfigId: String(
            (siteSettingsData as any).ossImageMigrationConfig
              ?.targetStorageConfigId || ""
          ).trim(),
          migrateAfterHours: Math.max(
            1,
            Math.min(
              720,
              Number(
                (siteSettingsData as any).ossImageMigrationConfig
                  ?.migrateAfterHours
              ) || defaultOssImageMigrationConfig.migrateAfterHours
            )
          ),
          cleanupAfterHours: Math.max(
            2,
            Math.min(
              1440,
              Number(
                (siteSettingsData as any).ossImageMigrationConfig
                  ?.cleanupAfterHours
              ) || defaultOssImageMigrationConfig.cleanupAfterHours
            )
          ),
          batchSize: Math.max(
            1,
            Math.min(
              100,
              Number(
                (siteSettingsData as any).ossImageMigrationConfig?.batchSize
              ) || defaultOssImageMigrationConfig.batchSize
            )
          ),
        },
        pointsSystemConfig: normalizedPointsSystemConfig,
        pointsPackages: normalizedPointsPackages,
        dulupayConfig: normalizedDulupayConfig,
        lovartPromoText:
          siteSettingsData.lovartPromoText ||
          "现在升级，立享 Kling 3.0 与 Nano Banana Pro，最高 5 折优惠",
        lovartPromoActionText:
          siteSettingsData.lovartPromoActionText || "立即升级",
        lovartHeroTitle:
          siteSettingsData.lovartHeroTitle || "由壹点AI 让设计更简单",
        lovartHeroSubtitle:
          siteSettingsData.lovartHeroSubtitle || "懂你的设计代理，帮你搞定一切",
        surpriseCategories: Array.isArray(siteSettingsData.surpriseCategories)
          ? siteSettingsData.surpriseCategories
              .map((item: any) => String(item).trim())
              .filter(Boolean)
          : ["全部", "惊喜"],
        membershipConfig: normalizedMembershipConfig,
        membershipUserOverrides: normalizedMembershipOverrides,
      };
      setSiteSettings(nextSiteSettings);
      lastLoadedSiteSettingsRef.current = nextSiteSettings;
    }
  }, [siteSettingsData]);

  useEffect(() => {
    const raw =
      homeAnimationSettingData?.setting?.value &&
      typeof homeAnimationSettingData.setting.value === "object" &&
      !Array.isArray(homeAnimationSettingData.setting.value)
        ? (homeAnimationSettingData.setting.value as Record<string, unknown>)
        : {};

    const nextHomeAnimationConfig = {
      enabled: raw.enabled === true,
      fileName: String(raw.fileName || "").trim(),
      htmlContent:
        typeof raw.htmlContent === "string"
          ? raw.htmlContent.replace(/^\uFEFF/, "").replace(/\u0000/g, "")
          : "",
      updatedAt: String(raw.updatedAt || "").trim() || null,
    };
    setHomeAnimationConfig(nextHomeAnimationConfig);
    lastLoadedHomeAnimationConfigRef.current = nextHomeAnimationConfig;
  }, [homeAnimationSettingData]);

  useEffect(() => {
    const raw =
      openClawChatSettingData?.setting?.value &&
      typeof openClawChatSettingData.setting.value === "object" &&
      !Array.isArray(openClawChatSettingData.setting.value)
        ? (openClawChatSettingData.setting.value as Record<string, unknown>)
        : {};

    setOpenClawChatConfig({
      enabled: raw.enabled === true,
      baseUrl:
        String(raw.baseUrl || "").trim() || DEFAULT_OPENCLAW_CHAT_BASE_URL,
      token: "",
      timeoutMs: Math.min(
        600_000,
        Math.max(5_000, Math.round(Number(raw.timeoutMs) || 600_000))
      ),
    });
    setOpenClawChatTokenConfigured(
      raw.hasToken === true || Boolean(String(raw.token || "").trim())
    );
  }, [openClawChatSettingData]);

  useEffect(() => {
    const normalized = normalizeDetailAgentLocalMoonshotConfig(
      moonshotDetailAgentSettingData?.setting?.value
    );
    setMoonshotDetailAgentConfig({
      providerId: "",
      modelEntryId: "",
      providerName: normalized.providerName,
      baseUrl: normalized.baseUrl,
      apiKey: "",
      modelId: normalized.modelId,
      displayName: normalized.displayName,
      isEnabled: normalized.enabled,
    });
  }, [moonshotDetailAgentSettingData]);

  const featuredCategoryOptions = useMemo(() => {
    const values = (siteSettings.surpriseCategories || [])
      .map((item) => String(item || "").trim())
      .filter((item) => item && item !== "全部");
    return Array.from(new Set(values));
  }, [siteSettings.surpriseCategories]);

  // 抠图API配置状态
  const [rmbgConfig, setRmbgConfig] = useState({
    provider: "vip98k" as "vip98k" | "rmbg" | "photoroom" | "aoscdn", // 抠图服务提供商
    apiUrl: "",
    apiKey: "",
    // PhotoRoom 配置
    photoroomApiKey: "",
    // AOS 配置
    aosApiKey: "",
    aosApiBaseUrl: "https://techsz.aoscdn.com",
    aosForegroundType: "auto" as "auto" | "person" | "object" | "stamp",
    aosCrop: false,
    aosFormat: "png" as "png" | "jpg",
  });

  // 变清晰API配置状态
  const [enhanceConfig, setEnhanceConfig] = useState({
    provider: "vip98k" as "vip98k" | "legacy",
    apiUrl: "",
    apiKey: "",
    type: "clean", // "clean" | "face"
    scaleFactor: "auto", // "auto" | "1" | "2" | "4"
    // 备用API配置 (Real-ESRGAN)
    useBackupApi: false, // 是否启用备用API
    backupApiUrl: "http://156.225.27.52:5233", // 备用API地址
    backupApiKey: "", // 备用API密钥
    backupScale: "4", // 备用API放大倍数 "2" | "4" | "8"
    backupModel: "RealESRGAN_x4plus", // 备用API模型
  });
  const [enhanceProConfig, setEnhanceProConfig] = useState(
    defaultEnhanceProKreaConfig()
  );
  const [enhanceProApiKeysDraft, setEnhanceProApiKeysDraft] = useState("");
  const [enhanceProPresetEditorMode, setEnhanceProPresetEditorMode] = useState<
    "simple" | "advanced"
  >("simple");
  const [selectedEnhanceProPresetId, setSelectedEnhanceProPresetId] =
    useState("");
  const [draggingEnhanceProPresetId, setDraggingEnhanceProPresetId] =
    useState("");
  const [aiWashConfig, setAiWashConfig] = useState(defaultAiWashConfig());
  const [canvasLocalEditConfig, setCanvasLocalEditConfig] = useState(
    defaultCanvasLocalEditConfig()
  );

  // 图像拓展API配置状态
  const [extendConfig, setExtendConfig] = useState({
    provider: "vip98k" as "vip98k" | "dashscope",
    apiKey: "",
    xScale: "1.5", // X轴放大倍数
    yScale: "1.5", // Y轴放大倍数
  });

  // 去水印API配置状态
  const [watermarkRemoveConfig, setWatermarkRemoveConfig] = useState({
    apiKey: "", // PicWish API密钥
  });

  // 角度编辑API配置状态
  const [angleEditConfig, setAngleEditConfig] = useState({
    enabled: false,
    falApiKey: "",
    loraScale: 1.0, // 官方默认值
    inferenceSteps: 28,
    guidanceScale: 4.5, // 官方默认值
    maxImageSize: 10,
    timeout: 120,
  });

  const [layerSplitConfig, setLayerSplitConfig] = useState({
    enabled: false,
    provider: "replicate" as const,
    replicateApiToken: "",
    replicateModel: "qwen/qwen-image-layered",
    layers: 4,
    resolution: 640,
    trueCfgScale: 4,
    numInferenceSteps: 30,
    cfgNormalize: true,
    useEnPrompt: true,
    negativePrompt: "",
    timeoutMs: 300_000,
  });

  // 实时画布API配置状态
  const [realtimeCanvasConfig, setRealtimeCanvasConfig] = useState({
    enabled: true,
    providerType: "bfl" as "bfl" | "replicate" | "fal",
    bflApiKey: "",
    bflBaseUrl: DEFAULT_BFL_BASE_URL,
    bflModel: DEFAULT_BFL_REALTIME_MODEL,
    falApiKey: "",
    falModel: "",
    falBaseUrl: "https://fal.run",
    replicateApiToken: "",
    replicateModel: "black-forest-labs/flux-2-klein-4b",
    fallbackEnabled: false,
    fallbackProviderType: "bfl" as "bfl" | "replicate" | "fal",
    fallbackBflApiKey: "",
    fallbackBflBaseUrl: DEFAULT_BFL_BASE_URL,
    fallbackBflModel: DEFAULT_BFL_REALTIME_MODEL,
    fallbackFalApiKey: "",
    fallbackFalModel: "",
    fallbackFalBaseUrl: "https://fal.run",
    fallbackReplicateApiToken: "",
    fallbackReplicateModel: "black-forest-labs/flux-2-klein-4b",
    renderMode: "balanced" as "strict-structure" | "balanced" | "stylize",
    throttleInterval: 100,
    maxBuffering: 2,
    maxInputResolution: 1024,
    jpegQuality: 0.55,
    previewMegapixels: 0.4,
    detailMegapixels: 1.0,
    outputJpegQuality: 62,
    steps: 3,
    scheduleMu: 2.3,
    feedback: 0.95,
    imageSize: "square" as "square" | "square_hd",
  });

  // 批量处理配置状态
  const [sceneFusionConfig, setSceneFusionConfig] = useState({
    enabled: true,
    preRmbgEnabled: true,
    defaultPrompt:
      "将图1的产品替换到图2的场景中，保持图1产品的外观、颜色和细节不变，自然融合到图2的环境中。",
    maxScenes: 10,
    modelId: "", // 首选生图模型ID（多样性模式下优先尝试）
  });
  const [canvasImageTaskQueueConfig, setCanvasImageTaskQueueConfig] =
    useState<CanvasImageTaskQueueConfig>(() =>
      normalizeCanvasImageTaskQueueConfig({
        concurrency: DEFAULT_CANVAS_IMAGE_TASK_CONCURRENCY,
        batchDispatchIntervalMs:
          DEFAULT_CANVAS_IMAGE_BATCH_DISPATCH_INTERVAL_MS,
      })
    );

  const [tripo3dConfig, setTripo3dConfig] = useState({
    providerId: "",
    name: "Tripo3D",
    baseUrl: getProviderDefaultBaseUrl("tripo-3d"),
    apiKey: "",
    isEnabled: true,
  });
  const [worldlabs3dConfig, setWorldlabs3dConfig] = useState({
    providerId: "",
    name: "World Labs",
    baseUrl: getProviderDefaultBaseUrl("worldlabs-3d"),
    apiKey: "",
    isEnabled: true,
  });
  const [worldlabsKeyPoolConfig, setWorldlabsKeyPoolConfig] = useState(
    defaultWorldLabsKeyPoolConfig
  );
  const [worldlabsApiKeysDraft, setWorldlabsApiKeysDraft] = useState("");
  const [threeDModelAliasConfig, setThreeDModelAliasConfig] = useState(
    defaultThreeDModelAliasConfig()
  );
  const [tripoProviderSearch, setTripoProviderSearch] = useState("");
  const [tripoProviderBusyId, setTripoProviderBusyId] = useState<string | null>(
    null
  );
  const [worldlabsProviderSearch, setWorldlabsProviderSearch] = useState("");
  const [worldlabsProviderBusyId, setWorldlabsProviderBusyId] = useState<
    string | null
  >(null);
  const [kittycadCadConfig, setKittycadCadConfig] = useState({
    providerId: "",
    name: "KittyCAD CAD",
    baseUrl: getProviderDefaultBaseUrl("kittycad-cad"),
    apiKey: "",
    isEnabled: true,
  });
  const [isTestingKittycadCad, setIsTestingKittycadCad] = useState(false);
  const [moonshotDetailAgentConfig, setMoonshotDetailAgentConfig] = useState({
    providerId: "",
    modelEntryId: "",
    providerName: "Kimi Code 编程套餐",
    baseUrl: DETAIL_AGENT_LOCAL_MOONSHOT_BASE_URL,
    apiKey: "",
    modelId: DETAIL_AGENT_LOCAL_MOONSHOT_MODEL_ID,
    displayName: DETAIL_AGENT_LOCAL_MOONSHOT_DISPLAY_NAME,
    isEnabled: true,
  });
  const [thirdPartySqlServerConfig, setThirdPartySqlServerConfig] = useState({
    ...defaultThirdPartySqlServerConfig,
  });
  const [isTestingThirdPartySqlServer, setIsTestingThirdPartySqlServer] =
    useState(false);
  const [expandedLocalAiSections, setExpandedLocalAiSections] = useState<
    Record<string, boolean>
  >(loadLocalAiExpandedSections);
  const [
    isThirdPartySqlServerFieldsVisible,
    setIsThirdPartySqlServerFieldsVisible,
  ] = useState(false);
  const [productPlanningApiConfig, setProductPlanningApiConfig] =
    useState<ProductPlanningApiConfig>(defaultProductPlanningApiConfig());
  const [productPlanningAiModelConfig, setProductPlanningAiModelConfig] =
    useState<ProductPlanningAiModelConfig>(
      defaultProductPlanningAiModelConfig()
    );

  // 加载抠图API配置
  const { data: rmbgConfigData } = useSWR(
    "/api/admin/settings?key=rmbg_api_config",
    fetcher
  );
  useEffect(() => {
    if (rmbgConfigData?.setting?.value) {
      const config = rmbgConfigData.setting.value as {
        provider?: "vip98k" | "rmbg" | "photoroom" | "aoscdn";
        apiUrl?: string;
        apiKey?: string;
        photoroomApiKey?: string;
        aosApiKey?: string;
        aosApiBaseUrl?: string;
        aosForegroundType?: "" | "person" | "object" | "stamp";
        aosCrop?: 0 | 1;
        aosFormat?: "png" | "jpg";
      };
      setRmbgConfig({
        provider: config.provider || "vip98k",
        apiUrl: config.apiUrl || "",
        apiKey: config.apiKey || "",
        photoroomApiKey: config.photoroomApiKey || "",
        aosApiKey: config.aosApiKey || "",
        aosApiBaseUrl: config.aosApiBaseUrl || "https://techsz.aoscdn.com",
        aosForegroundType:
          config.aosForegroundType === "person" ||
          config.aosForegroundType === "object" ||
          config.aosForegroundType === "stamp"
            ? config.aosForegroundType
            : "auto",
        aosCrop: config.aosCrop === 1,
        aosFormat: config.aosFormat === "jpg" ? "jpg" : "png",
      });
    }
  }, [rmbgConfigData]);

  // 加载变清晰API配置
  const { data: enhanceConfigData } = useSWR(
    "/api/admin/settings?key=enhance_api_config",
    fetcher
  );
  useEffect(() => {
    if (enhanceConfigData?.setting?.value) {
      const config = enhanceConfigData.setting.value as {
        provider?: "vip98k" | "legacy";
        apiUrl?: string;
        apiKey?: string;
        type?: string;
        scaleFactor?: number;
        useBackupApi?: boolean;
        backupApiUrl?: string;
        backupApiKey?: string;
        backupScale?: string;
        backupModel?: string;
      };
      setEnhanceConfig({
        provider: config.provider === "vip98k" ? "vip98k" : "legacy",
        apiUrl: config.apiUrl || "",
        apiKey: config.apiKey || "",
        type: config.type || "clean",
        scaleFactor: config.scaleFactor ? String(config.scaleFactor) : "auto",
        useBackupApi: config.useBackupApi || false,
        backupApiUrl: config.backupApiUrl || "http://156.225.27.52:5233",
        backupApiKey: config.backupApiKey || "",
        backupScale: config.backupScale || "4",
        backupModel: config.backupModel || "RealESRGAN_x4plus",
      });
    }
  }, [enhanceConfigData]);

  useEffect(() => {
    if (!enhanceProConfigData) return;
    setEnhanceProConfig(
      normalizeEnhanceProKreaConfig(enhanceProConfigData.setting?.value)
    );
    setEnhanceProApiKeysDraft("");
  }, [enhanceProConfigData]);

  useEffect(() => {
    if (!aiWashConfigData) return;
    setAiWashConfig(normalizeAiWashConfig(aiWashConfigData.setting?.value));
  }, [aiWashConfigData]);

  useEffect(() => {
    if (!canvasLocalEditConfigData) return;
    setCanvasLocalEditConfig(
      normalizeCanvasLocalEditConfig(canvasLocalEditConfigData.setting?.value)
    );
  }, [canvasLocalEditConfigData]);

  const enhanceProApiKeysDraftCount = useMemo(
    () =>
      normalizeEnhanceProKreaConfig({
        apiKeys: enhanceProApiKeysDraft,
      }).apiKeys.length,
    [enhanceProApiKeysDraft]
  );
  const savedEnhanceProKeyRows = useMemo(
    () =>
      enhanceProConfig.apiKeys.map((apiKey, index) => ({
        id: `saved-enhance-pro-key-${index}-${apiKey.slice(-6)}`,
        index,
        name: `Krea Key ${index + 1}`,
        maskedKey: maskAdminSecret(apiKey),
      })),
    [enhanceProConfig.apiKeys]
  );
  const draftEnhanceProKeyRows = useMemo(
    () =>
      normalizeEnhanceProKreaConfig({
        apiKeys: enhanceProApiKeysDraft,
      }).apiKeys.map((apiKey, index) => ({
        id: `draft-enhance-pro-key-${index}-${apiKey.slice(-6)}`,
        name: `待保存 Key ${index + 1}`,
        maskedKey: maskAdminSecret(apiKey),
      })),
    [enhanceProApiKeysDraft]
  );

  useEffect(() => {
    if (enhanceProConfig.presets.length === 0) {
      if (selectedEnhanceProPresetId) {
        setSelectedEnhanceProPresetId("");
      }
      return;
    }

    const selectedExists = enhanceProConfig.presets.some(
      (preset) => preset.id === selectedEnhanceProPresetId
    );
    if (selectedExists) {
      return;
    }

    const fallbackPreset =
      enhanceProConfig.presets.find((preset) => preset.isDefault) ||
      enhanceProConfig.presets[0];
    setSelectedEnhanceProPresetId(fallbackPreset?.id || "");
  }, [enhanceProConfig.presets, selectedEnhanceProPresetId]);

  const selectedEnhanceProPresetIndex = useMemo(
    () =>
      enhanceProConfig.presets.findIndex(
        (preset) => preset.id === selectedEnhanceProPresetId
      ),
    [enhanceProConfig.presets, selectedEnhanceProPresetId]
  );

  const selectedEnhanceProPreset =
    selectedEnhanceProPresetIndex >= 0
      ? enhanceProConfig.presets[selectedEnhanceProPresetIndex]
      : null;

  // 加载图像拓展API配置
  const { data: extendConfigData } = useSWR(
    "/api/admin/settings?key=extend_api_config",
    fetcher
  );
  useEffect(() => {
    if (extendConfigData?.setting?.value) {
      const config = extendConfigData.setting.value as {
        provider?: "vip98k" | "dashscope";
        apiKey?: string;
        xScale?: number;
        yScale?: number;
      };
      setExtendConfig({
        provider: config.provider === "vip98k" ? "vip98k" : "dashscope",
        apiKey: config.apiKey || "",
        xScale: config.xScale ? String(config.xScale) : "1.5",
        yScale: config.yScale ? String(config.yScale) : "1.5",
      });
    }
  }, [extendConfigData]);

  // 加载去水印API配置
  const { data: watermarkRemoveConfigData } = useSWR(
    "/api/admin/settings?key=watermark_remove_config",
    fetcher
  );
  useEffect(() => {
    if (watermarkRemoveConfigData?.setting?.value) {
      const config = watermarkRemoveConfigData.setting.value as {
        apiKey?: string;
      };
      setWatermarkRemoveConfig({
        apiKey: config.apiKey || "",
      });
    }
  }, [watermarkRemoveConfigData]);

  const { data: productPlanningApiConfigData } = useSWR(
    `/api/admin/settings?key=${PRODUCT_PLANNING_API_CONFIG_KEY}`,
    fetcher
  );
  useEffect(() => {
    setProductPlanningApiConfig(
      normalizeProductPlanningApiConfig(
        productPlanningApiConfigData?.setting?.value
      )
    );
  }, [productPlanningApiConfigData]);

  useEffect(() => {
    setProductPlanningAiModelConfig(
      normalizeProductPlanningAiModelConfig(
        productPlanningAiModelConfigData?.setting?.value
      )
    );
  }, [productPlanningAiModelConfigData]);

  // 加载角度编辑API配置
  const { data: angleEditConfigData } = useSWR(
    "/api/admin/settings?key=angle_edit_config",
    fetcher
  );
  useEffect(() => {
    if (angleEditConfigData?.setting?.value) {
      const config = angleEditConfigData.setting.value as {
        enabled?: boolean;
        falApiKey?: string;
        loraScale?: number;
        inferenceSteps?: number;
        guidanceScale?: number;
        maxImageSize?: number;
        timeout?: number;
      };
      setAngleEditConfig({
        enabled: config.enabled || false,
        falApiKey: config.falApiKey || "",
        loraScale: config.loraScale ?? 1.0,
        inferenceSteps: config.inferenceSteps ?? 28,
        guidanceScale: config.guidanceScale ?? 4.5,
        maxImageSize: config.maxImageSize ?? 10,
        timeout: config.timeout ?? 120,
      });
    }
  }, [angleEditConfigData]);

  const { data: layerSplitConfigData } = useSWR(
    "/api/admin/settings?key=layer_split_config",
    fetcher
  );
  useEffect(() => {
    if (layerSplitConfigData?.setting?.value) {
      const config = layerSplitConfigData.setting.value as {
        enabled?: boolean;
        provider?: "replicate";
        replicateApiToken?: string;
        replicateModel?: string;
        layers?: number;
        resolution?: number;
        trueCfgScale?: number;
        numInferenceSteps?: number;
        cfgNormalize?: boolean;
        useEnPrompt?: boolean;
        negativePrompt?: string;
        timeoutMs?: number;
      };
      setLayerSplitConfig({
        enabled: config.enabled === true,
        provider: "replicate",
        replicateApiToken: config.replicateApiToken || "",
        replicateModel: config.replicateModel || "qwen/qwen-image-layered",
        layers: Math.max(2, Math.min(12, Number(config.layers) || 4)),
        resolution: Math.max(
          256,
          Math.min(1536, Number(config.resolution) || 640)
        ),
        trueCfgScale: Math.max(
          1,
          Math.min(12, Number(config.trueCfgScale) || 4)
        ),
        numInferenceSteps: Math.max(
          1,
          Math.min(80, Number(config.numInferenceSteps) || 30)
        ),
        cfgNormalize: config.cfgNormalize !== false,
        useEnPrompt: config.useEnPrompt !== false,
        negativePrompt: config.negativePrompt || "",
        timeoutMs: Math.max(
          30_000,
          Math.min(900_000, Number(config.timeoutMs) || 300_000)
        ),
      });
    }
  }, [layerSplitConfigData]);

  const { data: thirdPartySqlServerConfigData } = useSWR(
    `/api/admin/settings?key=${THIRD_PARTY_SQLSERVER_CONFIG_KEY}`,
    fetcher
  );
  useEffect(() => {
    if (thirdPartySqlServerConfigData?.setting?.value) {
      const config = thirdPartySqlServerConfigData.setting.value as {
        enabled?: boolean;
        host?: string;
        port?: number;
        database?: string;
        username?: string;
        password?: string;
        encrypt?: boolean;
        trustServerCertificate?: boolean;
        connectionTimeoutMs?: number;
        requestTimeoutMs?: number;
      };
      setThirdPartySqlServerConfig({
        enabled: config.enabled !== false,
        host: config.host || "",
        port: Math.max(1, Math.min(65_535, Number(config.port) || 1433)),
        database: config.database || "",
        username: config.username || "",
        password: config.password || "",
        encrypt: config.encrypt === true,
        trustServerCertificate: config.trustServerCertificate !== false,
        connectionTimeoutMs: Math.max(
          1000,
          Math.min(120_000, Number(config.connectionTimeoutMs) || 15_000)
        ),
        requestTimeoutMs: Math.max(
          1000,
          Math.min(120_000, Number(config.requestTimeoutMs) || 30_000)
        ),
      });
    }
  }, [thirdPartySqlServerConfigData]);

  const isThirdPartySqlServerSectionExpanded = Boolean(
    expandedLocalAiSections["third-party-sqlserver"]
  );

  useEffect(() => {
    if (!isThirdPartySqlServerSectionExpanded) {
      setIsThirdPartySqlServerFieldsVisible(false);
    }
  }, [isThirdPartySqlServerSectionExpanded]);

  // 加载实时画布API配置
  const { data: realtimeCanvasConfigData } = useSWR(
    "/api/admin/settings?key=realtime_canvas_config",
    fetcher
  );
  useEffect(() => {
    if (realtimeCanvasConfigData?.setting?.value) {
      const config = realtimeCanvasConfigData.setting.value as {
        enabled?: boolean;
        providerType?: "bfl" | "replicate" | "fal";
        bflApiKey?: string;
        bflBaseUrl?: string;
        bflModel?: string;
        falApiKey?: string;
        falBaseUrl?: string;
        falModel?: string;
        replicateApiToken?: string;
        replicateModel?: string;
        fallbackEnabled?: boolean;
        fallbackProviderType?: "bfl" | "replicate" | "fal";
        fallbackBflApiKey?: string;
        fallbackBflBaseUrl?: string;
        fallbackBflModel?: string;
        fallbackRunwareApiKey?: string;
        fallbackFalApiKey?: string;
        fallbackFalBaseUrl?: string;
        fallbackFalModel?: string;
        fallbackRunwareModel?: string;
        fallbackReplicateApiToken?: string;
        fallbackReplicateModel?: string;
        runwareApiKey?: string;
        runwareModel?: string;
        renderMode?: "strict-structure" | "balanced" | "stylize";
        throttleInterval?: number;
        maxBuffering?: number;
        maxInputResolution?: number;
        jpegQuality?: number;
        previewMegapixels?: number;
        detailMegapixels?: number;
        outputJpegQuality?: number;
        defaults?: {
          steps?: number;
          scheduleMu?: number;
          feedback?: number;
          imageSize?: "square" | "square_hd";
        };
      };
      setRealtimeCanvasConfig({
        enabled: config.enabled ?? true,
        providerType:
          config.providerType === "replicate"
            ? "replicate"
            : config.providerType === "fal"
              ? "fal"
              : "bfl",
        bflApiKey: config.bflApiKey || config.runwareApiKey || "",
        bflBaseUrl: config.bflBaseUrl || DEFAULT_BFL_BASE_URL,
        bflModel:
          config.bflModel || config.runwareModel || DEFAULT_BFL_REALTIME_MODEL,
        falApiKey: config.falApiKey || "",
        falBaseUrl: config.falBaseUrl || "https://fal.run",
        falModel: config.falModel || "",
        replicateApiToken: config.replicateApiToken || "",
        replicateModel:
          config.replicateModel || "black-forest-labs/flux-2-klein-4b",
        fallbackEnabled: config.fallbackEnabled === true,
        fallbackProviderType:
          config.fallbackProviderType === "replicate"
            ? "replicate"
            : config.fallbackProviderType === "fal"
              ? "fal"
              : "bfl",
        fallbackBflApiKey:
          config.fallbackBflApiKey || config.fallbackRunwareApiKey || "",
        fallbackBflBaseUrl: config.fallbackBflBaseUrl || DEFAULT_BFL_BASE_URL,
        fallbackBflModel:
          config.fallbackBflModel ||
          config.fallbackRunwareModel ||
          DEFAULT_BFL_REALTIME_MODEL,
        fallbackFalApiKey: config.fallbackFalApiKey || "",
        fallbackFalBaseUrl: config.fallbackFalBaseUrl || "https://fal.run",
        fallbackFalModel: config.fallbackFalModel || "",
        fallbackReplicateApiToken: config.fallbackReplicateApiToken || "",
        fallbackReplicateModel:
          config.fallbackReplicateModel || "black-forest-labs/flux-2-klein-4b",
        renderMode:
          config.renderMode === "strict-structure" ||
          config.renderMode === "stylize"
            ? config.renderMode
            : "balanced",
        throttleInterval: Number(config.throttleInterval || 100),
        maxBuffering: Number(config.maxBuffering || 2),
        maxInputResolution: Number(config.maxInputResolution || 1024),
        jpegQuality: Number(config.jpegQuality || 0.55),
        previewMegapixels: Number(config.previewMegapixels || 0.4),
        detailMegapixels: Number(config.detailMegapixels || 1.0),
        outputJpegQuality: Number(config.outputJpegQuality || 62),
        steps: Number(config.defaults?.steps || 3),
        scheduleMu: Number(config.defaults?.scheduleMu || 2.3),
        feedback: Number(config.defaults?.feedback || 0.95),
        imageSize:
          config.defaults?.imageSize === "square_hd" ? "square_hd" : "square",
      });
    }
  }, [realtimeCanvasConfigData]);

  // 加载批量处理配置
  const { data: sceneFusionConfigData } = useSWR(
    "/api/admin/settings?key=scene_fusion_config",
    fetcher
  );
  useEffect(() => {
    if (!canvasImageTaskQueueConfigData) return;
    setCanvasImageTaskQueueConfig(
      normalizeCanvasImageTaskQueueConfig(
        canvasImageTaskQueueConfigData.setting?.value
      )
    );
  }, [canvasImageTaskQueueConfigData]);

  useEffect(() => {
    if (sceneFusionConfigData?.setting?.value) {
      const config = sceneFusionConfigData.setting.value as {
        enabled?: boolean;
        preRmbgEnabled?: boolean;
        defaultPrompt?: string;
        maxScenes?: number;
        modelId?: string;
      };
      setSceneFusionConfig({
        enabled: config.enabled ?? true,
        preRmbgEnabled: config.preRmbgEnabled ?? true,
        defaultPrompt:
          config.defaultPrompt ||
          "将图1的产品替换到图2的场景中，保持图1产品的外观、颜色和细节不变，自然融合到图2的环境中。",
        maxScenes: Math.min(config.maxScenes ?? 10, 10),
        modelId: config.modelId ?? "",
      });
    }
  }, [sceneFusionConfigData]);

  useEffect(() => {
    const tripoProvider = (providersData?.providers || []).find(
      (provider) => provider.type === "tripo-3d"
    );
    if (tripoProvider) {
      setTripo3dConfig({
        providerId: tripoProvider.id,
        name: tripoProvider.name || "Tripo3D",
        baseUrl: tripoProvider.baseUrl || getProviderDefaultBaseUrl("tripo-3d"),
        apiKey: "",
        isEnabled: tripoProvider.isEnabled,
      });
      return;
    }

    setTripo3dConfig({
      providerId: "",
      name: "Tripo3D",
      baseUrl: getProviderDefaultBaseUrl("tripo-3d"),
      apiKey: "",
      isEnabled: true,
    });
  }, [providersData?.providers]);

  useEffect(() => {
    const savedWorldlabsConfig = normalizeWorldLabsKeyPoolConfig(
      worldlabsKeyPoolConfigData?.setting?.value
    );
    const worldlabsProvider = (providersData?.providers || []).find(
      (provider) => provider.type === "worldlabs-3d"
    );
    if (worldlabsProvider) {
      setWorldlabs3dConfig({
        providerId: worldlabsProvider.id,
        name: worldlabsProvider.name || savedWorldlabsConfig.providerName,
        baseUrl:
          worldlabsProvider.baseUrl ||
          savedWorldlabsConfig.baseUrl ||
          getProviderDefaultBaseUrl("worldlabs-3d"),
        apiKey: "",
        isEnabled: worldlabsProvider.isEnabled,
      });
      return;
    }

    setWorldlabs3dConfig((prev) => ({
      providerId: "",
      name: savedWorldlabsConfig.providerName || "World Labs",
      baseUrl:
        savedWorldlabsConfig.baseUrl || getProviderDefaultBaseUrl("worldlabs-3d"),
      apiKey: prev.providerId ? "" : prev.apiKey,
      isEnabled: savedWorldlabsConfig.isEnabled,
    }));
  }, [providersData?.providers, worldlabsKeyPoolConfigData?.setting?.value]);

  useEffect(() => {
    setWorldlabsKeyPoolConfig(
      normalizeWorldLabsKeyPoolConfig(
        worldlabsKeyPoolConfigData?.setting?.value
      )
    );
  }, [worldlabsKeyPoolConfigData]);

  useEffect(() => {
    setThreeDModelAliasConfig(
      normalizeThreeDModelAliasConfig(
        threeDModelAliasConfigData?.setting?.value
      )
    );
  }, [threeDModelAliasConfigData]);

  const tripoProviders = useMemo(
    () =>
      (providersData?.providers || []).filter(
        (provider) => provider.type === "tripo-3d"
      ),
    [providersData?.providers]
  );
  const filteredTripoProviders = useMemo(() => {
    const keyword = tripoProviderSearch.trim().toLowerCase();
    if (!keyword) return tripoProviders;

    return tripoProviders.filter((provider) =>
      [provider.name, provider.apiKey, provider.baseUrl]
        .filter(Boolean)
        .some((value) => value.toLowerCase().includes(keyword))
    );
  }, [tripoProviderSearch, tripoProviders]);
  const enabledTripoProviderCount = useMemo(
    () => tripoProviders.filter((provider) => provider.isEnabled).length,
    [tripoProviders]
  );

  const worldlabsProviders = useMemo(
    () =>
      (providersData?.providers || []).filter(
        (provider) => provider.type === "worldlabs-3d"
      ),
    [providersData?.providers]
  );
  const filteredWorldlabsProviders = useMemo(() => {
    const keyword = worldlabsProviderSearch.trim().toLowerCase();
    if (!keyword) return worldlabsProviders;

    return worldlabsProviders.filter((provider) =>
      [provider.name, provider.apiKey, provider.baseUrl]
        .filter(Boolean)
        .some((value) => value.toLowerCase().includes(keyword))
    );
  }, [worldlabsProviderSearch, worldlabsProviders]);
  const enabledWorldlabsProviderCount = useMemo(
    () => worldlabsProviders.filter((provider) => provider.isEnabled).length,
    [worldlabsProviders]
  );

  useEffect(() => {
    const kittycadProvider = (providersData?.providers || []).find(
      (provider) => provider.type === "kittycad-cad"
    );
    if (kittycadProvider) {
      setKittycadCadConfig({
        providerId: kittycadProvider.id,
        name: kittycadProvider.name || "KittyCAD CAD",
        baseUrl:
          kittycadProvider.baseUrl || getProviderDefaultBaseUrl("kittycad-cad"),
        apiKey: "",
        isEnabled: kittycadProvider.isEnabled,
      });
      return;
    }

    setKittycadCadConfig({
      providerId: "",
      name: "KittyCAD CAD",
      baseUrl: getProviderDefaultBaseUrl("kittycad-cad"),
      apiKey: "",
      isEnabled: true,
    });
  }, [providersData?.providers]);

  // 导航链接状态
  const [navLinkForm, setNavLinkForm] = useState({
    id: "",
    name: "",
    url: "",
    order: 0,
    isEnabled: true,
    toolboxGroup: 1, // 默认属于工具箱1
  });
  const [showNavLinkDialog, setShowNavLinkDialog] = useState(false);
  const [editingNavLink, setEditingNavLink] = useState<string | null>(null);

  // 视频上传状态
  const [videoUploading, setVideoUploading] = useState(false);
  const [videoUploadProgress, setVideoUploadProgress] = useState("");
  const [videoUploadPercent, setVideoUploadPercent] = useState(0);
  const [videoUploadStage, setVideoUploadStage] = useState<
    "idle" | "uploading" | "compressing" | "saving" | "done"
  >("idle");
  const [videoQuality, setVideoQuality] = useState<"low" | "medium" | "high">(
    "medium"
  );

  // 视频教程管理状态
  const [showTutorialVideoDialog, setShowTutorialVideoDialog] = useState(false);
  const [editingTutorialVideo, setEditingTutorialVideo] = useState<
    string | null
  >(null);
  const [tutorialVideoForm, setTutorialVideoForm] = useState({
    title: "",
    videoUrl: "",
    coverUrl: "",
    description: "",
    order: 0,
    isEnabled: true,
  });

  // 快捷短语状态
  const [questions, setQuestions] = useState<string[]>([]);
  const { data: questionsData, mutate: mutateQuestions } = useSWR<string[]>(
    "/api/starter-questions",
    fetcher
  );
  const [canvasSkillTagsTitle, setCanvasSkillTagsTitle] = useState(
    DEFAULT_CANVAS_SKILL_TAGS_TITLE
  );
  const [canvasSkillTagsEnabled, setCanvasSkillTagsEnabled] = useState(true);
  const [canvasSkillCategories, setCanvasSkillCategories] = useState<
    CanvasSkillCategory[]
  >([]);
  const [canvasSkillTags, setCanvasSkillTags] = useState<CanvasSkillTag[]>(
    DEFAULT_CANVAS_SKILL_TAGS
  );
  const [canvasSkillTagUploadingId, setCanvasSkillTagUploadingId] = useState<
    string | null
  >(null);
  const [realtimeModeIconUploading, setRealtimeModeIconUploading] =
    useState<RealtimeCanvasModeIconKey | null>(null);
  const [aiWashModeIconUploading, setAiWashModeIconUploading] =
    useState(false);
  const [canvasToolbarIconUploading, setCanvasToolbarIconUploading] =
    useState<CanvasToolbarItemKey | null>(null);
  const [lovartHomeSidebarIconUploading, setLovartHomeSidebarIconUploading] =
    useState<LovartHomeSidebarItemKey | null>(null);
  const { data: canvasSkillTagsData, mutate: mutateCanvasSkillTags } = useSWR<{
    enabled?: boolean;
    title?: string;
    categories?: CanvasSkillCategory[];
    tags?: CanvasSkillTag[];
  }>("/api/canvas-skill-tags", fetcher);

  const [dingTalkNotificationDraft, setDingTalkNotificationDraft] =
    useState<DingTalkNotificationDraftConfig>(
      defaultDingTalkNotificationDraftConfig
    );
  const [dingTalkRobotNotificationConfig, setDingTalkRobotNotificationConfig] =
    useState<DingTalkRobotNotificationConfig>(
      defaultDingTalkRobotNotificationConfig
    );
  const [dingTalkNotificationScheduleAt, setDingTalkNotificationScheduleAt] =
    useState("");
  const [
    isSavingDingTalkNotificationDraft,
    setIsSavingDingTalkNotificationDraft,
  ] = useState(false);
  const [
    isSavingDingTalkRobotNotificationConfig,
    setIsSavingDingTalkRobotNotificationConfig,
  ] = useState(false);
  const [isSendingDingTalkNotification, setIsSendingDingTalkNotification] =
    useState(false);
  const [
    isSchedulingDingTalkNotification,
    setIsSchedulingDingTalkNotification,
  ] = useState(false);
  const [
    cancellingDingTalkNotificationTaskId,
    setCancellingDingTalkNotificationTaskId,
  ] = useState<string | null>(null);

  useEffect(() => {
    const value = dingTalkRobotNotificationConfigData?.setting?.value;
    setDingTalkRobotNotificationConfig(
      normalizeDingTalkRobotNotificationConfig(value)
    );
  }, [dingTalkRobotNotificationConfigData]);

  useEffect(() => {
    const value = dingTalkNotificationDraftData?.setting?.value;
    setDingTalkNotificationDraft(
      normalizeDingTalkNotificationDraftConfig(value)
    );
  }, [dingTalkNotificationDraftData]);

  const handleSaveDingTalkNotificationDraft = async () => {
    setIsSavingDingTalkNotificationDraft(true);
    try {
      const response = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: DINGTALK_NOTIFICATION_DRAFT_CONFIG_KEY,
          value: dingTalkNotificationDraft,
        }),
      });

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

      toast.success("钉钉通知草稿已保存");
      mutateDingTalkNotificationDraft();
    } catch (error) {
      toast.error("保存钉钉通知草稿失败");
    } finally {
      setIsSavingDingTalkNotificationDraft(false);
    }
  };

  const handleSaveDingTalkRobotNotificationConfig = async () => {
    setIsSavingDingTalkRobotNotificationConfig(true);
    try {
      const response = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: DINGTALK_ROBOT_NOTIFICATION_CONFIG_KEY,
          value: dingTalkRobotNotificationConfig,
        }),
      });

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

      toast.success("钉钉群机器人配置已保存");
      mutateDingTalkRobotNotificationConfig();
    } catch (error) {
      toast.error("保存钉钉群机器人配置失败");
    } finally {
      setIsSavingDingTalkRobotNotificationConfig(false);
    }
  };

  const handleSendNotificationToDingTalk = async () => {
    const title = String(dingTalkNotificationDraft.title || "").trim();
    const content = String(dingTalkNotificationDraft.content || "").trim();

    if (!title) {
      toast.error("请先填写钉钉通知标题");
      return;
    }

    if (!content) {
      toast.error("请先填写钉钉通知正文");
      return;
    }

    setIsSendingDingTalkNotification(true);
    try {
      const response = await fetch("/api/admin/dingtalk-robot/send", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ title, content }),
      });
      const payload = await response.json().catch(() => null);

      if (!response.ok || payload?.success === false) {
        throw new Error(payload?.error || "发送失败");
      }

      toast.success("钉钉通知已发送");
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : "发送钉钉群通知失败"
      );
    } finally {
      setIsSendingDingTalkNotification(false);
    }
  };

  const handleScheduleDingTalkNotification = async () => {
    const title = String(dingTalkNotificationDraft.title || "").trim();
    const content = String(dingTalkNotificationDraft.content || "").trim();

    if (!title) {
      toast.error("请先填写钉钉通知标题");
      return;
    }

    if (!content) {
      toast.error("请先填写钉钉通知正文");
      return;
    }

    if (!dingTalkNotificationScheduleAt) {
      toast.error("请选择定时发送时间");
      return;
    }

    const scheduledAt = new Date(dingTalkNotificationScheduleAt);
    if (Number.isNaN(scheduledAt.getTime())) {
      toast.error("定时发送时间格式不正确");
      return;
    }

    setIsSchedulingDingTalkNotification(true);
    try {
      const response = await fetch("/api/admin/dingtalk-robot/notifications", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          title,
          content,
          scheduledAt: scheduledAt.toISOString(),
        }),
      });
      const payload = await response.json().catch(() => null);

      if (!response.ok || payload?.success === false) {
        throw new Error(payload?.error || "创建定时通知失败");
      }

      toast.success("钉钉定时通知已创建");
      setDingTalkNotificationScheduleAt("");
      mutateDingTalkNotificationTasks();
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : "创建钉钉定时通知失败"
      );
    } finally {
      setIsSchedulingDingTalkNotification(false);
    }
  };

  const handleCancelDingTalkNotificationTask = async (taskId: string) => {
    setCancellingDingTalkNotificationTaskId(taskId);
    try {
      const response = await fetch(
        `/api/admin/dingtalk-robot/notifications/${taskId}`,
        {
          method: "DELETE",
        }
      );
      const payload = await response.json().catch(() => null);

      if (!response.ok || payload?.success === false) {
        throw new Error(payload?.error || "取消定时通知失败");
      }

      toast.success("定时通知已取消");
      mutateDingTalkNotificationTasks();
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : "取消钉钉通知任务失败"
      );
    } finally {
      setCancellingDingTalkNotificationTaskId(null);
    }
  };

  useEffect(() => {
    if (questionsData) {
      setQuestions(questionsData);
    }
  }, [questionsData]);

  useEffect(() => {
    if (canvasSkillTagsData) {
      setCanvasSkillTagsEnabled(canvasSkillTagsData.enabled !== false);
      setCanvasSkillTagsTitle(
        String(canvasSkillTagsData.title || "").trim() ||
          DEFAULT_CANVAS_SKILL_TAGS_TITLE
      );
      setCanvasSkillCategories(
        normalizeCanvasSkillCategories(canvasSkillTagsData.categories)
      );
      setCanvasSkillTags(normalizeCanvasSkillTags(canvasSkillTagsData.tags));
    }
  }, [canvasSkillTagsData]);

  const handleQuestionChange = (index: number, value: string) => {
    const newQuestions = [...questions];
    newQuestions[index] = value;
    setQuestions(newQuestions);
  };

  const handleAddQuestion = () => {
    setQuestions([...questions, ""]);
  };

  const handleRemoveQuestion = (index: number) => {
    const newQuestions = questions.filter((_, i) => i !== index);
    setQuestions(newQuestions);
  };

  const handleSaveQuestions = async () => {
    try {
      const res = await fetch("/api/starter-questions", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(questions.filter((q) => q.trim() !== "")),
      });
      if (!res.ok) throw new Error("Failed");
      toast.success("快捷短语已更新");
      mutateQuestions();
    } catch (error) {
      toast.error("更新失败");
    }
  };

  const handleCanvasSkillTagChange = (
    index: number,
    field:
      | "name"
      | "prompt"
      | "placeholder"
      | "iconName"
      | "iconUrl"
      | "categoryId",
    value: string
  ) => {
    setCanvasSkillTags((prev) =>
      prev.map((item, itemIndex) =>
        itemIndex === index ? { ...item, [field]: value } : item
      )
    );
  };

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

    const targetTag = canvasSkillTags[index];
    if (!targetTag) return;

    try {
      setCanvasSkillTagUploadingId(targetTag.id);
      const formData = new FormData();
      formData.append("file", file);

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

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

      setCanvasSkillTags((prev) =>
        prev.map((tag, tagIndex) =>
          tagIndex === index ? { ...tag, iconUrl: result.url } : tag
        )
      );
      toast.success("标签图标上传成功");
    } catch (error: any) {
      toast.error(error?.message || "标签图标上传失败");
    } finally {
      setCanvasSkillTagUploadingId(null);
    }
  };

  const handleRealtimeModeIconUpload = async (
    field: RealtimeCanvasModeIconKey,
    file: File
  ) => {
    const isSvg =
      file.type === "image/svg+xml" || file.name.toLowerCase().endsWith(".svg");
    if (!isSvg) {
      toast.error("请上传 SVG 图标文件");
      return;
    }

    if (file.size > 512 * 1024) {
      toast.error("SVG 图标不能超过 512KB");
      return;
    }

    try {
      setRealtimeModeIconUploading(field);
      const formData = new FormData();
      formData.append("file", file);
      formData.append("purpose", "admin-svg-icon");

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

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

      setSiteSettings((prev) => ({
        ...prev,
        realtimeCanvasModeIconConfig: {
          ...prev.realtimeCanvasModeIconConfig,
          [field]: result.url,
        },
      }));
      toast.success("模式图标上传成功，请保存配置后生效");
    } catch (error: any) {
      toast.error(error?.message || "模式图标上传失败");
    } finally {
      setRealtimeModeIconUploading(null);
    }
  };

  const handleAiWashModeIconUpload = async (file: File) => {
    const isSvg =
      file.type === "image/svg+xml" || file.name.toLowerCase().endsWith(".svg");
    if (!isSvg) {
      toast.error("请上传 SVG 图标文件");
      return;
    }

    if (file.size > 512 * 1024) {
      toast.error("SVG 图标不能超过 512KB");
      return;
    }

    try {
      setAiWashModeIconUploading(true);
      const formData = new FormData();
      formData.append("file", file);
      formData.append("purpose", "admin-svg-icon");

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

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

      setAiWashConfig((prev) => ({
        ...prev,
        modeIconUrl: result.url,
      }));
      toast.success("AI洗图图标上传成功，请保存配置后生效");
    } catch (error: any) {
      toast.error(error?.message || "AI洗图图标上传失败");
    } finally {
      setAiWashModeIconUploading(false);
    }
  };

  const updateCanvasToolbarItem = (
    key: CanvasToolbarItemKey,
    updates: Partial<{ label: string; iconUrl: string; enabled: boolean }>
  ) => {
    setSiteSettings((prev) => {
      const normalized = normalizeCanvasToolbarConfig(prev.canvasToolbarConfig);
      return {
        ...prev,
        canvasToolbarConfig: {
          ...normalized,
          items: {
            ...normalized.items,
            [key]: {
              ...normalized.items[key],
              ...updates,
            },
          },
        },
      };
    });
  };

  const handleCanvasToolbarIconUpload = async (
    key: CanvasToolbarItemKey,
    file: File
  ) => {
    const isSvg =
      file.type === "image/svg+xml" || file.name.toLowerCase().endsWith(".svg");
    if (!isSvg) {
      toast.error("请上传 SVG 图标文件");
      return;
    }

    if (file.size > 512 * 1024) {
      toast.error("SVG 图标不能超过 512KB");
      return;
    }

    try {
      setCanvasToolbarIconUploading(key);
      const formData = new FormData();
      formData.append("file", file);
      formData.append("purpose", "admin-svg-icon");

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

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

      updateCanvasToolbarItem(key, { iconUrl: result.url });
      toast.success("工具栏图标上传成功，请保存配置后生效");
    } catch (error: any) {
      toast.error(error?.message || "工具栏图标上传失败");
    } finally {
      setCanvasToolbarIconUploading(null);
    }
  };

  const updateLovartHomeSidebarItem = (
    key: LovartHomeSidebarItemKey,
    updates: Partial<{ label: string; iconUrl: string; enabled: boolean }>
  ) => {
    setSiteSettings((prev) => {
      const normalized = normalizeLovartHomeSidebarConfig(
        prev.lovartHomeSidebarConfig
      );
      return {
        ...prev,
        lovartHomeSidebarConfig: {
          items: {
            ...normalized.items,
            [key]: {
              ...normalized.items[key],
              ...updates,
            },
          },
        },
      };
    });
  };

  const handleLovartHomeSidebarIconUpload = async (
    key: LovartHomeSidebarItemKey,
    file: File
  ) => {
    const isSvg =
      file.type === "image/svg+xml" || file.name.toLowerCase().endsWith(".svg");
    if (!isSvg) {
      toast.error("请上传 SVG 图标文件");
      return;
    }

    if (file.size > 512 * 1024) {
      toast.error("SVG 图标不能超过 512KB");
      return;
    }

    try {
      setLovartHomeSidebarIconUploading(key);
      const formData = new FormData();
      formData.append("file", file);
      formData.append("purpose", "admin-svg-icon");

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

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

      updateLovartHomeSidebarItem(key, {
        iconUrl: String(result.url || "").trim(),
      });
      toast.success("首页侧边栏图标上传成功，请保存配置后生效");
    } catch (error: any) {
      toast.error(error?.message || "首页侧边栏图标上传失败");
    } finally {
      setLovartHomeSidebarIconUploading(null);
    }
  };

  const handleAddCanvasSkillTag = () => {
    setCanvasSkillTags((prev) => [...prev, createEmptyCanvasSkillTag()]);
  };

  const handleAddCanvasSkillCategory = () => {
    setCanvasSkillCategories((prev) => [
      ...prev,
      createEmptyCanvasSkillCategory(),
    ]);
  };

  const handleCanvasSkillCategoryNameChange = (index: number, name: string) => {
    setCanvasSkillCategories((prev) =>
      prev.map((category, categoryIndex) =>
        categoryIndex === index ? { ...category, name } : category
      )
    );
  };

  const handleRemoveCanvasSkillCategory = (index: number) => {
    const categoryId = canvasSkillCategories[index]?.id;
    setCanvasSkillCategories((prev) =>
      prev.filter((_, categoryIndex) => categoryIndex !== index)
    );
    if (!categoryId) return;
    setCanvasSkillTags((prev) =>
      prev.map((tag) => {
        if (tag.categoryId !== categoryId) return tag;
        const { categoryId: _categoryId, ...rest } = tag;
        return rest;
      })
    );
  };

  const handleRemoveCanvasSkillTag = (index: number) => {
    setCanvasSkillTags((prev) =>
      prev.filter((_, itemIndex) => itemIndex !== index)
    );
  };

  const handleSaveCanvasSkillTags = async () => {
    try {
      const categories = normalizeCanvasSkillCategories(canvasSkillCategories);
      const payload = normalizeCanvasSkillTags(canvasSkillTags);
      const res = await fetch("/api/canvas-skill-tags", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          enabled: canvasSkillTagsEnabled,
          title: canvasSkillTagsTitle,
          categories,
          tags: payload,
        }),
      });
      if (!res.ok) throw new Error("Failed");

      const data = await res.json().catch(() => ({}));
      setCanvasSkillTagsEnabled(data?.enabled !== false);
      setCanvasSkillTagsTitle(
        String(data?.title || canvasSkillTagsTitle || "").trim() ||
          DEFAULT_CANVAS_SKILL_TAGS_TITLE
      );
      setCanvasSkillCategories(
        normalizeCanvasSkillCategories(data?.categories ?? categories)
      );
      setCanvasSkillTags(normalizeCanvasSkillTags(data?.tags ?? payload));
      toast.success("快捷标签已更新");
      mutateCanvasSkillTags();
    } catch (error) {
      toast.error("快捷标签更新失败");
    }
  };

  // 认证设置状态
  const [authSettings, setAuthSettings] = useState<AuthSettings>({
    dingTalkAppKey: "",
    dingTalkAppSecret: "",
    googleClientId: "",
    googleClientSecret: "",
    authUrl: "",
    isDingTalkEnabled: false,
    isGoogleEnabled: false,
    isRegistrationEnabled: true,
    isEmailVerificationEnabled: false,
    emailVerificationExpiresMinutes: 10,
    resendApiKey: "",
    resendFromEmail: "",
    isEmailServiceConfigured: false,
    dingTalkOrganizations: [],
  });
  const [isGoogleConfigured, setIsGoogleConfigured] = useState(false);

  useEffect(() => {
    if (!authSettingsData) return;

    const organizations: DingTalkOrganization[] =
      (authSettingsData.dingTalkOrganizations as
        | DingTalkOrganization[]
        | null) ?? [];

    // 如果没有多组织配置，但有单一 AppKey/Secret，则自动构造一个默认组织
    const normalizedOrgs =
      organizations.length > 0 || !authSettingsData.dingTalkAppKey
        ? organizations
        : [
            {
              id: "default",
              name: "默认组织",
              appKey: authSettingsData.dingTalkAppKey ?? "",
              appSecret: authSettingsData.dingTalkAppSecret ?? "",
            },
          ];

    setAuthSettings({
      dingTalkAppKey: authSettingsData.dingTalkAppKey || "",
      dingTalkAppSecret: authSettingsData.dingTalkAppSecret || "",
      googleClientId: authSettingsData.googleClientId || "",
      googleClientSecret: authSettingsData.googleClientSecret || "",
      authUrl: authSettingsData.authUrl || "",
      isDingTalkEnabled: authSettingsData.isDingTalkEnabled || false,
      isGoogleEnabled: authSettingsData.isGoogleEnabled || false,
      isRegistrationEnabled: authSettingsData.isRegistrationEnabled ?? true,
      isEmailVerificationEnabled:
        authSettingsData.isEmailVerificationEnabled === true,
      emailVerificationExpiresMinutes:
        Number(authSettingsData.emailVerificationExpiresMinutes) || 10,
      resendApiKey: authSettingsData.resendApiKey || "",
      resendFromEmail: authSettingsData.resendFromEmail || "",
      isEmailServiceConfigured:
        authSettingsData.isEmailServiceConfigured === true,
      dingTalkOrganizations: normalizedOrgs,
    });
    setIsGoogleConfigured(Boolean(authSettingsData.isGoogleConfigured));
  }, [authSettingsData]);

  // AI 提供商 & 模型状态
  const [providerForm, setProviderForm] = useState({
    id: "",
    name: "",
    type: "openai" as
      | "alibaba"
      | "openai"
      | "custom"
      | "local"
      | "gemini"
      | "bltcy-video"
      | "grsai-gpt-image"
      | "grsai-video"
      | "huanke-gemini"
      | "qianwen-video"
      | "doubao-video"
      | "ruxa-video"
      | "volcano-vision"
      | "volcano-video"
      | "alibaba-image"
      | "bfl-image"
      | "ruxa-image"
      | "fal-image"
      | "snapgen-image"
      | "openai-image"
      | "bananaimage"
      | "visionary"
      | "atlascloud"
      | "vip98k"
      | "stepfun-image"
      | "midjourney"
      | "fal-video"
      | "zhipu"
      | "tripo-3d"
      | "worldlabs-3d"
      | "kittycad-cad"
      | "runway"
      | "krea"
      | "volcano-multimodal",
    baseUrl: "",
    apiKey: "",
    isEnabled: true,
  });
  const [showProviderDialog, setShowProviderDialog] = useState(false);
  const [editingProvider, setEditingProvider] = useState<string | null>(null);
  const [showApiKey, setShowApiKey] = useState(false);

  const [modelForm, setModelForm] = useState({
    id: "",
    providerId: "",
    modelId: "",
    displayName: "",
    avatarUrl: "",
    description: "",
    supportsVision: false,
    supportsImageGen: false,
    isEnabled: true,
    isHidden: false,
    isDefault: false,
    isDefaultTextEditModel: false,
    isAgentModel: false,
    agentCodingModelId: "",
    isMultimodal: false,
    sortOrder: 0,
    fallbackModelId1: "", // 备用模型 ID 1
    fallbackModelId2: "", // 备用模型 ID 2
    excludeFromFailover: false,
    excludeFromHealthBan: false,
    capabilities: {} as Record<string, unknown>,
    // 🆕 图片生成模型特性配置
    imageGenConfig: createDefaultImageGenConfig(),
  });
  const [videoDurationOptionsInput, setVideoDurationOptionsInput] =
    useState("");
  const [showModelDialog, setShowModelDialog] = useState(false);
  const [editingModel, setEditingModel] = useState<string | null>(null);
  const [modelAvatarUploading, setModelAvatarUploading] = useState(false);
  const [contactQrUploading, setContactQrUploading] = useState(false);

  // 🆕 火山引擎视频多模型表单（动态从API加载）
  const [volcanoVideoModels, setVolcanoVideoModels] = useState<
    Array<{
      modelId: string;
      displayName: string;
      description: string;
    }>
  >([]);

  // 🆕 当选择火山引擎视频Provider时，从API加载预设模型配置
  useEffect(() => {
    const selectedProvider = providersData?.providers?.find(
      (p) => p.id === modelForm.providerId
    );
    if (
      selectedProvider?.type === "volcano-video" &&
      volcanoVideoModels.length === 0
    ) {
      // 从API获取预设模型配置（✅ 显示所有模型供管理员自定义）
      fetch("/api/admin/volcano-video-models")
        .then((res) => res.json())
        .then((data) => {
          if (data.presets) {
            // ✅ 显示主模型和所有子模型，允许管理员自定义显示名称和描述
            const allModels = data.presets.map((preset: any) => ({
              modelId: preset.modelId,
              displayName: preset.displayName,
              description: preset.description,
              isSubModel: preset.isSubModel || false, // 标记是否为子模型
            }));
            setVolcanoVideoModels(allModels);
          }
        })
        .catch((err) => {
          console.error("[Load Volcano Models] Error:", err);
          toast.error("加载预设模型配置失败");
        });
    }
  }, [
    modelForm.providerId,
    providersData?.providers,
    volcanoVideoModels.length,
  ]);

  const selectedModelProviderType =
    providersData?.providers?.find((p) => p.id === modelForm.providerId)
      ?.type || "";
  const failoverModelOptions = useMemo(() => {
    const currentModelId = String(editingModel || modelForm.id || "").trim();
    const currentRuntimeModelId = String(modelForm.modelId || "").trim();
    const wantsImageFallback = modelForm.supportsImageGen;

    return (modelsData?.models || [])
      .filter((model) => {
        if (!model.isEnabled || model.isSubModel || model.excludeFromFailover)
          return false;
        if (
          model.id === currentModelId ||
          model.modelId === currentRuntimeModelId
        )
          return false;
        if (wantsImageFallback && !model.supportsImageGen) return false;
        return true;
      })
      .map((model) => ({
        ...model,
        providerName:
          modelProviderNameById.get(model.providerId) || "未知服务商",
      }));
  }, [
    editingModel,
    modelForm.id,
    modelForm.modelId,
    modelForm.supportsImageGen,
    modelProviderNameById,
    modelsData?.models,
  ]);
  const isVideoProviderForModelConfig = isVideoModelDescriptor({
    providerType: selectedModelProviderType,
    modelId: modelForm.modelId,
    capabilities: modelForm.capabilities,
    supportsImageGen: modelForm.supportsImageGen,
  });
  const is3DProviderForModelConfig = is3DModelDescriptor({
    providerType: selectedModelProviderType,
    modelId: modelForm.modelId,
    capabilities: modelForm.capabilities,
  });
  const isImageProviderForModelConfig = isImageGenerationModelDescriptor({
    providerType: selectedModelProviderType,
    modelId: modelForm.modelId,
    capabilities: modelForm.capabilities,
    supportsImageGen: modelForm.supportsImageGen,
  });
  const modelVideoSupportedResolutions = getAdminVideoSupportedResolutions(
    modelForm.capabilities
  );
  const configuredVideoDurationOptions = getConfiguredVideoDurationOptions(
    modelForm.imageGenConfig
  );
  const videoReferenceDurationCost = getVideoReferenceDurationCost(
    modelForm.imageGenConfig
  );
  const modelKindHint =
    (selectedModelProviderType === "runway" ||
      selectedModelProviderType === "krea") &&
    !modelForm.modelId.trim()
      ? `${
          selectedModelProviderType === "krea" ? "Krea" : "Runway"
        } 同时支持图片与视频模型，填写模型 ID 后系统会自动识别标签。`
      : is3DProviderForModelConfig
        ? "当前识别为 3D 模型，将与图片、视频和对话模型分开管理。"
        : isVideoProviderForModelConfig
        ? "当前识别为视频模型，将使用视频能力、视频积分和视频路由。"
        : isImageProviderForModelConfig
          ? "当前识别为图片模型，将使用生图能力、图片积分和生图路由。"
          : "当前识别为对话/分析模型。";

  // 存储配置状态
  const [storageForm, setStorageForm] = useState({
    id: "",
    name: "",
    type: "s3" as "s3" | "local" | "aliyun-oss" | "qiniu-kodo",
    endpoint: "",
    region: "",
    bucket: "",
    accessKeyId: "",
    secretAccessKey: "",
    publicUrl: "",
    isDefault: false,
    isEnabled: true,
  });
  const [showStorageDialog, setShowStorageDialog] = useState(false);
  const [editingStorage, setEditingStorage] = useState<string | null>(null);

  // --- 用户管理逻辑 ---
  const handleUserSearch = (search: string) => {
    setUserSearch(search);
    setUserPage(1); // 搜索时重置到第一页
  };

  const handleUpdateUser = async (userId: string, updates: any) => {
    try {
      const response = await fetch("/api/admin/users", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id: userId, ...updates }),
      });
      if (!response.ok) throw new Error("更新失败");
      toast.success("用户更新成功");
      mutateUsers();
    } catch (error) {
      toast.error("更新用户失败");
    }
  };

  const handleGiftPoints = async (userId: string) => {
    const rawValue = giftPointsDraftByUser[userId] || "";
    const points = Number.parseInt(rawValue, 10);
    if (!Number.isFinite(points) || points <= 0) {
      toast.error("请输入有效的赠送积分（大于 0）");
      return;
    }

    try {
      const response = await fetch("/api/admin/users", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id: userId, giftPoints: points }),
      });
      const data = await response.json();
      if (!response.ok) {
        throw new Error(data?.message || data?.error || "赠送失败");
      }
      toast.success(`已赠送 ${points} 积分`);
      setGiftPointsDraftByUser((prev) => ({ ...prev, [userId]: "" }));
      mutateUsers();
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "赠送积分失败");
    }
  };

  const handleDeductPoints = async (userId: string) => {
    const rawValue = deductPointsDraftByUser[userId] || "";
    const points = Number.parseInt(rawValue, 10);
    if (!Number.isFinite(points) || points <= 0) {
      toast.error("请输入有效的扣减积分（大于 0）");
      return;
    }

    try {
      const response = await fetch("/api/admin/users", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id: userId, deductPoints: points }),
      });
      const data = await response.json();
      if (!response.ok) {
        throw new Error(data?.message || data?.error || "扣减失败");
      }
      toast.success(`已扣减 ${points} 积分`);
      setDeductPointsDraftByUser((prev) => ({ ...prev, [userId]: "" }));
      mutateUsers();
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "扣减积分失败");
    }
  };

  const handleDeleteUser = async (userId: string) => {
    if (!confirm("确定要删除此用户吗？")) return;
    try {
      const response = await fetch(`/api/admin/users?id=${userId}`, {
        method: "DELETE",
      });
      if (!response.ok) throw new Error("删除失败");
      toast.success("用户删除成功");
      mutateUsers();
    } catch (error) {
      toast.error("删除用户失败");
    }
  };

  // 批量设置出图限额
  const handleBatchSetLimit = async () => {
    try {
      const response = await fetch("/api/admin/users/batch-limit", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          type: batchLimitType,
          limit:
            batchLimitValue === ""
              ? null
              : Number.parseInt(batchLimitValue, 10),
          department: batchLimitDepartment,
        }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || "批量设置失败");
      }

      toast.success(data.message);
      setShowBatchLimitDialog(false);
      setBatchLimitValue("");
      setBatchLimitDepartment("");
      mutateUsers();
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "批量设置失败");
    }
  };

  const handleSaveOpenClawChatConfig = async () => {
    try {
      const normalizedConfig: OpenClawChatConfig = {
        enabled: openClawChatConfig.enabled,
        baseUrl:
          openClawChatConfig.baseUrl.trim() || DEFAULT_OPENCLAW_CHAT_BASE_URL,
        token: openClawChatConfig.token.trim(),
        timeoutMs: Math.min(
          600_000,
          Math.max(5_000, Math.round(Number(openClawChatConfig.timeoutMs) || 600_000))
        ),
      };

      if (normalizedConfig.enabled) {
        if (!normalizedConfig.baseUrl) {
          toast.error("请填写大龙虾聊天接口地址");
          return;
        }
        if (!normalizedConfig.token && !openClawChatTokenConfigured) {
          toast.error("请填写大龙虾聊天接口 Token");
          return;
        }
      }

      const response = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: OPENCLAW_CHAT_CONFIG_KEY,
          value: normalizedConfig,
        }),
      });
      const responseData = await response.json().catch(() => null);
      if (!response.ok) {
        throw new Error(responseData?.message || responseData?.error || "保存失败");
      }

      const savedValue =
        responseData?.setting?.value &&
        typeof responseData.setting.value === "object"
          ? (responseData.setting.value as OpenClawChatConfig)
          : normalizedConfig;
      setOpenClawChatConfig({
        enabled: savedValue.enabled,
        baseUrl: savedValue.baseUrl,
        token: "",
        timeoutMs: savedValue.timeoutMs,
      });
      setOpenClawChatTokenConfigured(
        Boolean((responseData?.setting?.value as any)?.hasToken) ||
          Boolean(normalizedConfig.token)
      );
      toast.success("大龙虾聊天接口配置已保存");
      mutateOpenClawChatSetting();
      mutateSiteSettings();
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : "保存大龙虾聊天接口配置失败"
      );
    }
  };

  // --- 网站设置逻辑 ---
  const handleSaveSiteSettings = async () => {
    try {
      const normalizedHomeAnimationHtml = homeAnimationConfig.htmlContent
        .replace(/^\uFEFF/, "")
        .replace(/\u0000/g, "")
        .replace(/\u2028|\u2029/g, "\n");
      const homeAnimationBytes = new TextEncoder().encode(
        normalizedHomeAnimationHtml
      ).length;

      if (homeAnimationBytes > HOME_CHAT_ANIMATION_MAX_BYTES) {
        toast.error(
          `首页动画 HTML 过大，当前 ${(homeAnimationBytes / 1024).toFixed(1)}KB，最大 ${(
            HOME_CHAT_ANIMATION_MAX_BYTES / 1024
          ).toFixed(0)}KB`
        );
        return;
      }

      if (
        siteSettings.storageFailoverConfig.enabled &&
        !siteSettings.storageFailoverConfig.backupStorageConfigId
      ) {
        toast.error("请先选择备用存储配置");
        return;
      }

      const selectedBackupConfig = (storageData?.configs || []).find(
        (config) =>
          config.id === siteSettings.storageFailoverConfig.backupStorageConfigId
      );
      if (
        siteSettings.storageFailoverConfig.enabled &&
        selectedBackupConfig?.isDefault
      ) {
        toast.error("备用存储配置不能与默认配置相同");
        return;
      }

      if (siteSettings.ossImageMigrationConfig.enabled) {
        if (
          siteSettings.ossImageMigrationConfig.cleanupAfterHours <=
          siteSettings.ossImageMigrationConfig.migrateAfterHours
        ) {
          toast.error("OSS 清理时间必须晚于转存时间");
          return;
        }

        if (
          siteSettings.ossImageMigrationConfig.sourceStorageConfigId &&
          siteSettings.ossImageMigrationConfig.targetStorageConfigId &&
          siteSettings.ossImageMigrationConfig.sourceStorageConfigId ===
            siteSettings.ossImageMigrationConfig.targetStorageConfigId
        ) {
          toast.error("OSS 源桶和目标桶不能相同");
          return;
        }

        const targetConfig = (storageData?.configs || []).find(
          (config) =>
            config.id ===
            siteSettings.ossImageMigrationConfig.targetStorageConfigId
        );
        if (
          targetConfig &&
          targetConfig.type === "s3" &&
          targetConfig.endpoint?.includes("aliyuncs.com")
        ) {
          toast.error("OSS 转存目标桶不能是阿里云 OSS");
          return;
        }
      }

      const parsedMembershipConfig = normalizeMembershipConfig(
        siteSettings.membershipConfig
      );
      const parsedMembershipOverrides = normalizeMembershipUserOverrides(
        siteSettings.membershipUserOverrides
      );

      const parsedPointsPackages = normalizePointsPackages(
        siteSettings.pointsPackages
      );
      const parsedPointsSystemConfig = normalizePointsSystemConfig(
        siteSettings.pointsSystemConfig
      );
      const normalizedHomeAnimationConfig: HomeAnimationConfig = {
        enabled: homeAnimationConfig.enabled,
        fileName: homeAnimationConfig.fileName.trim(),
        htmlContent: normalizedHomeAnimationHtml,
        updatedAt: homeAnimationConfig.updatedAt,
      };

      const siteSettingsPayload: Partial<SiteSettings> = {
        ...siteSettings,
        membershipConfig: parsedMembershipConfig,
        membershipUserOverrides: parsedMembershipOverrides,
        pointsSystemConfig: parsedPointsSystemConfig,
        pointsPackages: parsedPointsPackages,
      };
      delete siteSettingsPayload.agentWorkflowUiConfig;

      const changedSiteSettingsPayload = pickChangedTopLevelFields(
        siteSettingsPayload as Record<string, unknown>,
        lastLoadedSiteSettingsRef.current as Partial<
          Record<string, unknown>
        > | null
      ) as Partial<SiteSettings>;
      const shouldSaveHomeAnimation = !areComparableValuesEqual(
        normalizedHomeAnimationConfig,
        lastLoadedHomeAnimationConfigRef.current
      );

      const payload = {
        ...changedSiteSettingsPayload,
        ...(shouldSaveHomeAnimation
          ? { homeAnimationConfig: normalizedHomeAnimationConfig }
          : {}),
      };

      if (Object.keys(payload).length === 0) {
        toast.info("没有需要保存的改动");
        return;
      }

      const response = await fetch("/api/site-settings", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      const responseData = await response.json().catch(() => null);
      if (!response.ok) throw new Error(responseData?.error || "保存失败");
      const {
        homeAnimationConfig: _ignoredHomeAnimationConfig,
        ...nextSiteSettings
      } = payload;
      setSiteSettings((prev) => ({
        ...prev,
        ...nextSiteSettings,
      }));
      lastLoadedSiteSettingsRef.current = {
        ...(lastLoadedSiteSettingsRef.current || siteSettings),
        ...siteSettingsPayload,
      };
      if (shouldSaveHomeAnimation) {
        const committedHomeAnimationConfig: HomeAnimationConfig = {
          ...normalizedHomeAnimationConfig,
          updatedAt: new Date().toISOString(),
        };
        setHomeAnimationConfig(committedHomeAnimationConfig);
        lastLoadedHomeAnimationConfigRef.current = committedHomeAnimationConfig;
      }
      toast.success("网站设置保存成功");
      mutateSiteSettings();
      if (shouldSaveHomeAnimation) {
        mutateHomeAnimationSetting();
      }
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "保存网站设置失败");
    }
  };

  const handleImportHomeAnimationFile = async (
    event: ChangeEvent<HTMLInputElement>
  ) => {
    const file = event.target.files?.[0];
    event.target.value = "";

    if (!file) {
      return;
    }

    const normalizedFileName = String(file.name || "").trim();
    const isHtmlFile =
      file.type === "text/html" || /\.html?$/i.test(normalizedFileName);

    if (!isHtmlFile) {
      toast.error("请上传 .html 文件");
      return;
    }

    try {
      const htmlContent = (await file.text())
        .replace(/^\uFEFF/, "")
        .replace(/\u0000/g, "")
        .replace(/\u2028|\u2029/g, "\n");
      const bytes = new TextEncoder().encode(htmlContent).length;

      if (bytes > HOME_CHAT_ANIMATION_MAX_BYTES) {
        toast.error(
          `HTML 文件过大，当前 ${(bytes / 1024).toFixed(1)}KB，最大 ${(
            HOME_CHAT_ANIMATION_MAX_BYTES / 1024
          ).toFixed(0)}KB`
        );
        return;
      }

      setHomeAnimationConfig((prev) => ({
        ...prev,
        fileName: normalizedFileName,
        htmlContent,
        updatedAt: null,
      }));
      toast.success("HTML 动效文件已导入，记得点击保存设置");
    } catch (error) {
      toast.error("读取 HTML 文件失败");
    }
  };

  const updatePointsPackage = (
    index: number,
    updater: (item: PointsPackage) => PointsPackage
  ) => {
    setSiteSettings((prev) => {
      const list = [...(prev.pointsPackages || [])];
      if (!list[index]) return prev;
      list[index] = updater(list[index]);
      return { ...prev, pointsPackages: list };
    });
  };

  const addPointsPackage = () => {
    setSiteSettings((prev) => {
      const list = [...(prev.pointsPackages || [])];
      const nextIndex = list.length + 1;
      list.push({
        id: `package-${Date.now()}`,
        name: `套餐${nextIndex}`,
        points: 1000,
        price: 9.9,
        currency: "CNY",
        isEnabled: true,
      });
      return { ...prev, pointsPackages: list };
    });
  };

  const removePointsPackage = (index: number) => {
    setSiteSettings((prev) => {
      const list = [...(prev.pointsPackages || [])];
      if (list.length <= 1) {
        toast.error("至少保留一个积分套餐");
        return prev;
      }
      list.splice(index, 1);
      return { ...prev, pointsPackages: list };
    });
  };

  const updatePointsCostField = (key: keyof PointsSystemConfig, value: unknown) => {
    setSiteSettings((prev) => {
      const config = normalizePointsSystemConfig(prev.pointsSystemConfig);
      return {
        ...prev,
        pointsSystemConfig: {
          ...config,
          [key]: roundCreditCost(value),
        },
      };
    });
  };

  const updateEnhanceProPointsBucket = (
    index: number,
    updater: (
      item: EnhanceProPointsResolutionBucket
    ) => EnhanceProPointsResolutionBucket
  ) => {
    setSiteSettings((prev) => {
      const config = normalizePointsSystemConfig(prev.pointsSystemConfig);
      const list = [...config.enhanceProPricing.resolutionBuckets];
      if (!list[index]) return prev;
      list[index] = updater(list[index]);
      return {
        ...prev,
        pointsSystemConfig: {
          ...config,
          enhanceProPricing: {
            ...config.enhanceProPricing,
            resolutionBuckets: list,
          },
        },
      };
    });
  };

  const addEnhanceProPointsBucket = () => {
    setSiteSettings((prev) => {
      const config = normalizePointsSystemConfig(prev.pointsSystemConfig);
      const list = [...config.enhanceProPricing.resolutionBuckets];
      const lastBucket = list[list.length - 1];
      const nextMaxMegapixels = Math.min(
        100,
        Math.max(
          1,
          Number((Number(lastBucket?.maxMegapixels || 8) * 2).toFixed(2))
        )
      );
      list.push({
        id: `enhance-pro-bucket-${Date.now()}`,
        name: `${nextMaxMegapixels}MP 以内`,
        maxMegapixels: nextMaxMegapixels,
        cost: Math.max(1, Number(lastBucket?.cost || 45)),
      });
      return {
        ...prev,
        pointsSystemConfig: {
          ...config,
          enhanceProPricing: {
            ...config.enhanceProPricing,
            resolutionBuckets: list,
          },
        },
      };
    });
  };

  const removeEnhanceProPointsBucket = (index: number) => {
    setSiteSettings((prev) => {
      const config = normalizePointsSystemConfig(prev.pointsSystemConfig);
      const list = [...config.enhanceProPricing.resolutionBuckets];
      if (list.length <= 1) {
        toast.error("至少保留一个分辨率档位");
        return prev;
      }
      list.splice(index, 1);
      return {
        ...prev,
        pointsSystemConfig: {
          ...config,
          enhanceProPricing: {
            ...config.enhanceProPricing,
            resolutionBuckets: list,
          },
        },
      };
    });
  };

  const updateEnhanceProFixedCost = (nextFixedCost: number) => {
    setSiteSettings((prev) => {
      const config = normalizePointsSystemConfig(prev.pointsSystemConfig);
      const pricing = config.enhanceProPricing;
      const fixedCost = roundCreditCost(nextFixedCost);
      const scaleFactorCosts = Object.fromEntries(
        Object.entries(pricing.scaleFactorCosts).map(([factorKey, cost]) => {
          const multiplier = getEnhanceProScaleMultiplier(
            pricing,
            factorKey,
            Number(cost)
          );
          return [factorKey, roundCreditCost(fixedCost * multiplier)];
        })
      );
      return {
        ...prev,
        pointsSystemConfig: {
          ...config,
          enhanceProPricing: {
            ...pricing,
            fixedCost,
            scaleFactorCosts,
          },
        },
      };
    });
  };

  const updateEnhanceProScaleFactorMultiplier = (
    factorKey: string,
    nextMultiplier: number
  ) => {
    setSiteSettings((prev) => {
      const config = normalizePointsSystemConfig(prev.pointsSystemConfig);
      const pricing = config.enhanceProPricing;
      const fixedCost = roundCreditCost(pricing.fixedCost);
      const multiplier = normalizeAdminMultiplier(
        nextMultiplier,
        Number(factorKey) || 1
      );
      return {
        ...prev,
        pointsSystemConfig: {
          ...config,
          enhanceProPricing: {
            ...pricing,
            scaleFactorCosts: {
              ...pricing.scaleFactorCosts,
              [factorKey]: roundCreditCost(fixedCost * multiplier),
            },
          },
        },
      };
    });
  };

  const updateMembershipConfigState = (
    updater: (
      config: ReturnType<typeof normalizeMembershipConfig>
    ) => ReturnType<typeof normalizeMembershipConfig>
  ) => {
    setSiteSettings((prev) => ({
      ...prev,
      membershipConfig: updater(prev.membershipConfig),
    }));
  };

  const updateMembershipOverridesState = (
    updater: (
      overrides: ReturnType<typeof normalizeMembershipUserOverrides>
    ) => ReturnType<typeof normalizeMembershipUserOverrides>
  ) => {
    setSiteSettings((prev) => ({
      ...prev,
      membershipUserOverrides: updater(prev.membershipUserOverrides),
    }));
  };

  const updateMembershipPlan = (
    index: number,
    updater: (plan: MembershipPlanConfig) => MembershipPlanConfig
  ) => {
    updateMembershipConfigState((config) => {
      const plans = [...config.plans];
      if (!plans[index]) return config;
      plans[index] = updater(plans[index]);
      return { ...config, plans };
    });
  };

  const addMembershipPlan = () => {
    updateMembershipConfigState((config) => {
      const nextIndex = config.plans.length + 1;
      const id = `plan-${Date.now()}`;
      const plans = [
        ...config.plans,
        {
          id,
          name: `套餐${nextIndex}`,
          monthlyPrice: 0,
          annualPrice: 0,
          monthlyCredits: 0,
          dailyFreeCredits: 0,
          features: [],
        },
      ];
      return {
        ...config,
        plans,
        defaultPlanId: config.defaultPlanId || id,
      };
    });
  };

  const removeMembershipPlan = (index: number) => {
    updateMembershipConfigState((config) => {
      if (config.plans.length <= 1) {
        toast.error("至少保留一个会员套餐");
        return config;
      }

      const target = config.plans[index];
      if (!target) return config;

      const plans = [...config.plans];
      plans.splice(index, 1);
      const nextDefaultPlanId =
        config.defaultPlanId === target.id
          ? plans[0]?.id || config.defaultPlanId
          : config.defaultPlanId;

      return {
        ...config,
        plans,
        defaultPlanId: nextDefaultPlanId,
      };
    });
  };

  const updateMembershipFaq = (
    index: number,
    updater: (faq: MembershipFaqItem) => MembershipFaqItem
  ) => {
    updateMembershipConfigState((config) => {
      const faqs = [...config.faqs];
      if (!faqs[index]) return config;
      faqs[index] = updater(faqs[index]);
      return { ...config, faqs };
    });
  };

  const addMembershipFaq = () => {
    updateMembershipConfigState((config) => ({
      ...config,
      faqs: [...config.faqs, { question: "", answer: "" }],
    }));
  };

  const removeMembershipFaq = (index: number) => {
    updateMembershipConfigState((config) => {
      if (config.faqs.length <= 1) {
        toast.error("至少保留一条 FAQ");
        return config;
      }
      const faqs = [...config.faqs];
      faqs.splice(index, 1);
      return { ...config, faqs };
    });
  };

  const addMembershipOverride = (kind: "id" | "email") => {
    const key =
      kind === "id"
        ? newOverrideUserId.trim()
        : newOverrideEmail.trim().toLowerCase();
    const planId = newOverridePlanId.trim();

    if (!key || !planId) {
      toast.error("请先填写标识并选择套餐");
      return;
    }

    updateMembershipOverridesState((overrides) => {
      if (kind === "id") {
        return {
          ...overrides,
          userPlansById: {
            ...overrides.userPlansById,
            [key]: planId,
          },
        };
      }

      return {
        ...overrides,
        userPlansByEmail: {
          ...overrides.userPlansByEmail,
          [key]: planId,
        },
      };
    });

    if (kind === "id") {
      setNewOverrideUserId("");
    } else {
      setNewOverrideEmail("");
    }
  };

  const removeMembershipOverride = (kind: "id" | "email", key: string) => {
    updateMembershipOverridesState((overrides) => {
      if (kind === "id") {
        const next = { ...overrides.userPlansById };
        delete next[key];
        return { ...overrides, userPlansById: next };
      }
      const next = { ...overrides.userPlansByEmail };
      delete next[key];
      return { ...overrides, userPlansByEmail: next };
    });
  };

  // --- 抠图API配置逻辑 ---
  const handleSaveRmbgConfig = async () => {
    try {
      // 根据选择的提供商验证配置
      if (rmbgConfig.provider === "rmbg" && !rmbgConfig.apiUrl.trim()) {
        toast.error("请填写RMBG API地址");
        return;
      }
      if (
        rmbgConfig.provider === "photoroom" &&
        !rmbgConfig.photoroomApiKey.trim()
      ) {
        toast.error("请填写PhotoRoom API密钥");
        return;
      }
      if (rmbgConfig.provider === "aoscdn" && !rmbgConfig.aosApiKey.trim()) {
        toast.error("请填写AOS API密钥");
        return;
      }

      const response = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: "rmbg_api_config",
          value: {
            provider: rmbgConfig.provider,
            apiUrl: rmbgConfig.apiUrl.trim(),
            apiKey: rmbgConfig.apiKey.trim() || undefined,
            photoroomApiKey: rmbgConfig.photoroomApiKey.trim() || undefined,
            aosApiKey: rmbgConfig.aosApiKey.trim() || undefined,
            aosApiBaseUrl:
              rmbgConfig.aosApiBaseUrl.trim() || "https://techsz.aoscdn.com",
            aosForegroundType:
              rmbgConfig.aosForegroundType === "auto"
                ? ""
                : rmbgConfig.aosForegroundType,
            aosCrop: rmbgConfig.aosCrop ? 1 : 0,
            aosFormat: rmbgConfig.aosFormat,
          },
        }),
      });

      if (!response.ok) throw new Error("保存失败");
      toast.success("抠图API配置保存成功");
    } catch (error) {
      toast.error("保存抠图API配置失败");
    }
  };

  // --- 变清晰API配置逻辑 ---
  const handleSaveEnhanceConfig = async () => {
    try {
      // 如果启用了备用API，验证备用API配置
      if (enhanceConfig.provider === "vip98k") {
        // VIP98K credentials are read from AiProvider and never duplicated here.
      } else if (enhanceConfig.useBackupApi) {
        if (!enhanceConfig.backupApiUrl.trim()) {
          toast.error("请输入备用API地址");
          return;
        }
        if (!enhanceConfig.backupApiKey.trim()) {
          toast.error("请输入备用API密钥");
          return;
        }
      } else {
        // 如果使用主API，验证主API配置
        if (!enhanceConfig.apiUrl.trim()) {
          toast.error("请输入API地址");
          return;
        }
        if (!enhanceConfig.apiKey.trim()) {
          toast.error("请输入API密钥");
          return;
        }
      }

      const response = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: "enhance_api_config",
          value: {
            provider: enhanceConfig.provider,
            apiUrl: enhanceConfig.apiUrl.trim(),
            apiKey: enhanceConfig.apiKey.trim(),
            type: enhanceConfig.type,
            scaleFactor:
              enhanceConfig.scaleFactor && enhanceConfig.scaleFactor !== "auto"
                ? Number.parseInt(enhanceConfig.scaleFactor)
                : undefined,
            // 备用API配置
            useBackupApi: enhanceConfig.useBackupApi,
            backupApiUrl: enhanceConfig.backupApiUrl.trim(),
            backupApiKey: enhanceConfig.backupApiKey.trim(),
            backupScale: enhanceConfig.backupScale,
            backupModel: enhanceConfig.backupModel,
          },
        }),
      });

      if (!response.ok) throw new Error("保存失败");
      toast.success("变清晰API配置保存成功");
    } catch (error) {
      toast.error("保存变清晰API配置失败");
    }
  };

  const handleSaveEnhanceProConfig = async () => {
    try {
      const hasEnhanceProApiKeysDraft =
        enhanceProApiKeysDraft.trim().length > 0;
      const normalizedConfig = normalizeEnhanceProKreaConfig({
        ...enhanceProConfig,
        providerName:
          enhanceProConfig.providerName.trim() || "Krea Topaz Generative",
        baseUrl:
          enhanceProConfig.baseUrl.trim() || ENHANCE_PRO_KREA_DEFAULT_BASE_URL,
        apiKey: enhanceProConfig.apiKey.trim(),
        apiKeys: hasEnhanceProApiKeysDraft
          ? enhanceProApiKeysDraft
          : enhanceProConfig.apiKeys,
      });

      if (enhanceProConfig.enabled) {
        if (!normalizedConfig.baseUrl) {
          toast.error("请输入 Krea API 地址");
          return;
        }
        if (!normalizedConfig.apiKey && normalizedConfig.apiKeys.length === 0) {
          toast.error("请输入 Krea API Key 或 Key 池");
          return;
        }
      }

      const response = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: ENHANCE_PRO_KREA_SETTING_KEY,
          value: normalizedConfig,
        }),
      });

      const payload = await response.json().catch(() => ({}));
      if (!response.ok) {
        throw new Error(
          String(payload?.message || payload?.error || "保存失败")
        );
      }

      mutateEnhanceProConfig();
      toast.success("图像增强 Pro 配置保存成功");
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : "保存图像增强 Pro 配置失败"
      );
    }
  };

  const handleAddEnhanceProPoolKey = () => {
    const normalizedKey = normalizeEnhanceProKreaConfig({
      apiKey: enhanceProConfig.apiKey,
    }).apiKey;

    if (!normalizedKey) {
      toast.error("请先填写要加入 Key 池的 Krea Bearer Token");
      return;
    }

    setEnhanceProConfig((prev) => {
      const nextKeys = normalizeEnhanceProKreaConfig({
        apiKeys: [...prev.apiKeys, normalizedKey],
      }).apiKeys;
      return {
        ...prev,
        apiKey: "",
        apiKeys: nextKeys,
      };
    });
    setEnhanceProApiKeysDraft("");
    toast.success("Krea Key 已加入池，保存配置后生效");
  };

  const handleSaveAiWashConfig = async () => {
    try {
      const normalizedConfig = normalizeAiWashConfig(aiWashConfig);
      const enabledPresetCount = normalizedConfig.presets.filter(
        (preset) => preset.enabled
      ).length;

      if (normalizedConfig.enabled && enabledPresetCount === 0) {
        toast.error("请至少启用一个 AI洗图预设");
        return;
      }

      if (
        normalizedConfig.enabled &&
        normalizedConfig.presets.some(
          (preset) => preset.enabled && !preset.prompt.trim()
        )
      ) {
        toast.error("启用中的 AI洗图预设至少需要配置基础提示词");
        return;
      }

      const response = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: AI_WASH_CONFIG_KEY,
          value: normalizedConfig,
        }),
      });
      const payload = await response.json().catch(() => ({}));
      if (!response.ok) {
        throw new Error(
          String(payload?.message || payload?.error || "保存失败")
        );
      }

      mutateAiWashConfig();
      toast.success("AI洗图配置保存成功");
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : "保存 AI洗图配置失败"
      );
    }
  };

  const handleSaveCanvasLocalEditConfig = async () => {
    try {
      const normalizedConfig =
        normalizeCanvasLocalEditConfig(canvasLocalEditConfig);
      const response = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: CANVAS_LOCAL_EDIT_CONFIG_KEY,
          value: normalizedConfig,
        }),
      });
      const payload = await response.json().catch(() => ({}));
      if (!response.ok) {
        throw new Error(
          String(payload?.message || payload?.error || "保存失败")
        );
      }

      mutateCanvasLocalEditConfig();
      toast.success("局部编辑模型配置保存成功");
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : "保存局部编辑模型配置失败"
      );
    }
  };

  const handleDeleteEnhanceProPoolKey = (index: number) => {
    setEnhanceProConfig((prev) => ({
      ...prev,
      apiKeys: prev.apiKeys.filter((_, itemIndex) => itemIndex !== index),
    }));
  };

  const handleToggleEnhanceProModelVisible = (
    model: EnhanceProKreaModel,
    visible: boolean
  ) => {
    setEnhanceProConfig((prev) => {
      const hiddenModels = new Set(prev.hiddenModels || []);
      if (visible) {
        hiddenModels.delete(model);
      } else {
        hiddenModels.add(model);
      }

      const nextHiddenModels = ENHANCE_PRO_KREA_MODELS.filter((item) =>
        hiddenModels.has(item)
      );
      const visibleModels = ENHANCE_PRO_KREA_MODELS.filter(
        (item) => !nextHiddenModels.includes(item)
      );
      if (visibleModels.length === 0) {
        toast.error("至少需要保留一个前台可见模型");
        return prev;
      }

      return {
        ...prev,
        hiddenModels: nextHiddenModels,
        defaultModel: visibleModels.includes(prev.defaultModel)
          ? prev.defaultModel
          : visibleModels[0] || ENHANCE_PRO_KREA_DEFAULT_MODEL,
      };
    });
  };

  const handleEnhanceProPresetChange = <K extends keyof EnhanceProPreset>(
    index: number,
    key: K,
    value: EnhanceProPreset[K]
  ) => {
    setEnhanceProConfig((prev) => {
      const nextPresets = prev.presets.map((preset, presetIndex) => {
        if (presetIndex !== index) {
          if (key === "isDefault" && value === true) {
            return { ...preset, isDefault: false };
          }
          return preset;
        }

        const nextPreset = {
          ...preset,
          [key]: value,
        } as EnhanceProPreset;

        if (
          key === "name" &&
          !nextPreset.id.startsWith("enhance-pro-preset-")
        ) {
          return nextPreset;
        }

        if (key === "name") {
          return {
            ...nextPreset,
            id:
              String(value || "")
                .trim()
                .toLowerCase()
                .replace(/[^a-z0-9]+/g, "-")
                .replace(/^-+|-+$/g, "") || nextPreset.id,
          };
        }

        return nextPreset;
      });

      if (
        key === "isDefault" &&
        !nextPresets.some((preset) => preset.isDefault)
      ) {
        return {
          ...prev,
          presets: nextPresets.map((preset, presetIndex) => ({
            ...preset,
            isDefault: presetIndex === 0,
          })),
        };
      }

      return {
        ...prev,
        presets: nextPresets,
      };
    });
  };

  const handleAddEnhanceProPreset = () => {
    const nextPreset = createEmptyEnhanceProPreset();
    setSelectedEnhanceProPresetId(nextPreset.id);
    setEnhanceProConfig((prev) => ({
      ...prev,
      presets: [
        ...prev.presets,
        {
          ...nextPreset,
          isDefault: prev.presets.length === 0,
        },
      ],
    }));
  };

  const handleRemoveEnhanceProPreset = (index: number) => {
    setEnhanceProConfig((prev) => {
      const nextPresets = prev.presets.filter(
        (_, presetIndex) => presetIndex !== index
      );
      if (nextPresets.length === 0) {
        return {
          ...prev,
          presets: [],
        };
      }

      if (nextPresets.some((preset) => preset.isDefault)) {
        return {
          ...prev,
          presets: nextPresets,
        };
      }

      return {
        ...prev,
        presets: nextPresets.map((preset, presetIndex) => ({
          ...preset,
          isDefault: presetIndex === 0,
        })),
      };
    });
  };

  const handleResetEnhanceProPresets = () => {
    setEnhanceProConfig((prev) => ({
      ...prev,
      presets: defaultEnhanceProPresets(),
    }));
  };

  const handleMoveEnhanceProPreset = (fromIndex: number, toIndex: number) => {
    setEnhanceProConfig((prev) => ({
      ...prev,
      presets: reorderEnhanceProPresets(prev.presets, fromIndex, toIndex),
    }));
  };

  const handleEnhanceProPresetDragStart = (
    event: DragEvent<HTMLDivElement>,
    presetId: string
  ) => {
    setDraggingEnhanceProPresetId(presetId);
    event.dataTransfer.effectAllowed = "move";
    event.dataTransfer.setData("text/plain", presetId);
  };

  const handleEnhanceProPresetDragEnd = () => {
    setDraggingEnhanceProPresetId("");
  };

  const handleEnhanceProPresetDrop = (
    event: DragEvent<HTMLDivElement>,
    targetPresetId: string
  ) => {
    event.preventDefault();
    const sourcePresetId =
      draggingEnhanceProPresetId || event.dataTransfer.getData("text/plain");
    setDraggingEnhanceProPresetId("");

    if (!sourcePresetId || sourcePresetId === targetPresetId) {
      return;
    }

    const fromIndex = enhanceProConfig.presets.findIndex(
      (preset) => preset.id === sourcePresetId
    );
    const toIndex = enhanceProConfig.presets.findIndex(
      (preset) => preset.id === targetPresetId
    );

    if (fromIndex < 0 || toIndex < 0) {
      return;
    }

    handleMoveEnhanceProPreset(fromIndex, toIndex);
  };

  // --- 图像拓展API配置逻辑 ---
  const handleSaveExtendConfig = async () => {
    try {
      if (extendConfig.provider !== "vip98k" && !extendConfig.apiKey.trim()) {
        toast.error("请输入API密钥");
        return;
      }

      const xScale = Number.parseFloat(extendConfig.xScale);
      const yScale = Number.parseFloat(extendConfig.yScale);

      if (isNaN(xScale) || xScale < 1.0 || xScale > 2.0) {
        toast.error("X轴放大倍数必须在1.0-2.0之间");
        return;
      }

      if (isNaN(yScale) || yScale < 1.0 || yScale > 2.0) {
        toast.error("Y轴放大倍数必须在1.0-2.0之间");
        return;
      }

      const response = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: "extend_api_config",
          value: {
            provider: extendConfig.provider,
            apiKey: extendConfig.apiKey.trim(),
            xScale,
            yScale,
          },
        }),
      });

      if (!response.ok) throw new Error("保存失败");
      toast.success("图像拓展API配置保存成功");
    } catch (error) {
      toast.error("保存图像拓展API配置失败");
    }
  };

  // --- 去水印API配置逻辑 ---
  const handleSaveWatermarkRemoveConfig = async () => {
    try {
      if (!watermarkRemoveConfig.apiKey.trim()) {
        toast.error("请输入PicWish API密钥");
        return;
      }

      const response = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: "watermark_remove_config",
          value: {
            apiKey: watermarkRemoveConfig.apiKey.trim(),
          },
        }),
      });

      if (!response.ok) throw new Error("保存失败");
      toast.success("去水印API配置保存成功");
    } catch (error) {
      toast.error("保存去水印API配置失败");
    }
  };

  // --- 角度编辑API配置逻辑 ---
  const handleSaveAngleEditConfig = async () => {
    try {
      if (angleEditConfig.enabled && !angleEditConfig.falApiKey.trim()) {
        toast.error("启用角度编辑功能需要配置 fal.ai API Key");
        return;
      }

      const normalizedPointsSystemConfig = normalizePointsSystemConfig(
        siteSettings.pointsSystemConfig
      );
      const [angleResponse, pointsResponse] = await Promise.all([
        fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: "angle_edit_config",
          value: {
            enabled: angleEditConfig.enabled,
            falApiKey: angleEditConfig.falApiKey.trim(),
            loraScale: angleEditConfig.loraScale,
            inferenceSteps: angleEditConfig.inferenceSteps,
            guidanceScale: angleEditConfig.guidanceScale,
            maxImageSize: angleEditConfig.maxImageSize,
            timeout: angleEditConfig.timeout,
          },
        }),
        }),
        fetch("/api/admin/settings", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            key: POINTS_SYSTEM_CONFIG_KEY,
            value: normalizedPointsSystemConfig,
          }),
        }),
      ]);

      if (!angleResponse.ok || !pointsResponse.ok) throw new Error("保存失败");
      toast.success("角度编辑API配置保存成功");
    } catch (error) {
      toast.error("保存角度编辑API配置失败");
    }
  };

  const handleSaveLayerSplitConfig = async () => {
    try {
      if (layerSplitConfig.enabled) {
        if (!layerSplitConfig.replicateApiToken.trim()) {
          toast.error("启用图层拆分需要配置 Replicate API Token");
          return;
        }
        if (!layerSplitConfig.replicateModel.trim()) {
          toast.error("请填写 Replicate 模型");
          return;
        }
      }

      const response = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: "layer_split_config",
          value: {
            enabled: layerSplitConfig.enabled,
            provider: "replicate",
            replicateApiToken: layerSplitConfig.replicateApiToken.trim(),
            replicateModel:
              layerSplitConfig.replicateModel.trim() ||
              "qwen/qwen-image-layered",
            layers: Math.max(
              2,
              Math.min(12, Number(layerSplitConfig.layers) || 4)
            ),
            resolution: Math.max(
              256,
              Math.min(1536, Number(layerSplitConfig.resolution) || 640)
            ),
            trueCfgScale: Math.max(
              1,
              Math.min(12, Number(layerSplitConfig.trueCfgScale) || 4)
            ),
            numInferenceSteps: Math.max(
              1,
              Math.min(80, Number(layerSplitConfig.numInferenceSteps) || 30)
            ),
            cfgNormalize: layerSplitConfig.cfgNormalize,
            useEnPrompt: layerSplitConfig.useEnPrompt,
            negativePrompt: layerSplitConfig.negativePrompt.trim(),
            timeoutMs: Math.max(
              30_000,
              Math.min(900_000, Number(layerSplitConfig.timeoutMs) || 300_000)
            ),
          },
        }),
      });

      if (!response.ok) throw new Error("保存失败");
      toast.success("图层拆分API配置保存成功");
    } catch (error) {
      toast.error("保存图层拆分API配置失败");
    }
  };

  const handleSaveProductPlanningApiConfig = async () => {
    try {
      const [configResponse, featureResponse] = await Promise.all([
        fetch("/api/admin/settings", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            key: PRODUCT_PLANNING_API_CONFIG_KEY,
            value: {
              oneboundBaseUrl: productPlanningApiConfig.oneboundBaseUrl.trim(),
              taobaoApiKey: productPlanningApiConfig.taobaoApiKey.trim(),
              taobaoApiSecret: productPlanningApiConfig.taobaoApiSecret.trim(),
              detailPlusBaseUrl:
                productPlanningApiConfig.detailPlusBaseUrl.trim(),
              detailPlusInternalBaseUrl:
                productPlanningApiConfig.detailPlusInternalBaseUrl.trim(),
              detailPlusApiKey:
                productPlanningApiConfig.detailPlusApiKey.trim(),
              qaApiUrl: productPlanningApiConfig.qaApiUrl.trim(),
              qaToken: productPlanningApiConfig.qaToken.trim(),
              saleApiUrl: productPlanningApiConfig.saleApiUrl.trim(),
              saleToken: productPlanningApiConfig.saleToken.trim(),
              planningDbHost: productPlanningApiConfig.planningDbHost.trim(),
              planningDbPort: productPlanningApiConfig.planningDbPort.trim(),
              planningDbDatabase:
                productPlanningApiConfig.planningDbDatabase.trim(),
              planningDbUser: productPlanningApiConfig.planningDbUser.trim(),
              planningDbPassword:
                productPlanningApiConfig.planningDbPassword.trim(),
              planningDbCharset:
                productPlanningApiConfig.planningDbCharset.trim(),
              planningDbSsl: productPlanningApiConfig.planningDbSsl,
            },
          }),
        }),
        fetch("/api/site-settings", {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            productPlanningEnabled: siteSettings.productPlanningEnabled,
          }),
        }),
      ]);

      const configPayload = await configResponse.json().catch(() => null);
      if (!configResponse.ok) {
        throw new Error(
          configPayload?.cause ||
            configPayload?.message ||
            configPayload?.error ||
            "保存失败"
        );
      }

      const featurePayload = await featureResponse.json().catch(() => null);
      if (!featureResponse.ok) {
        throw new Error(
          featurePayload?.cause ||
            featurePayload?.message ||
            featurePayload?.error ||
            "保存失败"
        );
      }

      toast.success("商品策划工具设置保存成功");
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : "保存商品策划工具设置失败"
      );
    }
  };

  const handleSaveProductPlanningAiModelConfig = async () => {
    try {
      const trimmedBaseUrl =
        productPlanningAiModelConfig.baseUrl.trim() ||
        PRODUCT_PLANNING_AI_MODEL_DEFAULT_BASE_URL;
      const trimmedModelId =
        productPlanningAiModelConfig.modelId.trim() ||
        PRODUCT_PLANNING_AI_MODEL_DEFAULT_MODEL_ID;
      const trimmedDisplayName =
        productPlanningAiModelConfig.displayName.trim() ||
        "商品策划专用 Qwen3-VL";
      const trimmedProviderName =
        productPlanningAiModelConfig.providerName.trim() ||
        "Product Planning Qwen3-VL";

      if (
        productPlanningAiModelConfig.enabled &&
        !productPlanningAiModelConfig.apiKey.trim()
      ) {
        toast.error("启用商品策划专用模型时，请填写 API Key");
        return;
      }

      const response = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: PRODUCT_PLANNING_AI_MODEL_CONFIG_KEY,
          value: {
            enabled: productPlanningAiModelConfig.enabled,
            providerName: trimmedProviderName,
            baseUrl: trimmedBaseUrl,
            apiKey: productPlanningAiModelConfig.apiKey.trim(),
            modelId: trimmedModelId,
            displayName: trimmedDisplayName,
          },
        }),
      });

      const payload = await response.json().catch(() => null);
      if (!response.ok) {
        throw new Error(
          payload?.cause || payload?.message || payload?.error || "保存失败"
        );
      }

      setProductPlanningAiModelConfig((prev) => ({
        ...prev,
        providerName: trimmedProviderName,
        baseUrl: trimmedBaseUrl,
        modelId: trimmedModelId,
        displayName: trimmedDisplayName,
      }));
      mutateProductPlanningAiModelConfig();
      toast.success("商品策划专用 AI 模型配置保存成功");
    } catch (error) {
      toast.error(
        error instanceof Error
          ? error.message
          : "保存商品策划专用 AI 模型配置失败"
      );
    }
  };

  const handleSaveThirdPartySqlServerConfig = async () => {
    try {
      if (thirdPartySqlServerConfig.enabled) {
        if (!thirdPartySqlServerConfig.host.trim()) {
          toast.error("请填写 SQL Server 主机地址");
          return;
        }
        if (!thirdPartySqlServerConfig.database.trim()) {
          toast.error("请填写数据库名称");
          return;
        }
        if (!thirdPartySqlServerConfig.username.trim()) {
          toast.error("请填写数据库账号");
          return;
        }
        if (!thirdPartySqlServerConfig.password.trim()) {
          toast.error("请填写数据库密码");
          return;
        }
      }

      const response = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: THIRD_PARTY_SQLSERVER_CONFIG_KEY,
          value: {
            enabled: thirdPartySqlServerConfig.enabled,
            host: thirdPartySqlServerConfig.host.trim(),
            port: Math.max(
              1,
              Math.min(65_535, Number(thirdPartySqlServerConfig.port) || 1433)
            ),
            database: thirdPartySqlServerConfig.database.trim(),
            username: thirdPartySqlServerConfig.username.trim(),
            password: thirdPartySqlServerConfig.password.trim(),
            encrypt: thirdPartySqlServerConfig.encrypt,
            trustServerCertificate:
              thirdPartySqlServerConfig.trustServerCertificate,
            connectionTimeoutMs: Math.max(
              1000,
              Math.min(
                120_000,
                Number(thirdPartySqlServerConfig.connectionTimeoutMs) || 15_000
              )
            ),
            requestTimeoutMs: Math.max(
              1000,
              Math.min(
                120_000,
                Number(thirdPartySqlServerConfig.requestTimeoutMs) || 30_000
              )
            ),
          },
        }),
      });

      const payload = await response.json().catch(() => null);
      if (!response.ok) {
        throw new Error(
          payload?.cause || payload?.message || payload?.error || "保存失败"
        );
      }

      toast.success("SQL Server 配置保存成功");
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : "保存 SQL Server 配置失败"
      );
    }
  };

  const handleTestThirdPartySqlServerConfig = async () => {
    try {
      setIsTestingThirdPartySqlServer(true);

      const response = await fetch("/api/admin/sqlserver/test", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          config: {
            enabled: thirdPartySqlServerConfig.enabled,
            host: thirdPartySqlServerConfig.host.trim(),
            port: Math.max(
              1,
              Math.min(65_535, Number(thirdPartySqlServerConfig.port) || 1433)
            ),
            database: thirdPartySqlServerConfig.database.trim(),
            username: thirdPartySqlServerConfig.username.trim(),
            password: thirdPartySqlServerConfig.password.trim(),
            encrypt: thirdPartySqlServerConfig.encrypt,
            trustServerCertificate:
              thirdPartySqlServerConfig.trustServerCertificate,
            connectionTimeoutMs: Math.max(
              1000,
              Math.min(
                120_000,
                Number(thirdPartySqlServerConfig.connectionTimeoutMs) || 15_000
              )
            ),
            requestTimeoutMs: Math.max(
              1000,
              Math.min(
                120_000,
                Number(thirdPartySqlServerConfig.requestTimeoutMs) || 30_000
              )
            ),
          },
        }),
      });

      const payload = await response.json().catch(() => null);
      if (!response.ok) {
        throw new Error(
          payload?.cause || payload?.message || payload?.error || "连接测试失败"
        );
      }

      toast.success(
        `连接成功：${payload?.serverName || thirdPartySqlServerConfig.host} / ${payload?.databaseName || thirdPartySqlServerConfig.database}（${payload?.latencyMs || 0}ms）`
      );
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : "SQL Server 连接测试失败"
      );
    } finally {
      setIsTestingThirdPartySqlServer(false);
    }
  };

  // --- 实时画布API配置逻辑 ---
  const handleSaveRealtimeCanvasConfig = async () => {
    try {
      const primaryProviderType = realtimeCanvasConfig.providerType;
      const bflApiKey = realtimeCanvasConfig.bflApiKey.trim();
      const bflBaseUrl =
        realtimeCanvasConfig.bflBaseUrl.trim() || DEFAULT_BFL_BASE_URL;
      const bflModel =
        realtimeCanvasConfig.bflModel.trim() || DEFAULT_BFL_REALTIME_MODEL;
      const falApiKey = realtimeCanvasConfig.falApiKey.trim();
      const falBaseUrl =
        realtimeCanvasConfig.falBaseUrl.trim() || "https://fal.run";
      const falModel = realtimeCanvasConfig.falModel.trim();
      const replicateApiToken = realtimeCanvasConfig.replicateApiToken.trim();
      const replicateModel =
        realtimeCanvasConfig.replicateModel.trim() ||
        "black-forest-labs/flux-2-klein-4b";
      const fallbackEnabled = realtimeCanvasConfig.fallbackEnabled;
      const fallbackProviderType = realtimeCanvasConfig.fallbackProviderType;
      const fallbackBflApiKey = realtimeCanvasConfig.fallbackBflApiKey.trim();
      const fallbackBflBaseUrl =
        realtimeCanvasConfig.fallbackBflBaseUrl.trim() || DEFAULT_BFL_BASE_URL;
      const fallbackBflModel =
        realtimeCanvasConfig.fallbackBflModel.trim() ||
        DEFAULT_BFL_REALTIME_MODEL;
      const fallbackFalApiKey = realtimeCanvasConfig.fallbackFalApiKey.trim();
      const fallbackFalBaseUrl =
        realtimeCanvasConfig.fallbackFalBaseUrl.trim() || "https://fal.run";
      const fallbackFalModel = realtimeCanvasConfig.fallbackFalModel.trim();
      const fallbackReplicateApiToken =
        realtimeCanvasConfig.fallbackReplicateApiToken.trim();
      const fallbackReplicateModel =
        realtimeCanvasConfig.fallbackReplicateModel.trim() ||
        "black-forest-labs/flux-2-klein-4b";

      if (
        realtimeCanvasConfig.enabled &&
        ((primaryProviderType === "bfl" && !bflApiKey) ||
          (primaryProviderType === "replicate" && !replicateApiToken) ||
          (primaryProviderType === "fal" && (!falApiKey || !falModel)))
      ) {
        toast.error(
          primaryProviderType === "replicate"
            ? "启用实时画布功能需要配置 Replicate API Token"
            : primaryProviderType === "fal"
              ? "启用实时画布功能需要配置 FAL API Key 和模型 ID"
              : "启用实时画布功能需要配置 BFL API Key"
        );
        return;
      }

      if (
        realtimeCanvasConfig.enabled &&
        fallbackEnabled &&
        ((fallbackProviderType === "bfl" && !fallbackBflApiKey) ||
          (fallbackProviderType === "replicate" &&
            !fallbackReplicateApiToken) ||
          (fallbackProviderType === "fal" &&
            (!fallbackFalApiKey || !fallbackFalModel)))
      ) {
        toast.error(
          fallbackProviderType === "replicate"
            ? "启用备用实时服务需要配置备用 Replicate API Token"
            : fallbackProviderType === "fal"
              ? "启用备用实时服务需要配置备用 FAL API Key 和模型 ID"
              : "启用备用实时服务需要配置备用 BFL API Key"
        );
        return;
      }

      if (realtimeCanvasConfig.enabled) {
        const probeResponse = await fetch(
          "/api/admin/realtime/model-capability",
          {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              providerType: primaryProviderType,
              apiKey:
                primaryProviderType === "replicate"
                  ? replicateApiToken
                  : primaryProviderType === "fal"
                    ? falApiKey
                    : bflApiKey,
              modelId:
                primaryProviderType === "replicate"
                  ? replicateModel
                  : primaryProviderType === "fal"
                    ? falModel
                    : bflModel,
              baseUrl:
                primaryProviderType === "replicate"
                  ? undefined
                  : primaryProviderType === "fal"
                    ? falBaseUrl
                    : bflBaseUrl,
            }),
          }
        );
        const probeData = await probeResponse.json().catch(() => null);
        if (!probeResponse.ok || probeData?.supported === false) {
          toast.error(probeData?.message || "模型能力探针失败，已阻止保存");
          return;
        }

        if (fallbackEnabled) {
          const fallbackProbeResponse = await fetch(
            "/api/admin/realtime/model-capability",
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                providerType: fallbackProviderType,
                apiKey:
                  fallbackProviderType === "replicate"
                    ? fallbackReplicateApiToken
                    : fallbackProviderType === "fal"
                      ? fallbackFalApiKey
                      : fallbackBflApiKey,
                modelId:
                  fallbackProviderType === "replicate"
                    ? fallbackReplicateModel
                    : fallbackProviderType === "fal"
                      ? fallbackFalModel
                      : fallbackBflModel,
                baseUrl:
                  fallbackProviderType === "replicate"
                    ? undefined
                    : fallbackProviderType === "fal"
                      ? fallbackFalBaseUrl
                      : fallbackBflBaseUrl,
              }),
            }
          );
          const fallbackProbeData = await fallbackProbeResponse
            .json()
            .catch(() => null);
          if (
            !fallbackProbeResponse.ok ||
            fallbackProbeData?.supported === false
          ) {
            toast.error(
              fallbackProbeData?.message || "备用实时服务探针失败，已阻止保存"
            );
            return;
          }
        }
      }

      const response = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: "realtime_canvas_config",
          value: {
            enabled: realtimeCanvasConfig.enabled,
            providerType: primaryProviderType,
            bflApiKey,
            bflBaseUrl,
            bflModel,
            falApiKey,
            falBaseUrl,
            falModel,
            replicateApiToken,
            replicateModel,
            fallbackEnabled,
            fallbackProviderType,
            fallbackBflApiKey,
            fallbackBflBaseUrl,
            fallbackBflModel,
            fallbackFalApiKey,
            fallbackFalBaseUrl,
            fallbackFalModel,
            fallbackReplicateApiToken,
            fallbackReplicateModel,
            runwareApiKey: bflApiKey,
            apiKey: primaryProviderType === "fal" ? falApiKey : bflApiKey,
            runwareModel: bflModel,
            renderMode: realtimeCanvasConfig.renderMode,
            throttleInterval: Math.min(
              260,
              Math.max(60, Number(realtimeCanvasConfig.throttleInterval) || 100)
            ),
            maxBuffering: Math.min(
              6,
              Math.max(1, Number(realtimeCanvasConfig.maxBuffering) || 2)
            ),
            maxInputResolution: Math.min(
              1536,
              Math.max(
                512,
                Number(realtimeCanvasConfig.maxInputResolution) || 1024
              )
            ),
            jpegQuality: Math.min(
              0.82,
              Math.max(0.35, Number(realtimeCanvasConfig.jpegQuality) || 0.55)
            ),
            previewMegapixels: Math.min(
              0.8,
              Math.max(
                0.2,
                Number(realtimeCanvasConfig.previewMegapixels) || 0.4
              )
            ),
            detailMegapixels: Math.min(
              1.2,
              Math.max(
                0.6,
                Number(realtimeCanvasConfig.detailMegapixels) || 1.0
              )
            ),
            outputJpegQuality: Math.min(
              90,
              Math.max(35, Number(realtimeCanvasConfig.outputJpegQuality) || 62)
            ),
            defaults: {
              steps: Math.min(
                6,
                Math.max(1, Number(realtimeCanvasConfig.steps) || 3)
              ),
              scheduleMu: Math.min(
                3.5,
                Math.max(1.5, Number(realtimeCanvasConfig.scheduleMu) || 2.3)
              ),
              feedback: Math.min(
                1,
                Math.max(0.7, Number(realtimeCanvasConfig.feedback) || 0.95)
              ),
              imageSize: realtimeCanvasConfig.imageSize,
            },
          },
        }),
      });

      if (!response.ok) {
        const errorData = await response.json().catch(() => null);
        throw new Error(errorData?.message || "保存失败");
      }
      toast.success("实时画布配置保存成功");
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : "保存实时画布配置失败"
      );
    }
  };

  const handleSaveCanvasImageTaskQueueConfig = async () => {
    try {
      const normalized = normalizeCanvasImageTaskQueueConfig(
        canvasImageTaskQueueConfig
      );
      const response = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: CANVAS_IMAGE_TASK_QUEUE_CONFIG_KEY,
          value: normalized,
        }),
      });
      const payload = await response.json().catch(() => null);
      if (!response.ok) {
        throw new Error(payload?.message || payload?.error || "保存失败");
      }
      setCanvasImageTaskQueueConfig(
        normalizeCanvasImageTaskQueueConfig(
          payload?.setting?.value || normalized
        )
      );
      await mutateCanvasImageTaskQueueConfig();
      toast.success("全站生图并发与批次间隔配置保存成功");
    } catch (error) {
      toast.error(
        error instanceof Error
          ? error.message
          : "保存全站生图并发与批次间隔配置失败"
      );
    }
  };

  // --- 批量处理配置逻辑 ---
  const handleSaveSceneFusionConfig = async () => {
    try {
      if (!sceneFusionConfig.defaultPrompt.trim()) {
        toast.error("默认提示词不能为空");
        return;
      }

      const response = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: "scene_fusion_config",
          value: {
            enabled: sceneFusionConfig.enabled,
            preRmbgEnabled: sceneFusionConfig.preRmbgEnabled,
            defaultPrompt: sceneFusionConfig.defaultPrompt.trim(),
            maxScenes: Math.max(
              1,
              Math.min(10, sceneFusionConfig.maxScenes || 10)
            ),
            modelId: sceneFusionConfig.modelId,
          },
        }),
      });

      if (!response.ok) throw new Error("保存失败");
      toast.success("批量处理配置保存成功");
    } catch (error) {
      toast.error("保存批量处理配置失败");
    }
  };

  // --- 导航链接逻辑 ---
  const resetNavLinkForm = () => {
    setNavLinkForm({
      id: "",
      name: "",
      url: "",
      order: 0,
      isEnabled: true,
      toolboxGroup: 1,
    });
    setEditingNavLink(null);
  };

  const handleSaveNavLink = async () => {
    try {
      const method = editingNavLink ? "PUT" : "POST";
      const body = editingNavLink
        ? { ...navLinkForm, id: editingNavLink }
        : navLinkForm;

      const response = await fetch("/api/nav-links", {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });

      if (!response.ok) throw new Error("保存失败");
      toast.success(editingNavLink ? "链接更新成功" : "链接创建成功");
      mutateNavLinks();
      setShowNavLinkDialog(false);
      resetNavLinkForm();
    } catch (error) {
      toast.error("保存导航链接失败");
    }
  };

  const handleDeleteNavLink = async (id: string) => {
    if (!confirm("确定要删除此链接吗？")) return;
    try {
      const response = await fetch(`/api/nav-links?id=${id}`, {
        method: "DELETE",
      });
      if (!response.ok) throw new Error("删除失败");
      toast.success("链接删除成功");
      mutateNavLinks();
    } catch (error) {
      toast.error("删除链接失败");
    }
  };

  // --- 视频教程管理逻辑 ---
  const resetTutorialVideoForm = () => {
    setTutorialVideoForm({
      title: "",
      videoUrl: "",
      coverUrl: "",
      description: "",
      order: 0,
      isEnabled: true,
    });
    setEditingTutorialVideo(null);
  };

  const handleSaveTutorialVideo = async () => {
    try {
      const method = editingTutorialVideo ? "PUT" : "POST";
      const body = editingTutorialVideo
        ? { ...tutorialVideoForm, id: editingTutorialVideo }
        : tutorialVideoForm;

      const response = await fetch("/api/tutorial-videos", {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });

      if (!response.ok) throw new Error("保存失败");
      toast.success(editingTutorialVideo ? "视频更新成功" : "视频创建成功");
      mutateTutorialVideos();
      setShowTutorialVideoDialog(false);
      resetTutorialVideoForm();
    } catch (error) {
      toast.error("保存视频失败");
    }
  };

  const handleDeleteTutorialVideo = async (id: string) => {
    if (!confirm("确定要删除此视频吗？")) return;
    try {
      const response = await fetch(`/api/tutorial-videos?id=${id}`, {
        method: "DELETE",
      });
      if (!response.ok) throw new Error("删除失败");
      toast.success("视频删除成功");
      mutateTutorialVideos();
    } catch (error) {
      toast.error("删除视频失败");
    }
  };

  // --- 认证设置逻辑 ---
  const handleSaveAuthSettings = async () => {
    try {
      const response = await fetch("/api/auth-settings", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(authSettings),
      });
      if (!response.ok) throw new Error("保存失败");
      toast.success("认证设置保存成功");
      mutateAuthSettings();
    } catch (error) {
      toast.error("保存认证设置失败");
    }
  };

  // --- AI 提供商逻辑 ---
  const resetProviderForm = () => {
    setProviderForm({
      id: "",
      name: "",
      type: "openai",
      baseUrl: getProviderDefaultBaseUrl("openai"),
      apiKey: "",
      isEnabled: true,
    });
    setEditingProvider(null);
  };

  const handleSaveProvider = async () => {
    try {
      const method = editingProvider ? "PUT" : "POST";
      const isNewProvider = !editingProvider;
      const isVolcanoVideo = providerForm.type === "volcano-video";
      const isKreaProvider = providerForm.type === "krea";
      const isFalImageProvider = providerForm.type === "fal-image";
      const isRuxaImageProvider = providerForm.type === "ruxa-image";
      const isSnapgenImageProvider = providerForm.type === "snapgen-image";
      const isBananaImageProvider = providerForm.type === "bananaimage";
      const isVisionaryProvider = providerForm.type === "visionary";
      const isAtlasCloudProvider = providerForm.type === "atlascloud";
      const isVip98kProvider = providerForm.type === "vip98k";
      const isBltcyVideoProvider = providerForm.type === "bltcy-video";
      const isLemonProvider =
        providerForm.type === "openai" &&
        isLemonApiBaseUrl(
          providerForm.baseUrl || getProviderDefaultBaseUrl(providerForm.type)
        );
      const isBltcyImageProvider =
        providerForm.type === "openai-image" &&
        isBltcyImageBaseUrl(
          providerForm.baseUrl || getProviderDefaultBaseUrl(providerForm.type)
        );
      const isBltcyBflProvider =
        providerForm.type === "bfl-image" &&
        isBltcyBflBaseUrl(
          providerForm.baseUrl || getProviderDefaultBaseUrl(providerForm.type)
        );
      const defaultBaseUrl = getProviderDefaultBaseUrl(providerForm.type);
      const normalizedBaseUrl = providerForm.baseUrl.trim();

      let requestData: any = editingProvider
        ? { ...providerForm, id: editingProvider }
        : providerForm;

      if (
        defaultBaseUrl &&
        (!normalizedBaseUrl ||
          !isHttpUrlLike(normalizedBaseUrl) ||
          normalizedBaseUrl.includes("@"))
      ) {
        requestData.baseUrl = defaultBaseUrl;
      } else {
        requestData.baseUrl = normalizedBaseUrl;
      }

      if (editingProvider && !providerForm.apiKey) {
        const { apiKey, ...restData } = requestData;
        requestData = restData;
      }

      const response = await fetch("/api/admin/ai-providers", {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(requestData),
      });

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

      const data = await response.json();
      const providerId = data.provider?.id || editingProvider;

      toast.success(editingProvider ? "提供商更新成功" : "提供商创建成功");
      mutateProviders();
      setShowProviderDialog(false);
      resetProviderForm();

      // 🆕 如果是新创建的火山引擎视频Provider，自动添加预设模型
      if (isNewProvider && isVolcanoVideo && providerId) {
        toast.info("正在自动添加预设模型...");

        try {
          const modelsResponse = await fetch(
            "/api/admin/volcano-video-models",
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ providerId }),
            }
          );

          const modelsData = await modelsResponse.json();

          if (modelsResponse.ok && modelsData.addedCount > 0) {
            toast.success(
              `✅ 已自动添加 ${modelsData.addedCount} 个预设模型！`
            );
            mutateModels(); // 刷新模型列表
          }
        } catch (modelError) {
          console.error("[Auto Add Models] Error:", modelError);
          toast.warning('预设模型添加失败，请手动点击"快速添加预设模型"按钮');
        }
      }

      if (isNewProvider && isKreaProvider && providerId) {
        toast.info("正在自动添加 Krea 官方预设模型...");

        try {
          const modelsResponse = await fetch("/api/admin/krea-models", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ providerId }),
          });

          const modelsData = await modelsResponse.json();

          if (modelsResponse.ok && modelsData.addedCount > 0) {
            toast.success(
              `已自动添加 ${modelsData.addedCount} 个 Krea 预设模型`
            );
            mutateModels();
          }
        } catch (modelError) {
          console.error("[Auto Add Krea Models] Error:", modelError);
          toast.warning(
            'Krea 预设模型添加失败，请手动点击"快速添加 Krea 预设模型"按钮'
          );
        }
      }

      if (isNewProvider && isFalImageProvider && providerId) {
        try {
          await handleQuickAddFalImageModels(providerId, { skipConfirm: true });
        } catch (modelError) {
          console.error("[Auto Add FAL Image Models] Error:", modelError);
          toast.warning(
            'FAL 图片预设模型添加失败，请手动点击"快速添加 FAL 图片预设"按钮'
          );
        }
      }

      if (isNewProvider && isRuxaImageProvider && providerId) {
        try {
          await handleQuickAddRuxaImageModels(providerId, { skipConfirm: true });
        } catch (modelError) {
          console.error("[Auto Add RUXA Image Models] Error:", modelError);
          toast.warning(
            'RUXA 生图预设模型添加失败，请手动点击"快速添加 RUXA 图片预设"按钮'
          );
        }
      }

      if (isNewProvider && isSnapgenImageProvider && providerId) {
        try {
          await handleQuickAddSnapgenImageModels(providerId, { skipConfirm: true });
        } catch (modelError) {
          console.error("[Auto Add SnapGen Image Models] Error:", modelError);
          toast.warning(
            'SnapGen 生图预设模型添加失败，请手动点击"快速添加 SnapGen 图片预设"按钮'
          );
        }
      }

      if (isNewProvider && isBananaImageProvider && providerId) {
        try {
          await handleQuickAddBananaImageModels(providerId, { skipConfirm: true });
        } catch (modelError) {
          console.error("[Auto Add BananaImage Models] Error:", modelError);
          toast.warning(
            'BananaImage 预设模型添加失败，请手动点击"快速添加 BananaImage 图片预设"按钮'
          );
        }
      }

      if (isNewProvider && isVisionaryProvider && providerId) {
        try {
          await handleQuickAddVisionaryModels(providerId, { skipConfirm: true });
        } catch (modelError) {
          console.error("[Auto Add Visionary Models] Error:", modelError);
          toast.warning(
            'Visionary 预设模型添加失败，请手动点击"快速添加 Visionary 图片预设"按钮'
          );
        }
      }

      if (isNewProvider && isAtlasCloudProvider && providerId) {
        try {
          await handleQuickAddAtlasCloudModels(providerId, { skipConfirm: true });
        } catch (modelError) {
          console.error("[Auto Add Atlas Cloud Models] Error:", modelError);
          toast.warning(
            'Atlas Cloud 模型同步失败，请手动点击"同步 Atlas Cloud 模型"按钮'
          );
        }
      }

      if (isNewProvider && isVip98kProvider && providerId) {
        try {
          await handleQuickAddVip98kModels(providerId, { skipConfirm: true });
        } catch (modelError) {
          console.error("[Auto Sync VIP98K Models] Error:", modelError);
          toast.warning(
            'VIP98K 模型同步失败，请手动点击"同步 VIP98K 全部模型"按钮'
          );
        }
      }

      if (isNewProvider && isBltcyVideoProvider && providerId) {
        try {
          await handleQuickAddBltcyVideoModels(providerId, {
            skipConfirm: true,
          });
        } catch (modelError) {
          console.error("[Auto Add BLTCY Video Models] Error:", modelError);
          toast.warning(
            '柏拉图视频预设模型添加失败，请手动点击"快速添加视频预设"按钮'
          );
        }
      }

      if (isNewProvider && isLemonProvider && providerId) {
        try {
          await handleQuickAddLemonModels(providerId);
        } catch (modelError) {
          console.error("[Auto Add Lemon Models] Error:", modelError);
          toast.warning(
            'LemonAPI 预设模型添加失败，请手动点击"快速添加 Gemini 预设模型"按钮'
          );
        }
      }

      if (isNewProvider && isBltcyImageProvider && providerId) {
        try {
          await handleQuickAddBltcyImageModels(providerId, {
            skipConfirm: true,
          });
        } catch (modelError) {
          console.error("[Auto Add BLTCY Image Models] Error:", modelError);
          toast.warning(
            '柏拉图 Flux 预设模型添加失败，请手动点击"快速添加图片编辑预设"按钮'
          );
        }
      }

      if (isNewProvider && isBltcyBflProvider && providerId) {
        try {
          await handleQuickAddBltcyBflModels(providerId, { skipConfirm: true });
        } catch (modelError) {
          console.error("[Auto Add BLTCY BFL Models] Error:", modelError);
          toast.warning(
            '柏拉图 BFL 预设模型添加失败，请手动点击"快速添加 BFL 异步预设"按钮'
          );
        }
      }
    } catch (error) {
      toast.error("保存提供商失败");
    }
  };

  const handleDeleteProvider = async (id: string) => {
    if (!confirm("确定删除？关联模型也会被删除。")) return;
    try {
      const response = await fetch(`/api/admin/ai-providers?id=${id}`, {
        method: "DELETE",
      });
      if (!response.ok) throw new Error("删除失败");
      toast.success("提供商删除成功");
      mutateProviders();
      mutateModels();
    } catch (error) {
      toast.error("删除提供商失败");
    }
  };

  const handleSaveTripo3dConfig = async () => {
    try {
      const trimmedName = tripo3dConfig.name.trim() || "Tripo3D";
      const trimmedBaseUrl =
        tripo3dConfig.baseUrl.trim() || getProviderDefaultBaseUrl("tripo-3d");
      const hasProvider = Boolean(tripo3dConfig.providerId);

      if (!hasProvider && !tripo3dConfig.apiKey.trim()) {
        toast.error("请填写 Tripo3D API Key");
        return;
      }

      const requestData: Record<string, any> = hasProvider
        ? {
            id: tripo3dConfig.providerId,
            name: trimmedName,
            type: "tripo-3d",
            baseUrl: trimmedBaseUrl,
            isEnabled: tripo3dConfig.isEnabled,
          }
        : {
            name: trimmedName,
            type: "tripo-3d",
            baseUrl: trimmedBaseUrl,
            apiKey: tripo3dConfig.apiKey.trim(),
            isEnabled: tripo3dConfig.isEnabled,
          };

      if (hasProvider && tripo3dConfig.apiKey.trim()) {
        requestData.apiKey = tripo3dConfig.apiKey.trim();
      }

      const response = await fetch("/api/admin/ai-providers", {
        method: hasProvider ? "PUT" : "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(requestData),
      });

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

      toast.success("Tripo3D 配置保存成功");
      setTripo3dConfig((prev) => ({ ...prev, apiKey: "" }));
      mutateProviders();
    } catch (error) {
      toast.error("保存 Tripo3D 配置失败");
    }
  };

  const handleAddTripo3dPoolKey = async () => {
    try {
      const trimmedName = tripo3dConfig.name.trim() || "Tripo3D Key";
      const trimmedBaseUrl =
        tripo3dConfig.baseUrl.trim() || getProviderDefaultBaseUrl("tripo-3d");
      const trimmedApiKey = tripo3dConfig.apiKey.trim();

      if (!trimmedApiKey) {
        toast.error("请填写要加入 Key 池的 Tripo3D API Key");
        return;
      }

      const response = await fetch("/api/admin/ai-providers", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: trimmedName,
          type: "tripo-3d",
          baseUrl: trimmedBaseUrl,
          apiKey: trimmedApiKey,
          isEnabled: tripo3dConfig.isEnabled,
        }),
      });

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

      toast.success("Tripo3D Key 已加入池");
      setTripo3dConfig((prev) => ({ ...prev, apiKey: "" }));
      mutateProviders();
    } catch (error) {
      toast.error("添加 Tripo3D Key 失败");
    }
  };

  const handleEditTripoPoolProvider = (provider: AiProvider) => {
    setTripo3dConfig({
      providerId: provider.id,
      name: provider.name || "Tripo3D",
      baseUrl: provider.baseUrl || getProviderDefaultBaseUrl("tripo-3d"),
      apiKey: "",
      isEnabled: provider.isEnabled,
    });
  };

  const handleToggleTripoPoolProvider = async (
    provider: AiProvider,
    isEnabled: boolean
  ) => {
    setTripoProviderBusyId(provider.id);
    try {
      const response = await fetch("/api/admin/ai-providers", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          id: provider.id,
          isEnabled,
        }),
      });

      if (!response.ok) {
        throw new Error("更新状态失败");
      }

      toast.success(
        `已${isEnabled ? "启用" : "停用"} ${provider.name || "Tripo3D Key"}`
      );
      mutateProviders();
    } catch (error) {
      toast.error("更新 Tripo3D Key 状态失败");
    } finally {
      setTripoProviderBusyId(null);
    }
  };

  const handleSaveWorldlabs3dConfig = async () => {
    try {
      const trimmedName = worldlabs3dConfig.name.trim() || "World Labs";
      const trimmedBaseUrl =
        worldlabs3dConfig.baseUrl.trim() ||
        getProviderDefaultBaseUrl("worldlabs-3d");
      const hasProvider = Boolean(worldlabs3dConfig.providerId);
      const normalizedKeyPoolConfig = normalizeWorldLabsKeyPoolConfig({
        ...worldlabsKeyPoolConfig,
        providerName: trimmedName,
        baseUrl: trimmedBaseUrl,
        isEnabled: worldlabs3dConfig.isEnabled,
      });

      if (!hasProvider && !worldlabs3dConfig.apiKey.trim()) {
        const keyPoolResponse = await fetch("/api/admin/settings", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            key: WORLDLABS_KEY_POOL_CONFIG_KEY,
            value: normalizedKeyPoolConfig,
          }),
        });

        if (!keyPoolResponse.ok) {
          const payload = await keyPoolResponse.json().catch(() => ({}));
          throw new Error(
            String(
              payload?.message ||
                payload?.error ||
                "保存 World Labs 基础配置失败"
            )
          );
        }

        setWorldlabsKeyPoolConfig(normalizedKeyPoolConfig);
        mutateWorldlabsKeyPoolConfig();
        toast.success("World Labs 基础配置已保存，添加 API Key 后即可生成");
        return;
      }

      const requestData: Record<string, any> = hasProvider
        ? {
            id: worldlabs3dConfig.providerId,
            name: trimmedName,
            type: "worldlabs-3d",
            baseUrl: trimmedBaseUrl,
            isEnabled: worldlabs3dConfig.isEnabled,
          }
        : {
            name: trimmedName,
            type: "worldlabs-3d",
            baseUrl: trimmedBaseUrl,
            apiKey: worldlabs3dConfig.apiKey.trim(),
            isEnabled: worldlabs3dConfig.isEnabled,
          };

      if (hasProvider && worldlabs3dConfig.apiKey.trim()) {
        requestData.apiKey = worldlabs3dConfig.apiKey.trim();
      }

      const response = await fetch("/api/admin/ai-providers", {
        method: hasProvider ? "PUT" : "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(requestData),
      });

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

      const keyPoolResponse = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: WORLDLABS_KEY_POOL_CONFIG_KEY,
          value: normalizedKeyPoolConfig,
        }),
      });

      if (!keyPoolResponse.ok) {
        const payload = await keyPoolResponse.json().catch(() => ({}));
        throw new Error(
          String(
            payload?.message ||
              payload?.error ||
              "保存 World Labs key 池导入令牌失败"
          )
        );
      }

      toast.success("World Labs 配置保存成功");
      setWorldlabs3dConfig((prev) => ({ ...prev, apiKey: "" }));
      setWorldlabsKeyPoolConfig(normalizedKeyPoolConfig);
      mutateProviders();
      mutateWorldlabsKeyPoolConfig();
    } catch (error) {
      console.error("保存 World Labs 配置失败:", error);
      toast.error(
        error instanceof Error ? error.message : "保存 World Labs 配置失败"
      );
    }
  };

  const handleAddWorldlabs3dPoolKey = async () => {
    try {
      const trimmedName = worldlabs3dConfig.name.trim() || "World Labs Key";
      const trimmedBaseUrl =
        worldlabs3dConfig.baseUrl.trim() ||
        getProviderDefaultBaseUrl("worldlabs-3d");
      const trimmedApiKey = worldlabs3dConfig.apiKey.trim();

      if (!trimmedApiKey) {
        toast.error("请填写要加入 Key 池的 World Labs API Key");
        return;
      }

      const response = await fetch("/api/worldlabs/key-pool/import", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          keys: [
            {
              apiKey: trimmedApiKey,
              name: trimmedName,
              baseUrl: trimmedBaseUrl,
              isEnabled: worldlabs3dConfig.isEnabled,
            },
          ],
        }),
      });

      const payload = await response.json().catch(() => ({}));
      if (!response.ok || payload?.success === false) {
        throw new Error(
          String(
            payload?.error || payload?.message || "添加 World Labs Key 失败"
          )
        );
      }

      const importedCount = Number(payload?.data?.importedCount || 0);
      const skippedCount = Number(payload?.data?.skippedCount || 0);
      toast.success(
        importedCount > 0
          ? "World Labs Key 已加入池"
          : skippedCount > 0
            ? "这个 World Labs Key 已存在，已跳过重复添加"
            : "World Labs Key 处理完成"
      );
      setWorldlabs3dConfig((prev) => ({ ...prev, apiKey: "" }));
      mutateProviders();
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : "添加 World Labs Key 失败"
      );
    }
  };

  const handleImportWorldlabs3dPoolKeys = async () => {
    try {
      const apiKeysText = worldlabsApiKeysDraft.trim();
      if (!apiKeysText) {
        toast.error("请先粘贴要批量导入的 World Labs API Key");
        return;
      }

      const response = await fetch("/api/worldlabs/key-pool/import", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          apiKeysText,
          namePrefix: worldlabs3dConfig.name.trim() || "WorldLabsKey",
          baseUrl:
            worldlabs3dConfig.baseUrl.trim() ||
            getProviderDefaultBaseUrl("worldlabs-3d"),
          isEnabled: worldlabs3dConfig.isEnabled,
        }),
      });

      const payload = await response.json().catch(() => ({}));
      if (!response.ok || payload?.success === false) {
        throw new Error(
          String(
            payload?.error || payload?.message || "批量导入 World Labs Key 失败"
          )
        );
      }

      const importedCount = Number(payload?.data?.importedCount || 0);
      const skippedCount = Number(payload?.data?.skippedCount || 0);
      toast.success(
        `World Labs Key 导入完成：新增 ${importedCount} 个，跳过 ${skippedCount} 个`
      );
      setWorldlabsApiKeysDraft("");
      setWorldlabs3dConfig((prev) => ({ ...prev, apiKey: "" }));
      mutateProviders();
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : "批量导入 World Labs Key 失败"
      );
    }
  };

  const updateThreeDModelAliasEntries = (
    key: "tripoModels" | "worldModels",
    updater: (entries: ThreeDModelAliasEntry[]) => ThreeDModelAliasEntry[]
  ) => {
    setThreeDModelAliasConfig((prev) => ({
      ...prev,
      [key]: updater(prev[key]),
    }));
  };

  const handleThreeDModelAliasEntryChange = <
    K extends keyof ThreeDModelAliasEntry,
  >(
    key: "tripoModels" | "worldModels",
    index: number,
    field: K,
    value: ThreeDModelAliasEntry[K]
  ) => {
    updateThreeDModelAliasEntries(key, (entries) =>
      entries.map((entry, entryIndex) => {
        if (entryIndex !== index) {
          if (field === "isDefault" && value === true) {
            return { ...entry, isDefault: false };
          }
          return entry;
        }
        return {
          ...entry,
          [field]: value,
        } as ThreeDModelAliasEntry;
      })
    );
  };

  const handleAddThreeDModelAliasEntry = (
    key: "tripoModels" | "worldModels"
  ) => {
    updateThreeDModelAliasEntries(key, (entries) => [
      ...entries,
      {
        id: `${key === "tripoModels" ? "tripo" : "world"}-custom-${crypto.randomUUID().slice(0, 8)}`,
        displayName: "",
        realModelId: "",
        description: "",
        enabled: true,
        isDefault: false,
      },
    ]);
  };

  const handleRemoveThreeDModelAliasEntry = (
    key: "tripoModels" | "worldModels",
    index: number
  ) => {
    updateThreeDModelAliasEntries(key, (entries) => {
      if (entries.length <= 1) return entries;
      const nextEntries = entries.filter(
        (_, entryIndex) => entryIndex !== index
      );
      const hasDefault = nextEntries.some(
        (entry) => entry.enabled !== false && entry.isDefault
      );

      if (hasDefault) return nextEntries;

      const fallbackIndex = nextEntries.findIndex(
        (entry) => entry.enabled !== false
      );
      const targetIndex = fallbackIndex >= 0 ? fallbackIndex : 0;
      return nextEntries.map((entry, entryIndex) => ({
        ...entry,
        isDefault: entryIndex === targetIndex,
      }));
    });
  };

  const handleResetThreeDModelAliasConfig = () => {
    setThreeDModelAliasConfig(defaultThreeDModelAliasConfig());
  };

  const handleSaveThreeDModelAliasConfig = async () => {
    try {
      const configToSave = normalizeThreeDModelAliasConfig(
        threeDModelAliasConfig
      );
      const invalidEntry = [
        ...configToSave.tripoModels.map((entry, index) => ({
          providerLabel: "Tripo3D",
          index,
          entry,
        })),
        ...configToSave.worldModels.map((entry, index) => ({
          providerLabel: "World Labs",
          index,
          entry,
        })),
      ].find(
        ({ entry }) => !entry.displayName.trim() || !entry.realModelId.trim()
      );

      if (invalidEntry) {
        throw new Error(
          `${invalidEntry.providerLabel} 第 ${invalidEntry.index + 1} 条映射缺少展示名或真实模型 ID`
        );
      }

      const response = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: THREED_MODEL_ALIAS_CONFIG_SETTING_KEY,
          value: configToSave,
        }),
      });

      const payload = await response.json().catch(() => ({}));
      if (!response.ok) {
        throw new Error(
          String(payload?.message || payload?.error || "保存失败")
        );
      }

      setThreeDModelAliasConfig(configToSave);
      mutateThreeDModelAliasConfig();
      toast.success("3D 模型显示名映射保存成功");
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : "保存 3D 模型显示名映射失败"
      );
    }
  };

  const handleEditWorldlabsPoolProvider = (provider: AiProvider) => {
    setProviderForm({
      id: provider.id,
      name: provider.name,
      type: provider.type,
      baseUrl: provider.baseUrl,
      apiKey: "",
      isEnabled: provider.isEnabled,
    });
    setEditingProvider(provider.id);
    setShowProviderDialog(true);
  };

  const handleToggleWorldlabsPoolProvider = async (
    provider: AiProvider,
    isEnabled: boolean
  ) => {
    setWorldlabsProviderBusyId(provider.id);
    try {
      const response = await fetch("/api/admin/ai-providers", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          id: provider.id,
          isEnabled,
        }),
      });

      if (!response.ok) {
        throw new Error("更新状态失败");
      }

      toast.success(
        `已${isEnabled ? "启用" : "停用"} ${provider.name || "World Labs Key"}`
      );
      mutateProviders();
    } catch (error) {
      toast.error("更新 World Labs Key 状态失败");
    } finally {
      setWorldlabsProviderBusyId(null);
    }
  };

  const handleSaveKittycadCadConfig = async () => {
    try {
      const trimmedName = kittycadCadConfig.name.trim() || "KittyCAD CAD";
      const trimmedBaseUrl =
        kittycadCadConfig.baseUrl.trim() ||
        getProviderDefaultBaseUrl("kittycad-cad");
      const hasProvider = Boolean(kittycadCadConfig.providerId);

      if (!hasProvider && !kittycadCadConfig.apiKey.trim()) {
        toast.error("请填写 KittyCAD API Token");
        return;
      }

      const requestData: Record<string, any> = hasProvider
        ? {
            id: kittycadCadConfig.providerId,
            name: trimmedName,
            type: "kittycad-cad",
            baseUrl: trimmedBaseUrl,
            isEnabled: kittycadCadConfig.isEnabled,
          }
        : {
            name: trimmedName,
            type: "kittycad-cad",
            baseUrl: trimmedBaseUrl,
            apiKey: kittycadCadConfig.apiKey.trim(),
            isEnabled: kittycadCadConfig.isEnabled,
          };

      if (hasProvider && kittycadCadConfig.apiKey.trim()) {
        requestData.apiKey = kittycadCadConfig.apiKey.trim();
      }

      const response = await fetch("/api/admin/ai-providers", {
        method: hasProvider ? "PUT" : "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(requestData),
      });

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

      toast.success("KittyCAD CAD 配置保存成功");
      setKittycadCadConfig((prev) => ({ ...prev, apiKey: "" }));
      mutateProviders();
    } catch (error) {
      console.error("保存 KittyCAD CAD 配置失败:", error);
      toast.error("保存 KittyCAD CAD 配置失败");
    }
  };

  const handleTestKittycadCadConfig = async () => {
    try {
      setIsTestingKittycadCad(true);

      const response = await fetch("/api/admin/kittycad/test", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          config: {
            providerId: kittycadCadConfig.providerId || undefined,
            name: kittycadCadConfig.name.trim() || "KittyCAD CAD",
            baseUrl:
              kittycadCadConfig.baseUrl.trim() ||
              getProviderDefaultBaseUrl("kittycad-cad"),
            apiKey: kittycadCadConfig.apiKey.trim() || undefined,
          },
        }),
      });

      const payload = await response.json().catch(() => null);
      if (!response.ok) {
        throw new Error(
          payload?.cause || payload?.message || payload?.error || "连接测试失败"
        );
      }

      const accountLabel =
        payload?.userName ||
        payload?.userEmail ||
        payload?.userId ||
        "当前账号";
      toast.success(
        `连接成功：${accountLabel}（${payload?.latencyMs || 0}ms）`
      );
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : "KittyCAD 连接测试失败"
      );
    } finally {
      setIsTestingKittycadCad(false);
    }
  };

  const handleSaveMoonshotDetailAgentConfig = async () => {
    try {
      const trimmedBaseUrl =
        normalizeDetailAgentLocalMoonshotBaseUrl(
          moonshotDetailAgentConfig.baseUrl
        );
      const trimmedModelId =
        moonshotDetailAgentConfig.modelId.trim() ||
        DETAIL_AGENT_LOCAL_MOONSHOT_MODEL_ID;
      const trimmedDisplayName =
        moonshotDetailAgentConfig.displayName.trim() ||
        DETAIL_AGENT_LOCAL_MOONSHOT_DISPLAY_NAME;
      const trimmedProviderName =
        moonshotDetailAgentConfig.providerName.trim() ||
        "Kimi Code 编程套餐";

      if (!isMoonshotOfficialBaseUrl(trimmedBaseUrl)) {
        toast.error(
          `请使用 Kimi Code 编程套餐专用 API 地址：${DETAIL_AGENT_LOCAL_MOONSHOT_BASE_URL}`
        );
        return;
      }

      if (!trimmedModelId) {
        toast.error("请填写 Kimi Code API 模型 ID");
        return;
      }

      if (
        !moonshotDetailAgentConfig.providerId &&
        !moonshotDetailAgentConfig.apiKey.trim()
      ) {
        toast.error("请填写 Kimi Code 控制台 API Key");
        return;
      }

      const settingResponse = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: DETAIL_AGENT_LOCAL_MOONSHOT_SETTING_KEY,
          value: {
            enabled: moonshotDetailAgentConfig.isEnabled,
            providerName: trimmedProviderName,
            baseUrl: trimmedBaseUrl,
            apiKey: moonshotDetailAgentConfig.apiKey.trim(),
            modelId: trimmedModelId,
            displayName: trimmedDisplayName,
          },
        }),
      });
      const settingResult = await settingResponse.json().catch(() => ({}));
      if (!settingResponse.ok) {
        throw new Error(
          String(settingResult?.message || "保存 Moonshot 本地AI配置失败")
        );
      }

      const settingsResponse = await fetch("/api/site-settings", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          canvasDetailAgentModelId: DETAIL_AGENT_LOCAL_MOONSHOT_OPTION_ID,
        }),
      });
      if (!settingsResponse.ok) {
        throw new Error("写入 AI详情 Agent 专用模型设置失败");
      }

      setSiteSettings((prev) => ({
        ...prev,
        canvasDetailAgentModelId: DETAIL_AGENT_LOCAL_MOONSHOT_OPTION_ID,
      }));
      setMoonshotDetailAgentConfig((prev) => ({
        ...prev,
        providerName: trimmedProviderName,
        baseUrl: trimmedBaseUrl,
        modelId: trimmedModelId,
        displayName: trimmedDisplayName,
        apiKey: "",
      }));

      mutateMoonshotDetailAgentSetting();
      mutateSiteSettings();
      toast.success("Kimi Code 编程套餐已绑定为 AI详情 Agent 专用模型");
    } catch (error) {
      console.error("[Moonshot Detail Agent Config] Error:", error);
      toast.error(
        error instanceof Error ? error.message : "保存 Moonshot Kimi 配置失败"
      );
    }
  };

  // 快速添加火山引擎视频预设模型
  const handleQuickAddVolcanoModels = async (providerId: string) => {
    if (
      !confirm(
        "将为此服务商添加4个预设模型：\n- Seedance Pro (全功能)\n- Seedance Pro Fast (快速)\n- Seedance Lite I2V (图生视频)\n- Seedance Lite T2V (文生视频)\n\n继续吗？"
      )
    ) {
      return;
    }

    try {
      toast.info("正在添加预设模型...");

      const response = await fetch("/api/admin/volcano-video-models", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ providerId }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || "添加失败");
      }

      const { addedCount, errors } = data;

      if (addedCount > 0) {
        toast.success(`成功添加 ${addedCount} 个预设模型！`);
        mutateModels(); // 刷新模型列表
      }

      if (errors && errors.length > 0) {
        toast.warning(`${errors.length} 个模型添加失败（可能已存在）`);
      }
    } catch (error: any) {
      console.error("[Quick Add Models] Error:", error);
      toast.error(error.message || "添加预设模型失败");
    }
  };

  const handleQuickAddKreaModels = async (providerId: string) => {
    if (
      !confirm(
        "将为此服务商添加 Krea 官方 API 的全部图片、图片增强和视频模型预设。\n\n继续吗？"
      )
    ) {
      return;
    }

    try {
      toast.info("正在添加 Krea 官方预设模型...");

      const response = await fetch("/api/admin/krea-models", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ providerId }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || "添加失败");
      }

      const { addedCount, errors } = data;

      if (addedCount > 0) {
        toast.success(`成功添加 ${addedCount} 个 Krea 预设模型`);
        mutateModels();
      }

      if (errors && errors.length > 0) {
        toast.warning(`${errors.length} 个模型添加失败（可能已存在）`);
      }
    } catch (error: any) {
      console.error("[Quick Add Krea Models] Error:", error);
      toast.error(error.message || "添加 Krea 预设模型失败");
    }
  };

  const handleQuickAddFalImageModels = async (
    providerId: string,
    options?: { skipConfirm?: boolean }
  ) => {
    if (
      !options?.skipConfirm &&
      !confirm(
        `将为此服务商添加 ${FAL_IMAGE_MODEL_PRESETS.length} 个 FAL 图片编辑模型预设（包含 GPT Image 2 Edit）。\n\n继续吗？`
      )
    ) {
      return;
    }

    try {
      toast.info("正在添加 FAL 图片预设模型...");

      const response = await fetch("/api/admin/fal-image-models", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ providerId }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || "添加失败");
      }

      const { addedCount, errors } = data;

      if (addedCount > 0) {
        toast.success(`成功添加 ${addedCount} 个 FAL 图片预设模型`);
        mutateModels();
      }

      if (errors && errors.length > 0) {
        toast.warning(`${errors.length} 个模型添加失败（可能已存在）`);
      }
    } catch (error: any) {
      console.error("[Quick Add FAL Image Models] Error:", error);
      toast.error(error.message || "添加 FAL 图片预设模型失败");
    }
  };

  const handleQuickAddRuxaImageModels = async (
    providerId: string,
    options?: { skipConfirm?: boolean }
  ) => {
    if (
      !options?.skipConfirm &&
      !confirm(
        `将为此服务商添加 ${RUXA_IMAGE_MODEL_PRESETS.length} 个 RUXA 生图预设模型（含 Nano Banana 2「专线」、Nano Banana Pro「专线」）。\n\n继续吗？`
      )
    ) {
      return;
    }

    try {
      toast.info("正在添加 RUXA 生图预设模型...");

      const response = await fetch("/api/admin/ruxa-image-models", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ providerId }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || "添加失败");
      }

      const { addedCount, errors } = data;

      if (addedCount > 0) {
        toast.success(`成功添加 ${addedCount} 个 RUXA 生图预设模型`);
        mutateModels();
      }

      if (errors && errors.length > 0) {
        toast.warning(`${errors.length} 个模型添加失败（可能已存在）`);
      }
    } catch (error: any) {
      console.error("[Quick Add RUXA Image Models] Error:", error);
      toast.error(error.message || "添加 RUXA 生图预设模型失败");
    }
  };

  const handleQuickAddSnapgenImageModels = async (
    providerId: string,
    options?: { skipConfirm?: boolean }
  ) => {
    if (
      !options?.skipConfirm &&
      !confirm(
        `将为此服务商添加 ${SNAPGEN_IMAGE_MODEL_PRESETS.length} 个 SnapGen 生图预设模型（Nano Banana Pro、Nano Banana 2、Grok Image、Meta AI Image、GPT Image 2）。\n\n继续吗？`
      )
    ) {
      return;
    }

    try {
      toast.info("正在添加 SnapGen 生图预设模型...");

      const response = await fetch("/api/admin/snapgen-image-models", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ providerId }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || "添加失败");
      }

      const { addedCount, updatedCount, errors } = data;
      const totalSynced = Number(addedCount || 0) + Number(updatedCount || 0);

      if (totalSynced > 0) {
        toast.success(`成功同步 ${totalSynced} 个 SnapGen 生图预设模型`);
        mutateModels();
      }

      if (errors && errors.length > 0) {
        toast.warning(`${errors.length} 个模型同步失败`);
      }
    } catch (error: any) {
      console.error("[Quick Add SnapGen Image Models] Error:", error);
      toast.error(error.message || "添加 SnapGen 生图预设模型失败");
    }
  };

  const handleQuickAddBananaImageModels = async (
    providerId: string,
    options?: { skipConfirm?: boolean }
  ) => {
    if (
      !options?.skipConfirm &&
      !confirm(
        `将同步 ${BANANAIMAGE_MODEL_PRESETS.length} 个 BananaImage 生图模型，支持多图参考、比例选择和 1K/2K/4K。\n\n继续吗？`
      )
    ) {
      return;
    }

    try {
      toast.info("正在同步 BananaImage 生图预设模型...");
      const response = await fetch("/api/admin/bananaimage-models", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ providerId }),
      });
      const data = await response.json();
      if (!response.ok) throw new Error(data.error || "同步失败");

      const totalSynced = Number(data.addedCount || 0) + Number(data.updatedCount || 0);
      if (totalSynced > 0) {
        toast.success(`成功同步 ${totalSynced} 个 BananaImage 生图预设模型`);
        mutateModels();
      }
      if (data.errors?.length) {
        toast.warning(`${data.errors.length} 个 BananaImage 模型同步失败`);
      }
    } catch (error: any) {
      console.error("[Quick Add BananaImage Models] Error:", error);
      toast.error(error.message || "同步 BananaImage 生图预设模型失败");
    }
  };

  const handleQuickAddVisionaryModels = async (
    providerId: string,
    options?: { skipConfirm?: boolean }
  ) => {
    if (
      !options?.skipConfirm &&
      !confirm(
        `将同步 ${VISIONARY_MODEL_PRESETS.length} 个 Visionary 生图模型，支持最多 9 张参考图、比例选择、质量档位和 1K/2K/4K。\n\n继续吗？`
      )
    ) {
      return;
    }

    try {
      toast.info("正在同步 Visionary 生图预设模型...");
      const response = await fetch("/api/admin/visionary-models", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ providerId }),
      });
      const data = await response.json();
      if (!response.ok) throw new Error(data.error || "同步失败");

      const totalSynced =
        Number(data.addedCount || 0) + Number(data.updatedCount || 0);
      if (totalSynced > 0) {
        toast.success(`成功同步 ${totalSynced} 个 Visionary 生图预设模型`);
        mutateModels();
      }
      if (data.errors?.length) {
        toast.warning(`${data.errors.length} 个 Visionary 模型同步失败`);
      }
    } catch (error: any) {
      console.error("[Quick Add Visionary Models] Error:", error);
      toast.error(error.message || "同步 Visionary 生图预设模型失败");
    }
  };

  const handleQuickAddAtlasCloudModels = async (
    providerId: string,
    options?: { skipConfirm?: boolean }
  ) => {
    if (
      !options?.skipConfirm &&
      !confirm(
        "将从 Atlas Cloud 官方目录同步图片、视频与 3D 模型，并读取每个模型的参数 Schema。已删除的模型不会被恢复。同步数量较多，可能需要几十秒。\n\n继续吗？"
      )
    ) {
      return;
    }

    try {
      toast.info("正在读取 Atlas Cloud 官方目录和模型参数...");
      const response = await fetch("/api/admin/atlascloud-models", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ providerId }),
      });
      const data = await response.json();
      if (!response.ok) throw new Error(data.error || "同步失败");

      const totalSynced =
        Number(data.addedCount || 0) + Number(data.updatedCount || 0);
      toast.success(
        `已同步 ${totalSynced} 个 Atlas Cloud 图片 / 视频 / 3D 模型（官方目录共 ${Number(data.counts?.total || totalSynced)} 个）`
      );
      mutateModels();
      if (data.errors?.length) {
        toast.warning(`${data.errors.length} 个 Atlas Cloud 模型读取或同步失败`);
      }
    } catch (error: any) {
      console.error("[Quick Add Atlas Cloud Models] Error:", error);
      toast.error(error.message || "同步 Atlas Cloud 模型失败");
      throw error;
    }
  };

  const handleQuickAddVip98kModels = async (
    providerId: string,
    options?: { skipConfirm?: boolean }
  ) => {
    if (
      !options?.skipConfirm &&
      !confirm(
        "将同步 VIP98K 当前可用目录，停用服务商已关闭的模型，并排除纯文生图和纯文生视频模型。图片编辑、图生视频、参考媒体、多模态、3D 与工具模型会保留；你此前手动删除的模型不会恢复。\n\n继续吗？"
      )
    ) {
      return;
    }

    try {
      toast.info("正在读取 VIP98K 模型目录...");
      const response = await fetch("/api/admin/vip98k-models", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ providerId }),
      });
      const data = await response.json();
      if (!response.ok) throw new Error(data.error || "同步失败");

      const totalSynced =
        Number(data.addedCount || 0) + Number(data.updatedCount || 0);
      const totalCatalog = Number(data.counts?.total || totalSynced);
      const totalDisabled = Number(data.disabledCount || 0);
      toast.success(
        `已同步 ${totalSynced} 个 VIP98K 模型，停用 ${totalDisabled} 个旧模型（可用目录 ${totalCatalog} 个）`
      );
      mutateModels();
      if (data.errors?.length) {
        toast.warning(`${data.errors.length} 个 VIP98K 模型同步失败`);
      }
    } catch (error: any) {
      console.error("[Quick Add VIP98K Models] Error:", error);
      toast.error(error.message || "同步 VIP98K 模型失败");
      throw error;
    }
  };

  const handleUseFalImageProviderPreset = () => {
    setProviderForm({
      id: "",
      name: "FAL 图片",
      type: "fal-image",
      baseUrl: PROVIDER_DEFAULT_BASE_URL["fal-image"],
      apiKey: "",
      isEnabled: true,
    });
    setEditingProvider(null);
    setShowProviderDialog(true);
  };

  const handleQuickAddFalImageModelsFromToolbar = async () => {
    const falProvider =
      (providersData?.providers || []).find(
        (provider) => provider.type === "fal-image" && provider.isEnabled
      ) ||
      (providersData?.providers || []).find(
        (provider) => provider.type === "fal-image"
      );

    if (falProvider) {
      await handleQuickAddFalImageModels(falProvider.id);
      return;
    }

    handleUseFalImageProviderPreset();
    toast.info(
      "还没有 FAL 图片服务商，已为你预填创建表单。保存后会自动添加 GPT Image 2 Edit 预设。"
    );
  };

  const handleUseBltcyVideoProviderPreset = () => {
    setProviderForm({
      id: "",
      name: BLTCY_VIDEO_PROVIDER_PRESET.name,
      type: BLTCY_VIDEO_PROVIDER_PRESET.type,
      baseUrl: BLTCY_VIDEO_PROVIDER_PRESET.baseUrl,
      apiKey: "",
      isEnabled: true,
    });
    setEditingProvider(null);
    setShowProviderDialog(true);
  };

  const handleQuickAddBltcyVideoModels = async (
    providerId: string,
    options?: { skipConfirm?: boolean }
  ) => {
    if (
      !options?.skipConfirm &&
      !confirm(
        `将为此服务商添加 ${BLTCY_VIDEO_MODEL_PRESETS.length} 个柏拉图统一视频模型预设。\n\n继续吗？`
      )
    ) {
      return;
    }

    try {
      toast.info("正在添加柏拉图统一视频预设模型...");

      const response = await fetch("/api/admin/bltcy-video-models", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ providerId }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || "添加失败");
      }

      const { addedCount, errors } = data;

      if (addedCount > 0) {
        toast.success(`成功添加 ${addedCount} 个柏拉图视频预设模型`);
        mutateModels();
      }

      if (errors && errors.length > 0) {
        toast.warning(`${errors.length} 个模型添加失败（可能已存在）`);
      }
    } catch (error: any) {
      console.error("[Quick Add BLTCY Video Models] Error:", error);
      toast.error(error.message || "添加柏拉图视频预设模型失败");
    }
  };

  const handleUseBltcyImageProviderPreset = () => {
    setProviderForm({
      id: "",
      name: BLTCY_IMAGE_PROVIDER_PRESET.name,
      type: BLTCY_IMAGE_PROVIDER_PRESET.type,
      baseUrl: BLTCY_IMAGE_PROVIDER_PRESET.baseUrl,
      apiKey: "",
      isEnabled: true,
    });
    setEditingProvider(null);
    setShowProviderDialog(true);
  };

  const handleUseBltcyBflProviderPreset = () => {
    setProviderForm({
      id: "",
      name: BLTCY_BFL_PROVIDER_PRESET.name,
      type: BLTCY_BFL_PROVIDER_PRESET.type,
      baseUrl: BLTCY_BFL_PROVIDER_PRESET.baseUrl,
      apiKey: "",
      isEnabled: true,
    });
    setEditingProvider(null);
    setShowProviderDialog(true);
  };

  const handleQuickAddBltcyImageModels = async (
    providerId: string,
    options?: { skipConfirm?: boolean }
  ) => {
    if (
      !options?.skipConfirm &&
      !confirm(
        `将为此服务商添加 ${BLTCY_IMAGE_MODEL_PRESETS.length} 个柏拉图 Flux OpenAI Images 兼容图片编辑模型预设。\n\n继续吗？`
      )
    ) {
      return;
    }

    try {
      toast.info("正在添加柏拉图 Flux 图片编辑预设模型...");

      const response = await fetch("/api/admin/bltcy-image-models", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ providerId }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || "添加失败");
      }

      const { addedCount, errors } = data;

      if (addedCount > 0) {
        toast.success(`成功添加 ${addedCount} 个柏拉图 Flux 预设模型`);
        mutateModels();
      }

      if (errors && errors.length > 0) {
        toast.warning(`${errors.length} 个模型添加失败（可能已存在）`);
      }
    } catch (error: any) {
      console.error("[Quick Add BLTCY Image Models] Error:", error);
      toast.error(error.message || "添加柏拉图 Flux 预设模型失败");
    }
  };

  const handleQuickAddBltcyBflModels = async (
    providerId: string,
    options?: { skipConfirm?: boolean }
  ) => {
    if (
      !options?.skipConfirm &&
      !confirm(
        `将为此服务商添加 ${BLTCY_BFL_MODEL_PRESETS.length} 个柏拉图 BFL 异步图片编辑模型预设。\n\n继续吗？`
      )
    ) {
      return;
    }

    try {
      toast.info("正在添加柏拉图 BFL 异步图片编辑预设模型...");

      const response = await fetch("/api/admin/bltcy-bfl-models", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ providerId }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || "添加失败");
      }

      const { addedCount, errors } = data;

      if (addedCount > 0) {
        toast.success(`成功添加 ${addedCount} 个柏拉图 BFL 预设模型`);
        mutateModels();
      }

      if (errors && errors.length > 0) {
        toast.warning(`${errors.length} 个模型添加失败（可能已存在）`);
      }
    } catch (error: any) {
      console.error("[Quick Add BLTCY BFL Models] Error:", error);
      toast.error(error.message || "添加柏拉图 BFL 预设模型失败");
    }
  };

  const handleUseLemonProviderPreset = () => {
    setProviderForm({
      id: "",
      name: LEMON_PROVIDER_PRESET.name,
      type: LEMON_PROVIDER_PRESET.type,
      baseUrl: LEMON_PROVIDER_PRESET.baseUrl,
      apiKey: "",
      isEnabled: true,
    });
    setEditingProvider(null);
    setShowProviderDialog(true);
  };

  const handleQuickAddLemonModels = async (providerId: string) => {
    try {
      toast.info("正在添加 LemonAPI Gemini 预设模型...");

      let addedCount = 0;
      let duplicateCount = 0;

      for (const preset of LEMON_MODEL_PRESETS) {
        const response = await fetch("/api/admin/ai-models", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            providerId,
            modelId: preset.modelId,
            displayName: preset.displayName,
            description: preset.description,
            supportsVision: preset.supportsVision,
            supportsImageGen: preset.supportsImageGen,
            isEnabled: true,
            isHidden: false,
            isDefault: false,
            isAgentModel: false,
            agentCodingModelId: "",
            isMultimodal: preset.isMultimodal,
            sortOrder: 0,
          }),
        });

        if (response.ok) {
          addedCount += 1;
          continue;
        }

        duplicateCount += 1;
      }

      if (addedCount > 0) {
        toast.success(`成功添加 ${addedCount} 个 LemonAPI 预设模型`);
        mutateModels();
      }

      if (addedCount === 0 && duplicateCount > 0) {
        toast.warning("LemonAPI 预设模型可能已存在");
      }
    } catch (error) {
      console.error("[Quick Add Lemon Models] Error:", error);
      toast.error("添加 LemonAPI 预设模型失败");
    }
  };

  // --- AI 模型逻辑 ---
  const resetModelForm = () => {
    setModelForm({
      id: "",
      providerId: "",
      modelId: "",
      displayName: "",
      avatarUrl: "",
      description: "",
      supportsVision: false,
      supportsImageGen: false,
      isEnabled: true,
      isHidden: false,
      isDefault: false,
      isDefaultTextEditModel: false,
      isAgentModel: false,
      agentCodingModelId: "",
      isMultimodal: false,
      sortOrder: 0,
      fallbackModelId1: "",
      fallbackModelId2: "",
      excludeFromFailover: false,
      excludeFromHealthBan: false,
      capabilities: {},
      imageGenConfig: createDefaultImageGenConfig(),
    });
    setVideoDurationOptionsInput("");
    setEditingModel(null);
  };

  const resizeImageToSquare = (file: File, size = 400): Promise<File> =>
    new Promise((resolve, reject) => {
      const image = new Image();
      const objectUrl = URL.createObjectURL(file);

      image.onload = () => {
        try {
          const canvas = document.createElement("canvas");
          canvas.width = size;
          canvas.height = size;

          const context = canvas.getContext("2d");
          if (!context) {
            URL.revokeObjectURL(objectUrl);
            reject(new Error("无法处理图片"));
            return;
          }

          const minSide = Math.min(image.width, image.height);
          const sx = (image.width - minSide) / 2;
          const sy = (image.height - minSide) / 2;
          context.imageSmoothingEnabled = true;
          context.imageSmoothingQuality = "high";
          context.drawImage(image, sx, sy, minSide, minSide, 0, 0, size, size);

          canvas.toBlob(
            (blob) => {
              URL.revokeObjectURL(objectUrl);
              if (!blob) {
                reject(new Error("头像压缩失败"));
                return;
              }

              resolve(
                new File([blob], `model-avatar-${Date.now()}.png`, {
                  type: "image/png",
                })
              );
            },
            "image/png",
            0.95
          );
        } catch (error) {
          URL.revokeObjectURL(objectUrl);
          reject(error);
        }
      };

      image.onerror = () => {
        URL.revokeObjectURL(objectUrl);
        reject(new Error("图片读取失败"));
      };

      image.src = objectUrl;
    });

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

    try {
      setModelAvatarUploading(true);
      const resizedFile = await resizeImageToSquare(file, 400);
      const formData = new FormData();
      formData.append("file", resizedFile);

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

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

      setModelForm((prev) => ({ ...prev, avatarUrl: result.url }));
      toast.success("模型头像上传成功");
    } catch (error: any) {
      toast.error(error?.message || "模型头像上传失败");
    } finally {
      setModelAvatarUploading(false);
    }
  };

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

    try {
      setContactQrUploading(true);
      const formData = new FormData();
      formData.append("file", file);

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

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

      setSiteSettings((prev) => ({
        ...prev,
        contactConfig: {
          ...prev.contactConfig,
          wechatQrUrl: result.url,
        },
      }));
      toast.success("微信二维码上传成功");
    } catch (error: any) {
      toast.error(error?.message || "微信二维码上传失败");
    } finally {
      setContactQrUploading(false);
    }
  };

  const handleSaveModel = async () => {
    try {
      // 🆕 检查是否是火山引擎视频Provider
      const selectedProvider = providersData?.providers?.find(
        (p) => p.id === modelForm.providerId
      );
      const isVolcanoVideo = selectedProvider?.type === "volcano-video";

      // 如果是火山引擎视频且不是编辑模式，批量创建模型
      if (isVolcanoVideo && !editingModel) {
        toast.info("正在添加火山引擎视频模型（1个主模型 + 4个子模型）...");

        const response = await fetch("/api/admin/volcano-video-models", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            providerId: modelForm.providerId,
            // ✅ 传递所有模型配置（管理员可以自定义显示名称和描述）
            models: volcanoVideoModels,
          }),
        });

        const data = await response.json();

        if (!response.ok) throw new Error(data.error || "批量添加失败");

        toast.success(
          `✅ 成功添加 ${data.addedCount} 个模型（1个主模型 + ${data.addedCount - 1} 个子模型）！`
        );
        mutateModels();
        setShowModelDialog(false);
        resetModelForm();
        return;
      }

      // 普通模型的单个创建/编辑逻辑
      const method = editingModel ? "PUT" : "POST";
      const body = editingModel
        ? { ...modelForm, id: editingModel }
        : modelForm;
      const response = await fetch("/api/admin/ai-models", {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });

      if (!response.ok) throw new Error("保存失败");
      toast.success(editingModel ? "模型更新成功" : "模型创建成功");
      mutateModels();
      setShowModelDialog(false);
      resetModelForm();
    } catch (error: any) {
      console.error("[Save Model] Error:", error);
      toast.error(error.message || "保存模型失败");
    }
  };

  const handleDeleteModel = async (id: string) => {
    if (!confirm("确定删除此模型？")) return;
    try {
      const response = await fetch(`/api/admin/ai-models?id=${id}`, {
        method: "DELETE",
      });
      if (!response.ok) throw new Error("删除失败");
      toast.success("模型删除成功");
      mutateModels();
    } catch (error) {
      toast.error("删除模型失败");
    }
  };

  const handleRestoreModelHealth = async (model: AiModel) => {
    try {
      const response = await fetch("/api/admin/ai-model-health", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ modelId: model.id }),
      });
      const data = await response.json().catch(() => ({}));
      if (!response.ok) {
        throw new Error(data?.error || "恢复模型失败");
      }
      toast.success(`已恢复 ${model.displayName}，失败计数已清零`);
      mutateModels();
      mutateModelHealth();
    } catch (error: any) {
      toast.error(error?.message || "恢复模型失败");
    }
  };

  // --- 存储配置逻辑 ---
  const resetStorageForm = () => {
    setStorageForm({
      id: "",
      name: "",
      type: "s3",
      endpoint: "",
      region: "",
      bucket: "",
      accessKeyId: "",
      secretAccessKey: "",
      publicUrl: "",
      isDefault: false,
      isEnabled: true,
    });
    setEditingStorage(null);
  };

  const handleSaveStorage = async () => {
    try {
      const method = editingStorage ? "PUT" : "POST";
      const body: any = editingStorage
        ? { ...storageForm, id: editingStorage }
        : { ...storageForm };

      const normalizeUrl = (value?: string) => {
        if (!value) return "";
        return value.trim().replace(/\/+$/, "");
      };

      const endpoint = normalizeUrl(body.endpoint);
      body.endpoint = /aliyuncs\.com/i.test(endpoint)
        ? `https://${endpoint.replace(/^https?:\/\//i, "")}`
        : endpoint;
      body.region = String(body.region || "").trim();
      body.bucket = String(body.bucket || "").trim();
      body.accessKeyId = String(body.accessKeyId || "").trim();
      body.secretAccessKey = String(body.secretAccessKey || "").trim();
      body.publicUrl = normalizeUrl(body.publicUrl);

      if (body.type === "qiniu-kodo" && !body.publicUrl) {
        throw new Error("七牛云 Kodo 需要配置公开访问域名");
      }

      // 兼容处理：如果是阿里云 OSS，转换为 s3 类型提交
      if (body.type === "aliyun-oss") {
        body.type = "s3";
      }

      // 编辑状态下，留空密钥代表不修改
      if (editingStorage) {
        if (!body.accessKeyId) delete body.accessKeyId;
        if (!body.secretAccessKey) delete body.secretAccessKey;
      }

      const response = await fetch("/api/admin/storage", {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });

      if (!response.ok) throw new Error("保存失败");
      toast.success(editingStorage ? "存储配置更新成功" : "存储配置创建成功");
      mutateStorage();
      setShowStorageDialog(false);
      resetStorageForm();
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "保存存储配置失败");
    }
  };

  const handleDeleteStorage = async (id: string) => {
    if (!confirm("确定删除此存储配置？")) return;
    try {
      const response = await fetch(`/api/admin/storage?id=${id}`, {
        method: "DELETE",
      });
      if (!response.ok) throw new Error("删除失败");
      toast.success("存储配置删除成功");
      mutateStorage();
    } catch (error) {
      toast.error("删除存储配置失败");
    }
  };

  const renderEnhanceProPresetEditor = (
    preset: EnhanceProPreset,
    index: number,
    allowReorderControls = false
  ) => (
    <div className="space-y-4 rounded-xl border p-4" key={preset.id}>
      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
        <div className="grid flex-1 gap-4 md:grid-cols-2">
          <div className="space-y-2">
            <Label htmlFor={`enhance-pro-preset-name-${preset.id}`}>
              预设名称
            </Label>
            <Input
              id={`enhance-pro-preset-name-${preset.id}`}
              onChange={(e) =>
                handleEnhanceProPresetChange(index, "name", e.target.value)
              }
              placeholder="例如：保真修复"
              value={preset.name}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor={`enhance-pro-preset-description-${preset.id}`}>
              预设说明
            </Label>
            <Input
              id={`enhance-pro-preset-description-${preset.id}`}
              onChange={(e) =>
                handleEnhanceProPresetChange(
                  index,
                  "description",
                  e.target.value
                )
              }
              placeholder="告诉用户这个预设适合什么图片"
              value={preset.description}
            />
          </div>
        </div>

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

          <div className="flex items-center gap-2 rounded-lg border px-3 py-2">
            <Switch
              checked={preset.isDefault}
              onCheckedChange={(checked) =>
                handleEnhanceProPresetChange(index, "isDefault", checked)
              }
            />
            <span className="text-muted-foreground text-sm">默认预设</span>
          </div>

          <Button
            disabled={enhanceProConfig.presets.length <= 1}
            onClick={() => handleRemoveEnhanceProPreset(index)}
            size="icon"
            type="button"
            variant="ghost"
          >
            <Trash2 className="h-4 w-4 text-red-500" />
          </Button>
        </div>
      </div>

      <div className="space-y-2">
        <Label htmlFor={`enhance-pro-preset-prompt-${preset.id}`}>
          默认提示词
        </Label>
        <Textarea
          id={`enhance-pro-preset-prompt-${preset.id}`}
          onChange={(e) =>
            handleEnhanceProPresetChange(index, "prompt", e.target.value)
          }
          placeholder="例如：保持原图主体和光影关系不变，优先修复压缩噪点与模糊..."
          rows={3}
          value={preset.prompt}
        />
      </div>

      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <div className="space-y-2">
          <Label htmlFor={`enhance-pro-preset-model-${preset.id}`}>模型</Label>
          <Select
            onValueChange={(value) =>
              handleEnhanceProPresetChange(
                index,
                "model",
                value as EnhanceProPreset["model"]
              )
            }
            value={preset.model}
          >
            <SelectTrigger id={`enhance-pro-preset-model-${preset.id}`}>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {ENHANCE_PRO_KREA_MODELS.map((model) => {
                const isHidden = enhanceProConfig.hiddenModels.includes(model);
                return (
                  <SelectItem key={model} value={model}>
                    {model}
                    {isHidden ? "（前台隐藏）" : ""}
                  </SelectItem>
                );
              })}
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-2">
          <Label htmlFor={`enhance-pro-preset-output-${preset.id}`}>
            输出格式
          </Label>
          <Select
            onValueChange={(value) =>
              handleEnhanceProPresetChange(
                index,
                "outputFormat",
                value as EnhanceProPreset["outputFormat"]
              )
            }
            value={preset.outputFormat}
          >
            <SelectTrigger id={`enhance-pro-preset-output-${preset.id}`}>
              <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 htmlFor={`enhance-pro-preset-subject-${preset.id}`}>
            作用区域
          </Label>
          <Select
            onValueChange={(value) =>
              handleEnhanceProPresetChange(
                index,
                "subjectDetection",
                value as EnhanceProPreset["subjectDetection"]
              )
            }
            value={preset.subjectDetection}
          >
            <SelectTrigger id={`enhance-pro-preset-subject-${preset.id}`}>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="All">全部</SelectItem>
              <SelectItem value="Foreground">前景</SelectItem>
              <SelectItem value="Background">背景</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-2">
          <Label htmlFor={`enhance-pro-preset-batch-${preset.id}`}>
            候选图数量
          </Label>
          <Select
            onValueChange={(value) =>
              handleEnhanceProPresetChange(
                index,
                "batchSize",
                Number.parseInt(value, 10) || 1
              )
            }
            value={String(
              Math.min(preset.batchSize, enhanceProConfig.maxBatchSize)
            )}
          >
            <SelectTrigger id={`enhance-pro-preset-batch-${preset.id}`}>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {Array.from(
                { length: Math.max(1, enhanceProConfig.maxBatchSize) },
                (_, batchIndex) => batchIndex + 1
              ).map((batchSize) => (
                <SelectItem key={batchSize} value={String(batchSize)}>
                  {batchSize} 张
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <div className="space-y-2">
          <Label htmlFor={`enhance-pro-preset-seed-${preset.id}`}>Seed</Label>
          <Input
            id={`enhance-pro-preset-seed-${preset.id}`}
            onChange={(e) =>
              handleEnhanceProPresetChange(
                index,
                "seed",
                Number.parseInt(e.target.value, 10) || 1337
              )
            }
            type="number"
            value={preset.seed ?? 1337}
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor={`enhance-pro-preset-scale-${preset.id}`}>
            放大倍数
          </Label>
          <Input
            id={`enhance-pro-preset-scale-${preset.id}`}
            max={enhanceProConfig.maxUpscaleFactor}
            min="1"
            onChange={(e) =>
              handleEnhanceProPresetChange(
                index,
                "imageScalingFactor",
                Math.min(
                  enhanceProConfig.maxUpscaleFactor,
                  Math.max(1, Number.parseFloat(e.target.value) || 1)
                )
              )
            }
            step="0.25"
            type="number"
            value={preset.imageScalingFactor}
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor={`enhance-pro-preset-creativity-${preset.id}`}>
            Creativity
          </Label>
          <Input
            id={`enhance-pro-preset-creativity-${preset.id}`}
            max="6"
            min="1"
            onChange={(e) =>
              handleEnhanceProPresetChange(
                index,
                "creativity",
                Math.min(
                  6,
                  Math.max(1, Number.parseInt(e.target.value, 10) || 1)
                )
              )
            }
            type="number"
            value={preset.creativity}
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor={`enhance-pro-preset-texture-${preset.id}`}>
            Texture
          </Label>
          <Input
            id={`enhance-pro-preset-texture-${preset.id}`}
            max="5"
            min="1"
            onChange={(e) =>
              handleEnhanceProPresetChange(
                index,
                "texture",
                Math.min(
                  5,
                  Math.max(1, Number.parseInt(e.target.value, 10) || 1)
                )
              )
            }
            type="number"
            value={preset.texture}
          />
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
        <div className="space-y-2">
          <Label htmlFor={`enhance-pro-preset-detail-${preset.id}`}>
            Detail
          </Label>
          <Input
            id={`enhance-pro-preset-detail-${preset.id}`}
            max="1"
            min="0"
            onChange={(e) =>
              handleEnhanceProPresetChange(
                index,
                "detail",
                Math.min(1, Math.max(0, Number.parseFloat(e.target.value) || 0))
              )
            }
            step="0.1"
            type="number"
            value={preset.detail}
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor={`enhance-pro-preset-sharpen-${preset.id}`}>
            Sharpen
          </Label>
          <Input
            id={`enhance-pro-preset-sharpen-${preset.id}`}
            max="1"
            min="0"
            onChange={(e) =>
              handleEnhanceProPresetChange(
                index,
                "sharpen",
                Math.min(1, Math.max(0, Number.parseFloat(e.target.value) || 0))
              )
            }
            step="0.1"
            type="number"
            value={preset.sharpen}
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor={`enhance-pro-preset-denoise-${preset.id}`}>
            Denoise
          </Label>
          <Input
            id={`enhance-pro-preset-denoise-${preset.id}`}
            max="1"
            min="0"
            onChange={(e) =>
              handleEnhanceProPresetChange(
                index,
                "denoise",
                Math.min(1, Math.max(0, Number.parseFloat(e.target.value) || 0))
              )
            }
            step="0.1"
            type="number"
            value={preset.denoise}
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor={`enhance-pro-preset-face-strength-${preset.id}`}>
            Face Strength
          </Label>
          <Input
            id={`enhance-pro-preset-face-strength-${preset.id}`}
            max="1"
            min="0"
            onChange={(e) =>
              handleEnhanceProPresetChange(
                index,
                "faceEnhancementStrength",
                Math.min(1, Math.max(0, Number.parseFloat(e.target.value) || 0))
              )
            }
            step="0.1"
            type="number"
            value={preset.faceEnhancementStrength}
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor={`enhance-pro-preset-face-creativity-${preset.id}`}>
            Face Creativity
          </Label>
          <Input
            id={`enhance-pro-preset-face-creativity-${preset.id}`}
            max="1"
            min="0"
            onChange={(e) =>
              handleEnhanceProPresetChange(
                index,
                "faceEnhancementCreativity",
                Math.min(1, Math.max(0, Number.parseFloat(e.target.value) || 0))
              )
            }
            step="0.1"
            type="number"
            value={preset.faceEnhancementCreativity}
          />
        </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-muted-foreground text-xs">
              适合人像主体较明确的图片。
            </div>
          </div>
          <Switch
            checked={preset.faceEnhancement}
            onCheckedChange={(checked) =>
              handleEnhanceProPresetChange(index, "faceEnhancement", 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">
              允许增强时同时执行更强的上采样。
            </div>
          </div>
          <Switch
            checked={preset.upscalingActivated}
            onCheckedChange={(checked) =>
              handleEnhanceProPresetChange(index, "upscalingActivated", 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">
              比例不一致时裁剪并铺满目标尺寸。
            </div>
          </div>
          <Switch
            checked={preset.cropToFill}
            onCheckedChange={(checked) =>
              handleEnhanceProPresetChange(index, "cropToFill", checked)
            }
          />
        </div>
      </div>
    </div>
  );

  const hasThirdPartySqlServerConfiguredValue = Boolean(
    thirdPartySqlServerConfig.host.trim() ||
      thirdPartySqlServerConfig.database.trim() ||
      thirdPartySqlServerConfig.username.trim() ||
      thirdPartySqlServerConfig.password.trim()
  );
  const isLocalAiSectionExpanded = (sectionKey: string) =>
    Boolean(expandedLocalAiSections[sectionKey]);
  const toggleLocalAiSection = (sectionKey: string) => {
    setExpandedLocalAiSections((prev) => ({
      ...prev,
      [sectionKey]: !prev[sectionKey],
    }));
  };
  const setAllLocalAiSectionsExpanded = (expanded: boolean) => {
    const nextSections = Object.fromEntries(
      Object.keys(DEFAULT_LOCAL_AI_EXPANDED_SECTIONS).map((key) => [
        key,
        expanded,
      ])
    ) as Record<string, boolean>;
    setExpandedLocalAiSections(nextSections);
  };
  const focusLocalAiSection = (sectionKey: string) => {
    setExpandedLocalAiSections((prev) => ({
      ...prev,
      [sectionKey]: true,
    }));
    window.setTimeout(() => {
      document
        .getElementById(`local-ai-section-${sectionKey}`)
        ?.scrollIntoView({ behavior: "smooth", block: "start" });
    }, 0);
  };
  const openLocalAiSectionCount = Object.values(expandedLocalAiSections).filter(
    Boolean
  ).length;
  const localAiOverviewItems: LocalAiOverviewItem[] = [
    {
      key: "product-planning-api",
      title: "商品策划",
      description: productPlanningApiConfig.oneboundBaseUrl
        ? "接口地址已配置"
        : "等待配置接口地址",
      status: siteSettings.productPlanningEnabled ? "已启用" : "已关闭",
      tone: siteSettings.productPlanningEnabled ? "enabled" : "disabled",
      icon: Search,
    },
    {
      key: "tripo3d",
      title: "3D / CAD",
      description: `${tripoProviders.length + worldlabsProviders.length} 个 3D Key，KittyCAD ${
        kittycadCadConfig.isEnabled ? "开启" : "关闭"
      }`,
      status:
        tripoProviders.length + worldlabsProviders.length > 0 ||
        kittycadCadConfig.apiKey
          ? "已接入"
          : "待接入",
      tone:
        tripoProviders.length + worldlabsProviders.length > 0 ||
        kittycadCadConfig.apiKey
          ? "enabled"
          : "warning",
      icon: Box,
    },
    {
      key: "rmbg",
      title: "图像处理",
      description:
        [
          rmbgConfig.apiKey ||
          rmbgConfig.photoroomApiKey ||
          rmbgConfig.aosApiKey
            ? "抠图"
            : "",
          enhanceConfig.apiKey || enhanceConfig.backupApiKey ? "增强" : "",
          enhanceProConfig.enabled ? "Pro" : "",
          aiWashConfig.enabled ? "AI洗图" : "",
        ]
          .filter(Boolean)
          .join(" / ") || "等待配置处理能力",
      status:
        rmbgConfig.apiKey ||
        rmbgConfig.photoroomApiKey ||
        rmbgConfig.aosApiKey ||
        enhanceConfig.apiKey ||
        enhanceConfig.backupApiKey ||
        enhanceProConfig.enabled ||
        aiWashConfig.enabled
          ? "部分可用"
          : "待配置",
      tone:
        rmbgConfig.apiKey ||
        rmbgConfig.photoroomApiKey ||
        rmbgConfig.aosApiKey ||
        enhanceConfig.apiKey ||
        enhanceConfig.backupApiKey ||
        enhanceProConfig.enabled ||
        aiWashConfig.enabled
          ? "enabled"
          : "warning",
      icon: Scissors,
    },
    {
      key: "realtime-canvas",
      title: "实时与队列",
      description: `单模型并发 ${canvasImageTaskQueueConfig.concurrency}，批次间隔 ${(
        canvasImageTaskQueueConfig.batchDispatchIntervalMs / 1000
      ).toFixed(1)} 秒`,
      status: realtimeCanvasConfig.enabled ? "实时已启用" : "实时已关闭",
      tone: realtimeCanvasConfig.enabled ? "enabled" : "neutral",
      icon: SlidersHorizontal,
    },
  ];
  const localAiQuickLinks: LocalAiQuickLink[] = [
    {
      key: "product-planning-api",
      label: "商品策划 API",
      group: "商品策划",
      tone: siteSettings.productPlanningEnabled ? "enabled" : "disabled",
    },
    {
      key: "product-planning-ai-model",
      label: "商品策划模型",
      group: "商品策划",
      tone: productPlanningAiModelConfig.enabled ? "enabled" : "neutral",
    },
    {
      key: "moonshot-detail-agent",
      label: "Kimi 详情 Agent",
      group: "商品策划",
      tone: moonshotDetailAgentConfig.isEnabled ? "enabled" : "neutral",
    },
    {
      key: "tripo3d",
      label: "Tripo3D",
      group: "3D/CAD",
      tone: tripo3dConfig.isEnabled ? "enabled" : "disabled",
    },
    {
      key: "worldlabs3d",
      label: "World Labs",
      group: "3D/CAD",
      tone: worldlabs3dConfig.isEnabled ? "enabled" : "disabled",
    },
    {
      key: "kittycad-cad",
      label: "KittyCAD",
      group: "3D/CAD",
      tone: kittycadCadConfig.isEnabled ? "enabled" : "disabled",
    },
    {
      key: "3d-model-alias",
      label: "模型显示名",
      group: "3D/CAD",
      tone: "neutral",
    },
    {
      key: "rmbg",
      label: "抠图",
      group: "图像处理",
      tone:
        rmbgConfig.apiKey || rmbgConfig.photoroomApiKey || rmbgConfig.aosApiKey
          ? "enabled"
          : "warning",
    },
    {
      key: "enhance",
      label: "变清晰",
      group: "图像处理",
      tone:
        enhanceConfig.apiKey || enhanceConfig.backupApiKey
          ? "enabled"
          : "warning",
    },
    {
      key: "enhance-pro",
      label: "增强 Pro",
      group: "图像处理",
      tone: enhanceProConfig.enabled ? "enabled" : "disabled",
    },
    {
      key: "ai-wash",
      label: "AI洗图",
      group: "图像处理",
      tone: aiWashConfig.enabled ? "enabled" : "disabled",
    },
    {
      key: "extend",
      label: "图像拓展",
      group: "图像处理",
      tone: extendConfig.apiKey ? "enabled" : "warning",
    },
    {
      key: "watermark-remove",
      label: "去水印",
      group: "图像处理",
      tone: watermarkRemoveConfig.apiKey ? "enabled" : "warning",
    },
    {
      key: "angle-edit",
      label: "角度编辑",
      group: "图像处理",
      tone: angleEditConfig.enabled ? "enabled" : "disabled",
    },
    {
      key: "layer-split",
      label: "图层拆分",
      group: "图像处理",
      tone: layerSplitConfig.enabled ? "enabled" : "disabled",
    },
    {
      key: "third-party-sqlserver",
      label: "SQL Server",
      group: "运行控制",
      tone: thirdPartySqlServerConfig.enabled ? "enabled" : "neutral",
    },
    {
      key: "realtime-canvas",
      label: "实时画布",
      group: "运行控制",
      tone: realtimeCanvasConfig.enabled ? "enabled" : "disabled",
    },
    {
      key: "canvas-image-task-queue",
      label: "并发队列",
      group: "运行控制",
      tone: "neutral",
    },
    {
      key: "batch-process",
      label: "批量处理",
      group: "运行控制",
      tone: sceneFusionConfig.enabled ? "enabled" : "disabled",
    },
  ];

  useEffect(() => {
    try {
      window.localStorage.setItem(
        LOCAL_AI_EXPANDED_STORAGE_KEY,
        JSON.stringify(expandedLocalAiSections)
      );
    } catch {
      // Local storage is an enhancement; the settings page should still work without it.
    }
  }, [expandedLocalAiSections]);

  return (
    <div className="settings-workspace w-full px-3 py-3 sm:px-4 xl:px-5">
      <Tabs onValueChange={handleActiveTabChange} value={activeTab}>
        <AdminSettingsNavigation
          activeTab={activeTab}
          onTabChange={handleActiveTabChange}
        />

        {/* 用户管理 */}
        <TabsContent className="mt-6" value="users">
          <Card>
            <CardHeader>
              <CardTitle className="text-xl">用户管理</CardTitle>
              <CardDescription>管理所有注册用户及其权限与积分</CardDescription>
            </CardHeader>
            <CardContent>
              {/* 搜索框和同步按钮 */}
              <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <Input
                  className="max-w-md"
                  onChange={(e) => handleUserSearch(e.target.value)}
                  placeholder="搜索用户（邮箱或用户名）..."
                  type="text"
                  value={userSearch}
                />
                <div className="grid w-full grid-cols-2 gap-1.5 sm:flex sm:w-auto sm:items-center">
                  <Button
                    className="min-w-0 px-2"
                    onClick={() => setShowBatchLimitDialog(true)}
                    size="sm"
                    title="批量设置限额"
                    variant="outline"
                  >
                    <Settings className="h-4 w-4" />
                    <span className="sm:hidden">批量限额</span>
                    <span className="hidden sm:inline">批量设置限额</span>
                  </Button>
                  <Button
                    className="min-w-0 px-2"
                    onClick={async () => {
                      try {
                        toast.info("正在从钉钉同步用户信息，可能需要几分钟...");
                        const res = await fetch("/api/admin/sync-dingtalk", {
                          method: "POST",
                        });
                        const data = await res.json();
                        if (res.ok) {
                          toast.success(
                            `同步完成！匹配 ${data.stats.matched}/${data.stats.total} 个用户，` +
                              `更新 ${data.stats.synced} 个，跳过 ${data.stats.skipped} 个` +
                              (data.stats.errors > 0
                                ? `，失败 ${data.stats.errors} 个`
                                : "")
                          );
                          mutateUsers(); // 刷新用户列表
                        } else {
                          toast.error(data.error || "同步失败");
                        }
                      } catch (error) {
                        toast.error("同步请求失败");
                      }
                    }}
                    size="sm"
                    title="同步钉钉用户"
                    variant="outline"
                  >
                    <RefreshCw className="h-4 w-4" />
                    <span className="sm:hidden">同步用户</span>
                    <span className="hidden sm:inline">同步钉钉用户</span>
                  </Button>
                </div>
              </div>

              {/* 用户列表 */}
              <div className="mb-4 space-y-4">
                {usersData?.users?.map((user) => (
                  <div
                    className="flex flex-col items-stretch gap-3 rounded-lg border p-3 xl:flex-row xl:items-center xl:justify-between"
                    key={user.id}
                  >
                    <div className="min-w-0 flex-1">
                      <div className="truncate font-medium">
                        {user.name || user.email}
                      </div>
                      <div className="mt-1 grid gap-x-4 gap-y-0.5 text-muted-foreground text-xs sm:grid-cols-2 xl:grid-cols-3">
                        <div className="truncate">邮箱: {user.email}</div>
                        <div>部门: {user.department || "未设置"}</div>
                        <div>
                          角色: {ROLE_LABELS[user.role] ?? user.role} ·{" "}
                          {user.isActive ? "已激活" : "未激活"}
                        </div>
                        <div>标签: {user.isHighVip ? "高级VIP" : "普通"}</div>
                        <div>
                          月度限额:{" "}
                          {user.monthlyImageLimit
                            ? `${user.monthlyImageLimit} 张/月`
                            : "无限制"}
                        </div>
                        <div>
                          积分: {Number(user.pointsBalance || 0).toLocaleString()}
                          {" · 赠送 "}
                          {Number(user.pointsGiftedTotal || 0).toLocaleString()}
                        </div>
                      </div>
                    </div>
                    <div className="flex w-full flex-wrap items-center gap-1.5 xl:w-auto xl:justify-end">
                      {/* 配额设置 */}
                      <div className="flex items-center gap-1">
                        <Input
                          className="h-8 w-20 text-xs"
                          defaultValue={user.monthlyImageLimit ?? ""}
                          min="0"
                          onBlur={(e) => {
                            const value = e.target.value
                              ? Number.parseInt(e.target.value, 10)
                              : null;
                            if (value !== user.monthlyImageLimit) {
                              handleUpdateUser(user.id, {
                                monthlyImageLimit: value,
                              });
                            }
                          }}
                          onKeyDown={(e) => {
                            if (e.key === "Enter") {
                              const value = (e.target as HTMLInputElement).value
                                ? Number.parseInt(
                                    (e.target as HTMLInputElement).value,
                                    10
                                  )
                                : null;
                              if (value !== user.monthlyImageLimit) {
                                handleUpdateUser(user.id, {
                                  monthlyImageLimit: value,
                                });
                              }
                            }
                          }}
                          placeholder="无限制"
                          type="number"
                        />
                        <span className="text-muted-foreground text-xs">
                          张
                        </span>
                      </div>
                      <Select
                        onValueChange={(value) =>
                          handleUpdateUser(user.id, { role: value as any })
                        }
                        value={user.role}
                      >
                        <SelectTrigger className="w-32">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="guest">访客</SelectItem>
                          <SelectItem value="regular">普通</SelectItem>
                          <SelectItem value="admin">管理员</SelectItem>
                          <SelectItem value="agent_admin">
                            风格化管理员
                          </SelectItem>
                        </SelectContent>
                      </Select>
                      <Button
                        onClick={() =>
                          handleUpdateUser(user.id, {
                            isActive: !user.isActive,
                          })
                        }
                        size="sm"
                        variant={user.isActive ? "outline" : "default"}
                      >
                        {user.isActive ? "禁用" : "激活"}
                      </Button>
                      <Button
                        onClick={() =>
                          handleUpdateUser(user.id, {
                            isHighVip: !user.isHighVip,
                          })
                        }
                        size="sm"
                        variant={user.isHighVip ? "default" : "outline"}
                      >
                        {user.isHighVip ? "VIP开" : "VIP关"}
                      </Button>
                      <div className="flex items-center gap-1">
                        <Input
                          className="h-8 w-24 text-xs"
                          min="1"
                          onChange={(e) =>
                            setGiftPointsDraftByUser((prev) => ({
                              ...prev,
                              [user.id]: e.target.value,
                            }))
                          }
                          onKeyDown={(e) => {
                            if (e.key === "Enter") {
                              void handleGiftPoints(user.id);
                            }
                          }}
                          placeholder="赠送积分"
                          type="number"
                          value={giftPointsDraftByUser[user.id] ?? ""}
                        />
                        <Button
                          onClick={() => handleGiftPoints(user.id)}
                          size="sm"
                          variant="secondary"
                        >
                          赠送
                        </Button>
                      </div>
                      <div className="flex items-center gap-1">
                        <Input
                          className="h-8 w-24 text-xs"
                          min="1"
                          onChange={(e) =>
                            setDeductPointsDraftByUser((prev) => ({
                              ...prev,
                              [user.id]: e.target.value,
                            }))
                          }
                          onKeyDown={(e) => {
                            if (e.key === "Enter") {
                              void handleDeductPoints(user.id);
                            }
                          }}
                          placeholder="扣减积分"
                          type="number"
                          value={deductPointsDraftByUser[user.id] ?? ""}
                        />
                        <Button
                          onClick={() => handleDeductPoints(user.id)}
                          size="sm"
                          variant="outline"
                        >
                          扣减
                        </Button>
                      </div>
                      <Button
                        onClick={() => handleDeleteUser(user.id)}
                        size="sm"
                        variant="destructive"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                ))}
              </div>

              {/* 分页控件 */}
              {usersData && usersData.totalPages > 1 && (
                <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                  <div className="text-muted-foreground text-xs">
                    显示 {(userPage - 1) * userLimit + 1} -{" "}
                    {Math.min(userPage * userLimit, usersData.total)} 条，共{" "}
                    {usersData.total} 条
                  </div>
                  <div className="grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-1 sm:flex sm:w-auto sm:gap-2">
                    {/* 首页按钮 */}
                    <Button
                      className="hidden sm:inline-flex"
                      disabled={userPage === 1}
                      onClick={() => setUserPage(1)}
                      size="sm"
                      title="首页"
                      variant="outline"
                    >
                      首页
                    </Button>

                    {/* 上一页按钮 */}
                    <Button
                      aria-label="上一页"
                      className="h-8 w-8 px-0 sm:w-auto sm:px-2.5"
                      disabled={userPage === 1}
                      onClick={() => setUserPage((p) => Math.max(1, p - 1))}
                      size="sm"
                      variant="outline"
                    >
                      <ChevronLeft className="h-3.5 w-3.5" />
                      <span className="hidden sm:inline">上一页</span>
                    </Button>

                    {/* 页码显示和跳转 */}
                    <div className="flex min-w-0 items-center justify-center gap-1">
                      <span className="hidden whitespace-nowrap text-xs sm:inline">
                        第
                      </span>
                      <Input
                        className="h-8 w-10 px-1 text-center sm:w-14"
                        max={usersData.totalPages}
                        min={1}
                        onChange={(e) => {
                          const page = Number.parseInt(e.target.value, 10);
                          if (page >= 1 && page <= usersData.totalPages) {
                            setUserPage(page);
                          }
                        }}
                        onKeyDown={(e) => {
                          if (e.key === "Enter") {
                            const page = Number.parseInt(
                              e.currentTarget.value,
                              10
                            );
                            if (page >= 1 && page <= usersData.totalPages) {
                              setUserPage(page);
                            } else {
                              e.currentTarget.value = userPage.toString();
                            }
                          }
                        }}
                        type="number"
                        value={userPage}
                      />
                      <span className="whitespace-nowrap text-xs">
                        /{usersData.totalPages}页
                      </span>
                    </div>

                    {/* 下一页按钮 */}
                    <Button
                      aria-label="下一页"
                      className="h-8 w-8 px-0 sm:w-auto sm:px-2.5"
                      disabled={userPage === usersData.totalPages}
                      onClick={() =>
                        setUserPage((p) =>
                          Math.min(usersData.totalPages, p + 1)
                        )
                      }
                      size="sm"
                      variant="outline"
                    >
                      <span className="hidden sm:inline">下一页</span>
                      <ChevronRight className="h-3.5 w-3.5" />
                    </Button>

                    {/* 末页按钮 */}
                    <Button
                      className="hidden sm:inline-flex"
                      disabled={userPage === usersData.totalPages}
                      onClick={() => setUserPage(usersData.totalPages)}
                      size="sm"
                      title="末页"
                      variant="outline"
                    >
                      末页
                    </Button>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        {/* 🆕 生图记录 */}
        <TabsContent className="mt-6" value="images">
          <Card>
            <CardHeader>
              <CardTitle>所有生图/视频记录</CardTitle>
              <CardDescription>
                查看所有用户的 AI 图片与视频生成历史记录
              </CardDescription>
            </CardHeader>
            <CardContent>
              {/* 筛选条件 */}
              <div className="mb-6 flex flex-wrap gap-4">
                <div className="min-w-[200px] flex-1">
                  <Label className="mb-1 block text-xs">搜索用户</Label>
                  <div className="relative">
                    <Search className="-translate-y-1/2 absolute top-1/2 left-3 h-4 w-4 text-muted-foreground" />
                    <Input
                      className="pl-9"
                      onChange={(e) => {
                        setImageSearch(e.target.value);
                        setImagePage(1);
                      }}
                      placeholder="输入用户名或邮箱..."
                      value={imageSearch}
                    />
                  </div>
                </div>
                <div className="w-[150px]">
                  <Label className="mb-1 block text-xs">开始日期</Label>
                  <Input
                    onChange={(e) => {
                      setImageStartDate(e.target.value);
                      setImagePage(1);
                    }}
                    type="date"
                    value={imageStartDate}
                  />
                </div>
                <div className="w-[150px]">
                  <Label className="mb-1 block text-xs">结束日期</Label>
                  <Input
                    onChange={(e) => {
                      setImageEndDate(e.target.value);
                      setImagePage(1);
                    }}
                    type="date"
                    value={imageEndDate}
                  />
                </div>
                <div className="flex items-end">
                  <Button
                    onClick={() => {
                      setImageSearch("");
                      setImageStartDate("");
                      setImageEndDate("");
                      setImagePage(1);
                    }}
                    size="sm"
                    variant="outline"
                  >
                    重置
                  </Button>
                </div>
              </div>

              {/* 统计信息 */}
              <div className="mb-4 text-muted-foreground text-sm">
                共 {imagesData?.pagination.total || 0} 条记录
                {imagesData?.pagination.totalImages !== undefined ||
                imagesData?.pagination.totalVideos !== undefined
                  ? `（图片 ${imagesData?.pagination.totalImages || 0} / 视频 ${imagesData?.pagination.totalVideos || 0}）`
                  : ""}
              </div>

              {/* 图片网格 */}
              <div className="grid grid-cols-[repeat(auto-fill,minmax(80px,1fr))] gap-3">
                {imagesData?.images?.map((img) => (
                  <div
                    className="group relative cursor-pointer"
                    key={img.id}
                    onClick={() => setSelectedImage(img)}
                  >
                    <div className="relative mx-auto h-[37px] w-[37px] overflow-hidden rounded border bg-muted">
                      {img.recordType === "video" ? (
                        <video
                          className="h-full w-full object-cover"
                          muted
                          playsInline
                          preload="metadata"
                          src={img.videoUrl || img.originalUrl}
                        />
                      ) : (
                        <img
                          alt={img.prompt || "AI生成的图片"}
                          className="h-full w-full object-cover"
                          loading="lazy"
                          src={img.thumbnailUrl}
                        />
                      )}
                      {img.recordType === "video" ? (
                        <div className="absolute inset-0 flex items-center justify-center bg-black/25">
                          <Video className="h-3 w-3 text-white" />
                        </div>
                      ) : null}
                      {/* 精选图标 */}
                      {img.recordType !== "video" && img.isFeatured && (
                        <div className="-top-1 -right-1 absolute flex h-4 w-4 items-center justify-center rounded-full bg-gradient-to-r from-yellow-400 to-orange-500 shadow">
                          <Sparkles className="h-2.5 w-2.5 text-white" />
                        </div>
                      )}
                    </div>
                    <div className="mt-1 truncate text-center text-[10px] text-muted-foreground">
                      {img.userName || img.userEmail?.split("@")[0]}
                    </div>
                    <div className="text-center text-[9px] text-muted-foreground/60">
                      {formatBeijingTime(img.createdAt, {
                        month: "numeric",
                        day: "numeric",
                      })}
                    </div>
                  </div>
                ))}
              </div>

              {/* 分页 */}
              {imagesData && imagesData.pagination.totalPages > 1 && (
                <div className="mt-6 flex items-center justify-between">
                  <div className="text-muted-foreground text-sm">
                    第 {imagesData.pagination.page} /{" "}
                    {imagesData.pagination.totalPages} 页
                  </div>
                  <div className="flex items-center gap-2">
                    <Button
                      disabled={imagePage === 1}
                      onClick={() => setImagePage(1)}
                      size="sm"
                      variant="outline"
                    >
                      首页
                    </Button>
                    <Button
                      disabled={imagePage === 1}
                      onClick={() => setImagePage((p) => Math.max(1, p - 1))}
                      size="sm"
                      variant="outline"
                    >
                      上一页
                    </Button>
                    <Button
                      disabled={imagePage === imagesData.pagination.totalPages}
                      onClick={() =>
                        setImagePage((p) =>
                          Math.min(imagesData.pagination.totalPages, p + 1)
                        )
                      }
                      size="sm"
                      variant="outline"
                    >
                      下一页
                    </Button>
                    <Button
                      disabled={imagePage === imagesData.pagination.totalPages}
                      onClick={() =>
                        setImagePage(imagesData.pagination.totalPages)
                      }
                      size="sm"
                      variant="outline"
                    >
                      末页
                    </Button>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>

          {/* 图片详情弹窗 */}
          <Dialog
            onOpenChange={(open) => !open && setSelectedImage(null)}
            open={!!selectedImage}
          >
            <DialogContent className="!bg-white max-h-[85vh] max-w-3xl overflow-y-auto dark:!bg-zinc-950">
              <DialogHeader>
                <DialogTitle className="flex items-center gap-2">
                  {selectedImage?.recordType === "video"
                    ? "视频详情"
                    : "图片详情"}
                  {selectedImage?.recordType !== "video" &&
                    selectedImage?.isFeatured && (
                      <span className="inline-flex items-center gap-1 rounded-full bg-gradient-to-r from-yellow-400 to-orange-500 px-2 py-0.5 text-white text-xs">
                        <Sparkles className="h-3 w-3" />
                        精选
                      </span>
                    )}
                </DialogTitle>
              </DialogHeader>
              {selectedImage && (
                <div className="space-y-4">
                  <div className="relative flex justify-center">
                    {selectedImage.recordType === "video" ? (
                      <video
                        className="max-h-[400px] w-full rounded-lg bg-black object-contain"
                        controls
                        preload="metadata"
                        src={
                          selectedImage.videoUrl || selectedImage.originalUrl
                        }
                      />
                    ) : (
                      <img
                        alt={selectedImage.prompt || "AI生成的图片"}
                        className="max-h-[400px] rounded-lg object-contain"
                        src={selectedImage.originalUrl}
                      />
                    )}
                  </div>
                  <div className="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <Label className="text-muted-foreground">用户</Label>
                      <p>{selectedImage.userName || selectedImage.userEmail}</p>
                    </div>
                    <div>
                      <Label className="text-muted-foreground">部门</Label>
                      <p>{selectedImage.userDepartment || "未设置"}</p>
                    </div>
                    <div>
                      <Label className="text-muted-foreground">生成时间</Label>
                      <p>
                        {new Date(selectedImage.createdAt).toLocaleString(
                          "zh-CN"
                        )}
                      </p>
                    </div>
                    <div>
                      <Label className="text-muted-foreground">
                        {selectedImage.recordType === "video"
                          ? "视频分辨率"
                          : "图片尺寸"}
                      </Label>
                      <p>{selectedImage.imageSize || "未知"}</p>
                    </div>
                    <div>
                      <Label className="text-muted-foreground">模型</Label>
                      <p>
                        {formatAnalyticsModelLabel(
                          resolveRuntimeModelMeta(
                            runtimeModelMetaById,
                            selectedImage.modelId
                          ),
                          selectedImage.modelId
                        )}
                      </p>
                    </div>
                    {selectedImage.recordType !== "video" ? (
                      <div>
                        <Label className="text-muted-foreground">
                          精选分类
                        </Label>
                        <p>{selectedImage.featuredCategory || "未设置"}</p>
                      </div>
                    ) : null}
                    {selectedImage.recordType !== "video" &&
                      selectedImage.isFeatured &&
                      selectedImage.featuredAt && (
                        <div>
                          <Label className="text-muted-foreground">
                            精选时间
                          </Label>
                          <p>
                            {new Date(selectedImage.featuredAt).toLocaleString(
                              "zh-CN"
                            )}
                          </p>
                        </div>
                      )}
                    <div className="col-span-2">
                      <Label className="text-muted-foreground">提示词</Label>
                      <p className="mt-1">{selectedImage.prompt || "无"}</p>
                    </div>
                  </div>
                  {selectedImage.recordType !== "video" ? (
                    <div className="flex flex-wrap items-center justify-between gap-3 border-t pt-2">
                      <div className="flex items-center gap-2">
                        <Label className="text-muted-foreground text-xs">
                          分类
                        </Label>
                        <Select
                          onValueChange={(value) =>
                            setSelectedImage({
                              ...selectedImage,
                              featuredCategory:
                                value === "__none__" ? null : value,
                            })
                          }
                          value={selectedImage.featuredCategory || "__none__"}
                        >
                          <SelectTrigger className="h-8 w-[180px]">
                            <SelectValue placeholder="选择分类" />
                          </SelectTrigger>
                          <SelectContent className="!bg-white dark:!bg-zinc-950">
                            <SelectItem value="__none__">未分类</SelectItem>
                            {featuredCategoryOptions.map((category) => (
                              <SelectItem key={category} value={category}>
                                {category}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        <Button
                          onClick={async () => {
                            try {
                              const res = await fetch("/api/admin/images", {
                                method: "PATCH",
                                headers: { "Content-Type": "application/json" },
                                body: JSON.stringify({
                                  imageId: selectedImage.id,
                                  featuredCategory:
                                    selectedImage.featuredCategory,
                                }),
                              });
                              if (!res.ok) {
                                throw new Error("更新精选分类失败");
                              }
                              toast.success("精选分类已更新");
                              mutateImages();
                            } catch (error) {
                              toast.error(
                                error instanceof Error
                                  ? error.message
                                  : "更新精选分类失败"
                              );
                            }
                          }}
                          size="sm"
                          variant="outline"
                        >
                          保存分类
                        </Button>
                      </div>
                      <Button
                        className={
                          selectedImage.isFeatured
                            ? ""
                            : "bg-gradient-to-r from-yellow-400 to-orange-500 hover:from-yellow-500 hover:to-orange-600"
                        }
                        onClick={async () => {
                          try {
                            const res = await fetch("/api/admin/images", {
                              method: "PATCH",
                              headers: { "Content-Type": "application/json" },
                              body: JSON.stringify({
                                imageId: selectedImage.id,
                                isFeatured: !selectedImage.isFeatured,
                              }),
                            });
                            if (res.ok) {
                              // 更新本地状态
                              setSelectedImage({
                                ...selectedImage,
                                isFeatured: !selectedImage.isFeatured,
                                featuredAt: selectedImage.isFeatured
                                  ? null
                                  : new Date().toISOString(),
                              });
                              // 刷新列表
                              mutateImages();
                            }
                          } catch (error) {
                            console.error(
                              "Failed to update featured status:",
                              error
                            );
                          }
                        }}
                        variant={
                          selectedImage.isFeatured ? "outline" : "default"
                        }
                      >
                        <Sparkles className="mr-2 h-4 w-4" />
                        {selectedImage.isFeatured ? "取消精选" : "设为精选"}
                      </Button>
                    </div>
                  ) : null}
                </div>
              )}
            </DialogContent>
          </Dialog>
        </TabsContent>

        {/* 🆕 数据分析 */}
        <TabsContent className="mt-6 space-y-4" value="analytics">
          <Card className="overflow-hidden border-zinc-200/80 shadow-[0_18px_40px_-28px_rgba(15,23,42,0.28)] dark:border-zinc-800/80 dark:bg-zinc-950/70 dark:shadow-none">
            <CardHeader className="border-b border-zinc-200/70 bg-gradient-to-r from-zinc-50 via-white to-lime-50/40 dark:border-zinc-800/80 dark:from-zinc-950 dark:via-zinc-950 dark:to-lime-950/20">
              <div className="space-y-3">
                <div className="text-[11px] uppercase tracking-[0.24em] text-muted-foreground">
                  analytics overview
                </div>
                <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
                  <div className="space-y-1">
                    <CardTitle className="text-xl text-zinc-950 dark:text-zinc-50">
                      生成与运营总览
                    </CardTitle>
                    <CardDescription>
                      统一展示生成规模、活跃用户、趋势波动、模型分布和分辨率结构。
                    </CardDescription>
                  </div>
                  <div className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white/85 px-3 py-1.5 text-xs text-zinc-600 shadow-sm dark:border-zinc-800 dark:bg-zinc-900/80 dark:text-zinc-300">
                    <Database className="h-3.5 w-3.5" />
                    <span>{formatAnalyticsMonthLabel(selectedMonth)}</span>
                    {selectedDate ? (
                      <span className="rounded-full bg-orange-100 px-2 py-0.5 text-orange-700 dark:bg-orange-500/15 dark:text-orange-200">
                        {selectedDate}
                      </span>
                    ) : null}
                  </div>
                </div>
              </div>
            </CardHeader>
            <CardContent className="pt-6">
              <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
                {analyticsOverviewCards.map((item) => {
                  const Icon = item.icon;
                  return (
                    <div
                      className={cn(
                        "rounded-2xl border border-zinc-200/70 bg-gradient-to-br p-4 shadow-[0_10px_25px_-18px_rgba(15,23,42,0.25)] dark:border-zinc-800 dark:bg-zinc-900/70 dark:shadow-none",
                        item.tone
                      )}
                      key={item.key}
                    >
                      <div className="flex items-start justify-between gap-3">
                        <div>
                          <div className="text-[11px] uppercase tracking-[0.2em] text-current/70">
                            {item.label}
                          </div>
                          <div className="mt-3 font-semibold text-3xl tracking-tight">
                            {item.value}
                          </div>
                        </div>
                        <div className="rounded-2xl border border-current/10 bg-white/70 p-2 text-current shadow-sm dark:bg-white/10">
                          <Icon className="h-4 w-4" />
                        </div>
                      </div>
                      <div className="mt-4 text-current/75 text-xs">
                        {item.note}
                      </div>
                    </div>
                  );
                })}
              </div>
            </CardContent>
          </Card>

          <Card className="border-zinc-200/80 shadow-[0_18px_40px_-28px_rgba(15,23,42,0.24)] dark:border-zinc-800/80 dark:bg-zinc-950/70 dark:shadow-none">
            <CardHeader className="pb-4">
              <div className="text-[11px] uppercase tracking-[0.24em] text-muted-foreground">
                filters & pulse
              </div>
              <CardTitle className="text-lg">统计筛选与核心信号</CardTitle>
              <CardDescription>
                保留月份筛选，同时把高峰时段、领先模型和最近月度走势铺满在同一块工作区里。
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
                <div className="rounded-2xl border border-zinc-200/70 bg-zinc-50/80 p-4 dark:border-zinc-800 dark:bg-zinc-900/60">
                  <Label className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
                    统计月份
                  </Label>
                  <Input
                    className="mt-3 h-10 border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-950"
                    onChange={(e) => setSelectedMonth(e.target.value)}
                    type="month"
                    value={selectedMonth}
                  />
                  {selectedDate ? (
                    <Button
                      className="mt-3 h-8 rounded-full px-3 text-xs"
                      onClick={() => setSelectedDate(null)}
                      size="sm"
                      variant="outline"
                    >
                      清除日期筛选
                    </Button>
                  ) : null}
                </div>

                <div className="rounded-2xl border border-zinc-200/70 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900/60">
                  <div className="flex items-center gap-2 text-zinc-900 text-sm dark:text-zinc-100">
                    <Clock className="h-4 w-4" />
                    高峰时段
                  </div>
                  <div className="mt-2 font-semibold text-2xl tracking-tight">
                    {analyticsPeakHour
                      ? `${String(analyticsPeakHour.hour).padStart(2, "0")}:00`
                      : "--:--"}
                  </div>
                  <div className="mt-1 text-muted-foreground text-xs">
                    {analyticsPeakHour
                      ? `${formatAnalyticsNumber(analyticsPeakHour.count)} 次生成`
                      : "暂无小时数据"}
                  </div>
                </div>

                <div className="rounded-2xl border border-zinc-900 bg-zinc-950 p-4 text-white dark:border-zinc-800 dark:bg-zinc-900">
                  <div className="flex items-center gap-2 text-sm text-zinc-200">
                    <Bot className="h-4 w-4" />
                    领先模型
                  </div>
                  <div className="mt-2 max-w-full truncate font-semibold text-xl">
                    {formatAnalyticsModelLabel(
                      resolveRuntimeModelMeta(
                        runtimeModelMetaById,
                        analyticsData?.modelDetailStats?.[0]?.modelId || null
                      ),
                      analyticsData?.modelDetailStats?.[0]?.modelId || null
                    )}
                  </div>
                  <div className="mt-1 text-xs text-zinc-400">
                    {analyticsData?.modelDetailStats?.[0]
                      ? `${formatAnalyticsNumber(
                          analyticsData.modelDetailStats[0].count
                        )} 次调用`
                      : "还没有模型统计结果"}
                  </div>
                </div>

                <div className="rounded-2xl border border-zinc-200/70 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900/60">
                  <div className="text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
                    recent months
                  </div>
                  <div className="mt-3 grid grid-cols-3 gap-2 text-center">
                    {analyticsRecentMonths.slice(-3).map((stat) => (
                      <div
                        className="rounded-xl border border-zinc-200/70 bg-zinc-50/80 px-2 py-2 dark:border-zinc-800 dark:bg-zinc-950/70"
                        key={stat.month}
                      >
                        <div className="text-[11px] text-muted-foreground">
                          {stat.month.slice(5)}
                        </div>
                        <div className="mt-1 font-semibold text-sm text-zinc-950 dark:text-zinc-50">
                          {formatAnalyticsNumber(stat.count)}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="border-zinc-200/80 shadow-[0_18px_40px_-28px_rgba(15,23,42,0.24)] dark:border-zinc-800/80 dark:bg-zinc-950/70 dark:shadow-none">
            <CardHeader className="pb-4">
              <div className="text-[11px] uppercase tracking-[0.24em] text-muted-foreground">
                throughput
              </div>
              <CardTitle className="text-lg">近 30 天生成趋势</CardTitle>
              <CardDescription>
                点击柱体可联动下方小时分布，所有趋势模块都按全宽铺排展示。
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="flex items-center justify-between text-xs text-muted-foreground">
                <span>近 30 天生成量</span>
                <span>点击柱体联动小时分布</span>
              </div>
              <div className="relative flex h-[240px] items-end gap-1 rounded-2xl border border-zinc-200/70 bg-zinc-50/80 px-3 py-4 dark:border-zinc-800 dark:bg-zinc-900/60">
                {analyticsData?.dailyStats?.map((stat, index) => {
                  const maxCount = Math.max(
                    ...(analyticsData.dailyStats?.map((s) => s.count) || [1])
                  );
                  const height = (stat.count / maxCount) * 100;
                  const isHovered =
                    hoveredBar?.type === "daily" &&
                    hoveredBar?.index === index;
                  const isSelected = selectedDate === stat.date;
                  return (
                    <div
                      className={cn(
                        "relative flex-1 cursor-pointer rounded-full transition-all",
                        isSelected
                          ? "bg-zinc-950 dark:bg-zinc-100"
                          : isHovered
                            ? "bg-lime-400"
                            : "bg-zinc-300 hover:bg-zinc-400 dark:bg-zinc-700 dark:hover:bg-zinc-600"
                      )}
                      key={stat.date}
                      onClick={() =>
                        setSelectedDate(
                          selectedDate === stat.date ? null : stat.date
                        )
                      }
                      onMouseEnter={() =>
                        setHoveredBar({
                          type: "daily",
                          index,
                          value: stat.count,
                          label: stat.date,
                        })
                      }
                      onMouseLeave={() => setHoveredBar(null)}
                      style={{ height: `${Math.max(height, 5)}%` }}
                    >
                      {isHovered ? (
                        <div className="-translate-x-1/2 absolute bottom-full left-1/2 z-10 mb-2 whitespace-nowrap rounded-xl bg-zinc-950 px-3 py-2 text-white text-xs shadow-lg dark:bg-zinc-100 dark:text-zinc-950">
                          {stat.date} · {formatAnalyticsNumber(stat.count)} 次
                        </div>
                      ) : null}
                    </div>
                  );
                })}
              </div>
              <div className="flex justify-between text-[11px] text-muted-foreground">
                <span>{analyticsData?.dailyStats?.[0]?.date || "--"}</span>
                <span>{analyticsData?.dailyStats?.at(-1)?.date || "--"}</span>
              </div>
            </CardContent>
          </Card>

          <Card className="border-zinc-200/80 shadow-[0_18px_40px_-28px_rgba(15,23,42,0.24)] dark:border-zinc-800/80 dark:bg-zinc-950/70 dark:shadow-none">
            <CardHeader className="pb-4">
              <div className="text-[11px] uppercase tracking-[0.24em] text-muted-foreground">
                hourly load
              </div>
              <CardTitle className="text-lg">24 小时分布</CardTitle>
              <CardDescription>
                {selectedDate
                  ? `${selectedDate} 的生成高峰已锁定展示。`
                  : "默认展示最近样本的小时分布。"}
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="flex items-center justify-between text-xs text-muted-foreground">
                <span>小时分布</span>
                <span>{selectedDate || "默认最近样本"}</span>
              </div>
              <div className="flex h-[240px] items-end gap-1 rounded-2xl border border-zinc-200/70 bg-white px-3 py-4 dark:border-zinc-800 dark:bg-zinc-900/60">
                {Array.from({ length: 24 }, (_, hour) => {
                  const stat = analyticsData?.hourlyStats?.find(
                    (item) => item.hour === hour
                  );
                  const count = stat?.count || 0;
                  const maxCount = Math.max(
                    ...(analyticsData?.hourlyStats?.map((s) => s.count) || [1]),
                    1
                  );
                  const height = (count / maxCount) * 100;
                  const isHovered =
                    hoveredBar?.type === "hourly" &&
                    hoveredBar?.index === hour;
                  return (
                    <div
                      className={cn(
                        "relative flex-1 rounded-full transition-colors",
                        selectedDate
                          ? isHovered
                            ? "bg-orange-500"
                            : "bg-orange-300 dark:bg-orange-500/60"
                          : isHovered
                            ? "bg-lime-500"
                            : "bg-zinc-300 dark:bg-zinc-700"
                      )}
                      key={hour}
                      onMouseEnter={() =>
                        setHoveredBar({
                          type: "hourly",
                          index: hour,
                          value: count,
                          label: `${hour}:00`,
                        })
                      }
                      onMouseLeave={() => setHoveredBar(null)}
                      style={{ height: `${Math.max(height, 4)}%` }}
                    >
                      {isHovered ? (
                        <div className="-translate-x-1/2 absolute bottom-full left-1/2 z-10 mb-2 whitespace-nowrap rounded-xl bg-zinc-950 px-3 py-2 text-white text-xs shadow-lg dark:bg-zinc-100 dark:text-zinc-950">
                          {String(hour).padStart(2, "0")}:00 ·{" "}
                          {formatAnalyticsNumber(count)} 次
                        </div>
                      ) : null}
                    </div>
                  );
                })}
              </div>
              <div className="flex justify-between text-[11px] text-muted-foreground">
                <span>00:00</span>
                <span>12:00</span>
                <span>23:00</span>
              </div>
            </CardContent>
          </Card>

          <Card className="border-zinc-200/80 shadow-[0_18px_40px_-28px_rgba(15,23,42,0.24)] dark:border-zinc-800/80 dark:bg-zinc-950/70 dark:shadow-none">
            <CardHeader className="pb-4">
              <div className="text-[11px] uppercase tracking-[0.24em] text-muted-foreground">
                top users
              </div>
              <CardTitle className="text-lg">高活跃用户</CardTitle>
              <CardDescription>按生成次数排序，整块全宽展示主要使用群体。</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {analyticsData?.userStats?.slice(0, 10).map((user, index) => (
                  <div
                    className="flex items-center justify-between rounded-2xl border border-zinc-200/70 bg-zinc-50/80 px-4 py-3 dark:border-zinc-800 dark:bg-zinc-900/60"
                    key={user.userId}
                  >
                    <div className="flex min-w-0 items-center gap-3">
                      <div
                        className={cn(
                          "flex h-8 w-8 items-center justify-center rounded-full text-xs font-semibold",
                          index === 0
                            ? "bg-zinc-950 text-white"
                            : index < 3
                              ? "bg-lime-100 text-lime-700 dark:bg-lime-500/15 dark:text-lime-200"
                              : "bg-white text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300"
                        )}
                      >
                        {index + 1}
                      </div>
                      <div className="min-w-0">
                        <div className="truncate font-medium text-sm text-zinc-950 dark:text-zinc-50">
                          {user.userName || user.userEmail?.split("@")[0]}
                        </div>
                        <div className="truncate text-muted-foreground text-xs">
                          {user.userEmail}
                        </div>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="font-semibold text-zinc-950 dark:text-zinc-50">
                        {formatAnalyticsNumber(user.imageCount)}
                      </div>
                      <div className="text-[11px] text-muted-foreground">
                        次生成
                      </div>
                    </div>
                  </div>
                ))}
                {(!analyticsData?.userStats || analyticsData.userStats.length === 0) && (
                  <div className="rounded-2xl border border-dashed border-zinc-200 py-10 text-center text-muted-foreground text-sm dark:border-zinc-800">
                    暂无用户排行数据
                  </div>
                )}
              </div>
            </CardContent>
          </Card>

          <Card className="border-zinc-200/80 shadow-[0_18px_40px_-28px_rgba(15,23,42,0.24)] dark:border-zinc-800/80 dark:bg-zinc-950/70 dark:shadow-none">
            <CardHeader className="pb-4">
              <div className="text-[11px] uppercase tracking-[0.24em] text-muted-foreground">
                output sizes
              </div>
              <CardTitle className="text-lg">分辨率分布</CardTitle>
              <CardDescription>
                统一按 4K、3K、2K、1K 四档归并统计，不再展示零散原始尺寸。
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
                {analyticsData?.sizeStats?.map((stat) => {
                  const percentage = formatAnalyticsRatio(
                    stat.count,
                    analyticsData?.overview.totalImages || 0
                  );
                  return (
                    <div
                      className="rounded-2xl border border-zinc-200/70 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900/60"
                      key={stat.imageSize || "unknown"}
                    >
                      <div className="text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
                        {stat.imageSize}
                      </div>
                      <div className="mt-3 font-semibold text-3xl tracking-tight text-zinc-950 dark:text-zinc-50">
                        {formatAnalyticsNumber(stat.count)}
                      </div>
                      <div className="mt-1 text-muted-foreground text-xs">
                        占比 {percentage}
                      </div>
                      <div className="mt-4 h-2 overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800">
                        <div
                          className="h-full rounded-full bg-gradient-to-r from-zinc-950 to-lime-400"
                          style={{ width: percentage }}
                        />
                      </div>
                    </div>
                  );
                })}
              </div>
            </CardContent>
          </Card>

          <Card className="border-zinc-200/80 shadow-[0_18px_40px_-28px_rgba(15,23,42,0.24)] dark:border-zinc-800/80 dark:bg-zinc-950/70 dark:shadow-none">
            <CardHeader className="border-b border-zinc-200/70 pb-4 dark:border-zinc-800/80">
              <div className="text-[11px] uppercase tracking-[0.24em] text-muted-foreground">
                model usage
              </div>
              <CardTitle className="text-lg">模型使用概览</CardTitle>
              <CardDescription>
                兼容历史 UUID 与 runtime modelId，并按统一模型归并后展示后台配置名称。
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-3 pt-6">
              {(analyticsData?.modelDetailStats || []).slice(0, 8).map((stat, index) => {
                const resolved = resolveRuntimeModelMeta(
                  runtimeModelMetaById,
                  stat.modelId
                );
                const modelLabel = formatAnalyticsModelLabel(
                  resolved,
                  stat.modelId
                );
                return (
                  <div
                    className="rounded-2xl border border-zinc-200/70 bg-zinc-50/80 p-4 dark:border-zinc-800 dark:bg-zinc-900/60"
                    key={`${stat.modelId || "unknown"}-${index}`}
                  >
                    <div className="flex flex-wrap items-start justify-between gap-3">
                      <div className="min-w-0 flex-1">
                        <div className="flex items-center gap-3">
                          <span className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-950 text-white text-sm font-semibold">
                            {index + 1}
                          </span>
                          <div className="min-w-0">
                            <div className="truncate font-medium text-base text-zinc-950 dark:text-zinc-50">
                              {modelLabel}
                            </div>
                            <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
                              <span className="rounded-full bg-white px-2 py-1 dark:bg-zinc-800 dark:text-zinc-300">
                                {resolved.providerName || "未知提供商"}
                              </span>
                              <span>{formatAnalyticsNumber(stat.userCount)} 位用户</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className="text-right">
                        <div className="font-semibold text-3xl tracking-tight text-zinc-950 dark:text-zinc-50">
                          {formatAnalyticsNumber(stat.count)}
                        </div>
                        <div className="text-[11px] text-muted-foreground">
                          {formatAnalyticsRatio(stat.count, analyticsModelTotal)}
                        </div>
                      </div>
                    </div>
                    <div className="mt-4 h-2 overflow-hidden rounded-full bg-white dark:bg-zinc-800">
                      <div
                        className={cn(
                          "h-full rounded-full",
                          index === 0
                            ? "bg-zinc-950 dark:bg-zinc-100"
                            : index === 1
                              ? "bg-lime-500"
                              : index === 2
                                ? "bg-amber-500"
                                : "bg-zinc-300 dark:bg-zinc-600"
                        )}
                        style={{
                          width: formatAnalyticsRatio(
                            stat.count,
                            analyticsData?.modelDetailStats?.[0]?.count || 0
                          ),
                        }}
                      />
                    </div>
                  </div>
                );
              })}
              {(!analyticsData?.modelDetailStats ||
                analyticsData.modelDetailStats.length === 0) && (
                <div className="rounded-2xl border border-dashed border-zinc-200 py-10 text-center text-muted-foreground text-sm dark:border-zinc-800">
                  暂无模型使用数据
                </div>
              )}
            </CardContent>
          </Card>

          <Card className="border-zinc-200/80 shadow-[0_18px_40px_-28px_rgba(15,23,42,0.24)] dark:border-zinc-800/80 dark:bg-zinc-950/70 dark:shadow-none">
            <CardHeader className="pb-4">
              <div className="text-[11px] uppercase tracking-[0.24em] text-muted-foreground">
                provider distribution
              </div>
              <CardTitle className="text-lg">提供商分布</CardTitle>
              <CardDescription>按 provider 汇总模型调用量，使用整行进度条展示占比。</CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              {(analyticsData?.providerTypeStats || []).map((stat, index) => {
                const total =
                  analyticsData?.providerTypeStats?.reduce(
                    (sum, item) => sum + item.count,
                    0
                  ) || 0;
                const width = formatAnalyticsRatio(stat.count, total);
                return (
                  <div
                    className="rounded-2xl border border-zinc-200/70 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900/60"
                    key={`${stat.providerType || "unknown"}-${index}`}
                  >
                    <div className="flex items-center justify-between gap-3 text-sm">
                      <span className="truncate font-medium text-zinc-950 dark:text-zinc-50">
                        {stat.providerName || stat.providerType || "未知提供商"}
                      </span>
                      <span className="shrink-0 text-muted-foreground text-xs">
                        {formatAnalyticsNumber(stat.count)} · {width}
                      </span>
                    </div>
                    <div className="mt-3 h-2 overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800">
                      <div
                        className="h-full rounded-full bg-gradient-to-r from-zinc-950 to-lime-400"
                        style={{ width }}
                      />
                    </div>
                  </div>
                );
              })}
            </CardContent>
          </Card>

          <Card className="border-zinc-200/80 shadow-[0_18px_40px_-28px_rgba(15,23,42,0.24)] dark:border-zinc-800/80 dark:bg-zinc-950/70 dark:shadow-none">
            <CardHeader className="pb-4">
              <div className="text-[11px] uppercase tracking-[0.24em] text-muted-foreground">
                recent 7 days
              </div>
              <CardTitle className="text-lg">模型日趋势</CardTitle>
              <CardDescription>每天显示总量，并列出当日最活跃的模型名称。</CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              {analyticsTrendDays.map((day) => {
                const topModels = day.models.slice(0, 3);
                return (
                  <div
                    className="rounded-2xl border border-zinc-200/70 bg-zinc-50/80 p-4 dark:border-zinc-800 dark:bg-zinc-900/60"
                    key={day.date}
                  >
                    <div className="flex items-center justify-between gap-3">
                      <div>
                        <div className="font-medium text-sm text-zinc-950 dark:text-zinc-50">
                          {day.date}
                        </div>
                        <div className="text-muted-foreground text-xs">
                          当日共 {formatAnalyticsNumber(day.total)} 次生成
                        </div>
                      </div>
                      <div className="rounded-full bg-white px-3 py-1 text-xs text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
                        {formatAnalyticsNumber(day.models.length)} 个模型活跃
                      </div>
                    </div>
                    <div className="mt-3 flex flex-wrap gap-2">
                      {topModels.map((stat) => (
                        <div
                          className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white px-3 py-1.5 text-xs dark:border-zinc-800 dark:bg-zinc-950/70"
                          key={`${day.date}-${stat.modelId || stat.modelName}`}
                        >
                          <span className="max-w-[180px] truncate text-zinc-900 dark:text-zinc-100">
                            {formatAnalyticsModelLabel(
                              {
                                modelName: stat.modelName,
                                providerName: stat.providerName,
                                providerType: stat.providerType,
                              },
                              stat.modelId
                            )}
                          </span>
                          <span className="text-muted-foreground">
                            {formatAnalyticsNumber(stat.count)}
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>
                );
              })}
              {analyticsTrendDays.length === 0 ? (
                <div className="rounded-2xl border border-dashed border-zinc-200 py-10 text-center text-muted-foreground text-sm dark:border-zinc-800">
                  暂无趋势数据
                </div>
              ) : null}
            </CardContent>
          </Card>
        </TabsContent>

        {/* 访问安全 */}
        <TabsContent className="mt-6" value="access-security">
          <AccessSecurityDashboard />
        </TabsContent>

        {/* 网站设置 */}
        <TabsContent className="mt-6" value="site">
          <Card>
            <CardHeader>
              <CardTitle className="text-xl">网站基本设置</CardTitle>
              <CardDescription>配置网站名称、LOGO、功能开关等</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-2">
                <Label htmlFor="siteName">网站名称</Label>
                <Input
                  id="siteName"
                  onChange={(e) =>
                    setSiteSettings({
                      ...siteSettings,
                      siteName: e.target.value,
                    })
                  }
                  placeholder="输入网站名称"
                  value={siteSettings.siteName}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="siteLogo">网站 LOGO (白天模式/默认)</Label>
                <Input
                  id="siteLogo"
                  onChange={(e) =>
                    setSiteSettings({
                      ...siteSettings,
                      siteLogo: e.target.value,
                    })
                  }
                  placeholder="https://example.com/logo.png"
                  value={siteSettings.siteLogo || ""}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="siteLogoDark">网站 LOGO (黑夜模式)</Label>
                <Input
                  id="siteLogoDark"
                  onChange={(e) =>
                    setSiteSettings({
                      ...siteSettings,
                      siteLogoDark: e.target.value,
                    })
                  }
                  placeholder="https://example.com/logo-dark.png"
                  value={siteSettings.siteLogoDark || ""}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="favicon">浏览器图标 (Favicon URL)</Label>
                <Input
                  id="favicon"
                  onChange={(e) =>
                    setSiteSettings({
                      ...siteSettings,
                      favicon: e.target.value,
                    })
                  }
                  placeholder="https://example.com/favicon.ico"
                  value={siteSettings.favicon || ""}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="defaultTheme">默认主题模式</Label>
                <Select
                  onValueChange={(value: "light" | "dark" | "system") =>
                    setSiteSettings({ ...siteSettings, defaultTheme: value })
                  }
                  value={siteSettings.defaultTheme}
                >
                  <SelectTrigger id="defaultTheme">
                    <SelectValue placeholder="选择默认主题" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="system">跟随系统</SelectItem>
                    <SelectItem value="light">浅色模式</SelectItem>
                    <SelectItem value="dark">深色模式</SelectItem>
                  </SelectContent>
                </Select>
                <div className="text-muted-foreground text-xs">
                  设置新用户首次访问时的默认主题模式
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="surpriseCategories">
                  精选相册分类（逗号分隔）
                </Label>
                <Input
                  id="surpriseCategories"
                  onChange={(e) => {
                    const parsed = e.target.value
                      .split(",")
                      .map((item) => item.trim())
                      .filter(Boolean);
                    const unique = Array.from(new Set(parsed));
                    setSiteSettings({
                      ...siteSettings,
                      surpriseCategories:
                        unique.length > 0 ? unique : ["全部", "精选"],
                    });
                  }}
                  placeholder="全部, 精选, 海报, 电商"
                  value={siteSettings.surpriseCategories.join(", ")}
                />
                <div className="text-muted-foreground text-xs">
                  新版首页“精选”模块会按这些分类显示筛选标签。
                </div>
              </div>
              <div className="grid gap-4 rounded-lg border border-dashed p-4">
                <div className="font-medium text-sm">
                  首页 / 无限画布对话框文案配置
                </div>
                <div className="space-y-2">
                  <Label htmlFor="lovartComposerPrefix">
                    对话框固定前缀文案（首页与无限画布共用）
                  </Label>
                  <Input
                    id="lovartComposerPrefix"
                    onChange={(e) =>
                      setSiteSettings({
                        ...siteSettings,
                        lovartComposerPrefix: e.target.value.slice(0, 40),
                      })
                    }
                    placeholder="让「由壹点AI」"
                    value={siteSettings.lovartComposerPrefix}
                  />
                  <div className="text-muted-foreground text-xs">
                    该前缀会固定显示在打字文案前面，切换文案时不删除。
                  </div>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="lovartComposerPreviewTexts">
                    对话框预览文案（首页与无限画布共用，每行一条，按顺序轮播打字显示）
                  </Label>
                  <Textarea
                    id="lovartComposerPreviewTexts"
                    onChange={(e) => {
                      const values = e.target.value
                        .split("\n")
                        .map((item) => item.trim())
                        .filter(Boolean)
                        .slice(0, 20);

                      setSiteSettings({
                        ...siteSettings,
                        lovartComposerPreviewTexts:
                          values.length > 0
                            ? values
                            : [
                                "打造引人注目的社交媒体视觉",
                                "帮我把这张产品图做成高级电商海报",
                                "基于参考图延展 3 套同风格方案",
                              ],
                      });
                    }}
                    placeholder={
                      "打造引人注目的社交媒体视觉\n帮我把这张产品图做成高级电商海报"
                    }
                    rows={5}
                    value={siteSettings.lovartComposerPreviewTexts.join("\n")}
                  />
                  <div className="text-muted-foreground text-xs">
                    仅配置动态尾文案；前端会固定显示前缀后再进行打字与删字切换。支持最多
                    20 条。
                  </div>
                </div>
                <div className="space-y-3 rounded-lg border p-3">
                  <div className="font-medium text-sm">
                    对话框下方标签按钮显示
                  </div>
                  <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
                    {lovartPromptTagOptions.map((item) => (
                      <div
                        className="flex items-center justify-between rounded-md border px-3 py-2"
                        key={item.key}
                      >
                        <Label htmlFor={`lovart-tag-${item.key}`}>
                          {item.label}
                        </Label>
                        <Switch
                          checked={
                            siteSettings.lovartPromptTagVisibility[item.key] !==
                            false
                          }
                          id={`lovart-tag-${item.key}`}
                          onCheckedChange={(checked) =>
                            setSiteSettings({
                              ...siteSettings,
                              lovartPromptTagVisibility: {
                                ...siteSettings.lovartPromptTagVisibility,
                                [item.key]: checked,
                              },
                            })
                          }
                        />
                      </div>
                    ))}
                  </div>
                  <div className="text-muted-foreground text-xs">
                    关闭后对应标签按钮会在新版首页对话框下方隐藏。
                  </div>
                </div>
                <div className="space-y-3 rounded-lg border p-3">
                  <div className="font-medium text-sm">联系我们配置</div>
                  <div className="space-y-2">
                    <Label htmlFor="contactPhone">联系电话</Label>
                    <Input
                      id="contactPhone"
                      onChange={(e) =>
                        setSiteSettings({
                          ...siteSettings,
                          contactConfig: {
                            ...siteSettings.contactConfig,
                            phone: e.target.value.slice(0, 64),
                          },
                        })
                      }
                      placeholder="例如：400-888-8888"
                      value={siteSettings.contactConfig.phone}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="contactWechatQrUrl">微信二维码 URL</Label>
                    <Input
                      id="contactWechatQrUrl"
                      onChange={(e) =>
                        setSiteSettings({
                          ...siteSettings,
                          contactConfig: {
                            ...siteSettings.contactConfig,
                            wechatQrUrl: e.target.value,
                          },
                        })
                      }
                      placeholder="https://example.com/wechat-qr.png"
                      value={siteSettings.contactConfig.wechatQrUrl}
                    />
                    <div className="flex items-center gap-2">
                      <Button
                        className="h-8"
                        disabled={contactQrUploading}
                        onClick={() =>
                          document.getElementById("contact-qr-upload")?.click()
                        }
                        size="sm"
                        type="button"
                        variant="outline"
                      >
                        {contactQrUploading ? (
                          <>
                            <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
                            上传中
                          </>
                        ) : (
                          "上传二维码"
                        )}
                      </Button>
                      <input
                        accept="image/*"
                        className="hidden"
                        id="contact-qr-upload"
                        onChange={async (event) => {
                          const file = event.target.files?.[0];
                          if (file) {
                            await handleContactQrUpload(file);
                          }
                          event.target.value = "";
                        }}
                        type="file"
                      />
                    </div>
                    {siteSettings.contactConfig.wechatQrUrl ? (
                      <div className="rounded-lg border p-2">
                        <img
                          alt="微信二维码预览"
                          className="h-28 w-28 rounded-md object-cover"
                          src={siteSettings.contactConfig.wechatQrUrl}
                        />
                      </div>
                    ) : null}
                  </div>
                  <div className="text-muted-foreground text-xs">
                    新版首页用户菜单点击“联系我们”后会弹出该二维码和联系电话。
                  </div>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="lovartPromoText">顶部升级提示文案</Label>
                  <Input
                    id="lovartPromoText"
                    onChange={(e) =>
                      setSiteSettings({
                        ...siteSettings,
                        lovartPromoText: e.target.value,
                      })
                    }
                    placeholder="现在升级，立享 Kling 3.0 与 Nano Banana Pro，最高 5 折优惠"
                    value={siteSettings.lovartPromoText}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="lovartPromoActionText">
                    顶部升级按钮文案
                  </Label>
                  <Input
                    id="lovartPromoActionText"
                    onChange={(e) =>
                      setSiteSettings({
                        ...siteSettings,
                        lovartPromoActionText: e.target.value,
                      })
                    }
                    placeholder="立即升级"
                    value={siteSettings.lovartPromoActionText}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="lovartHeroTitle">首页主标题</Label>
                  <Input
                    id="lovartHeroTitle"
                    onChange={(e) =>
                      setSiteSettings({
                        ...siteSettings,
                        lovartHeroTitle: e.target.value,
                      })
                    }
                    placeholder="由壹点AI 让设计更简单"
                    value={siteSettings.lovartHeroTitle}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="lovartHeroSubtitle">首页副标题</Label>
                  <Input
                    id="lovartHeroSubtitle"
                    onChange={(e) =>
                      setSiteSettings({
                        ...siteSettings,
                        lovartHeroSubtitle: e.target.value,
                      })
                    }
                    placeholder="懂你的设计代理，帮你搞定一切"
                    value={siteSettings.lovartHeroSubtitle}
                  />
                </div>
              </div>
              <div className="space-y-3 rounded-lg border p-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label className="font-medium text-sm">
                      会员升级系统配置
                    </Label>
                    <div className="mt-1 text-muted-foreground text-xs">
                      支持配置套餐、FAQ、模型额度、用户套餐覆盖。保存后新版首页“升级”弹窗实时生效。
                    </div>
                  </div>
                  <Button
                    onClick={() => {
                      setSiteSettings({
                        ...siteSettings,
                        membershipConfig: defaultMembershipConfig,
                        membershipUserOverrides: defaultMembershipUserOverrides,
                      });
                      toast.success("已恢复会员配置默认模板");
                    }}
                    size="sm"
                    type="button"
                    variant="outline"
                  >
                    恢复默认模板
                  </Button>
                </div>
                <div className="grid grid-cols-1 gap-3 md:grid-cols-4">
                  <div className="flex items-center justify-between rounded-lg border p-3">
                    <div className="space-y-0.5">
                      <Label htmlFor="membershipEnabled">启用会员系统</Label>
                      <div className="text-muted-foreground text-xs">
                        控制升级弹窗及会员规则是否生效
                      </div>
                    </div>
                    <Switch
                      checked={siteSettings.membershipConfig.enabled !== false}
                      id="membershipEnabled"
                      onCheckedChange={(checked) =>
                        updateMembershipConfigState((config) => ({
                          ...config,
                          enabled: checked,
                        }))
                      }
                    />
                  </div>
                  <div className="space-y-1">
                    <Label className="text-muted-foreground text-xs">
                      货币符号
                    </Label>
                    <Input
                      onChange={(e) =>
                        updateMembershipConfigState((config) => ({
                          ...config,
                          currency: e.target.value || "$",
                        }))
                      }
                      placeholder="$"
                      value={siteSettings.membershipConfig.currency}
                    />
                  </div>
                  <div className="space-y-1">
                    <Label className="text-muted-foreground text-xs">
                      年付折扣标签
                    </Label>
                    <Input
                      onChange={(e) =>
                        updateMembershipConfigState((config) => ({
                          ...config,
                          annualDiscountLabel: e.target.value,
                        }))
                      }
                      placeholder="限时 5 折优惠"
                      value={siteSettings.membershipConfig.annualDiscountLabel}
                    />
                  </div>
                  <div className="space-y-1">
                    <Label className="text-muted-foreground text-xs">
                      默认套餐
                    </Label>
                    <Select
                      onValueChange={(value) =>
                        updateMembershipConfigState((config) => ({
                          ...config,
                          defaultPlanId: value,
                        }))
                      }
                      value={siteSettings.membershipConfig.defaultPlanId}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="选择默认套餐" />
                      </SelectTrigger>
                      <SelectContent>
                        {siteSettings.membershipConfig.plans.map((plan) => (
                          <SelectItem key={plan.id} value={plan.id}>
                            {plan.name || plan.id}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>

                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label>会员套餐</Label>
                    <Button
                      onClick={addMembershipPlan}
                      size="sm"
                      type="button"
                      variant="outline"
                    >
                      <Plus className="mr-1.5 h-3.5 w-3.5" />
                      新增套餐
                    </Button>
                  </div>
                  <div className="space-y-3">
                    {siteSettings.membershipConfig.plans.map((plan, index) => (
                      <div
                        className="space-y-3 rounded-lg border p-3"
                        key={`${plan.id}-${index}`}
                      >
                        <div className="grid grid-cols-1 gap-3 md:grid-cols-7">
                          <div className="space-y-1 md:col-span-2">
                            <Label className="text-muted-foreground text-xs">
                              套餐名称
                            </Label>
                            <Input
                              onChange={(e) =>
                                updateMembershipPlan(index, (item) => ({
                                  ...item,
                                  name: e.target.value,
                                }))
                              }
                              value={plan.name}
                            />
                          </div>
                          <div className="space-y-1">
                            <Label className="text-muted-foreground text-xs">
                              月付
                            </Label>
                            <Input
                              min={0}
                              onChange={(e) =>
                                updateMembershipPlan(index, (item) => ({
                                  ...item,
                                  monthlyPrice: Math.max(
                                    0,
                                    Number.parseFloat(e.target.value || "0")
                                  ),
                                }))
                              }
                              step="0.01"
                              type="number"
                              value={plan.monthlyPrice}
                            />
                          </div>
                          <div className="space-y-1">
                            <Label className="text-muted-foreground text-xs">
                              年付
                            </Label>
                            <Input
                              min={0}
                              onChange={(e) =>
                                updateMembershipPlan(index, (item) => ({
                                  ...item,
                                  annualPrice: Math.max(
                                    0,
                                    Number.parseFloat(e.target.value || "0")
                                  ),
                                }))
                              }
                              step="0.01"
                              type="number"
                              value={plan.annualPrice}
                            />
                          </div>
                          <div className="space-y-1">
                            <Label className="text-muted-foreground text-xs">
                              月积分
                            </Label>
                            <Input
                              min={0}
                              onChange={(e) =>
                                updateMembershipPlan(index, (item) => ({
                                  ...item,
                                  monthlyCredits: Math.max(
                                    0,
                                    Number.parseInt(e.target.value || "0", 10)
                                  ),
                                }))
                              }
                              type="number"
                              value={plan.monthlyCredits}
                            />
                          </div>
                          <div className="space-y-1">
                            <Label className="text-muted-foreground text-xs">
                              每日免费积分
                            </Label>
                            <Input
                              min={0}
                              onChange={(e) =>
                                updateMembershipPlan(index, (item) => ({
                                  ...item,
                                  dailyFreeCredits: Math.max(
                                    0,
                                    Number.parseInt(e.target.value || "0", 10)
                                  ),
                                }))
                              }
                              type="number"
                              value={plan.dailyFreeCredits}
                            />
                          </div>
                          <div className="flex items-end justify-end">
                            <Button
                              onClick={() => removeMembershipPlan(index)}
                              size="icon"
                              title="删除套餐"
                              type="button"
                              variant="outline"
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>

                        <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
                          <div className="space-y-1">
                            <Label className="text-muted-foreground text-xs">
                              套餐ID
                            </Label>
                            <Input
                              onChange={(e) =>
                                updateMembershipPlan(index, (item) => ({
                                  ...item,
                                  id: e.target.value.replace(/\s+/g, "-"),
                                }))
                              }
                              value={plan.id}
                            />
                          </div>
                          <div className="space-y-1">
                            <Label className="text-muted-foreground text-xs">
                              徽章文案
                            </Label>
                            <Input
                              onChange={(e) =>
                                updateMembershipPlan(index, (item) => ({
                                  ...item,
                                  badge: e.target.value || undefined,
                                }))
                              }
                              placeholder="如：热门"
                              value={plan.badge || ""}
                            />
                          </div>
                          <div className="flex items-end">
                            <div className="flex items-center gap-2 rounded-md border px-2 py-1.5">
                              <Switch
                                checked={plan.highlighted === true}
                                onCheckedChange={(checked) =>
                                  updateMembershipPlan(index, (item) => ({
                                    ...item,
                                    highlighted: checked,
                                  }))
                                }
                              />
                              <span className="text-muted-foreground text-xs">
                                高亮展示
                              </span>
                            </div>
                          </div>
                        </div>

                        <div className="space-y-1">
                          <Label className="text-muted-foreground text-xs">
                            权益（每行一条）
                          </Label>
                          <Textarea
                            onChange={(e) =>
                              updateMembershipPlan(index, (item) => ({
                                ...item,
                                features: e.target.value
                                  .split("\n")
                                  .map((line) => line.trim())
                                  .filter(Boolean),
                              }))
                            }
                            placeholder="访问所有图片模型&#10;优先队列"
                            rows={3}
                            value={(plan.features || []).join("\n")}
                          />
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label>FAQ</Label>
                    <Button
                      onClick={addMembershipFaq}
                      size="sm"
                      type="button"
                      variant="outline"
                    >
                      <Plus className="mr-1.5 h-3.5 w-3.5" />
                      新增 FAQ
                    </Button>
                  </div>
                  <div className="space-y-2">
                    {siteSettings.membershipConfig.faqs.map((faq, index) => (
                      <div
                        className="space-y-2 rounded-lg border p-3"
                        key={`faq-${index}`}
                      >
                        <div className="flex items-center justify-between gap-2">
                          <Input
                            onChange={(e) =>
                              updateMembershipFaq(index, (item) => ({
                                ...item,
                                question: e.target.value,
                              }))
                            }
                            placeholder="问题"
                            value={faq.question}
                          />
                          <Button
                            onClick={() => removeMembershipFaq(index)}
                            size="icon"
                            title="删除 FAQ"
                            type="button"
                            variant="outline"
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                        <Textarea
                          onChange={(e) =>
                            updateMembershipFaq(index, (item) => ({
                              ...item,
                              answer: e.target.value,
                            }))
                          }
                          placeholder="回答"
                          rows={2}
                          value={faq.answer}
                        />
                      </div>
                    ))}
                  </div>
                </div>

                <div className="space-y-2">
                  <Label>用户套餐覆盖</Label>
                  <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                    <div className="space-y-2 rounded-lg border p-3">
                      <div className="font-medium text-muted-foreground text-xs">
                        按用户ID覆盖
                      </div>
                      <div className="flex gap-2">
                        <Input
                          onChange={(e) => setNewOverrideUserId(e.target.value)}
                          placeholder="用户ID"
                          value={newOverrideUserId}
                        />
                        <Select
                          onValueChange={setNewOverridePlanId}
                          value={newOverridePlanId}
                        >
                          <SelectTrigger className="w-[140px]">
                            <SelectValue placeholder="套餐" />
                          </SelectTrigger>
                          <SelectContent>
                            {siteSettings.membershipConfig.plans.map((plan) => (
                              <SelectItem
                                key={`id-plan-${plan.id}`}
                                value={plan.id}
                              >
                                {plan.name || plan.id}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        <Button
                          onClick={() => addMembershipOverride("id")}
                          type="button"
                        >
                          添加
                        </Button>
                      </div>
                      <div className="space-y-1">
                        {Object.entries(
                          siteSettings.membershipUserOverrides.userPlansById ||
                            {}
                        ).map(([key, planId]) => (
                          <div
                            className="flex items-center justify-between rounded-md border px-2 py-1.5 text-xs"
                            key={`id-${key}`}
                          >
                            <span className="truncate pr-2">{key}</span>
                            <div className="flex items-center gap-2">
                              <span className="text-muted-foreground">
                                {planId}
                              </span>
                              <Button
                                className="h-6 w-6"
                                onClick={() =>
                                  removeMembershipOverride("id", key)
                                }
                                size="icon"
                                type="button"
                                variant="ghost"
                              >
                                <Trash2 className="h-3.5 w-3.5" />
                              </Button>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                    <div className="space-y-2 rounded-lg border p-3">
                      <div className="font-medium text-muted-foreground text-xs">
                        按邮箱覆盖
                      </div>
                      <div className="flex gap-2">
                        <Input
                          onChange={(e) => setNewOverrideEmail(e.target.value)}
                          placeholder="用户邮箱"
                          value={newOverrideEmail}
                        />
                        <Select
                          onValueChange={setNewOverridePlanId}
                          value={newOverridePlanId}
                        >
                          <SelectTrigger className="w-[140px]">
                            <SelectValue placeholder="套餐" />
                          </SelectTrigger>
                          <SelectContent>
                            {siteSettings.membershipConfig.plans.map((plan) => (
                              <SelectItem
                                key={`email-plan-${plan.id}`}
                                value={plan.id}
                              >
                                {plan.name || plan.id}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        <Button
                          onClick={() => addMembershipOverride("email")}
                          type="button"
                        >
                          添加
                        </Button>
                      </div>
                      <div className="space-y-1">
                        {Object.entries(
                          siteSettings.membershipUserOverrides
                            .userPlansByEmail || {}
                        ).map(([key, planId]) => (
                          <div
                            className="flex items-center justify-between rounded-md border px-2 py-1.5 text-xs"
                            key={`email-${key}`}
                          >
                            <span className="truncate pr-2">{key}</span>
                            <div className="flex items-center gap-2">
                              <span className="text-muted-foreground">
                                {planId}
                              </span>
                              <Button
                                className="h-6 w-6"
                                onClick={() =>
                                  removeMembershipOverride("email", key)
                                }
                                size="icon"
                                type="button"
                                variant="ghost"
                              >
                                <Trash2 className="h-3.5 w-3.5" />
                              </Button>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="space-y-3 rounded-lg border p-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label className="font-medium text-sm">积分系统配置</Label>
                    <div className="mt-1 text-muted-foreground text-xs">
                      可开启按模型扣积分、配置积分套餐；后续接入支付后可直接用于充值。
                    </div>
                  </div>
                  <Button
                    onClick={() => {
                      setSiteSettings({
                        ...siteSettings,
                        pointsSystemConfig: defaultPointsSystemConfig,
                        pointsPackages: defaultPointsPackages,
                      });
                      toast.success("已恢复积分配置默认模板");
                    }}
                    size="sm"
                    type="button"
                    variant="outline"
                  >
                    恢复默认模板
                  </Button>
                </div>
                <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                  <div className="flex items-center justify-between rounded-lg border p-3">
                    <div className="space-y-0.5">
                      <Label htmlFor="pointsEnabled">启用积分消耗</Label>
                      <div className="text-muted-foreground text-xs">
                        开启后按不同功能配置的单价扣除积分
                      </div>
                    </div>
                    <Switch
                      checked={pointsSystemConfig.enabled === true}
                      id="pointsEnabled"
                      onCheckedChange={(checked) =>
                        setSiteSettings({
                          ...siteSettings,
                          pointsSystemConfig: {
                            ...pointsSystemConfig,
                            enabled: checked,
                          },
                        })
                      }
                    />
                  </div>
                  <div className="flex items-center justify-between rounded-lg border p-3">
                    <div className="space-y-0.5">
                      <Label htmlFor="pointsBlockOnInsufficient">
                        余额不足时阻止生成
                      </Label>
                      <div className="text-muted-foreground text-xs">
                        开启后积分不足直接返回错误，不执行生成任务
                      </div>
                    </div>
                    <Switch
                      checked={pointsSystemConfig.blockOnInsufficient !== false}
                      id="pointsBlockOnInsufficient"
                      onCheckedChange={(checked) =>
                        setSiteSettings({
                          ...siteSettings,
                          pointsSystemConfig: {
                            ...pointsSystemConfig,
                            blockOnInsufficient: checked,
                          },
                        })
                      }
                    />
                  </div>
                </div>
                <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                  <div className="rounded-lg border p-3">
                    <div className="space-y-1">
                      <Label htmlFor="points3dModelCost">
                        3D模型单次积分消耗
                      </Label>
                      <div className="text-muted-foreground text-xs">
                        作用于 3D模型模式（文生3D / 图生3D /
                        多视图3D），每次提交任务扣除一次。
                      </div>
                    </div>
                    <div className="mt-2 w-full max-w-xs">
                      <Input
                        id="points3dModelCost"
                        min={0}
                        onChange={(e) =>
                          setSiteSettings({
                            ...siteSettings,
                            pointsSystemConfig: {
                              ...pointsSystemConfig,
                              creditCostPer3DModel: Math.max(
                                0,
                                Number.parseInt(e.target.value || "0", 10) || 0
                              ),
                            },
                          })
                        }
                        type="number"
                        value={pointsSystemConfig.creditCostPer3DModel}
                      />
                    </div>
                  </div>
                  <div className="rounded-lg border p-3">
                    <div className="space-y-1">
                      <Label htmlFor="points3dWorldCost">
                        3D世界单次积分消耗
                      </Label>
                      <div className="text-muted-foreground text-xs">
                        作用于 3D世界模式（文本 / 图片 / 多图 /
                        视频生成世界），每次提交任务扣除一次。
                      </div>
                    </div>
                    <div className="mt-2 w-full max-w-xs">
                      <Input
                        id="points3dWorldCost"
                        min={0}
                        onChange={(e) =>
                          setSiteSettings({
                            ...siteSettings,
                            pointsSystemConfig: {
                              ...pointsSystemConfig,
                              creditCostPer3DWorld: Math.max(
                                0,
                                Number.parseInt(e.target.value || "0", 10) || 0
                              ),
                            },
                          })
                        }
                        type="number"
                        value={pointsSystemConfig.creditCostPer3DWorld}
                      />
                    </div>
                    <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
                      <div className="space-y-1">
                        <Label
                          className="text-muted-foreground text-xs"
                          htmlFor="points3dWorldMarble11Cost"
                        >
                          Marble 1.1 积分
                        </Label>
                        <Input
                          id="points3dWorldMarble11Cost"
                          min={0}
                          onChange={(e) =>
                            setSiteSettings({
                              ...siteSettings,
                              pointsSystemConfig: {
                                ...pointsSystemConfig,
                                creditCostPer3DWorldMarble11: Math.max(
                                  0,
                                  Number.parseInt(e.target.value || "0", 10) ||
                                    0
                                ),
                              },
                            })
                          }
                          type="number"
                          value={
                            pointsSystemConfig.creditCostPer3DWorldMarble11
                          }
                        />
                      </div>
                      <div className="space-y-1">
                        <Label
                          className="text-muted-foreground text-xs"
                          htmlFor="points3dWorldMarble11PlusCost"
                        >
                          Marble 1.1 Plus 积分
                        </Label>
                        <Input
                          id="points3dWorldMarble11PlusCost"
                          min={0}
                          onChange={(e) =>
                            setSiteSettings({
                              ...siteSettings,
                              pointsSystemConfig: {
                                ...pointsSystemConfig,
                                creditCostPer3DWorldMarble11Plus: Math.max(
                                  0,
                                  Number.parseInt(e.target.value || "0", 10) ||
                                    0
                                ),
                              },
                            })
                          }
                          type="number"
                          value={
                            pointsSystemConfig.creditCostPer3DWorldMarble11Plus
                          }
                        />
                      </div>
                    </div>
                  </div>
                </div>
                <div className="rounded-lg border p-3">
                  <div className="space-y-1">
                    <Label className="font-medium text-sm">
                      3D 生成附加功能积分
                    </Label>
                    <div className="text-muted-foreground text-xs">
                      这些费用会叠加到“3D模型单次积分消耗”上；填写 0
                      表示不额外扣分。
                    </div>
                  </div>
                  <div className="mt-3 grid grid-cols-1 gap-3 md:grid-cols-3">
                    {THREE_D_GENERATION_POINT_FIELDS.map((field) => (
                      <div
                        className="rounded-md border bg-muted/20 p-3"
                        key={field.key}
                      >
                        <Label htmlFor={`points-${field.key}`}>
                          {field.label}
                        </Label>
                        <div className="mt-1 min-h-8 text-muted-foreground text-xs">
                          {field.description}
                        </div>
                        <Input
                          id={`points-${field.key}`}
                          min={0}
                          onChange={(e) =>
                            updatePointsCostField(field.key, e.target.value)
                          }
                          type="number"
                          value={pointsSystemConfig[field.key]}
                        />
                      </div>
                    ))}
                  </div>
                </div>
                <div className="rounded-lg border p-3">
                  <div className="space-y-1">
                    <Label className="font-medium text-sm">
                      3D 编辑与优化积分
                    </Label>
                    <div className="text-muted-foreground text-xs">
                      独立 3D 编辑任务按这里配置的单价扣除；填写 0 表示免费。
                    </div>
                  </div>
                  <div className="mt-3 grid grid-cols-1 gap-3 md:grid-cols-4">
                    {THREE_D_EDIT_POINT_FIELDS.map((field) => (
                      <div
                        className="rounded-md border bg-muted/20 p-3"
                        key={field.key}
                      >
                        <Label htmlFor={`points-${field.key}`}>
                          {field.label}
                        </Label>
                        <div className="mt-1 min-h-8 text-muted-foreground text-xs">
                          {field.description}
                        </div>
                        <Input
                          id={`points-${field.key}`}
                          min={0}
                          onChange={(e) =>
                            updatePointsCostField(field.key, e.target.value)
                          }
                          type="number"
                          value={pointsSystemConfig[field.key]}
                        />
                      </div>
                    ))}
                  </div>
                </div>
                <div className="rounded-lg border p-3">
                  <div className="space-y-1">
                    <Label className="font-medium text-sm">
                      图像小功能积分
                    </Label>
                    <div className="text-muted-foreground text-xs">
                      多视角、抠图、框选抠图、去水印、扩图、重绘按这里单独扣分；填写
                      0 表示免费。
                    </div>
                  </div>
                  <div className="mt-3 grid grid-cols-1 gap-3 md:grid-cols-3">
                    {IMAGE_TOOL_POINT_FIELDS.map((field) => (
                      <div
                        className="rounded-md border bg-muted/20 p-3"
                        key={field.key}
                      >
                        <Label htmlFor={`points-${field.key}`}>
                          {field.label}
                        </Label>
                        <div className="mt-1 min-h-8 text-muted-foreground text-xs">
                          {field.description}
                        </div>
                        <Input
                          id={`points-${field.key}`}
                          min={0}
                          onChange={(e) =>
                            updatePointsCostField(field.key, e.target.value)
                          }
                          type="number"
                          value={pointsSystemConfig[field.key]}
                        />
                      </div>
                    ))}
                  </div>
                </div>
                <div className="space-y-4 rounded-lg border p-4">
                  <div className="flex items-start justify-between gap-4">
                    <div className="space-y-1">
                      <Label className="font-medium text-sm">
                        图像增强 Pro 积分规则
                      </Label>
                      <div className="text-muted-foreground text-xs">
                        按基础积分 × 档位倍率计算；启用放大后可为
                        1x、1.25x、1.5x、2x、3x、4x 分别设置倍率。
                      </div>
                    </div>
                    <div className="flex shrink-0 items-center gap-2">
                      <Button
                        onClick={() => {
                          setSiteSettings({
                            ...siteSettings,
                            pointsSystemConfig: {
                              ...pointsSystemConfig,
                              enhanceProPricing:
                                applyRecommendedEnhanceProPricing(
                                  pointsSystemConfig.enhanceProPricing
                                ),
                            },
                          });
                          toast.success(
                            "已套用图像增强 Pro 推荐价格，可继续手动调整"
                          );
                        }}
                        size="sm"
                        type="button"
                        variant="outline"
                      >
                        套用推荐价格
                      </Button>
                      <Switch
                        checked={
                          pointsSystemConfig.enhanceProPricing.enabled === true
                        }
                        onCheckedChange={(checked) =>
                          setSiteSettings({
                            ...siteSettings,
                            pointsSystemConfig: {
                              ...pointsSystemConfig,
                              enhanceProPricing: {
                                ...pointsSystemConfig.enhanceProPricing,
                                enabled: checked,
                              },
                            },
                          })
                        }
                      />
                    </div>
                  </div>

                  <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                    <div className="rounded-lg border p-3">
                      <div className="space-y-1">
                        <Label>计费模式</Label>
                        <div className="text-muted-foreground text-xs">
                          可按放大倍率、分辨率档位或固定单价计算本地积分；推荐使用“放大倍率”。
                        </div>
                      </div>
                      <div className="mt-2 w-full max-w-xs">
                        <Select
                          onValueChange={(value) =>
                            setSiteSettings({
                              ...siteSettings,
                              pointsSystemConfig: {
                                ...pointsSystemConfig,
                                enhanceProPricing: {
                                  ...pointsSystemConfig.enhanceProPricing,
                                  chargeMode:
                                    value === "fixed"
                                      ? "fixed"
                                      : value === "resolution_bucket"
                                        ? "resolution_bucket"
                                        : "scale_factor",
                                },
                              },
                            })
                          }
                          value={
                            pointsSystemConfig.enhanceProPricing.chargeMode
                          }
                        >
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="scale_factor">
                              放大倍率
                            </SelectItem>
                            <SelectItem value="resolution_bucket">
                              分辨率档位
                            </SelectItem>
                            <SelectItem value="fixed">固定单价</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>

                    <div className="rounded-lg border p-3">
                      <div className="space-y-1">
                        <Label htmlFor="enhanceProFixedCost">
                          固定模式单次基础积分
                        </Label>
                        <div className="text-muted-foreground text-xs">
                          固定单价模式直接使用该值；放大倍率模式会用它作为基础价计算未配置的小数倍数。
                        </div>
                      </div>
                      <div className="mt-2 w-full max-w-xs">
                        <Input
                          id="enhanceProFixedCost"
                          min={0}
                          onChange={(e) =>
                            updateEnhanceProFixedCost(
                              Number.parseInt(e.target.value || "0", 10) || 0
                            )
                          }
                          type="number"
                          value={pointsSystemConfig.enhanceProPricing.fixedCost}
                        />
                      </div>
                    </div>
                  </div>

                  <div className="flex items-center justify-between rounded-lg border p-3">
                    <div className="space-y-0.5">
                      <Label>只在启用放大时扣积分</Label>
                      <div className="text-muted-foreground text-xs">
                        关闭时即使用户不启用放大也按 1x 基础价扣积分。
                      </div>
                    </div>
                    <Switch
                      checked={
                        pointsSystemConfig.enhanceProPricing
                          .chargeOnlyWhenUpscaling !== false
                      }
                      onCheckedChange={(checked) =>
                        setSiteSettings({
                          ...siteSettings,
                          pointsSystemConfig: {
                            ...pointsSystemConfig,
                            enhanceProPricing: {
                              ...pointsSystemConfig.enhanceProPricing,
                              chargeOnlyWhenUpscaling: checked,
                            },
                          },
                        })
                      }
                    />
                  </div>

                  <div className="space-y-3 rounded-lg border p-3">
                    <div className="space-y-1">
                      <Label>放大倍率档位</Label>
                      <div className="text-muted-foreground text-xs">
                        “放大倍率”计费模式下按基础积分 ×
                        档位倍率计算；未配置的小数倍率也会按基础积分 ×
                        倍率自动估算。
                      </div>
                    </div>
                    <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-6">
                      {Object.entries(
                        pointsSystemConfig.enhanceProPricing.scaleFactorCosts
                      )
                        .sort(([left], [right]) => Number(left) - Number(right))
                        .map(([factorKey, cost]) => {
                          const multiplier = getEnhanceProScaleMultiplier(
                            pointsSystemConfig.enhanceProPricing,
                            factorKey,
                            cost
                          );
                          const exactCost =
                            roundCreditCost(
                              pointsSystemConfig.enhanceProPricing.fixedCost
                            ) * multiplier;
                          return (
                            <div className="space-y-1" key={factorKey}>
                              <Label className="text-muted-foreground text-xs">
                                {factorKey}x 倍率
                              </Label>
                              <Input
                                min={0}
                                onChange={(e) =>
                                  updateEnhanceProScaleFactorMultiplier(
                                    factorKey,
                                    Number(e.target.value || factorKey)
                                  )
                                }
                                step={0.05}
                                type="number"
                                value={formatCompactNumber(multiplier)}
                              />
                              <div className="text-[11px] text-muted-foreground">
                                该档积分：{formatCompactNumber(exactCost)}
                                {roundCreditCost(exactCost) !== exactCost
                                  ? `，扣 ${roundCreditCost(exactCost)}`
                                  : ""}
                              </div>
                            </div>
                          );
                        })}
                    </div>
                  </div>

                  <div className="flex items-center justify-between rounded-lg border p-3">
                    <div className="space-y-0.5">
                      <Label>按候选结果数量线性乘倍</Label>
                      <div className="text-muted-foreground text-xs">
                        开启后 batchSize 为 4 时，基础积分会乘以 4。
                      </div>
                    </div>
                    <Switch
                      checked={
                        pointsSystemConfig.enhanceProPricing
                          .batchSizeMultiplierEnabled !== false
                      }
                      onCheckedChange={(checked) =>
                        setSiteSettings({
                          ...siteSettings,
                          pointsSystemConfig: {
                            ...pointsSystemConfig,
                            enhanceProPricing: {
                              ...pointsSystemConfig.enhanceProPricing,
                              batchSizeMultiplierEnabled: checked,
                            },
                          },
                        })
                      }
                    />
                  </div>

                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <Label>分辨率档位</Label>
                      <Button
                        onClick={addEnhanceProPointsBucket}
                        size="sm"
                        type="button"
                        variant="outline"
                      >
                        <Plus className="mr-1.5 h-3.5 w-3.5" />
                        新增档位
                      </Button>
                    </div>
                    <div className="space-y-3">
                      {pointsSystemConfig.enhanceProPricing.resolutionBuckets.map(
                        (bucket, index) => (
                          <div
                            className="rounded-lg border p-3"
                            key={`${bucket.id}-${index}`}
                          >
                            <div className="grid grid-cols-1 gap-3 md:grid-cols-8">
                              <div className="space-y-1 md:col-span-3">
                                <Label className="text-muted-foreground text-xs">
                                  档位名称
                                </Label>
                                <Input
                                  onChange={(e) =>
                                    updateEnhanceProPointsBucket(
                                      index,
                                      (item) => ({
                                        ...item,
                                        name: e.target.value,
                                      })
                                    )
                                  }
                                  placeholder="例如：4MP 以内"
                                  value={bucket.name}
                                />
                              </div>
                              <div className="space-y-1 md:col-span-2">
                                <Label className="text-muted-foreground text-xs">
                                  最大像素面积（MP）
                                </Label>
                                <Input
                                  min={0.1}
                                  onChange={(e) =>
                                    updateEnhanceProPointsBucket(
                                      index,
                                      (item) => ({
                                        ...item,
                                        maxMegapixels: Math.max(
                                          0.1,
                                          Number.parseFloat(
                                            e.target.value || "0.1"
                                          ) || 0.1
                                        ),
                                      })
                                    )
                                  }
                                  step="0.1"
                                  type="number"
                                  value={bucket.maxMegapixels}
                                />
                              </div>
                              <div className="space-y-1 md:col-span-2">
                                <Label className="text-muted-foreground text-xs">
                                  该档积分
                                </Label>
                                <Input
                                  min={0}
                                  onChange={(e) =>
                                    updateEnhanceProPointsBucket(
                                      index,
                                      (item) => ({
                                        ...item,
                                        cost: Math.max(
                                          0,
                                          Number.parseInt(
                                            e.target.value || "0",
                                            10
                                          ) || 0
                                        ),
                                      })
                                    )
                                  }
                                  type="number"
                                  value={bucket.cost}
                                />
                              </div>
                              <div className="flex items-end md:col-span-1">
                                <Button
                                  className="h-10 w-10"
                                  onClick={() =>
                                    removeEnhanceProPointsBucket(index)
                                  }
                                  size="icon"
                                  type="button"
                                  variant="ghost"
                                >
                                  <Trash2 className="h-4 w-4" />
                                </Button>
                              </div>
                            </div>
                          </div>
                        )
                      )}
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label>模型倍率</Label>
                    <div className="grid grid-cols-1 gap-3 md:grid-cols-4">
                      {ENHANCE_PRO_KREA_MODELS.map((modelKey) => (
                        <div className="rounded-lg border p-3" key={modelKey}>
                          <div className="space-y-1">
                            <Label className="text-muted-foreground text-xs">
                              {modelKey}
                            </Label>
                            <Input
                              min={0.1}
                              onChange={(e) =>
                                setSiteSettings({
                                  ...siteSettings,
                                  pointsSystemConfig: {
                                    ...pointsSystemConfig,
                                    enhanceProPricing: {
                                      ...pointsSystemConfig.enhanceProPricing,
                                      modelMultipliers: {
                                        ...pointsSystemConfig.enhanceProPricing
                                          .modelMultipliers,
                                        [modelKey]: Math.max(
                                          0.1,
                                          Number.parseFloat(
                                            e.target.value || "1"
                                          ) || 1
                                        ),
                                      },
                                    },
                                  },
                                })
                              }
                              step="0.05"
                              type="number"
                              value={
                                pointsSystemConfig.enhanceProPricing
                                  .modelMultipliers[modelKey]
                              }
                            />
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>

                  <div className="rounded-lg border border-dashed p-3 text-muted-foreground text-xs">
                    建议算法：按放大倍率或输出分辨率取基础积分，再乘以候选数量和模型倍率，最终向上取整。
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label>积分套餐</Label>
                    <Button
                      onClick={addPointsPackage}
                      size="sm"
                      type="button"
                      variant="outline"
                    >
                      <Plus className="mr-1.5 h-3.5 w-3.5" />
                      新增套餐
                    </Button>
                  </div>
                  <div className="space-y-3">
                    {(siteSettings.pointsPackages || []).map((pkg, index) => (
                      <div
                        className="space-y-3 rounded-lg border p-3"
                        key={`${pkg.id}-${index}`}
                      >
                        <div className="grid grid-cols-1 gap-3 md:grid-cols-6">
                          <div className="space-y-1 md:col-span-2">
                            <Label className="text-muted-foreground text-xs">
                              套餐名称
                            </Label>
                            <Input
                              onChange={(e) =>
                                updatePointsPackage(index, (item) => ({
                                  ...item,
                                  name: e.target.value,
                                }))
                              }
                              placeholder="如：入门包"
                              value={pkg.name}
                            />
                          </div>
                          <div className="space-y-1">
                            <Label className="text-muted-foreground text-xs">
                              积分数量
                            </Label>
                            <Input
                              min={1}
                              onChange={(e) =>
                                updatePointsPackage(index, (item) => ({
                                  ...item,
                                  points: Math.max(
                                    1,
                                    Number.parseInt(e.target.value || "1", 10)
                                  ),
                                }))
                              }
                              type="number"
                              value={pkg.points}
                            />
                          </div>
                          <div className="space-y-1">
                            <Label className="text-muted-foreground text-xs">
                              售价
                            </Label>
                            <Input
                              min={0}
                              onChange={(e) =>
                                updatePointsPackage(index, (item) => ({
                                  ...item,
                                  price: Math.max(
                                    0,
                                    Number.parseFloat(e.target.value || "0")
                                  ),
                                }))
                              }
                              step="0.01"
                              type="number"
                              value={pkg.price}
                            />
                          </div>
                          <div className="space-y-1">
                            <Label className="text-muted-foreground text-xs">
                              货币
                            </Label>
                            <Input
                              onChange={(e) =>
                                updatePointsPackage(index, (item) => ({
                                  ...item,
                                  currency: String(
                                    e.target.value || "CNY"
                                  ).toUpperCase(),
                                }))
                              }
                              placeholder="CNY"
                              value={pkg.currency}
                            />
                          </div>
                          <div className="flex items-end justify-end gap-2">
                            <div className="flex items-center gap-2 rounded-md border px-2 py-1.5">
                              <Switch
                                checked={pkg.isEnabled !== false}
                                onCheckedChange={(checked) =>
                                  updatePointsPackage(index, (item) => ({
                                    ...item,
                                    isEnabled: checked,
                                  }))
                                }
                              />
                              <span className="text-muted-foreground text-xs">
                                启用
                              </span>
                            </div>
                            <Button
                              onClick={() => removePointsPackage(index)}
                              size="icon"
                              title="删除套餐"
                              type="button"
                              variant="outline"
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>
                        <div className="space-y-1">
                          <Label className="text-muted-foreground text-xs">
                            套餐ID（系统内部标识）
                          </Label>
                          <Input
                            onChange={(e) =>
                              updatePointsPackage(index, (item) => ({
                                ...item,
                                id: e.target.value.replace(/\s+/g, "-"),
                              }))
                            }
                            placeholder="starter-1000"
                            value={pkg.id}
                          />
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
              <div className="space-y-3 rounded-lg border p-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label className="font-medium text-sm">
                      DuluPay 支付配置
                    </Label>
                    <div className="mt-1 text-muted-foreground text-xs">
                      用于积分充值支付。支持 V1（MD5）和
                      V2（SHA256WithRSA）两种签名模式。
                    </div>
                  </div>
                  <Button
                    onClick={() =>
                      setSiteSettings({
                        ...siteSettings,
                        dulupayConfig: defaultDulupayConfig,
                      })
                    }
                    size="sm"
                    type="button"
                    variant="outline"
                  >
                    恢复默认
                  </Button>
                </div>
                <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                  <div className="flex items-center justify-between rounded-lg border p-3">
                    <div className="space-y-0.5">
                      <Label htmlFor="dulupayEnabled">启用支付</Label>
                      <div className="text-muted-foreground text-xs">
                        开启后允许前端发起 DuluPay 充值订单
                      </div>
                    </div>
                    <Switch
                      checked={siteSettings.dulupayConfig?.enabled === true}
                      id="dulupayEnabled"
                      onCheckedChange={(checked) =>
                        setSiteSettings({
                          ...siteSettings,
                          dulupayConfig: {
                            ...siteSettings.dulupayConfig,
                            enabled: checked,
                          },
                        })
                      }
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>接口版本</Label>
                    <Select
                      onValueChange={(value: "v1" | "v2") =>
                        setSiteSettings({
                          ...siteSettings,
                          dulupayConfig: {
                            ...siteSettings.dulupayConfig,
                            version: value,
                          },
                        })
                      }
                      value={siteSettings.dulupayConfig?.version || "v1"}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="v1">V1 (MD5)</SelectItem>
                        <SelectItem value="v2">V2 (SHA256WithRSA)</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
                  <div className="space-y-2 md:col-span-3">
                    <Label>基础地址</Label>
                    <Input
                      onChange={(e) =>
                        setSiteSettings({
                          ...siteSettings,
                          dulupayConfig: {
                            ...siteSettings.dulupayConfig,
                            baseUrl: e.target.value,
                          },
                        })
                      }
                      placeholder="https://www.dulupay.com"
                      value={siteSettings.dulupayConfig?.baseUrl || ""}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>异步通知地址</Label>
                    <Input
                      onChange={(e) =>
                        setSiteSettings({
                          ...siteSettings,
                          dulupayConfig: {
                            ...siteSettings.dulupayConfig,
                            notifyUrl: e.target.value,
                          },
                        })
                      }
                      placeholder="https://your-domain.com/api/payment/dulupay/notify"
                      value={siteSettings.dulupayConfig?.notifyUrl || ""}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>同步返回地址</Label>
                    <Input
                      onChange={(e) =>
                        setSiteSettings({
                          ...siteSettings,
                          dulupayConfig: {
                            ...siteSettings.dulupayConfig,
                            returnUrl: e.target.value,
                          },
                        })
                      }
                      placeholder="https://your-domain.com/payment/success"
                      value={siteSettings.dulupayConfig?.returnUrl || ""}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>默认支付类型</Label>
                    <Input
                      onChange={(e) =>
                        setSiteSettings({
                          ...siteSettings,
                          dulupayConfig: {
                            ...siteSettings.dulupayConfig,
                            defaultType: e.target.value,
                          },
                        })
                      }
                      placeholder="alipay / wxpay"
                      value={siteSettings.dulupayConfig?.defaultType || ""}
                    />
                  </div>
                </div>
                {siteSettings.dulupayConfig?.version === "v1" ? (
                  <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                    <div className="space-y-2">
                      <Label>商户 PID</Label>
                      <Input
                        onChange={(e) =>
                          setSiteSettings({
                            ...siteSettings,
                            dulupayConfig: {
                              ...siteSettings.dulupayConfig,
                              pid: e.target.value,
                            },
                          })
                        }
                        placeholder="商户ID (pid)"
                        value={siteSettings.dulupayConfig?.pid || ""}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>商户 Key</Label>
                      <Input
                        onChange={(e) =>
                          setSiteSettings({
                            ...siteSettings,
                            dulupayConfig: {
                              ...siteSettings.dulupayConfig,
                              key: e.target.value,
                            },
                          })
                        }
                        placeholder="V1 签名密钥 key"
                        type="password"
                        value={siteSettings.dulupayConfig?.key || ""}
                      />
                    </div>
                  </div>
                ) : (
                  <div className="space-y-3">
                    <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                      <div className="space-y-2">
                        <Label>商户号 mch_id</Label>
                        <Input
                          onChange={(e) =>
                            setSiteSettings({
                              ...siteSettings,
                              dulupayConfig: {
                                ...siteSettings.dulupayConfig,
                                mchId: e.target.value,
                              },
                            })
                          }
                          placeholder="V2 商户号"
                          value={siteSettings.dulupayConfig?.mchId || ""}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>应用 app_id</Label>
                        <Input
                          onChange={(e) =>
                            setSiteSettings({
                              ...siteSettings,
                              dulupayConfig: {
                                ...siteSettings.dulupayConfig,
                                appId: e.target.value,
                              },
                            })
                          }
                          placeholder="V2 应用ID"
                          value={siteSettings.dulupayConfig?.appId || ""}
                        />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label>商户私钥（RSA）</Label>
                      <Textarea
                        onChange={(e) =>
                          setSiteSettings({
                            ...siteSettings,
                            dulupayConfig: {
                              ...siteSettings.dulupayConfig,
                              merchantPrivateKey: e.target.value,
                            },
                          })
                        }
                        placeholder="-----BEGIN PRIVATE KEY-----"
                        rows={4}
                        value={
                          siteSettings.dulupayConfig?.merchantPrivateKey || ""
                        }
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>平台公钥（RSA）</Label>
                      <Textarea
                        onChange={(e) =>
                          setSiteSettings({
                            ...siteSettings,
                            dulupayConfig: {
                              ...siteSettings.dulupayConfig,
                              platformPublicKey: e.target.value,
                            },
                          })
                        }
                        placeholder="-----BEGIN PUBLIC KEY-----"
                        rows={4}
                        value={
                          siteSettings.dulupayConfig?.platformPublicKey || ""
                        }
                      />
                    </div>
                  </div>
                )}
              </div>
              <div className="flex items-center justify-between space-x-2 rounded-lg border p-4">
                <div className="space-y-0.5">
                  <Label htmlFor="showAutoModel">显示"自动"模型选项</Label>
                  <div className="text-muted-foreground text-sm">
                    开启后，用户可以选择"Agent模式"模型，系统将根据场景智能选择最佳模型
                  </div>
                </div>
                <Switch
                  checked={siteSettings.showAutoModel}
                  id="showAutoModel"
                  onCheckedChange={(checked) =>
                    setSiteSettings({ ...siteSettings, showAutoModel: checked })
                  }
                />
              </div>
              <Separator />
              <div className="space-y-4">
                <div className="flex items-center justify-between space-x-2 rounded-lg border p-4">
                  <div className="space-y-0.5">
                    <Label htmlFor="usageTimeEnabled">启用使用时间限制</Label>
                    <div className="text-muted-foreground text-sm">
                      开启后，仅在指定时间段内允许使用系统，超出时间段输入框将被禁用
                    </div>
                  </div>
                  <Switch
                    checked={siteSettings.usageTimeEnabled}
                    id="usageTimeEnabled"
                    onCheckedChange={(checked) =>
                      setSiteSettings({
                        ...siteSettings,
                        usageTimeEnabled: checked,
                      })
                    }
                  />
                </div>
                {siteSettings.usageTimeEnabled && (
                  <>
                    <div className="grid grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="usageTimeStart">开始时间</Label>
                        <Select
                          onValueChange={(value) =>
                            setSiteSettings({
                              ...siteSettings,
                              usageTimeStart: value,
                            })
                          }
                          value={siteSettings.usageTimeStart}
                        >
                          <SelectTrigger id="usageTimeStart">
                            <SelectValue placeholder="选择开始时间" />
                          </SelectTrigger>
                          <SelectContent className="max-h-[300px] overflow-y-auto">
                            {Array.from({ length: 24 }, (_, i) => {
                              const hour = String(i).padStart(2, "0");
                              return [
                                <SelectItem
                                  key={`${hour}:00`}
                                  value={`${hour}:00`}
                                >
                                  {hour}:00
                                </SelectItem>,
                                <SelectItem
                                  key={`${hour}:30`}
                                  value={`${hour}:30`}
                                >
                                  {hour}:30
                                </SelectItem>,
                              ];
                            }).flat()}
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="usageTimeEnd">结束时间</Label>
                        <Select
                          onValueChange={(value) =>
                            setSiteSettings({
                              ...siteSettings,
                              usageTimeEnd: value,
                            })
                          }
                          value={siteSettings.usageTimeEnd}
                        >
                          <SelectTrigger id="usageTimeEnd">
                            <SelectValue placeholder="选择结束时间" />
                          </SelectTrigger>
                          <SelectContent className="max-h-[300px] overflow-y-auto">
                            {Array.from({ length: 24 }, (_, i) => {
                              const hour = String(i).padStart(2, "0");
                              return [
                                <SelectItem
                                  key={`${hour}:00`}
                                  value={`${hour}:00`}
                                >
                                  {hour}:00
                                </SelectItem>,
                                <SelectItem
                                  key={`${hour}:30`}
                                  value={`${hour}:30`}
                                >
                                  {hour}:30
                                </SelectItem>,
                              ];
                            }).flat()}
                          </SelectContent>
                        </Select>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="usageTimeMessage">超时提示信息</Label>
                      <Textarea
                        id="usageTimeMessage"
                        onChange={(e) =>
                          setSiteSettings({
                            ...siteSettings,
                            usageTimeMessage: e.target.value,
                          })
                        }
                        placeholder="输入超时提示信息"
                        rows={2}
                        value={siteSettings.usageTimeMessage}
                      />
                      <div className="text-muted-foreground text-xs">
                        当前设置：{siteSettings.usageTimeStart} -{" "}
                        {siteSettings.usageTimeEnd}
                      </div>
                    </div>
                  </>
                )}

                {/* 广告横幅设置 */}
                <div className="border-t pt-4">
                  <div className="mb-4 flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label htmlFor="bannerEnabled">广告横幅</Label>
                      <div className="text-muted-foreground text-sm">
                        在首页顶部和无限画布聊天面板中显示广告横幅
                      </div>
                    </div>
                    <Switch
                      checked={siteSettings.bannerEnabled}
                      id="bannerEnabled"
                      onCheckedChange={(checked) =>
                        setSiteSettings({
                          ...siteSettings,
                          bannerEnabled: checked,
                        })
                      }
                    />
                  </div>
                  {siteSettings.bannerEnabled && (
                    <>
                      <div className="space-y-2">
                        <Label htmlFor="bannerText">横幅文字</Label>
                        <Input
                          id="bannerText"
                          onChange={(e) =>
                            setSiteSettings({
                              ...siteSettings,
                              bannerText: e.target.value,
                            })
                          }
                          placeholder="输入横幅显示的文字"
                          value={siteSettings.bannerText}
                        />
                      </div>
                      <div className="mt-3 space-y-2">
                        <Label htmlFor="bannerActionText">按钮文字</Label>
                        <Input
                          id="bannerActionText"
                          maxLength={32}
                          onChange={(e) =>
                            setSiteSettings({
                              ...siteSettings,
                              bannerActionText: e.target.value,
                            })
                          }
                          placeholder="例如：立即升级"
                          value={siteSettings.bannerActionText}
                        />
                      </div>
                      <div className="mt-3 space-y-2">
                        <Label htmlFor="bannerLink">横幅链接（可选）</Label>
                        <Input
                          id="bannerLink"
                          onChange={(e) =>
                            setSiteSettings({
                              ...siteSettings,
                              bannerLink: e.target.value || null,
                            })
                          }
                          placeholder="输入点击横幅后跳转的链接"
                          value={siteSettings.bannerLink || ""}
                        />
                        <div className="text-muted-foreground text-xs">
                          首页按钮和无限画布横幅将打开此链接；不填写时只展示文案
                        </div>
                      </div>
                    </>
                  )}
                </div>

                <div className="border-t pt-4">
                  <div className="mb-4 flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label htmlFor="homeAnimationEnabled">
                        首页对话框下互动动画模块
                      </Label>
                      <div className="text-muted-foreground text-sm">
                        在首页对话框下方展示可交互的 HTML
                        动效模块，支持后续导入新 HTML 进行替换。
                      </div>
                    </div>
                    <Switch
                      checked={homeAnimationConfig.enabled}
                      id="homeAnimationEnabled"
                      onCheckedChange={(checked) =>
                        setHomeAnimationConfig((prev) => ({
                          ...prev,
                          enabled: checked,
                        }))
                      }
                    />
                  </div>

                  <div className="rounded-xl border bg-muted/10 p-4">
                    <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                      <div className="space-y-1">
                        <div className="font-medium text-black text-sm">
                          HTML 动效文件
                        </div>
                        <div className="text-muted-foreground text-xs">
                          支持导入 `.html`
                          文件。未上传自定义文件时，系统会尝试读取项目根目录的
                          `动画效果.html` 作为默认兜底。
                        </div>
                        <div className="text-muted-foreground text-xs">
                          当前文件：
                          {homeAnimationConfig.fileName
                            ? ` ${homeAnimationConfig.fileName}`
                            : " 未上传自定义 HTML"}
                          {homeAnimationConfig.updatedAt
                            ? ` · 上次更新 ${formatBeijingTime(homeAnimationConfig.updatedAt)}`
                            : ""}
                        </div>
                      </div>
                      <div className="flex flex-wrap gap-2">
                        <label className="inline-flex cursor-pointer">
                          <input
                            accept=".html,text/html"
                            className="hidden"
                            onChange={handleImportHomeAnimationFile}
                            type="file"
                          />
                          <Button
                            className="pointer-events-none"
                            type="button"
                            variant="outline"
                          >
                            {homeAnimationConfig.fileName
                              ? "替换 HTML"
                              : "导入 HTML"}
                          </Button>
                        </label>
                        <Button
                          disabled={
                            !homeAnimationConfig.fileName &&
                            !homeAnimationConfig.htmlContent
                          }
                          onClick={() =>
                            setHomeAnimationConfig((prev) => ({
                              ...prev,
                              fileName: "",
                              htmlContent: "",
                              updatedAt: null,
                            }))
                          }
                          type="button"
                          variant="outline"
                        >
                          清空自定义 HTML
                        </Button>
                      </div>
                    </div>

                    {homeAnimationConfig.htmlContent ? (
                      <div className="mt-4">
                        <HomeAnimationEmbed
                          className="shadow-none"
                          description="导入后点击页面底部的保存设置即可正式生效。"
                          frameClassName="h-[240px] md:h-[300px]"
                          htmlContent={homeAnimationConfig.htmlContent}
                          title="当前导入动效预览"
                        />
                      </div>
                    ) : (
                      <div className="mt-4 rounded-xl border border-black/10 border-dashed bg-white/60 px-4 py-5 text-muted-foreground text-sm">
                        当前未上传自定义
                        HTML。启用后会优先使用数据库中的自定义动效；如果为空，则尝试读取项目根目录的
                        `动画效果.html`。
                      </div>
                    )}
                  </div>
                </div>

                {/* 无限画布设置 */}
                <div className="border-t pt-4">
                  <div className="mb-4 flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label htmlFor="canvasEnabled">无限画布功能</Label>
                      <div className="text-muted-foreground text-sm">
                        开启后，用户可以使用无限画布进行图片编辑和生成
                      </div>
                    </div>
                    <Switch
                      checked={siteSettings.canvasEnabled}
                      id="canvasEnabled"
                      onCheckedChange={(checked) =>
                        setSiteSettings({
                          ...siteSettings,
                          canvasEnabled: checked,
                        })
                      }
                    />
                  </div>
                  {siteSettings.canvasEnabled && (
                    <>
                      <div className="flex items-center justify-between rounded-lg border p-3">
                        <div className="space-y-0.5">
                          <Label htmlFor="agentEnabled">风格化功能</Label>
                          <div className="text-muted-foreground text-xs">
                            开启后，首页侧边栏显示“风格化”入口，用户可进入独立的风格化工作台；关闭后隐藏该入口。
                          </div>
                        </div>
                        <Switch
                          checked={siteSettings.agentEnabled}
                          id="agentEnabled"
                          onCheckedChange={(checked) =>
                            setSiteSettings({
                              ...siteSettings,
                              agentEnabled: checked,
                            })
                          }
                        />
                      </div>

                      <div className="flex items-center justify-between rounded-lg border p-3">
                        <div className="space-y-0.5">
                          <Label htmlFor="canvasAgentModeEnabled">
                            无限画布 Agent模式
                          </Label>
                          <div className="text-muted-foreground text-xs">
                            控制无限画布右侧对话框中的 Agent模式
                            入口，与上面的风格化工作台入口独立。
                          </div>
                        </div>
                        <Switch
                          checked={siteSettings.canvasAgentModeEnabled}
                          id="canvasAgentModeEnabled"
                          onCheckedChange={(checked) =>
                            setSiteSettings({
                              ...siteSettings,
                              canvasAgentModeEnabled: checked,
                            })
                          }
                        />
                      </div>

                      <div className="space-y-4 rounded-lg border p-4">
                        <div className="space-y-1">
                          <Label>Canvas Agent 操作协议灰度</Label>
                          <div className="text-muted-foreground text-xs">
                            控制对话框 Agent 是否通过受控协议写回画布，以及
                            slot、视角和标注编辑能力的开放范围。
                          </div>
                        </div>
                        <div className="grid gap-3 md:grid-cols-2">
                          <div className="flex items-center justify-between gap-4 rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <Label htmlFor="canvasAgentOperationProtocolEnabled">
                                操作协议
                              </Label>
                              <div className="text-muted-foreground text-xs">
                                关闭后不执行 CanvasOperationPlan，也不输出 shadow
                                操作。
                              </div>
                            </div>
                            <Switch
                              checked={
                                siteSettings.canvasAgentFeatureSettings
                                  .operationProtocolEnabled
                              }
                              id="canvasAgentOperationProtocolEnabled"
                              onCheckedChange={(checked) =>
                                setSiteSettings({
                                  ...siteSettings,
                                  canvasAgentFeatureSettings: {
                                    ...siteSettings.canvasAgentFeatureSettings,
                                    operationProtocolEnabled: checked,
                                  },
                                })
                              }
                            />
                          </div>

                          <div className="space-y-2 rounded-lg border p-3">
                            <Label htmlFor="canvasAgentWritebackMode">
                              写回模式
                            </Label>
                            <Select
                              onValueChange={(value) =>
                                setSiteSettings({
                                  ...siteSettings,
                                  canvasAgentFeatureSettings: {
                                    ...siteSettings.canvasAgentFeatureSettings,
                                    writebackMode:
                                      value as CanvasAgentFeatureSettings["writebackMode"],
                                  },
                                })
                              }
                              value={
                                siteSettings.canvasAgentFeatureSettings.writebackMode
                              }
                            >
                              <SelectTrigger id="canvasAgentWritebackMode">
                                <SelectValue placeholder="选择写回模式" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="legacy_canvas_media">
                                  旧 canvasMedia
                                </SelectItem>
                                <SelectItem value="operation_shadow">
                                  Shadow 记录
                                </SelectItem>
                                <SelectItem value="operation_authoritative">
                                  Operation 权威写回
                                </SelectItem>
                              </SelectContent>
                            </Select>
                            <div className="text-muted-foreground text-xs">
                              Shadow 只记录操作计划；权威写回会直接调用 mutation
                              API 更新画布。
                            </div>
                          </div>

                          <div className="flex items-center justify-between gap-4 rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <Label htmlFor="canvasAgentSlotEnabled">
                                Agent Slot
                              </Label>
                              <div className="text-muted-foreground text-xs">
                                允许 Agent 创建或填充画布生成槽位。
                              </div>
                            </div>
                            <Switch
                              checked={
                                siteSettings.canvasAgentFeatureSettings.slotEnabled
                              }
                              id="canvasAgentSlotEnabled"
                              onCheckedChange={(checked) =>
                                setSiteSettings({
                                  ...siteSettings,
                                  canvasAgentFeatureSettings: {
                                    ...siteSettings.canvasAgentFeatureSettings,
                                    slotEnabled: checked,
                                  },
                                })
                              }
                            />
                          </div>

                          <div className="flex items-center justify-between gap-4 rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <Label htmlFor="canvasAgentViewOperationEnabled">
                                视角控制
                              </Label>
                              <div className="text-muted-foreground text-xs">
                                允许 Agent 临时缩放、平移并聚焦当前编辑对象。
                              </div>
                            </div>
                            <Switch
                              checked={
                                siteSettings.canvasAgentFeatureSettings
                                  .viewOperationEnabled
                              }
                              id="canvasAgentViewOperationEnabled"
                              onCheckedChange={(checked) =>
                                setSiteSettings({
                                  ...siteSettings,
                                  canvasAgentFeatureSettings: {
                                    ...siteSettings.canvasAgentFeatureSettings,
                                    viewOperationEnabled: checked,
                                  },
                                })
                              }
                            />
                          </div>

                          <div className="flex items-center justify-between gap-4 rounded-lg border p-3 md:col-span-2">
                            <div className="space-y-0.5">
                              <Label htmlFor="canvasAgentAnnotationEditEnabled">
                                标注编辑
                              </Label>
                              <div className="text-muted-foreground text-xs">
                                允许 Agent 读取画布批注、备注和框选区域并生成编辑任务。
                              </div>
                            </div>
                            <Switch
                              checked={
                                siteSettings.canvasAgentFeatureSettings
                                  .annotationEditEnabled
                              }
                              id="canvasAgentAnnotationEditEnabled"
                              onCheckedChange={(checked) =>
                                setSiteSettings({
                                  ...siteSettings,
                                  canvasAgentFeatureSettings: {
                                    ...siteSettings.canvasAgentFeatureSettings,
                                    annotationEditEnabled: checked,
                                  },
                                })
                              }
                            />
                          </div>
                        </div>
                      </div>

                      <div className="space-y-4 rounded-lg border p-4">
                        <div className="flex items-center justify-between gap-4">
                          <div className="space-y-0.5">
                            <Label htmlFor="openClawChatEnabled">
                              无限画布 Claw
                            </Label>
                            <div className="text-muted-foreground text-xs">
                              开启并配置接口后，右侧对话框模式菜单显示
                              Claw；Token 仅保存在服务端，不会下发到前端。
                            </div>
                          </div>
                          <Switch
                            checked={openClawChatConfig.enabled}
                            id="openClawChatEnabled"
                            onCheckedChange={(checked) =>
                              setOpenClawChatConfig((prev) => ({
                                ...prev,
                                enabled: checked,
                              }))
                            }
                          />
                        </div>
                        <div className="grid gap-3 md:grid-cols-2">
                          <div className="space-y-2">
                            <Label htmlFor="openClawChatBaseUrl">
                              接口 Base URL
                            </Label>
                            <Input
                              id="openClawChatBaseUrl"
                              onChange={(event) =>
                                setOpenClawChatConfig((prev) => ({
                                  ...prev,
                                  baseUrl: event.target.value,
                                }))
                              }
                              placeholder={DEFAULT_OPENCLAW_CHAT_BASE_URL}
                              value={openClawChatConfig.baseUrl}
                            />
                          </div>
                          <div className="space-y-2">
                            <Label htmlFor="openClawChatTimeoutMs">
                              请求超时（毫秒）
                            </Label>
                            <Input
                              id="openClawChatTimeoutMs"
                              min={5000}
                              max={600000}
                              onChange={(event) =>
                                setOpenClawChatConfig((prev) => ({
                                  ...prev,
                                  timeoutMs: Number(event.target.value) || 600000,
                                }))
                              }
                              type="number"
                              value={openClawChatConfig.timeoutMs}
                            />
                          </div>
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="openClawChatToken">
                            服务端 Bearer Token
                          </Label>
                          <Input
                            id="openClawChatToken"
                            onChange={(event) =>
                              setOpenClawChatConfig((prev) => ({
                                ...prev,
                                token: event.target.value,
                              }))
                            }
                            placeholder={
                              openClawChatTokenConfigured
                                ? "已配置，留空则保持不变"
                                : "只保存在服务端，禁止下发到浏览器"
                            }
                            type="password"
                            value={openClawChatConfig.token}
                          />
                        </div>
                        <div className="flex justify-end">
                          <Button
                            onClick={handleSaveOpenClawChatConfig}
                            type="button"
                            variant="outline"
                          >
                            保存大龙虾聊天接口
                          </Button>
                        </div>
                      </div>

                      {siteSettings.agentEnabled && (
                        <div className="space-y-4 rounded-lg border p-4">
                          <div>
                            <div className="font-medium">风格化工作流配置</div>
                            <div className="mt-1 text-muted-foreground text-xs">
                              风格化页面的功能按钮名称、Prompt
                              片段和预览图已迁移到独立子页面，避免网站设置页过于臃肿。原先重复的分类和二级类型配置已不再在这里维护。
                            </div>
                          </div>
                          <div className="rounded-xl border bg-muted/20 p-4">
                            <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                              <div className="space-y-1">
                                <div className="font-medium text-sm">
                                  独立维护风格化功能卡片
                                </div>
                                <div className="text-muted-foreground text-xs">
                                  建议在独立页面中维护每个环节的按钮名称、预览图上传、说明文案和
                                  Prompt 片段。
                                </div>
                              </div>
                              <div className="flex flex-wrap gap-2">
                                <Button asChild>
                                  <Link href="/settings/agent-workflow">
                                    前往风格化工作流配置
                                  </Link>
                                </Button>
                                <Button asChild variant="outline">
                                  <Link href="/settings/agent-workflow/psd-templates">
                                    管理PSD模板
                                  </Link>
                                </Button>
                                <Button asChild variant="outline">
                                  <Link href="/settings/style-pro">
                                    风格化PRO设置
                                  </Link>
                                </Button>
                              </div>
                            </div>
                          </div>
                        </div>
                      )}

                      <div className="flex items-center justify-between rounded-lg border p-3">
                        <div className="space-y-0.5">
                          <Label htmlFor="realtimeCanvasEnabled">
                            实时画布功能
                          </Label>
                          <div className="text-muted-foreground text-xs">
                            开启后，无限画布左侧工具栏显示“实时画布”按钮；关闭后前端隐藏。
                          </div>
                        </div>
                        <Switch
                          checked={siteSettings.realtimeCanvasEnabled}
                          id="realtimeCanvasEnabled"
                          onCheckedChange={(checked) =>
                            setSiteSettings({
                              ...siteSettings,
                              realtimeCanvasEnabled: checked,
                            })
                          }
                        />
                      </div>

                      {siteSettings.realtimeCanvasEnabled && (
                        <div className="space-y-4 rounded-lg border p-4">
                          <div className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
                            <div className="space-y-1">
                              <div className="font-medium text-sm">
                                实时画布模式名称与图标
                              </div>
                              <div className="text-muted-foreground text-xs">
                                名称会同步到前端模式切换按钮；上传 SVG
                                后会替换前端按钮图标，并按选中状态自动切换黑白色。
                              </div>
                            </div>
                          </div>
                          <div className="grid gap-3 md:grid-cols-2">
                            {(
                              [
                                {
                                  field: "realtimeIconUrl",
                                  labelField: "realtimeLabel",
                                  title: "实时画布模式",
                                  description: "左侧模式切换按钮的画笔图标",
                                  uploadId: "realtime-mode-icon-upload",
                                  fallback: Paintbrush,
                                },
                                {
                                  field: "enhanceIconUrl",
                                  labelField: "enhanceLabel",
                                  title: "图像增强模式",
                                  description: "右侧模式切换按钮的魔法棒图标",
                                  uploadId: "enhance-mode-icon-upload",
                                  fallback: Wand2,
                                },
                              ] as const
                            ).map((item) => {
                              const iconUrl =
                                siteSettings.realtimeCanvasModeIconConfig[
                                  item.field
                                ];
                              const labelValue =
                                siteSettings.realtimeCanvasModeIconConfig[
                                  item.labelField
                                ];
                              const displayName = labelValue || item.title;
                              const FallbackIcon = item.fallback;
                              const isUploading =
                                realtimeModeIconUploading === item.field;

                              return (
                                <div
                                  className="space-y-3 rounded-xl border bg-muted/10 p-3"
                                  key={item.field}
                                >
                                  <div className="flex items-start justify-between gap-3">
                                    <div className="space-y-1">
                                      <div className="font-medium text-sm">
                                        {displayName}
                                      </div>
                                      <div className="text-muted-foreground text-xs">
                                        {item.description}
                                      </div>
                                    </div>
                                    <div className="flex items-center gap-1">
                                      <Button
                                        className="h-8"
                                        disabled={isUploading}
                                        onClick={() =>
                                          document
                                            .getElementById(item.uploadId)
                                            ?.click()
                                        }
                                        size="sm"
                                        type="button"
                                        variant="outline"
                                      >
                                        {isUploading ? (
                                          <>
                                            <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
                                            上传中
                                          </>
                                        ) : (
                                          "上传 SVG"
                                        )}
                                      </Button>
                                      {iconUrl ? (
                                        <Button
                                          className="h-8 px-2 text-muted-foreground"
                                          onClick={() =>
                                            setSiteSettings((prev) => ({
                                              ...prev,
                                              realtimeCanvasModeIconConfig: {
                                                ...prev.realtimeCanvasModeIconConfig,
                                                [item.field]: "",
                                              },
                                            }))
                                          }
                                          size="sm"
                                          type="button"
                                          variant="ghost"
                                        >
                                          清除
                                        </Button>
                                      ) : null}
                                    </div>
                                    <input
                                      accept=".svg,image/svg+xml"
                                      className="hidden"
                                      id={item.uploadId}
                                      onChange={async (event) => {
                                        const file = event.target.files?.[0];
                                        if (file) {
                                          await handleRealtimeModeIconUpload(
                                            item.field,
                                            file
                                          );
                                        }
                                        event.target.value = "";
                                      }}
                                      type="file"
                                    />
                                  </div>
                                  <div className="space-y-1.5">
                                    <Label
                                      className="text-muted-foreground text-xs"
                                      htmlFor={`${item.uploadId}-label`}
                                    >
                                      前端显示名称
                                    </Label>
                                    <Input
                                      id={`${item.uploadId}-label`}
                                      maxLength={32}
                                      onChange={(event) =>
                                        setSiteSettings((prev) => ({
                                          ...prev,
                                          realtimeCanvasModeIconConfig: {
                                            ...prev.realtimeCanvasModeIconConfig,
                                            [item.labelField]:
                                              event.target.value.slice(0, 32),
                                          },
                                        }))
                                      }
                                      placeholder={item.title}
                                      value={labelValue}
                                    />
                                  </div>
                                  <div className="flex flex-wrap items-center gap-2">
                                    <div className="inline-flex h-10 items-center gap-2 rounded-[18px] bg-[#111111] px-3 font-medium text-white text-xs">
                                      {iconUrl ? (
                                        <img
                                          alt={`${displayName}选中预览`}
                                          className="h-4 w-4 object-contain brightness-0 invert"
                                          src={iconUrl}
                                        />
                                      ) : (
                                        <FallbackIcon className="h-4 w-4 text-white" />
                                      )}
                                      选中态
                                    </div>
                                    <div className="inline-flex h-10 items-center gap-2 rounded-[18px] border bg-white px-3 font-medium text-[#666666] text-xs">
                                      {iconUrl ? (
                                        <img
                                          alt={`${displayName}未选中预览`}
                                          className="h-4 w-4 object-contain opacity-70 brightness-0"
                                          src={iconUrl}
                                        />
                                      ) : (
                                        <FallbackIcon className="h-4 w-4 text-[#666666]" />
                                      )}
                                      未选中态
                                    </div>
                                  </div>
                                </div>
                              );
                            })}
                          </div>
                        </div>
                      )}

                      <div className="space-y-4 rounded-lg border p-4">
                        <div className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
                          <div className="space-y-1">
                            <div className="font-medium text-sm">
                              首页侧边栏名称、SVG 图标与显隐
                            </div>
                            <div className="text-muted-foreground text-xs">
                              管理 LovartHome 首页左侧悬浮侧边栏的按钮名称、SVG
                              图标和显示状态。上传 SVG
                              后，前端会根据明暗模式自动切换黑白色。
                            </div>
                          </div>
                          <Button
                            onClick={() =>
                              setSiteSettings((prev) => ({
                                ...prev,
                                lovartHomeSidebarConfig:
                                  defaultLovartHomeSidebarConfig,
                              }))
                            }
                            size="sm"
                            type="button"
                            variant="outline"
                          >
                            恢复全部默认
                          </Button>
                        </div>
                        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
                          {DEFAULT_LOVART_HOME_SIDEBAR_ITEMS.map((item) => {
                            const normalizedSidebarConfig =
                              normalizeLovartHomeSidebarConfig(
                                siteSettings.lovartHomeSidebarConfig
                              );
                            const itemConfig =
                              normalizedSidebarConfig.items[item.key];
                            const defaultItem = getDefaultLovartHomeSidebarItem(
                              item.key
                            );
                            const FallbackIcon =
                              LOVART_HOME_SIDEBAR_FALLBACK_ICONS[item.key];
                            const uploadId = `lovart-home-sidebar-icon-${item.key}`;
                            const isUploading =
                              lovartHomeSidebarIconUploading === item.key;
                            const isNewProject = item.key === "newProject";

                            return (
                              <div
                                className="space-y-3 rounded-xl border bg-muted/10 p-3"
                                key={item.key}
                              >
                                <div className="flex items-start justify-between gap-3">
                                  <div className="flex min-w-0 items-start gap-2">
                                    <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border bg-background">
                                      {itemConfig.iconUrl ? (
                                        <img
                                          alt={`${itemConfig.label}图标预览`}
                                          className="h-4 w-4 object-contain opacity-75 brightness-0 dark:invert"
                                          src={itemConfig.iconUrl}
                                        />
                                      ) : (
                                        <FallbackIcon className="h-4 w-4 text-muted-foreground" />
                                      )}
                                    </div>
                                    <div className="min-w-0 space-y-0.5">
                                      <div className="truncate font-medium text-sm">
                                        {itemConfig.label}
                                      </div>
                                      <div className="line-clamp-2 text-muted-foreground text-xs">
                                        {item.description}
                                      </div>
                                    </div>
                                  </div>
                                  <Button
                                    className="h-8 px-2 text-muted-foreground"
                                    onClick={() =>
                                      updateLovartHomeSidebarItem(item.key, {
                                        label: defaultItem.label,
                                        iconUrl: "",
                                        enabled: defaultItem.enabled,
                                      })
                                    }
                                    size="sm"
                                    type="button"
                                    variant="ghost"
                                  >
                                    默认
                                  </Button>
                                </div>
                                <div className="flex items-center justify-between rounded-lg border bg-background/60 px-3 py-2">
                                  <div className="space-y-0.5">
                                    <div className="font-medium text-xs">
                                      显示该按钮
                                    </div>
                                    <div className="text-[11px] text-muted-foreground">
                                      关闭后首页侧边栏隐藏此功能入口
                                    </div>
                                  </div>
                                  <Switch
                                    checked={itemConfig.enabled}
                                    onCheckedChange={(checked) =>
                                      updateLovartHomeSidebarItem(item.key, {
                                        enabled: checked,
                                      })
                                    }
                                  />
                                </div>
                                <div className="space-y-1.5">
                                  <Label
                                    className="text-muted-foreground text-xs"
                                    htmlFor={`${uploadId}-label`}
                                  >
                                    功能显示名称
                                  </Label>
                                  <Input
                                    id={`${uploadId}-label`}
                                    maxLength={32}
                                    onChange={(event) =>
                                      updateLovartHomeSidebarItem(item.key, {
                                        label: event.target.value.slice(0, 32),
                                      })
                                    }
                                    placeholder={defaultItem.label}
                                    value={itemConfig.label}
                                  />
                                </div>
                                <div className="flex flex-wrap items-center gap-2">
                                  <Input
                                    className="min-w-[180px] flex-1"
                                    onChange={(event) =>
                                      updateLovartHomeSidebarItem(item.key, {
                                        iconUrl: event.target.value,
                                      })
                                    }
                                    placeholder="SVG 图标 URL（可选）"
                                    value={itemConfig.iconUrl}
                                  />
                                  <Button
                                    className="h-9"
                                    disabled={isUploading}
                                    onClick={() =>
                                      document.getElementById(uploadId)?.click()
                                    }
                                    size="sm"
                                    type="button"
                                    variant="outline"
                                  >
                                    {isUploading ? (
                                      <>
                                        <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
                                        上传中
                                      </>
                                    ) : (
                                      "上传 SVG"
                                    )}
                                  </Button>
                                  {itemConfig.iconUrl ? (
                                    <Button
                                      className="h-9 px-2 text-muted-foreground"
                                      onClick={() =>
                                        updateLovartHomeSidebarItem(item.key, {
                                          iconUrl: "",
                                        })
                                      }
                                      size="sm"
                                      type="button"
                                      variant="ghost"
                                    >
                                      清除
                                    </Button>
                                  ) : null}
                                  <input
                                    accept=".svg,image/svg+xml"
                                    className="hidden"
                                    id={uploadId}
                                    onChange={async (event) => {
                                      const file = event.target.files?.[0];
                                      if (file) {
                                        await handleLovartHomeSidebarIconUpload(
                                          item.key,
                                          file
                                        );
                                      }
                                      event.currentTarget.value = "";
                                    }}
                                    type="file"
                                  />
                                </div>
                                <div className="flex flex-wrap items-center gap-2">
                                  {isNewProject ? (
                                    <>
                                      <div className="inline-flex h-12 w-12 items-center justify-center rounded-full border border-black/10 bg-white">
                                        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-black text-white">
                                          {itemConfig.iconUrl ? (
                                            <img
                                              alt={`${itemConfig.label}浅色预览`}
                                              className="h-4 w-4 object-contain brightness-0 invert"
                                              src={itemConfig.iconUrl}
                                            />
                                          ) : (
                                            <FallbackIcon className="h-4 w-4 text-white" />
                                          )}
                                        </div>
                                      </div>
                                      <div className="inline-flex h-12 w-12 items-center justify-center rounded-full border border-white/10 bg-[#141416]">
                                        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-white text-black">
                                          {itemConfig.iconUrl ? (
                                            <img
                                              alt={`${itemConfig.label}暗色预览`}
                                              className="h-4 w-4 object-contain brightness-0"
                                              src={itemConfig.iconUrl}
                                            />
                                          ) : (
                                            <FallbackIcon className="h-4 w-4 text-black" />
                                          )}
                                        </div>
                                      </div>
                                    </>
                                  ) : (
                                    <>
                                      <div className="inline-flex h-10 w-10 items-center justify-center rounded-full border bg-white text-[#111827]">
                                        {itemConfig.iconUrl ? (
                                          <img
                                            alt={`${itemConfig.label}浅色预览`}
                                            className="h-[18px] w-[18px] object-contain opacity-80 brightness-0"
                                            src={itemConfig.iconUrl}
                                          />
                                        ) : (
                                          <FallbackIcon className="h-[18px] w-[18px] text-[#111827]" />
                                        )}
                                      </div>
                                      <div className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white">
                                        {itemConfig.iconUrl ? (
                                          <img
                                            alt={`${itemConfig.label}暗色预览`}
                                            className="h-[18px] w-[18px] object-contain opacity-85 brightness-0 invert"
                                            src={itemConfig.iconUrl}
                                          />
                                        ) : (
                                          <FallbackIcon className="h-[18px] w-[18px] text-white" />
                                        )}
                                      </div>
                                    </>
                                  )}
                                </div>
                              </div>
                            );
                          })}
                        </div>
                      </div>

                      <div className="space-y-4 rounded-lg border p-3">
                        <div className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
                          <div className="space-y-1">
                            <div className="font-medium text-sm">
                              无限画布工具栏名称与 SVG 图标
                            </div>
                            <div className="text-muted-foreground text-xs">
                              统一管理画布底部主工具栏、画布快捷工具条、节点工具栏、实时画布工具栏、对话框底部工具栏的前端显示名称和按钮图标。上传
                              SVG 后会按按钮状态自动切换黑白色。
                            </div>
                          </div>
                          <Button
                            onClick={() =>
                              setSiteSettings((prev) => ({
                                ...prev,
                                canvasToolbarConfig: defaultCanvasToolbarConfig,
                              }))
                            }
                            size="sm"
                            type="button"
                            variant="outline"
                          >
                            恢复全部默认
                          </Button>
                        </div>
                        <div className="flex flex-col gap-3 rounded-lg border bg-background/60 p-3 md:flex-row md:items-center md:justify-between">
                          <div className="space-y-1">
                            <Label
                              className="font-medium text-sm"
                              htmlFor="selectedImageInlineActionCount"
                            >
                              选中图片一级按钮数量
                            </Label>
                            <div className="text-muted-foreground text-xs">
                              控制画布中选中图片后，快捷弹窗主条直接显示几个功能按钮；超出的功能自动收进“更多”菜单。
                            </div>
                          </div>
                          <Input
                            className="w-28"
                            id="selectedImageInlineActionCount"
                            max={MAX_SELECTED_IMAGE_INLINE_ACTION_COUNT}
                            min={MIN_SELECTED_IMAGE_INLINE_ACTION_COUNT}
                            onChange={(event) => {
                              const normalized =
                                normalizeCanvasToolbarConfig(
                                  siteSettings.canvasToolbarConfig
                                );
                              const parsed = Number(event.target.value);
                              const nextValue = Number.isFinite(parsed)
                                ? Math.min(
                                    MAX_SELECTED_IMAGE_INLINE_ACTION_COUNT,
                                    Math.max(
                                      MIN_SELECTED_IMAGE_INLINE_ACTION_COUNT,
                                      Math.round(parsed)
                                    )
                                  )
                                : normalized.selectedImageInlineActionCount;
                              setSiteSettings({
                                ...siteSettings,
                                canvasToolbarConfig: {
                                  ...normalized,
                                  selectedImageInlineActionCount: nextValue,
                                },
                              });
                            }}
                            type="number"
                            value={
                              normalizeCanvasToolbarConfig(
                                siteSettings.canvasToolbarConfig
                              ).selectedImageInlineActionCount
                            }
                          />
                        </div>
                        {Array.from(
                          new Set(
                            DEFAULT_CANVAS_TOOLBAR_ITEMS.map(
                              (item) => item.group
                            )
                          )
                        ).map((group) => {
                          const normalizedToolbarConfig =
                            normalizeCanvasToolbarConfig(
                              siteSettings.canvasToolbarConfig
                            );
                          const groupItems =
                            DEFAULT_CANVAS_TOOLBAR_ITEMS.filter(
                              (item) => item.group === group
                            );

                          return (
                            <div className="space-y-2" key={group}>
                              <div className="font-semibold text-muted-foreground text-xs">
                                {group}
                              </div>
                              <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
                                {groupItems.map((item) => {
                                  const itemConfig =
                                    normalizedToolbarConfig.items[item.key];
                                  const defaultItem =
                                    getDefaultCanvasToolbarItem(item.key);
                                  const FallbackIcon =
                                    CANVAS_TOOLBAR_FALLBACK_ICONS[item.key];
                                  const uploadId = `canvas-toolbar-icon-${item.key}`;
                                  const isUploading =
                                    canvasToolbarIconUploading === item.key;

                                  return (
                                    <div
                                      className="space-y-3 rounded-xl border bg-muted/10 p-3"
                                      key={item.key}
                                    >
                                      <div className="flex items-start justify-between gap-3">
                                        <div className="flex min-w-0 items-start gap-2">
                                          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border bg-background">
                                            {itemConfig.iconUrl ? (
                                              <img
                                                alt={`${itemConfig.label}图标预览`}
                                                className="h-4 w-4 object-contain opacity-75 brightness-0 dark:invert"
                                                src={itemConfig.iconUrl}
                                              />
                                            ) : (
                                              <FallbackIcon className="h-4 w-4 text-muted-foreground" />
                                            )}
                                          </div>
                                          <div className="min-w-0 space-y-0.5">
                                            <div className="truncate font-medium text-sm">
                                              {itemConfig.label}
                                            </div>
                                            <div className="line-clamp-2 text-muted-foreground text-xs">
                                              {item.description}
                                            </div>
                                          </div>
                                        </div>
                                        <Button
                                          className="h-8 px-2 text-muted-foreground"
                                          onClick={() =>
                                            updateCanvasToolbarItem(item.key, {
                                              label: defaultItem.label,
                                              iconUrl: "",
                                              enabled: true,
                                            })
                                          }
                                          size="sm"
                                          type="button"
                                          variant="ghost"
                                        >
                                          默认
                                        </Button>
                                      </div>
                                      <div className="flex items-center justify-between rounded-lg border bg-background/70 px-3 py-2">
                                        <div className="space-y-0.5">
                                          <div className="font-medium text-xs">
                                            启用此功能
                                          </div>
                                          <div className="text-[11px] text-muted-foreground">
                                            关闭后前端不再显示这个工具按钮
                                          </div>
                                        </div>
                                        <Switch
                                          checked={itemConfig.enabled !== false}
                                          onCheckedChange={(checked) =>
                                            updateCanvasToolbarItem(item.key, {
                                              enabled: checked,
                                            })
                                          }
                                        />
                                      </div>
                                      <div className="space-y-1.5">
                                        <Label
                                          className="text-muted-foreground text-xs"
                                          htmlFor={`${uploadId}-label`}
                                        >
                                          功能显示名称
                                        </Label>
                                        <Input
                                          id={`${uploadId}-label`}
                                          maxLength={40}
                                          onChange={(event) =>
                                            updateCanvasToolbarItem(item.key, {
                                              label: event.target.value.slice(
                                                0,
                                                40
                                              ),
                                            })
                                          }
                                          placeholder={defaultItem.label}
                                          value={itemConfig.label}
                                        />
                                      </div>
                                      <div className="flex flex-wrap items-center gap-2">
                                        <Input
                                          className="min-w-[180px] flex-1"
                                          onChange={(event) =>
                                            updateCanvasToolbarItem(item.key, {
                                              iconUrl: event.target.value,
                                            })
                                          }
                                          placeholder="SVG 图标 URL（可选）"
                                          value={itemConfig.iconUrl}
                                        />
                                        <Button
                                          className="h-9"
                                          disabled={isUploading}
                                          onClick={() =>
                                            document
                                              .getElementById(uploadId)
                                              ?.click()
                                          }
                                          size="sm"
                                          type="button"
                                          variant="outline"
                                        >
                                          {isUploading ? (
                                            <>
                                              <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
                                              上传中
                                            </>
                                          ) : (
                                            "上传 SVG"
                                          )}
                                        </Button>
                                        {itemConfig.iconUrl ? (
                                          <Button
                                            className="h-9 px-2 text-muted-foreground"
                                            onClick={() =>
                                              updateCanvasToolbarItem(
                                                item.key,
                                                {
                                                  iconUrl: "",
                                                }
                                              )
                                            }
                                            size="sm"
                                            type="button"
                                            variant="ghost"
                                          >
                                            清除
                                          </Button>
                                        ) : null}
                                        <input
                                          accept=".svg,image/svg+xml"
                                          className="hidden"
                                          id={uploadId}
                                          onChange={async (event) => {
                                            const file =
                                              event.target.files?.[0];
                                            if (file) {
                                              await handleCanvasToolbarIconUpload(
                                                item.key,
                                                file
                                              );
                                            }
                                            event.currentTarget.value = "";
                                          }}
                                          type="file"
                                        />
                                      </div>
                                    </div>
                                  );
                                })}
                              </div>
                            </div>
                          );
                        })}
                      </div>

                      <div className="flex items-center justify-between rounded-lg border p-3">
                        <div className="space-y-0.5">
                          <Label htmlFor="videoCanvasEnabled">
                            视频画布功能
                          </Label>
                          <div className="text-muted-foreground text-xs">
                            开启后，首页和顶部导航显示“视频画布”入口；关闭后隐藏入口按钮。
                          </div>
                        </div>
                        <Switch
                          checked={siteSettings.videoCanvasEnabled}
                          id="videoCanvasEnabled"
                          onCheckedChange={(checked) =>
                            setSiteSettings({
                              ...siteSettings,
                              videoCanvasEnabled: checked,
                            })
                          }
                        />
                      </div>

                      <div className="rounded-lg border p-4">
                        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                          <div className="space-y-1">
                            <div className="font-medium text-sm">
                              视频画布功能配置
                            </div>
                            <div className="text-muted-foreground text-xs">
                              独立维护复刻画布里的功能预设提示词、默认模型、单功能模型和扣点配置。
                            </div>
                          </div>
                          <Button asChild variant="outline">
                            <Link href="/settings/video-canvas">
                              前往视频画布功能配置
                            </Link>
                          </Button>
                        </div>
                      </div>

                      {siteSettings.videoCanvasEnabled && (
                        <div className="flex items-center justify-between rounded-lg border p-3">
                          <div className="space-y-0.5">
                            <Label htmlFor="videoCanvasSidebarEnabled">
                              视频画布模块侧边栏
                            </Label>
                            <div className="text-muted-foreground text-xs">
                              开启后，视频画布左侧显示“视频模块”分层侧边栏；关闭后只保留画布本体与节点快捷添加。
                            </div>
                          </div>
                          <Switch
                            checked={siteSettings.videoCanvasSidebarEnabled}
                            id="videoCanvasSidebarEnabled"
                            onCheckedChange={(checked) =>
                              setSiteSettings({
                                ...siteSettings,
                                videoCanvasSidebarEnabled: checked,
                              })
                            }
                          />
                        </div>
                      )}

                      <div className="flex items-center justify-between rounded-lg border p-3">
                        <div className="space-y-0.5">
                          <Label htmlFor="aiDetailGenerationEnabled">
                            AI详情生成功能
                          </Label>
                          <div className="text-muted-foreground text-xs">
                            开启后，无限画布前端会显示“AI详情生成”入口；关闭后前端隐藏该功能。
                          </div>
                        </div>
                        <Switch
                          checked={siteSettings.aiDetailGenerationEnabled}
                          id="aiDetailGenerationEnabled"
                          onCheckedChange={(checked) =>
                            setSiteSettings({
                              ...siteSettings,
                              aiDetailGenerationEnabled: checked,
                            })
                          }
                        />
                      </div>

                      <div className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-amber-900 text-xs leading-5">
                        无限画布里“对话框”的 Agent
                        对话/识图默认模型，不在本区域设置； 它取自 AI
                        模型管理里被标记为“Agent模式”的多模态模型。
                        这里的配置只影响 AI详情生成专用模型，以及
                        Agent模式自动出图时的默认生图模型。
                      </div>

                      <div className="mt-4 space-y-2">
                        <Label htmlFor="agentWorkflowDefaultModelId">
                          风格化生图 - 专用默认模型
                        </Label>
                        <Select
                          onValueChange={(value) =>
                            setSiteSettings({
                              ...siteSettings,
                              agentWorkflowDefaultModelId:
                                value === "system" ? null : value,
                            })
                          }
                          value={
                            siteSettings.agentWorkflowDefaultModelId || "system"
                          }
                        >
                          <SelectTrigger id="agentWorkflowDefaultModelId">
                            <SelectValue placeholder="选择风格化默认生图模型" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="system">
                              沿用前台通用默认模型
                            </SelectItem>
                            {imageGenerationModelOptions.map((model) => (
                              <SelectItem key={model.id} value={model.id}>
                                {model.displayName}
                                {model.isHidden ? " · 前端隐藏" : ""}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        <div className="text-muted-foreground text-xs">
                          仅影响风格化功能页默认出图模型；固定业务模式卡片里单独配置的默认模型优先级更高。
                        </div>
                      </div>

                      <div className="mt-4 space-y-2">
                        <Label htmlFor="canvasDetailAgentModelId">
                          AI详情生成 - Agent专用模型
                        </Label>
                        <Select
                          onValueChange={(value) =>
                            setSiteSettings({
                              ...siteSettings,
                              canvasDetailAgentModelId:
                                value === "agent-default" ? null : value,
                            })
                          }
                          value={
                            siteSettings.canvasDetailAgentModelId ||
                            "agent-default"
                          }
                        >
                          <SelectTrigger id="canvasDetailAgentModelId">
                            <SelectValue placeholder="选择详情专用Agent模型" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="agent-default">
                              沿用Agent对话默认模型
                            </SelectItem>
                            {moonshotDetailAgentConfig.isEnabled ? (
                              <SelectItem
                                value={DETAIL_AGENT_LOCAL_MOONSHOT_OPTION_ID}
                              >
                                {moonshotDetailAgentConfig.displayName} ·
                                本地AI配置
                              </SelectItem>
                            ) : null}
                            {detailAgentModelOptions.map((model) => (
                              <SelectItem key={model.id} value={model.id}>
                                {model.displayName}
                                {model.isHidden ? " · 前端隐藏" : ""}
                                {model.supportsVision ? " · 多模态" : ""}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        <div className="text-muted-foreground text-xs">
                          用于 AI详情生成 的分镜规划与排版复审。未设置时沿用
                          Agent 对话默认模型；仅影响
                          AI详情生成，不影响普通无限画布对话框的 Agent
                          对话。建议选择 Kimi Code 编程套餐模型。
                        </div>
                      </div>

                      <div className="mt-4 space-y-2">
                        <Label htmlFor="canvasDetailDefaultModelId">
                          AI详情生成 - 默认生图模型
                        </Label>
                        <Select
                          onValueChange={(value) =>
                            setSiteSettings({
                              ...siteSettings,
                              canvasDetailDefaultModelId:
                                value === "agent-default" ? null : value,
                            })
                          }
                          value={
                            siteSettings.canvasDetailDefaultModelId ||
                            "agent-default"
                          }
                        >
                          <SelectTrigger id="canvasDetailDefaultModelId">
                            <SelectValue placeholder="选择默认模型" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="agent-default">
                              沿用Agent模式默认生图模型
                            </SelectItem>
                            {modelsData?.models
                              ?.filter((m: any) => m.supportsImageGen)
                              .map((model: any) => (
                                <SelectItem key={model.id} value={model.id}>
                                  {model.displayName}
                                </SelectItem>
                              ))}
                          </SelectContent>
                        </Select>
                        <div className="text-muted-foreground text-xs">
                          仅用于AI详情生成（含详情图与评价晒图）的默认出图模型；不影响普通生图模式。
                        </div>
                      </div>

                      <div className="space-y-2">
                        <Label htmlFor="canvasDefaultModelId">
                          画布默认生图模型
                        </Label>
                        <Select
                          onValueChange={(value) =>
                            setSiteSettings({
                              ...siteSettings,
                              canvasDefaultModelId:
                                value === "auto" ? null : value,
                            })
                          }
                          value={siteSettings.canvasDefaultModelId || "auto"}
                        >
                          <SelectTrigger id="canvasDefaultModelId">
                            <SelectValue placeholder="选择默认模型" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="auto">
                              Agent模式（推荐）
                            </SelectItem>
                            {modelsData?.models
                              ?.filter((m: any) => m.supportsImageGen)
                              .map((model: any) => (
                                <SelectItem key={model.id} value={model.id}>
                                  {model.displayName}
                                </SelectItem>
                              ))}
                          </SelectContent>
                        </Select>
                        <div className="text-muted-foreground text-xs">
                          设置无限画布中用户的默认生图模型。"Agent模式"会根据用户需求自动选择最佳模型。
                        </div>
                      </div>

                      {/* Agent模式下的默认生图模型 */}
                      <div className="mt-4 space-y-2 border-t pt-4">
                        <Label htmlFor="canvasAutoModeDefaultModelId">
                          Agent模式 - 默认生图模型
                        </Label>
                        <Select
                          onValueChange={(value) =>
                            setSiteSettings({
                              ...siteSettings,
                              canvasAutoModeDefaultModelId:
                                value === "system" ? null : value,
                            })
                          }
                          value={
                            siteSettings.canvasAutoModeDefaultModelId ||
                            "system"
                          }
                        >
                          <SelectTrigger id="canvasAutoModeDefaultModelId">
                            <SelectValue placeholder="选择默认模型" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="system">
                              系统智能选择（根据意图路由）
                            </SelectItem>
                            {modelsData?.models
                              ?.filter((m: any) => m.supportsImageGen)
                              .map((model: any) => (
                                <SelectItem key={model.id} value={model.id}>
                                  {model.displayName}
                                </SelectItem>
                              ))}
                          </SelectContent>
                        </Select>
                        <div className="text-muted-foreground text-xs">
                          当用户选择"Agent模式"并进入执行出图时，系统实际使用的默认生图模型。"系统智能选择"会根据用户意图（如抠图、换背景等）自动路由到最佳模型；这里不控制无限画布对话框里的
                          Agent 对话/识图模型。
                        </div>
                      </div>
                    </>
                  )}
                </div>
              </div>
              <Button onClick={handleSaveSiteSettings}>
                <Save className="mr-2 h-4 w-4" /> 保存设置
              </Button>
            </CardContent>
          </Card>
        </TabsContent>

        {/* 导航设置 */}
        <TabsContent className="mt-6 space-y-6" value="nav">
          {/* 工具箱名称设置 */}
          <Card>
            <CardHeader>
              <CardTitle>工具箱设置</CardTitle>
              <CardDescription>
                配置导航栏上的工具箱名称和显示状态
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* 工具箱1 */}
              <div className="flex items-center justify-between rounded-lg border p-4">
                <div className="flex-1 space-y-2">
                  <div className="flex items-center gap-4">
                    <Label className="w-20 text-base">工具箱1</Label>
                    <Input
                      className="max-w-[200px]"
                      onChange={(e) =>
                        setSiteSettings({
                          ...siteSettings,
                          toolbox1Name: e.target.value,
                        })
                      }
                      placeholder="工具箱名称"
                      value={siteSettings.toolbox1Name}
                    />
                  </div>
                  <div className="text-muted-foreground text-sm">
                    主工具箱，用于展示常用的外部链接
                  </div>
                </div>
                <Switch
                  checked={siteSettings.toolbox1Enabled}
                  onCheckedChange={(checked) =>
                    setSiteSettings({
                      ...siteSettings,
                      toolbox1Enabled: checked,
                    })
                  }
                />
              </div>

              {/* 工具箱2 */}
              <div className="flex items-center justify-between rounded-lg border p-4">
                <div className="flex-1 space-y-2">
                  <div className="flex items-center gap-4">
                    <Label className="w-20 text-base">工具箱2</Label>
                    <Input
                      className="max-w-[200px]"
                      onChange={(e) =>
                        setSiteSettings({
                          ...siteSettings,
                          toolbox2Name: e.target.value,
                        })
                      }
                      placeholder="工具箱2名称"
                      value={siteSettings.toolbox2Name}
                    />
                  </div>
                  <div className="text-muted-foreground text-sm">
                    第二个工具箱，可用于分类展示不同类型的链接
                  </div>
                </div>
                <Switch
                  checked={siteSettings.toolbox2Enabled}
                  onCheckedChange={(checked) =>
                    setSiteSettings({
                      ...siteSettings,
                      toolbox2Enabled: checked,
                    })
                  }
                />
              </div>

              {/* 精选榜设置 */}
              <div className="flex items-center justify-between rounded-lg border p-4">
                <div className="flex-1 space-y-1">
                  <Label className="text-base">精选榜</Label>
                  <div className="text-muted-foreground text-sm">
                    控制是否在导航栏显示精选榜按钮
                  </div>
                </div>
                <Switch
                  checked={siteSettings.rankingEnabled}
                  onCheckedChange={(checked) =>
                    setSiteSettings({
                      ...siteSettings,
                      rankingEnabled: checked,
                    })
                  }
                />
              </div>

              {/* 功能教程设置 */}
              <div className="flex items-center justify-between rounded-lg border p-4">
                <div className="flex-1 space-y-1">
                  <Label className="text-base">功能教程</Label>
                  <div className="text-muted-foreground text-sm">
                    启用后在导航栏显示功能教程按钮，点击后下拉显示视频列表
                  </div>
                </div>
                <Switch
                  checked={siteSettings.tutorialEnabled}
                  onCheckedChange={(checked) =>
                    setSiteSettings({
                      ...siteSettings,
                      tutorialEnabled: checked,
                    })
                  }
                />
              </div>

              <Button onClick={handleSaveSiteSettings}>
                <Save className="mr-2 h-4 w-4" /> 保存导航设置
              </Button>
            </CardContent>
          </Card>

          {/* 视频教程管理 */}
          {siteSettings.tutorialEnabled && (
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="flex items-center gap-2">
                      <Video className="h-5 w-5" />
                      视频教程管理
                    </CardTitle>
                    <CardDescription>
                      添加和管理功能教程视频，用户可以在导航栏查看
                    </CardDescription>
                  </div>
                  <Dialog
                    onOpenChange={setShowTutorialVideoDialog}
                    open={showTutorialVideoDialog}
                  >
                    <DialogTrigger asChild>
                      <Button
                        onClick={() => {
                          resetTutorialVideoForm();
                          setShowTutorialVideoDialog(true);
                        }}
                      >
                        <Plus className="mr-2 h-4 w-4" /> 添加视频
                      </Button>
                    </DialogTrigger>
                    <DialogContent className="!bg-white max-w-2xl dark:!bg-zinc-950">
                      <DialogHeader>
                        <DialogTitle>
                          {editingTutorialVideo ? "编辑视频" : "添加视频"}
                        </DialogTitle>
                      </DialogHeader>
                      <div className="space-y-4">
                        <div className="space-y-2">
                          <Label>视频标题 *</Label>
                          <Input
                            onChange={(e) =>
                              setTutorialVideoForm({
                                ...tutorialVideoForm,
                                title: e.target.value,
                              })
                            }
                            placeholder="例如：快速入门教程"
                            value={tutorialVideoForm.title}
                          />
                        </div>

                        {/* 视频上传或链接 */}
                        <div className="space-y-3">
                          <Label>视频文件</Label>
                          <div className="flex items-center gap-3">
                            <Select
                              onValueChange={(v) =>
                                setVideoQuality(v as "low" | "medium" | "high")
                              }
                              value={videoQuality}
                            >
                              <SelectTrigger className="w-[140px]">
                                <SelectValue placeholder="压缩质量" />
                              </SelectTrigger>
                              <SelectContent className="!bg-white dark:!bg-zinc-950">
                                <SelectItem value="low">低质量 (小)</SelectItem>
                                <SelectItem value="medium">
                                  中等 (推荐)
                                </SelectItem>
                                <SelectItem value="high">
                                  高质量 (大)
                                </SelectItem>
                              </SelectContent>
                            </Select>
                            <label className="flex-1">
                              <input
                                accept="video/*"
                                className="hidden"
                                disabled={videoUploading}
                                onChange={async (e) => {
                                  const file = e.target.files?.[0];
                                  if (!file) return;

                                  // 文件大小检查
                                  const maxSize = 500 * 1024 * 1024; // 500MB
                                  if (file.size > maxSize) {
                                    toast.error("视频文件不能超过500MB");
                                    e.target.value = "";
                                    return;
                                  }

                                  setVideoUploading(true);
                                  setVideoUploadPercent(0);
                                  setVideoUploadStage("uploading");
                                  setVideoUploadProgress("上传中 0%");

                                  try {
                                    const formData = new FormData();
                                    formData.append("file", file);
                                    formData.append("quality", videoQuality);
                                    formData.append("compress", "true");

                                    // 使用 XMLHttpRequest 以获取真实上传进度
                                    const result = await new Promise<{
                                      url: string;
                                      compression?: {
                                        compressed: boolean;
                                        ratio: string;
                                        originalSize: string;
                                        compressedSize: string;
                                      };
                                    }>((resolve, reject) => {
                                      const xhr = new XMLHttpRequest();

                                      // 上传进度
                                      xhr.upload.onprogress = (event) => {
                                        if (event.lengthComputable) {
                                          const percent = Math.round(
                                            (event.loaded / event.total) * 100
                                          );
                                          setVideoUploadPercent(percent);
                                          setVideoUploadProgress(
                                            `上传中 ${percent}%`
                                          );
                                        }
                                      };

                                      // 上传完成后，切换到压缩阶段
                                      xhr.upload.onloadend = () => {
                                        setVideoUploadPercent(100);
                                        setVideoUploadStage("compressing");
                                        setVideoUploadProgress("压缩处理中...");
                                      };

                                      xhr.onload = () => {
                                        if (
                                          xhr.status >= 200 &&
                                          xhr.status < 300
                                        ) {
                                          try {
                                            const response = JSON.parse(
                                              xhr.responseText
                                            );
                                            if (response.error) {
                                              reject(new Error(response.error));
                                            } else {
                                              setVideoUploadStage("done");
                                              setVideoUploadProgress("完成！");
                                              resolve(response);
                                            }
                                          } catch {
                                            reject(new Error("解析响应失败"));
                                          }
                                        } else {
                                          try {
                                            const response = JSON.parse(
                                              xhr.responseText
                                            );
                                            reject(
                                              new Error(
                                                response.error ||
                                                  `上传失败 (${xhr.status})`
                                              )
                                            );
                                          } catch {
                                            reject(
                                              new Error(
                                                `上传失败 (${xhr.status})`
                                              )
                                            );
                                          }
                                        }
                                      };

                                      xhr.onerror = () =>
                                        reject(
                                          new Error("网络错误，请检查连接")
                                        );
                                      xhr.ontimeout = () =>
                                        reject(new Error("上传超时"));

                                      xhr.open("POST", "/api/video/upload");
                                      xhr.timeout = 600_000; // 10分钟超时
                                      xhr.send(formData);
                                    });

                                    setTutorialVideoForm({
                                      ...tutorialVideoForm,
                                      videoUrl: result.url,
                                    });

                                    if (result.compression?.compressed) {
                                      toast.success(
                                        `上传成功！压缩率: ${result.compression.ratio}% (${result.compression.originalSize} → ${result.compression.compressedSize})`,
                                        { duration: 5000 }
                                      );
                                    } else {
                                      toast.success("视频上传成功！");
                                    }
                                  } catch (error) {
                                    toast.error(
                                      error instanceof Error
                                        ? error.message
                                        : "上传失败"
                                    );
                                  } finally {
                                    setVideoUploading(false);
                                    setVideoUploadProgress("");
                                    setVideoUploadPercent(0);
                                    setVideoUploadStage("idle");
                                    e.target.value = "";
                                  }
                                }}
                                type="file"
                              />
                              <div className="w-full space-y-2">
                                <Button
                                  asChild
                                  className="w-full cursor-pointer"
                                  disabled={videoUploading}
                                  type="button"
                                  variant="outline"
                                >
                                  <span>
                                    {videoUploading ? (
                                      <>
                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                        {videoUploadStage === "uploading" &&
                                          `上传中 ${videoUploadPercent}%`}
                                        {videoUploadStage === "compressing" &&
                                          "压缩处理中..."}
                                        {videoUploadStage === "saving" &&
                                          "保存中..."}
                                        {videoUploadStage === "done" &&
                                          "完成！"}
                                      </>
                                    ) : (
                                      <>
                                        <Upload className="mr-2 h-4 w-4" />
                                        上传视频
                                      </>
                                    )}
                                  </span>
                                </Button>
                                {/* 上传进度条 - 始终在上传过程中显示 */}
                                {videoUploading && (
                                  <div className="space-y-1.5 rounded-lg border bg-muted/50 p-3">
                                    <div className="flex items-center justify-between text-xs">
                                      <span className="font-medium">
                                        {videoUploadStage === "uploading" &&
                                          "正在上传..."}
                                        {videoUploadStage === "compressing" &&
                                          "正在压缩视频..."}
                                        {videoUploadStage === "saving" &&
                                          "正在保存..."}
                                        {videoUploadStage === "done" &&
                                          "处理完成！"}
                                      </span>
                                      <span className="text-muted-foreground">
                                        {videoUploadStage === "uploading" &&
                                          `${videoUploadPercent}%`}
                                        {videoUploadStage === "compressing" &&
                                          "请耐心等待"}
                                      </span>
                                    </div>
                                    <div className="h-2.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
                                      <div
                                        className={`h-full transition-all duration-300 ${
                                          videoUploadStage === "compressing"
                                            ? "animate-pulse bg-yellow-500"
                                            : videoUploadStage === "done"
                                              ? "bg-green-500"
                                              : "bg-blue-500"
                                        }`}
                                        style={{
                                          width:
                                            videoUploadStage ===
                                              "compressing" ||
                                            videoUploadStage === "saving" ||
                                            videoUploadStage === "done"
                                              ? "100%"
                                              : `${videoUploadPercent}%`,
                                        }}
                                      />
                                    </div>
                                    <p className="text-muted-foreground text-xs">
                                      {videoUploadStage === "uploading" &&
                                        "正在将视频上传到服务器..."}
                                      {videoUploadStage === "compressing" &&
                                        "服务器正在压缩视频以优化播放体验，大文件可能需要几分钟..."}
                                      {videoUploadStage === "saving" &&
                                        "正在保存到存储..."}
                                      {videoUploadStage === "done" &&
                                        "视频已成功处理！"}
                                    </p>
                                  </div>
                                )}
                              </div>
                            </label>
                          </div>
                        </div>

                        <div className="space-y-2">
                          <Label>视频链接 *</Label>
                          <Input
                            onChange={(e) =>
                              setTutorialVideoForm({
                                ...tutorialVideoForm,
                                videoUrl: e.target.value,
                              })
                            }
                            placeholder="视频URL（上传后自动填充或手动输入）"
                            value={tutorialVideoForm.videoUrl}
                          />
                        </div>

                        {/* 封面上传或链接 */}
                        <div className="space-y-2">
                          <Label>封面图片</Label>
                          <div className="flex items-center gap-2">
                            <Input
                              className="flex-1"
                              onChange={(e) =>
                                setTutorialVideoForm({
                                  ...tutorialVideoForm,
                                  coverUrl: e.target.value,
                                })
                              }
                              placeholder="封面图片URL（可选）"
                              value={tutorialVideoForm.coverUrl}
                            />
                            <label>
                              <input
                                accept="image/*"
                                className="hidden"
                                onChange={async (e) => {
                                  const file = e.target.files?.[0];
                                  if (!file) return;

                                  try {
                                    const formData = new FormData();
                                    formData.append("file", file);

                                    const response =
                                      await fetchUploadWithRetry(formData);

                                    const result = await response.json();
                                    if (result.url) {
                                      setTutorialVideoForm({
                                        ...tutorialVideoForm,
                                        coverUrl: result.url,
                                      });
                                      toast.success("封面上传成功");
                                    }
                                  } catch (error) {
                                    toast.error("封面上传失败");
                                  }
                                  e.target.value = "";
                                }}
                                type="file"
                              />
                              <Button
                                asChild
                                size="sm"
                                type="button"
                                variant="outline"
                              >
                                <span>
                                  <Upload className="h-4 w-4" />
                                </span>
                              </Button>
                            </label>
                          </div>
                        </div>

                        <div className="space-y-2">
                          <Label>视频描述</Label>
                          <Input
                            onChange={(e) =>
                              setTutorialVideoForm({
                                ...tutorialVideoForm,
                                description: e.target.value,
                              })
                            }
                            placeholder="简短描述（可选）"
                            value={tutorialVideoForm.description}
                          />
                        </div>

                        <div className="grid grid-cols-2 gap-4">
                          <div className="space-y-2">
                            <Label>排序</Label>
                            <Input
                              onChange={(e) =>
                                setTutorialVideoForm({
                                  ...tutorialVideoForm,
                                  order: Number.parseInt(e.target.value) || 0,
                                })
                              }
                              type="number"
                              value={tutorialVideoForm.order}
                            />
                          </div>
                          <div className="flex items-center gap-2 pt-6">
                            <Switch
                              checked={tutorialVideoForm.isEnabled}
                              onCheckedChange={(checked) =>
                                setTutorialVideoForm({
                                  ...tutorialVideoForm,
                                  isEnabled: checked,
                                })
                              }
                            />
                            <Label>启用</Label>
                          </div>
                        </div>

                        {/* 预览 */}
                        {tutorialVideoForm.videoUrl && (
                          <div className="space-y-2">
                            <Label>预览</Label>
                            <div className="relative aspect-video max-h-[200px] overflow-hidden rounded-lg bg-black">
                              <video
                                className="h-full w-full object-contain"
                                controls
                                src={tutorialVideoForm.videoUrl}
                              />
                            </div>
                          </div>
                        )}
                      </div>
                      <DialogFooter>
                        <Button
                          onClick={() => setShowTutorialVideoDialog(false)}
                          variant="outline"
                        >
                          取消
                        </Button>
                        <Button
                          disabled={
                            !tutorialVideoForm.title ||
                            !tutorialVideoForm.videoUrl
                          }
                          onClick={handleSaveTutorialVideo}
                        >
                          保存
                        </Button>
                      </DialogFooter>
                    </DialogContent>
                  </Dialog>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {tutorialVideosData?.videos?.map((video) => (
                    <div
                      className="flex items-center gap-4 rounded-lg border p-3"
                      key={video.id}
                    >
                      {/* 封面 */}
                      <div className="h-16 w-24 flex-shrink-0 overflow-hidden rounded bg-muted">
                        {video.coverUrl ? (
                          <img
                            alt={video.title}
                            className="h-full w-full object-cover"
                            src={video.coverUrl}
                          />
                        ) : (
                          <div className="flex h-full w-full items-center justify-center">
                            <Video className="h-6 w-6 text-muted-foreground" />
                          </div>
                        )}
                      </div>
                      {/* 信息 */}
                      <div className="min-w-0 flex-1">
                        <div className="flex items-center gap-2 font-medium">
                          {video.title}
                          {!video.isEnabled && (
                            <span className="rounded bg-gray-200 px-2 py-0.5 text-xs">
                              已禁用
                            </span>
                          )}
                        </div>
                        {video.description && (
                          <div className="truncate text-muted-foreground text-sm">
                            {video.description}
                          </div>
                        )}
                        <div className="text-muted-foreground text-xs">
                          排序: {video.order}
                        </div>
                      </div>
                      {/* 操作 */}
                      <div className="flex items-center gap-2">
                        <Button
                          onClick={() => {
                            setTutorialVideoForm({
                              title: video.title,
                              videoUrl: video.videoUrl,
                              coverUrl: video.coverUrl || "",
                              description: video.description || "",
                              order: video.order,
                              isEnabled: video.isEnabled,
                            });
                            setEditingTutorialVideo(video.id);
                            setShowTutorialVideoDialog(true);
                          }}
                          size="sm"
                          variant="outline"
                        >
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button
                          onClick={() => handleDeleteTutorialVideo(video.id)}
                          size="sm"
                          variant="destructive"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  ))}
                  {!tutorialVideosData?.videos?.length && (
                    <div className="py-8 text-center text-muted-foreground">
                      暂无视频教程，点击上方按钮添加
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          )}

          {/* 导航链接列表 */}
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle>导航链接</CardTitle>
                  <CardDescription>添加和管理工具箱中的链接</CardDescription>
                </div>
                <Dialog
                  onOpenChange={setShowNavLinkDialog}
                  open={showNavLinkDialog}
                >
                  <DialogTrigger asChild>
                    <Button
                      onClick={() => {
                        resetNavLinkForm();
                        setShowNavLinkDialog(true);
                      }}
                    >
                      <Plus className="mr-2 h-4 w-4" /> 添加链接
                    </Button>
                  </DialogTrigger>
                  <DialogContent className="!bg-white dark:!bg-zinc-950">
                    <DialogHeader>
                      <DialogTitle>
                        {editingNavLink ? "编辑链接" : "添加链接"}
                      </DialogTitle>
                    </DialogHeader>
                    <div className="space-y-4">
                      <div className="space-y-2">
                        <Label>名称</Label>
                        <Input
                          onChange={(e) =>
                            setNavLinkForm({
                              ...navLinkForm,
                              name: e.target.value,
                            })
                          }
                          placeholder="链接名称"
                          value={navLinkForm.name}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>URL</Label>
                        <Input
                          onChange={(e) =>
                            setNavLinkForm({
                              ...navLinkForm,
                              url: e.target.value,
                            })
                          }
                          placeholder="https://..."
                          value={navLinkForm.url}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>所属工具箱</Label>
                        <div className="flex gap-4">
                          <label className="flex cursor-pointer items-center gap-2">
                            <input
                              checked={navLinkForm.toolboxGroup === 1}
                              className="h-4 w-4"
                              name="toolboxGroup"
                              onChange={() =>
                                setNavLinkForm({
                                  ...navLinkForm,
                                  toolboxGroup: 1,
                                })
                              }
                              type="radio"
                              value={1}
                            />
                            <span className="text-sm">
                              {siteSettings.toolbox1Name || "工具箱1"}
                            </span>
                          </label>
                          <label className="flex cursor-pointer items-center gap-2">
                            <input
                              checked={navLinkForm.toolboxGroup === 2}
                              className="h-4 w-4"
                              name="toolboxGroup"
                              onChange={() =>
                                setNavLinkForm({
                                  ...navLinkForm,
                                  toolboxGroup: 2,
                                })
                              }
                              type="radio"
                              value={2}
                            />
                            <span className="text-sm">
                              {siteSettings.toolbox2Name || "工具箱2"}
                            </span>
                          </label>
                        </div>
                      </div>
                      <div className="space-y-2">
                        <Label>排序 (越小越靠前)</Label>
                        <Input
                          onChange={(e) =>
                            setNavLinkForm({
                              ...navLinkForm,
                              order: Number.parseInt(e.target.value) || 0,
                            })
                          }
                          type="number"
                          value={navLinkForm.order}
                        />
                      </div>
                      <div className="flex items-center gap-2">
                        <Switch
                          checked={navLinkForm.isEnabled}
                          onCheckedChange={(checked) =>
                            setNavLinkForm({
                              ...navLinkForm,
                              isEnabled: checked,
                            })
                          }
                        />
                        <Label>启用</Label>
                      </div>
                    </div>
                    <DialogFooter>
                      <Button
                        onClick={() => setShowNavLinkDialog(false)}
                        variant="outline"
                      >
                        取消
                      </Button>
                      <Button onClick={handleSaveNavLink}>保存</Button>
                    </DialogFooter>
                  </DialogContent>
                </Dialog>
              </div>
            </CardHeader>
            <CardContent>
              {/* 工具箱1 的链接 */}
              <div className="space-y-4">
                <div className="border-b pb-2 font-medium text-muted-foreground text-sm">
                  {siteSettings.toolbox1Name || "工具箱1"} 的链接
                </div>
                {navLinksData?.links
                  ?.filter((l) => (l.toolboxGroup || 1) === 1)
                  .map((link) => (
                    <div
                      className="flex items-center justify-between rounded-lg border p-4"
                      key={link.id}
                    >
                      <div className="flex-1">
                        <div className="flex items-center gap-2 font-medium">
                          {link.name}
                          {!link.isEnabled && (
                            <span className="rounded bg-gray-200 px-2 py-0.5 text-xs">
                              已禁用
                            </span>
                          )}
                        </div>
                        <div className="text-muted-foreground text-sm">
                          {link.url} (排序: {link.order})
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <Button
                          onClick={() => {
                            setNavLinkForm({
                              id: link.id,
                              name: link.name,
                              url: link.url,
                              order: link.order,
                              isEnabled: link.isEnabled,
                              toolboxGroup: link.toolboxGroup || 1,
                            });
                            setEditingNavLink(link.id);
                            setShowNavLinkDialog(true);
                          }}
                          size="sm"
                          variant="outline"
                        >
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button
                          onClick={() => handleDeleteNavLink(link.id)}
                          size="sm"
                          variant="destructive"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  ))}
                {!navLinksData?.links?.filter(
                  (l) => (l.toolboxGroup || 1) === 1
                ).length && (
                  <div className="py-4 text-center text-muted-foreground text-sm">
                    暂无链接
                  </div>
                )}
              </div>

              {/* 工具箱2 的链接 */}
              <div className="mt-6 space-y-4">
                <div className="border-b pb-2 font-medium text-muted-foreground text-sm">
                  {siteSettings.toolbox2Name || "工具箱2"} 的链接
                </div>
                {navLinksData?.links
                  ?.filter((l) => l.toolboxGroup === 2)
                  .map((link) => (
                    <div
                      className="flex items-center justify-between rounded-lg border p-4"
                      key={link.id}
                    >
                      <div className="flex-1">
                        <div className="flex items-center gap-2 font-medium">
                          {link.name}
                          {!link.isEnabled && (
                            <span className="rounded bg-gray-200 px-2 py-0.5 text-xs">
                              已禁用
                            </span>
                          )}
                        </div>
                        <div className="text-muted-foreground text-sm">
                          {link.url} (排序: {link.order})
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <Button
                          onClick={() => {
                            setNavLinkForm({
                              id: link.id,
                              name: link.name,
                              url: link.url,
                              order: link.order,
                              isEnabled: link.isEnabled,
                              toolboxGroup: link.toolboxGroup || 1,
                            });
                            setEditingNavLink(link.id);
                            setShowNavLinkDialog(true);
                          }}
                          size="sm"
                          variant="outline"
                        >
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button
                          onClick={() => handleDeleteNavLink(link.id)}
                          size="sm"
                          variant="destructive"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  ))}
                {!navLinksData?.links?.filter((l) => l.toolboxGroup === 2)
                  .length && (
                  <div className="py-4 text-center text-muted-foreground text-sm">
                    暂无链接
                  </div>
                )}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent className="mt-6" value="questions">
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="text-xl">快捷短语</CardTitle>
                <CardDescription>
                  配置聊天输入框下方的预设快捷提问
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {questions.map((q, index) => (
                  <div className="flex gap-2" key={index}>
                    <Input
                      onChange={(e) =>
                        handleQuestionChange(index, e.target.value)
                      }
                      placeholder={`问题 ${index + 1}`}
                      value={q}
                    />
                    <Button
                      disabled={questions.length <= 1}
                      onClick={() => handleRemoveQuestion(index)}
                      size="icon"
                      variant="ghost"
                    >
                      <Trash2 className="h-4 w-4 text-muted-foreground hover:text-destructive" />
                    </Button>
                  </div>
                ))}
                <Button
                  className="w-full"
                  onClick={handleAddQuestion}
                  variant="outline"
                >
                  <Plus className="mr-2 h-4 w-4" /> 添加短语
                </Button>
                <Button
                  className="w-full md:w-auto"
                  onClick={handleSaveQuestions}
                >
                  <Save className="mr-2 h-4 w-4" /> 保存设置
                </Button>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-xl">画布对话快捷标签</CardTitle>
                <CardDescription>
                  每个标签支持「图标 + 标签名 + 输入框提示词 +
                  预设提示词」。用户点击标签后，输入框会显示对应灰色提示，发送时会自动附带对应预设提示词。
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between rounded-lg border p-3">
                  <div className="space-y-0.5">
                    <Label>在画布对话中显示 Skills 标签</Label>
                    <p className="text-muted-foreground text-xs">
                      关闭后，对话框将不显示快捷标签区域。
                    </p>
                  </div>
                  <Switch
                    checked={canvasSkillTagsEnabled}
                    onCheckedChange={setCanvasSkillTagsEnabled}
                  />
                </div>
                <div className="space-y-2">
                  <Label>标签区标题</Label>
                  <Input
                    onChange={(event) =>
                      setCanvasSkillTagsTitle(event.target.value)
                    }
                    placeholder={DEFAULT_CANVAS_SKILL_TAGS_TITLE}
                    value={canvasSkillTagsTitle}
                  />
                </div>
                <div className="space-y-3 rounded-lg border p-3">
                  <div className="flex flex-wrap items-center justify-between gap-2">
                    <div>
                      <Label>技能分类</Label>
                      <p className="mt-1 text-muted-foreground text-xs">
                        分类会显示在 Claw 快捷技能区，用户可按分类筛选技能。
                      </p>
                    </div>
                    <Button
                      onClick={handleAddCanvasSkillCategory}
                      size="sm"
                      type="button"
                      variant="outline"
                    >
                      <Plus className="mr-1 h-4 w-4" /> 添加分类
                    </Button>
                  </div>
                  {canvasSkillCategories.length > 0 ? (
                    <div className="grid gap-2 md:grid-cols-2">
                      {canvasSkillCategories.map((category, categoryIndex) => (
                        <div
                          className="flex items-center gap-2"
                          key={category.id}
                        >
                          <Input
                            aria-label={`分类名称 ${categoryIndex + 1}`}
                            onChange={(event) =>
                              handleCanvasSkillCategoryNameChange(
                                categoryIndex,
                                event.target.value
                              )
                            }
                            placeholder={`分类名称 ${categoryIndex + 1}`}
                            value={category.name}
                          />
                          <Button
                            aria-label={`删除分类 ${category.name}`}
                            onClick={() =>
                              handleRemoveCanvasSkillCategory(categoryIndex)
                            }
                            size="icon"
                            type="button"
                            variant="ghost"
                          >
                            <Trash2 className="h-4 w-4 text-muted-foreground hover:text-destructive" />
                          </Button>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <p className="rounded-md bg-muted/40 px-3 py-2 text-muted-foreground text-xs">
                      暂未配置分类，所有技能会显示在“全部”中。
                    </p>
                  )}
                </div>
                {canvasSkillTags.map((tag, index) => {
                  const TagIcon = getCanvasSkillIconComponent(tag.iconName);
                  return (
                    <div
                      className="space-y-2 rounded-lg border p-3"
                      key={tag.id || index}
                    >
                      <div className="flex flex-col gap-2 md:flex-row md:items-center">
                        <Input
                          onChange={(event) =>
                            handleCanvasSkillTagChange(
                              index,
                              "name",
                              event.target.value
                            )
                          }
                          placeholder={`标签名称 ${index + 1}`}
                          value={tag.name}
                        />
                        <Select
                          onValueChange={(value) =>
                            handleCanvasSkillTagChange(
                              index,
                              "categoryId",
                              value === "__uncategorized__" ? "" : value
                            )
                          }
                          value={tag.categoryId || "__uncategorized__"}
                        >
                          <SelectTrigger className="w-full shrink-0 md:w-[180px]">
                            <SelectValue placeholder="选择分类" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="__uncategorized__">
                              未分类
                            </SelectItem>
                            {canvasSkillCategories.map((category) => (
                              <SelectItem key={category.id} value={category.id}>
                                {category.name}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        <Button
                          className="self-end md:self-auto"
                          disabled={canvasSkillTags.length <= 1}
                          onClick={() => handleRemoveCanvasSkillTag(index)}
                          size="icon"
                          variant="ghost"
                        >
                          <Trash2 className="h-4 w-4 text-muted-foreground hover:text-destructive" />
                        </Button>
                      </div>
                      <div className="flex items-center gap-3">
                        <div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-md border bg-muted/40">
                          {tag.iconUrl ? (
                            <img
                              alt={tag.name || `标签${index + 1}`}
                              className="h-full w-full object-cover"
                              src={tag.iconUrl}
                            />
                          ) : (
                            <TagIcon className="h-4 w-4 text-muted-foreground" />
                          )}
                        </div>
                        <div className="flex flex-1 flex-wrap items-center gap-2">
                          <Select
                            onValueChange={(value) =>
                              handleCanvasSkillTagChange(
                                index,
                                "iconName",
                                value
                              )
                            }
                            value={tag.iconName || "message-circle"}
                          >
                            <SelectTrigger className="h-9 w-[170px]">
                              <div className="flex items-center gap-2">
                                <TagIcon className="h-4 w-4 text-muted-foreground" />
                                <span className="text-sm">开源图标</span>
                              </div>
                            </SelectTrigger>
                            <SelectContent>
                              {CANVAS_SKILL_ICON_OPTIONS.map((option) => {
                                const OptionIcon = option.icon;
                                return (
                                  <SelectItem
                                    key={option.value}
                                    value={option.value}
                                  >
                                    <div className="flex items-center gap-2">
                                      <OptionIcon className="h-4 w-4 text-muted-foreground" />
                                      <span>{option.label}</span>
                                    </div>
                                  </SelectItem>
                                );
                              })}
                            </SelectContent>
                          </Select>
                          <Input
                            onChange={(event) =>
                              handleCanvasSkillTagChange(
                                index,
                                "iconUrl",
                                event.target.value
                              )
                            }
                            placeholder="图标 URL（可选）"
                            value={tag.iconUrl || ""}
                          />
                          <Button
                            disabled={canvasSkillTagUploadingId === tag.id}
                            onClick={() =>
                              document
                                .getElementById(
                                  `canvas-skill-tag-icon-${tag.id}`
                                )
                                ?.click()
                            }
                            size="sm"
                            type="button"
                            variant="outline"
                          >
                            {canvasSkillTagUploadingId === tag.id ? (
                              <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
                            ) : null}
                            上传图标
                          </Button>
                          <input
                            accept="image/*"
                            className="hidden"
                            id={`canvas-skill-tag-icon-${tag.id}`}
                            onChange={(event) => {
                              const file = event.target.files?.[0];
                              if (file) {
                                void handleCanvasSkillTagIconUpload(
                                  index,
                                  file
                                );
                              }
                              event.currentTarget.value = "";
                            }}
                            type="file"
                          />
                        </div>
                      </div>
                      <Input
                        onChange={(event) =>
                          handleCanvasSkillTagChange(
                            index,
                            "placeholder",
                            event.target.value
                          )
                        }
                        placeholder="输入框灰色提示词（可选）"
                        value={tag.placeholder || ""}
                      />
                      <Textarea
                        className="min-h-[84px]"
                        onChange={(event) =>
                          handleCanvasSkillTagChange(
                            index,
                            "prompt",
                            event.target.value
                          )
                        }
                        placeholder="请输入该标签对应的预设提示词"
                        value={tag.prompt}
                      />
                    </div>
                  );
                })}
                <Button
                  className="w-full"
                  onClick={handleAddCanvasSkillTag}
                  variant="outline"
                >
                  <Plus className="mr-2 h-4 w-4" /> 添加标签
                </Button>
                <Button
                  className="w-full md:w-auto"
                  onClick={handleSaveCanvasSkillTags}
                >
                  <Save className="mr-2 h-4 w-4" /> 保存标签设置
                </Button>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        {/* 认证设置 */}
        <TabsContent className="mt-6" value="auth">
          <Card>
            <CardHeader>
              <CardTitle className="text-xl">登录认证</CardTitle>
              <CardDescription>
                配置开放注册、钉钉登录与Google登录
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>开放注册</Label>
                  <p className="text-muted-foreground text-sm">
                    允许新用户注册账号
                  </p>
                </div>
                <Switch
                  checked={authSettings.isRegistrationEnabled}
                  onCheckedChange={(checked) =>
                    setAuthSettings({
                      ...authSettings,
                      isRegistrationEnabled: checked,
                    })
                  }
                />
              </div>
              <div className="grid grid-cols-1 gap-3 rounded-md border p-3 md:grid-cols-2">
                <div className="flex items-center justify-between md:col-span-2">
                  <div className="space-y-0.5">
                    <Label>邮箱验证码注册</Label>
                    <p className="text-muted-foreground text-sm">
                      开启后，用户注册时必须先收取邮箱验证码。
                    </p>
                  </div>
                  <Switch
                    checked={authSettings.isEmailVerificationEnabled === true}
                    onCheckedChange={(checked) =>
                      setAuthSettings({
                        ...authSettings,
                        isEmailVerificationEnabled: checked,
                      })
                    }
                  />
                </div>
                <div className="space-y-1">
                  <Label htmlFor="emailVerificationExpiresMinutes">
                    验证码有效期（分钟）
                  </Label>
                  <Input
                    id="emailVerificationExpiresMinutes"
                    max={30}
                    min={3}
                    onChange={(event) =>
                      setAuthSettings({
                        ...authSettings,
                        emailVerificationExpiresMinutes: Math.min(
                          Math.max(Number(event.target.value) || 10, 3),
                          30
                        ),
                      })
                    }
                    type="number"
                    value={authSettings.emailVerificationExpiresMinutes ?? 10}
                  />
                </div>
                <div className="space-y-1">
                  <Label htmlFor="resendFromEmail">发件邮箱（Resend）</Label>
                  <Input
                    id="resendFromEmail"
                    onChange={(event) =>
                      setAuthSettings({
                        ...authSettings,
                        resendFromEmail: event.target.value,
                      })
                    }
                    placeholder="noreply@your-domain.ai"
                    value={authSettings.resendFromEmail || ""}
                  />
                </div>
                <div className="space-y-1 md:col-span-2">
                  <Label htmlFor="resendApiKey">Resend API Key</Label>
                  <Input
                    id="resendApiKey"
                    onChange={(event) =>
                      setAuthSettings({
                        ...authSettings,
                        resendApiKey: event.target.value,
                      })
                    }
                    placeholder="re_xxxxxxxxxxxxxxxxx"
                    type="password"
                    value={authSettings.resendApiKey || ""}
                  />
                </div>
                <p className="text-muted-foreground text-xs md:col-span-2">
                  当前状态：
                  {String(authSettings.resendApiKey || "").trim() &&
                  String(authSettings.resendFromEmail || "").trim()
                    ? " 已配置"
                    : " 未配置"}
                </p>
              </div>
              <Separator />
              <div className="space-y-4">
                <h3 className="font-semibold text-lg">钉钉登录</h3>
                <p className="text-muted-foreground text-sm">
                  支持配置多个钉钉组织，每个组织包含名称、AppKey、AppSecret。默认使用第一个组织作为登录入口。
                </p>

                <div className="space-y-3">
                  {authSettings.dingTalkOrganizations.map((org, index) => (
                    <div
                      className="grid grid-cols-1 gap-3 rounded-md border p-3 md:grid-cols-3"
                      key={org.id}
                    >
                      <div className="space-y-1">
                        <Label htmlFor={`ding-org-name-${index}`}>
                          组织名称
                        </Label>
                        <Input
                          id={`ding-org-name-${index}`}
                          onChange={(e) => {
                            const value = e.target.value;
                            setAuthSettings({
                              ...authSettings,
                              dingTalkOrganizations:
                                authSettings.dingTalkOrganizations.map(
                                  (item, i) =>
                                    i === index
                                      ? { ...item, name: value }
                                      : item
                                ),
                            });
                          }}
                          placeholder={`例如：总部 / 研发中心 ${index + 1}`}
                          value={org.name}
                        />
                      </div>
                      <div className="space-y-1">
                        <Label htmlFor={`ding-org-appkey-${index}`}>
                          AppKey
                        </Label>
                        <Input
                          id={`ding-org-appkey-${index}`}
                          onChange={(e) => {
                            const value = e.target.value;
                            setAuthSettings({
                              ...authSettings,
                              dingTalkOrganizations:
                                authSettings.dingTalkOrganizations.map(
                                  (item, i) =>
                                    i === index
                                      ? { ...item, appKey: value }
                                      : item
                                ),
                            });
                          }}
                          type="password"
                          value={org.appKey}
                        />
                      </div>
                      <div className="space-y-1">
                        <Label htmlFor={`ding-org-appsecret-${index}`}>
                          AppSecret
                        </Label>
                        <div className="flex items-center gap-2">
                          <Input
                            id={`ding-org-appsecret-${index}`}
                            onChange={(e) => {
                              const value = e.target.value;
                              setAuthSettings({
                                ...authSettings,
                                dingTalkOrganizations:
                                  authSettings.dingTalkOrganizations.map(
                                    (item, i) =>
                                      i === index
                                        ? { ...item, appSecret: value }
                                        : item
                                  ),
                              });
                            }}
                            type="password"
                            value={org.appSecret}
                          />
                          <Button
                            className="shrink-0"
                            disabled={
                              authSettings.dingTalkOrganizations.length <= 1
                            }
                            onClick={() => {
                              setAuthSettings({
                                ...authSettings,
                                dingTalkOrganizations:
                                  authSettings.dingTalkOrganizations.filter(
                                    (_, i) => i !== index
                                  ),
                              });
                            }}
                            size="icon"
                            type="button"
                            variant="ghost"
                          >
                            <Trash2 className="h-4 w-4 text-muted-foreground" />
                          </Button>
                        </div>
                      </div>
                    </div>
                  ))}

                  <Button
                    className="w-full md:w-auto"
                    onClick={() => {
                      setAuthSettings({
                        ...authSettings,
                        dingTalkOrganizations: [
                          ...authSettings.dingTalkOrganizations,
                          {
                            id: crypto.randomUUID(),
                            name: `新组织 ${authSettings.dingTalkOrganizations.length + 1}`,
                            appKey: "",
                            appSecret: "",
                          },
                        ],
                      });
                    }}
                    type="button"
                    variant="outline"
                  >
                    <Plus className="mr-2 h-4 w-4" />
                    新增组织
                  </Button>
                </div>

                <div className="flex items-center gap-2 pt-2">
                  <Switch
                    checked={authSettings.isDingTalkEnabled}
                    id="dingTalkEnabled"
                    onCheckedChange={(checked) =>
                      setAuthSettings({
                        ...authSettings,
                        isDingTalkEnabled: checked,
                      })
                    }
                  />
                  <Label htmlFor="dingTalkEnabled">启用钉钉登录</Label>
                </div>
              </div>
              <Separator />
              <div className="space-y-3">
                <h3 className="font-semibold text-lg">Google 登录</h3>
                <p className="text-muted-foreground text-sm">
                  通过 Google OAuth 登录，可直接在这里配置 Google 凭据与
                  AUTH_URL。
                </p>
                <div className="grid grid-cols-1 gap-3 rounded-md border p-3 md:grid-cols-2">
                  <div className="space-y-1">
                    <Label htmlFor="googleClientId">Google Client ID</Label>
                    <Input
                      id="googleClientId"
                      onChange={(e) =>
                        setAuthSettings({
                          ...authSettings,
                          googleClientId: e.target.value,
                        })
                      }
                      placeholder="Google OAuth Client ID"
                      value={authSettings.googleClientId || ""}
                    />
                  </div>
                  <div className="space-y-1">
                    <Label htmlFor="googleClientSecret">
                      Google Client Secret
                    </Label>
                    <Input
                      id="googleClientSecret"
                      onChange={(e) =>
                        setAuthSettings({
                          ...authSettings,
                          googleClientSecret: e.target.value,
                        })
                      }
                      placeholder="Google OAuth Client Secret"
                      type="password"
                      value={authSettings.googleClientSecret || ""}
                    />
                  </div>
                  <div className="space-y-1 md:col-span-2">
                    <Label htmlFor="authUrl">AUTH_URL（站点地址）</Label>
                    <Input
                      id="authUrl"
                      onChange={(e) =>
                        setAuthSettings({
                          ...authSettings,
                          authUrl: e.target.value,
                        })
                      }
                      placeholder="https://your-domain.com"
                      value={authSettings.authUrl || ""}
                    />
                  </div>
                </div>
                <div className="flex items-center justify-between rounded-md border p-3">
                  <div className="space-y-1">
                    <Label htmlFor="googleEnabled">启用 Google 登录</Label>
                    <p className="text-muted-foreground text-xs">
                      当前服务器配置状态：
                      {isGoogleConfigured ? "已配置" : "未配置"}
                    </p>
                  </div>
                  <Switch
                    checked={authSettings.isGoogleEnabled}
                    id="googleEnabled"
                    onCheckedChange={(checked) =>
                      setAuthSettings({
                        ...authSettings,
                        isGoogleEnabled: checked,
                      })
                    }
                  />
                </div>
                {isGoogleConfigured ? null : (
                  <p className="text-amber-600 text-xs">
                    未检测到完整 Google 配置（Client ID / Client Secret）。
                  </p>
                )}
              </div>
              <Separator />
              <Button onClick={handleSaveAuthSettings}>
                <Save className="mr-2 h-4 w-4" /> 保存认证配置
              </Button>
            </CardContent>
          </Card>
        </TabsContent>

        {/* 钉钉通知设置 */}
        <TabsContent className="mt-6 space-y-6" value="notification">
          <Card>
            <CardHeader>
              <CardTitle className="text-xl">钉钉通知中心</CardTitle>
              <CardDescription>
                直接粘贴 Markdown
                公告内容，支持立即发送和定时发送，仅推送到钉钉群，不再同步站内弹窗。
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-2">
                <Label htmlFor="dingtalk-notification-title">通知标题</Label>
                <Input
                  id="dingtalk-notification-title"
                  onChange={(e) =>
                    setDingTalkNotificationDraft((current) => ({
                      ...current,
                      title: e.target.value,
                    }))
                  }
                  placeholder="例如：系统更新公告｜生图引擎性能升级完成"
                  value={dingTalkNotificationDraft.title}
                />
              </div>
              <div className="space-y-2">
                <div className="flex items-center justify-between gap-3">
                  <Label htmlFor="dingtalk-notification-content">
                    Markdown 正文
                  </Label>
                  <span className="text-muted-foreground text-xs">
                    支持标题、粗体、列表、引用、链接
                  </span>
                </div>
                <Textarea
                  id="dingtalk-notification-content"
                  onChange={(e) =>
                    setDingTalkNotificationDraft((current) => ({
                      ...current,
                      content: e.target.value,
                    }))
                  }
                  placeholder={
                    "### 系统更新公告\n\n尊敬的用户：\n\n我们已完成本轮生图引擎性能升级，并已正式上线。"
                  }
                  rows={12}
                  value={dingTalkNotificationDraft.content}
                />
              </div>
              <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_280px]">
                <div className="space-y-2">
                  <Label htmlFor="dingtalk-notification-schedule">
                    定时发送时间
                  </Label>
                  <Input
                    id="dingtalk-notification-schedule"
                    min={toDateTimeLocalInputValue(new Date())}
                    onChange={(e) =>
                      setDingTalkNotificationScheduleAt(e.target.value)
                    }
                    type="datetime-local"
                    value={dingTalkNotificationScheduleAt}
                  />
                  <p className="text-muted-foreground text-xs">
                    到点后由服务器定时作业自动发送到钉钉群。
                  </p>
                </div>
                <div className="rounded-lg border border-dashed p-4 text-muted-foreground text-sm">
                  <p className="font-medium text-foreground">发送说明</p>
                  <p className="mt-2">
                    建议先保存草稿，再根据需要选择立即发送或创建定时通知。
                  </p>
                  <p className="mt-2">
                    定时通知创建后会进入任务列表，可在发送前取消。
                  </p>
                </div>
              </div>
              <div className="flex flex-wrap gap-3">
                <Button
                  disabled={isSavingDingTalkNotificationDraft}
                  onClick={handleSaveDingTalkNotificationDraft}
                  variant="outline"
                >
                  {isSavingDingTalkNotificationDraft ? (
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  ) : (
                    <Save className="mr-2 h-4 w-4" />
                  )}
                  保存通知草稿
                </Button>
                <Button
                  disabled={isSendingDingTalkNotification}
                  onClick={handleSendNotificationToDingTalk}
                >
                  {isSendingDingTalkNotification ? (
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  ) : (
                    <Bell className="mr-2 h-4 w-4" />
                  )}
                  立即发送到钉钉群
                </Button>
                <Button
                  disabled={isSchedulingDingTalkNotification}
                  onClick={handleScheduleDingTalkNotification}
                  variant="secondary"
                >
                  {isSchedulingDingTalkNotification ? (
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  ) : (
                    <Clock className="mr-2 h-4 w-4" />
                  )}
                  创建定时通知
                </Button>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="text-xl">钉钉群机器人通知</CardTitle>
              <CardDescription>
                配置钉钉自定义机器人后，通知中心中的 Markdown
                公告即可直接推送到钉钉群。
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="flex items-center gap-2">
                <Switch
                  checked={dingTalkRobotNotificationConfig.enabled}
                  id="dingtalk-robot-enabled"
                  onCheckedChange={(checked) =>
                    setDingTalkRobotNotificationConfig((current) => ({
                      ...current,
                      enabled: checked,
                    }))
                  }
                />
                <Label htmlFor="dingtalk-robot-enabled">
                  启用钉钉群机器人通知
                </Label>
              </div>
              <div className="space-y-2">
                <Label htmlFor="dingtalk-robot-webhook">Webhook 地址</Label>
                <Input
                  id="dingtalk-robot-webhook"
                  onChange={(e) =>
                    setDingTalkRobotNotificationConfig((current) => ({
                      ...current,
                      webhookUrl: e.target.value,
                    }))
                  }
                  placeholder="https://oapi.dingtalk.com/robot/send?access_token=..."
                  value={dingTalkRobotNotificationConfig.webhookUrl}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="dingtalk-robot-secret">加签密钥（可选）</Label>
                <Input
                  id="dingtalk-robot-secret"
                  onChange={(e) =>
                    setDingTalkRobotNotificationConfig((current) => ({
                      ...current,
                      secret: e.target.value,
                    }))
                  }
                  placeholder="如机器人启用了安全加签，请填写"
                  type="password"
                  value={dingTalkRobotNotificationConfig.secret}
                />
              </div>
              <p className="text-muted-foreground text-xs">
                建议在钉钉群中创建“自定义机器人”，将 Webhook
                与加签密钥配置到这里。通知内容将以 Markdown 消息的形式发送。
              </p>
              <Button
                disabled={isSavingDingTalkRobotNotificationConfig}
                onClick={handleSaveDingTalkRobotNotificationConfig}
              >
                {isSavingDingTalkRobotNotificationConfig ? (
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                ) : (
                  <Save className="mr-2 h-4 w-4" />
                )}
                保存机器人配置
              </Button>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="text-xl">定时通知任务</CardTitle>
              <CardDescription>
                查看最近创建的钉钉通知任务，待发送任务可在触发前取消。
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {(dingTalkNotificationTasksData?.tasks || []).length === 0 ? (
                <div className="rounded-lg border border-dashed px-4 py-8 text-center text-muted-foreground text-sm">
                  暂无定时通知任务，创建后会显示在这里。
                </div>
              ) : (
                (dingTalkNotificationTasksData?.tasks || []).map((task) => (
                  <div
                    className="space-y-3 rounded-lg border p-4"
                    key={task.id}
                  >
                    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                      <div className="space-y-1">
                        <p className="font-medium text-foreground">
                          {task.title}
                        </p>
                        <p className="text-muted-foreground text-xs">
                          计划发送：{formatBeijingTime(task.scheduledAt)}
                        </p>
                        <p className="text-muted-foreground text-xs">
                          创建时间：{formatBeijingTime(task.createdAt)}
                        </p>
                        {task.sentAt ? (
                          <p className="text-muted-foreground text-xs">
                            实际发送：{formatBeijingTime(task.sentAt)}
                          </p>
                        ) : null}
                      </div>
                      <span
                        className={cn(
                          "inline-flex w-fit items-center rounded-full px-2.5 py-1 font-medium text-xs",
                          getDingTalkNotificationTaskStatusClassName(
                            task.status
                          )
                        )}
                      >
                        {formatDingTalkNotificationTaskStatus(task.status)}
                      </span>
                    </div>
                    <div className="rounded-md bg-muted/50 px-3 py-2 text-muted-foreground text-sm">
                      <div className="max-h-28 overflow-hidden whitespace-pre-wrap break-words">
                        {task.content}
                      </div>
                    </div>
                    {task.lastError ? (
                      <p className="text-red-500 text-xs">
                        失败原因：{task.lastError}
                      </p>
                    ) : null}
                    {task.status === "pending" ? (
                      <div className="flex justify-end">
                        <Button
                          disabled={
                            cancellingDingTalkNotificationTaskId === task.id
                          }
                          onClick={() =>
                            handleCancelDingTalkNotificationTask(task.id)
                          }
                          variant="outline"
                        >
                          {cancellingDingTalkNotificationTaskId === task.id ? (
                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                          ) : (
                            <X className="mr-2 h-4 w-4" />
                          )}
                          取消定时
                        </Button>
                      </div>
                    ) : null}
                  </div>
                ))
              )}
            </CardContent>
          </Card>
        </TabsContent>

        {/* AI 模型配置 */}
        <TabsContent className="mt-6 space-y-6" value="ai">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <div>
                <CardTitle>AI 提供商</CardTitle>
                <CardDescription>配置 AI 服务提供商</CardDescription>
              </div>
              <div className="flex items-center gap-2">
                <Button
                  onClick={handleUseBltcyVideoProviderPreset}
                  variant="outline"
                >
                  <Video className="mr-2 h-4 w-4" /> 柏拉图视频
                </Button>
                <Button
                  onClick={handleUseBltcyImageProviderPreset}
                  variant="outline"
                >
                  <ImageIcon className="mr-2 h-4 w-4" /> 柏拉图图片编辑
                </Button>
                <Button
                  onClick={handleUseBltcyBflProviderPreset}
                  variant="outline"
                >
                  <ImageIcon className="mr-2 h-4 w-4" /> 柏拉图BFL异步
                </Button>
                <Button
                  onClick={handleQuickAddFalImageModelsFromToolbar}
                  variant="outline"
                >
                  <ImageIcon className="mr-2 h-4 w-4" /> FAL 图片预设
                </Button>
                <Button
                  onClick={handleUseLemonProviderPreset}
                  variant="outline"
                >
                  <Sparkles className="mr-2 h-4 w-4" /> LemonAPI Gemini
                </Button>
                <Dialog
                  onOpenChange={setShowProviderDialog}
                  open={showProviderDialog}
                >
                  <DialogTrigger asChild>
                    <Button
                      onClick={() => {
                        resetProviderForm();
                        setShowProviderDialog(true);
                      }}
                    >
                      <Plus className="mr-2 h-4 w-4" /> 添加提供商
                    </Button>
                  </DialogTrigger>
                  <DialogContent className="!bg-white dark:!bg-zinc-950">
                    <DialogHeader>
                      <DialogTitle>
                        {editingProvider ? "编辑提供商" : "添加提供商"}
                      </DialogTitle>
                    </DialogHeader>
                    {editingProvider ? null : (
                      <div className="rounded-lg border border-sky-200 bg-sky-50 p-3 text-sky-900 text-sm">
                        <div className="flex flex-wrap items-center justify-between gap-3">
                          <span>
                            要添加 FAL 的 GPT Image 2 Edit，请先创建 FAL
                            图片服务商。
                          </span>
                          <Button
                            className="border-sky-300 bg-white text-sky-900 hover:bg-sky-100"
                            onClick={handleUseFalImageProviderPreset}
                            size="sm"
                            type="button"
                            variant="outline"
                          >
                            快速选择 FAL 图片服务商
                          </Button>
                        </div>
                      </div>
                    )}
                    <div className="space-y-4">
                      <div className="space-y-2">
                        <Label>名称</Label>
                        <Input
                          onChange={(e) =>
                            setProviderForm({
                              ...providerForm,
                              name: e.target.value,
                            })
                          }
                          placeholder="阿里云通义千问"
                          value={providerForm.name}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>类型</Label>
                        <Select
                          onValueChange={(value) =>
                            setProviderForm((prev) => {
                              const previousDefaultBaseUrl =
                                getProviderDefaultBaseUrl(prev.type);
                              const nextDefaultBaseUrl =
                                getProviderDefaultBaseUrl(value);
                              const currentBaseUrl = prev.baseUrl.trim();
                              const shouldAutoReplace =
                                !editingProvider ||
                                !currentBaseUrl ||
                                currentBaseUrl === previousDefaultBaseUrl ||
                                !isHttpUrlLike(currentBaseUrl) ||
                                currentBaseUrl.includes("@");

                              return {
                                ...prev,
                                type: value as any,
                                baseUrl: shouldAutoReplace
                                  ? nextDefaultBaseUrl || currentBaseUrl
                                  : currentBaseUrl,
                              };
                            })
                          }
                          value={providerForm.type}
                        >
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent
                            className="!bg-white max-h-72 overflow-y-auto overscroll-contain dark:!bg-zinc-950"
                            onWheelCapture={(event) => event.stopPropagation()}
                          >
                            {PROVIDER_TYPES.map((type) => (
                              <SelectItem key={type.value} value={type.value}>
                                {type.label}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-2">
                        <Label>API 地址</Label>
                        <Input
                          autoComplete="off"
                          inputMode="url"
                          onChange={(e) =>
                            setProviderForm({
                              ...providerForm,
                              baseUrl: e.target.value,
                            })
                          }
                          placeholder={
                            getProviderDefaultBaseUrl(providerForm.type) ||
                            "https://api.openai.com/v1"
                          }
                          value={providerForm.baseUrl}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>API Key</Label>
                        <div className="relative">
                          <Input
                            autoComplete="new-password"
                            onChange={(e) =>
                              setProviderForm({
                                ...providerForm,
                                apiKey: e.target.value,
                              })
                            }
                            placeholder={
                              editingProvider
                                ? "留空则不修改"
                                : providerForm.type === "runway"
                                  ? "key_ 后跟 128 位十六进制字符"
                                  : providerForm.type === "krea"
                                    ? "Krea API Key"
                                    : "sk-..."
                            }
                            type={showApiKey ? "text" : "password"}
                            value={providerForm.apiKey}
                          />
                          <Button
                            className="-translate-y-1/2 absolute top-1/2 right-2"
                            onClick={() => setShowApiKey(!showApiKey)}
                            size="sm"
                            type="button"
                            variant="ghost"
                          >
                            {showApiKey ? (
                              <EyeOff className="h-4 w-4" />
                            ) : (
                              <Eye className="h-4 w-4" />
                            )}
                          </Button>
                        </div>
                        {providerForm.type === "runway" && (
                          <p className="text-muted-foreground text-xs">
                            Runway Key 必须以 `key_` 开头，后面是 128
                            位十六进制字符。不要粘贴带“Bearer ”、“API
                            Key:”或中文标点的内容。
                          </p>
                        )}
                        {providerForm.type === "krea" && (
                          <p className="text-muted-foreground text-xs">
                            Krea 使用 Bearer Token 认证。保存后会自动添加官方
                            OpenAPI 中的图片、图片增强和视频模型预设。
                          </p>
                        )}
                        {providerForm.type === "bltcy-video" && (
                          <p className="text-muted-foreground text-xs">
                            柏拉图统一视频使用 Bearer Token 认证，走
                            `/v2/videos/generations`
                            异步任务接口。保存后会自动添加当前支持的统一视频模型预设。
                          </p>
                        )}
                        {providerForm.type === "openai-image" &&
                          isBltcyImageBaseUrl(providerForm.baseUrl) && (
                            <p className="text-muted-foreground text-xs">
                              柏拉图 Flux 使用 OpenAI Images 兼容接口和 Bearer
                              Token
                              认证。保存后会自动添加所有同步图片编辑预设模型。
                            </p>
                          )}
                        {providerForm.type === "stepfun-image" && (
                          <p className="text-muted-foreground text-xs">
                            阶跃星辰 Step Image Edit 使用 Bearer Token
                            认证，默认地址 https://api.stepfun.com。模型 ID
                            可填写 step-image-edit-2， 支持文生图和图片编辑。
                          </p>
                        )}
                        {providerForm.type === "snapgen-image" && (
                          <p className="text-muted-foreground text-xs">
                            SnapGen 使用 x-api-key 认证，默认地址
                            https://api.snapgen.ai。保存后会自动添加文档里的全部生图模型预设。
                          </p>
                        )}
                        {providerForm.type === "bananaimage" && (
                          <p className="text-muted-foreground text-xs">
                            BananaImage 使用 Bearer API Key 认证，默认地址
                            https://bananaimage.aigenmedia.art。保存后自动同步 Nano
                            Banana 与 GPT Image 2 全部模型，支持最多 14 张参考图、比例选择和
                            1K/2K/4K 输出。
                          </p>
                        )}
                        {providerForm.type === "visionary" && (
                          <p className="text-muted-foreground text-xs">
                            Visionary 使用 Bearer API Key 认证，默认地址
                            https://api.visionary.beer。保存后自动同步 GPT Image 2
                            与 Nano Banana 全部开放模型，支持最多 9 张参考图、比例选择、
                            质量档位和 1K/2K/4K 输出。
                          </p>
                        )}
                        {providerForm.type === "atlascloud" && (
                          <p className="text-muted-foreground text-xs">
                            Atlas Cloud 使用 Bearer API Key 认证，默认地址
                            https://api.atlascloud.ai。保存后会从官方目录同步全部开放图片与 3D 模型，
                            并按每个模型自己的 Schema 配置多图数量、比例及 1K/2K/4K 档位。
                          </p>
                        )}
                        {providerForm.type === "vip98k" && (
                          <p className="text-muted-foreground text-xs">
                            VIP98K 使用 Bearer API Key 认证，Base URL 只填写
                            https://api.vip98k.com。保存后会自动同步图片、视频、3D、
                            多模态和工具模型。
                          </p>
                        )}
                        {providerForm.type === "bfl-image" &&
                          isBltcyBflBaseUrl(providerForm.baseUrl) && (
                            <p className="text-muted-foreground text-xs">
                              柏拉图 BFL 使用 Bearer Token 认证，通过 /bfl/v1
                              提交异步任务并轮询结果。保存后会自动添加 Kontext
                              异步图片编辑预设模型。
                            </p>
                          )}
                      </div>
                      <div className="flex items-center gap-2">
                        <Switch
                          checked={providerForm.isEnabled}
                          onCheckedChange={(checked) =>
                            setProviderForm({
                              ...providerForm,
                              isEnabled: checked,
                            })
                          }
                        />
                        <Label>启用</Label>
                      </div>
                    </div>
                    <DialogFooter>
                      <Button
                        onClick={() => setShowProviderDialog(false)}
                        variant="outline"
                      >
                        取消
                      </Button>
                      <Button onClick={handleSaveProvider}>保存</Button>
                    </DialogFooter>
                  </DialogContent>
                </Dialog>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {providersData?.providers?.map((provider) => (
                  <div
                    className="flex items-center justify-between rounded-lg border p-4"
                    key={provider.id}
                  >
                    <div className="flex-1">
                      <div className="flex items-center gap-2 font-medium">
                        {provider.name}
                        {!provider.isEnabled && (
                          <span className="rounded bg-gray-200 px-2 py-0.5 text-xs">
                            已禁用
                          </span>
                        )}
                      </div>
                      <div className="text-muted-foreground text-sm">
                        类型:{" "}
                        {
                          PROVIDER_TYPES.find((t) => t.value === provider.type)
                            ?.label
                        }{" "}
                        | API: {provider.baseUrl}
                      </div>
                      {provider.type === "volcano-video" && (
                        <Button
                          className="mt-2"
                          onClick={() =>
                            handleQuickAddVolcanoModels(provider.id)
                          }
                          size="sm"
                          variant="secondary"
                        >
                          <Plus className="mr-1 h-4 w-4" />
                          快速添加预设模型
                        </Button>
                      )}
                      {provider.type === "krea" && (
                        <Button
                          className="mt-2"
                          onClick={() => handleQuickAddKreaModels(provider.id)}
                          size="sm"
                          variant="secondary"
                        >
                          <Sparkles className="mr-1 h-4 w-4" />
                          快速添加 Krea 预设模型
                        </Button>
                      )}
                      {provider.type === "ruxa-image" && (
                        <Button
                          className="mt-2"
                          onClick={() => handleQuickAddRuxaImageModels(provider.id)}
                          size="sm"
                          variant="secondary"
                        >
                          <ImageIcon className="mr-1 h-4 w-4" />
                          快速添加 RUXA 图片预设
                        </Button>
                      )}
                      {provider.type === "fal-image" && (
                        <Button
                          className="mt-2"
                          onClick={() =>
                            handleQuickAddFalImageModels(provider.id)
                          }
                          size="sm"
                          variant="secondary"
                        >
                          <ImageIcon className="mr-1 h-4 w-4" />
                          快速添加 FAL 图片预设
                        </Button>
                      )}
                      {provider.type === "snapgen-image" && (
                        <Button
                          className="mt-2"
                          onClick={() =>
                            handleQuickAddSnapgenImageModels(provider.id)
                          }
                          size="sm"
                          variant="secondary"
                        >
                          <ImageIcon className="mr-1 h-4 w-4" />
                          快速添加 SnapGen 图片预设
                        </Button>
                      )}
                      {provider.type === "bananaimage" && (
                        <Button
                          className="mt-2"
                          onClick={() =>
                            handleQuickAddBananaImageModels(provider.id)
                          }
                          size="sm"
                          variant="secondary"
                        >
                          <ImageIcon className="mr-1 h-4 w-4" />
                          快速添加 BananaImage 图片预设
                        </Button>
                      )}
                      {provider.type === "visionary" && (
                        <Button
                          className="mt-2"
                          onClick={() =>
                            handleQuickAddVisionaryModels(provider.id)
                          }
                          size="sm"
                          variant="secondary"
                        >
                          <ImageIcon className="mr-1 h-4 w-4" />
                          快速添加 Visionary 图片预设
                        </Button>
                      )}
                      {provider.type === "atlascloud" && (
                        <Button
                          className="mt-2"
                          onClick={() => handleQuickAddAtlasCloudModels(provider.id)}
                          size="sm"
                          variant="secondary"
                        >
                          <ImageIcon className="mr-1 h-4 w-4" />
                          同步 Atlas Cloud 模型
                        </Button>
                      )}
                      {provider.type === "vip98k" && (
                        <Button
                          className="mt-2"
                          onClick={() => handleQuickAddVip98kModels(provider.id)}
                          size="sm"
                          variant="secondary"
                        >
                          <Sparkles className="mr-1 h-4 w-4" />
                          同步 VIP98K 全部模型
                        </Button>
                      )}
                      {provider.type === "bltcy-video" && (
                        <Button
                          className="mt-2"
                          onClick={() =>
                            handleQuickAddBltcyVideoModels(provider.id)
                          }
                          size="sm"
                          variant="secondary"
                        >
                          <Video className="mr-1 h-4 w-4" />
                          快速添加视频预设
                        </Button>
                      )}
                      {provider.type === "openai-image" &&
                        isBltcyImageBaseUrl(provider.baseUrl) && (
                          <Button
                            className="mt-2"
                            onClick={() =>
                              handleQuickAddBltcyImageModels(provider.id)
                            }
                            size="sm"
                            variant="secondary"
                          >
                            <ImageIcon className="mr-1 h-4 w-4" />
                            快速添加图片编辑预设
                          </Button>
                        )}
                      {provider.type === "bfl-image" &&
                        isBltcyBflBaseUrl(provider.baseUrl) && (
                          <Button
                            className="mt-2"
                            onClick={() =>
                              handleQuickAddBltcyBflModels(provider.id)
                            }
                            size="sm"
                            variant="secondary"
                          >
                            <ImageIcon className="mr-1 h-4 w-4" />
                            快速添加 BFL 异步预设
                          </Button>
                        )}
                      {provider.type === "openai" &&
                        isLemonApiBaseUrl(provider.baseUrl) && (
                          <Button
                            className="mt-2"
                            onClick={() =>
                              handleQuickAddLemonModels(provider.id)
                            }
                            size="sm"
                            variant="secondary"
                          >
                            <Sparkles className="mr-1 h-4 w-4" />
                            快速添加 Gemini 预设模型
                          </Button>
                        )}
                    </div>
                    <div className="flex items-center gap-2">
                      <Button
                        onClick={() => {
                          setProviderForm({
                            id: provider.id,
                            name: provider.name,
                            type: provider.type,
                            baseUrl: provider.baseUrl,
                            apiKey: "",
                            isEnabled: provider.isEnabled,
                          });
                          setEditingProvider(provider.id);
                          setShowProviderDialog(true);
                        }}
                        size="sm"
                        variant="outline"
                      >
                        <Edit className="h-4 w-4" />
                      </Button>
                      <Button
                        onClick={() => handleDeleteProvider(provider.id)}
                        size="sm"
                        variant="destructive"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <div>
                <CardTitle>AI 模型</CardTitle>
                <CardDescription>配置可用的 AI 模型</CardDescription>
              </div>
              <Dialog onOpenChange={setShowModelDialog} open={showModelDialog}>
                <DialogTrigger asChild>
                  <Button
                    disabled={!providersData?.providers?.length}
                    onClick={() => {
                      resetModelForm();
                      setShowModelDialog(true);
                    }}
                  >
                    <Plus className="mr-2 h-4 w-4" /> 添加模型
                  </Button>
                </DialogTrigger>
                <DialogContent className="!bg-white dark:!bg-zinc-950">
                  <DialogHeader>
                    <DialogTitle>
                      {editingModel ? "编辑模型" : "添加模型"}
                    </DialogTitle>
                  </DialogHeader>
                  <div className="max-h-[70vh] space-y-4 overflow-y-auto">
                    <div className="space-y-2">
                      <Label>所属提供商</Label>
                      <Select
                        onValueChange={(value) =>
                          setModelForm({ ...modelForm, providerId: value })
                        }
                        value={modelForm.providerId}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="选择提供商" />
                        </SelectTrigger>
                        <SelectContent className="!bg-white dark:!bg-zinc-950">
                          {providersData?.providers?.map((p) => (
                            <SelectItem key={p.id} value={p.id}>
                              {p.name}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

                    {/* 🆕 火山引擎视频模型：显示4个模型配置表单 */}
                    {!editingModel &&
                    providersData?.providers?.find(
                      (p) => p.id === modelForm.providerId
                    )?.type === "volcano-video" ? (
                      <div className="space-y-4">
                        <div className="rounded-lg border border-blue-200 bg-blue-50 p-3 text-blue-800 text-sm">
                          <p className="font-medium">
                            📹 火山引擎视频模型批量配置
                          </p>
                          <p className="mt-1 text-xs">
                            将一次性添加以下4个预设模型，您可以修改模型名称和描述
                          </p>
                        </div>

                        {volcanoVideoModels.map((model, index) => (
                          <div
                            className="space-y-3 rounded-lg border p-4"
                            key={index}
                          >
                            <div className="flex items-center justify-between">
                              <h4 className="font-medium text-sm">
                                模型 {index + 1}
                              </h4>
                              <span className="text-muted-foreground text-xs">
                                排序: {(index + 1) * 10}
                              </span>
                            </div>
                            <div className="space-y-2">
                              <Label className="text-xs">模型 ID *</Label>
                              <Input
                                onChange={(e) => {
                                  const newModels = [...volcanoVideoModels];
                                  newModels[index].modelId = e.target.value;
                                  setVolcanoVideoModels(newModels);
                                }}
                                placeholder="例如: doubao-seedance-1-0-pro-250528"
                                value={model.modelId}
                              />
                            </div>
                            <div className="space-y-2">
                              <Label className="text-xs">显示名称 *</Label>
                              <Input
                                onChange={(e) => {
                                  const newModels = [...volcanoVideoModels];
                                  newModels[index].displayName = e.target.value;
                                  setVolcanoVideoModels(newModels);
                                }}
                                placeholder="例如: 豆包 Seedance Pro"
                                value={model.displayName}
                              />
                            </div>
                            <div className="space-y-2">
                              <Label className="text-xs">描述</Label>
                              <Textarea
                                className="resize-none"
                                onChange={(e) => {
                                  const newModels = [...volcanoVideoModels];
                                  newModels[index].description = e.target.value;
                                  setVolcanoVideoModels(newModels);
                                }}
                                placeholder="模型功能描述"
                                rows={2}
                                value={model.description}
                              />
                            </div>
                          </div>
                        ))}
                      </div>
                    ) : (
                      /* 普通模型：单个配置表单 */
                      <>
                        <div className="space-y-2">
                          <Label>模型 ID</Label>
                          <Input
                            onChange={(e) =>
                              setModelForm({
                                ...modelForm,
                                modelId: e.target.value,
                              })
                            }
                            placeholder="例如: qwen-turbo"
                            value={modelForm.modelId}
                          />
                          <p className="text-muted-foreground text-xs">
                            {modelKindHint}
                          </p>
                        </div>
                        <div className="space-y-2">
                          <Label>显示名称</Label>
                          <Input
                            onChange={(e) =>
                              setModelForm({
                                ...modelForm,
                                displayName: e.target.value,
                              })
                            }
                            value={modelForm.displayName}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label>模型头像（400x400）</Label>
                          <div className="flex items-center gap-3">
                            <div className="h-12 w-12 overflow-hidden rounded-full border bg-muted">
                              {modelForm.avatarUrl ? (
                                <img
                                  alt="模型头像预览"
                                  className="h-full w-full object-cover"
                                  src={modelForm.avatarUrl}
                                />
                              ) : (
                                <div className="flex h-full w-full items-center justify-center text-[10px] text-muted-foreground">
                                  400x400
                                </div>
                              )}
                            </div>
                            <div className="flex flex-1 items-center gap-2">
                              <Input
                                onChange={(e) =>
                                  setModelForm({
                                    ...modelForm,
                                    avatarUrl: e.target.value,
                                  })
                                }
                                placeholder="头像 URL（推荐 400x400）"
                                value={modelForm.avatarUrl}
                              />
                              <Button
                                disabled={modelAvatarUploading}
                                onClick={() =>
                                  document
                                    .getElementById("model-avatar-upload")
                                    ?.click()
                                }
                                type="button"
                                variant="outline"
                              >
                                {modelAvatarUploading ? (
                                  <Loader2 className="h-4 w-4 animate-spin" />
                                ) : (
                                  <Upload className="h-4 w-4" />
                                )}
                              </Button>
                              <input
                                accept="image/*"
                                className="hidden"
                                id="model-avatar-upload"
                                onChange={async (event) => {
                                  const file = event.target.files?.[0];
                                  if (file) {
                                    await handleModelAvatarUpload(file);
                                  }
                                  event.target.value = "";
                                }}
                                type="file"
                              />
                            </div>
                          </div>
                          <p className="text-muted-foreground text-xs">
                            上传后会自动裁切并压缩为 400x400 PNG。
                          </p>
                        </div>
                        <div className="space-y-2">
                          <Label>描述</Label>
                          <Textarea
                            onChange={(e) =>
                              setModelForm({
                                ...modelForm,
                                description: e.target.value,
                              })
                            }
                            value={modelForm.description}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label>排序顺序</Label>
                          <Input
                            onChange={(e) =>
                              setModelForm({
                                ...modelForm,
                                sortOrder: Number.parseInt(e.target.value) || 0,
                              })
                            }
                            type="number"
                            value={modelForm.sortOrder}
                          />
                        </div>

                        {/* 🆕 备用模型配置 */}
                        <div className="mt-4 space-y-2 border-t pt-4">
                          <div className="mb-2 flex items-center gap-2">
                            <Label className="font-medium text-sm">
                              备用模型配置
                            </Label>
                            <span className="text-muted-foreground text-xs">
                              （主模型请求失败时自动切换，支持跨服务商）
                            </span>
                          </div>
                          <div className="space-y-2">
                            <Label className="text-muted-foreground text-xs">
                              备用模型 1（优先使用）
                            </Label>
                            <Select
                              onValueChange={(value) =>
                                setModelForm({
                                  ...modelForm,
                                  fallbackModelId1:
                                    value === "__none__" ? "" : value,
                                })
                              }
                              value={modelForm.fallbackModelId1 || "__none__"}
                            >
                              <SelectTrigger>
                                <SelectValue placeholder="选择备用模型" />
                              </SelectTrigger>
                              <SelectContent className="!bg-white dark:!bg-zinc-950">
                                <SelectItem value="__none__">
                                  不设置备用模型
                                </SelectItem>
                                {modelForm.fallbackModelId1 &&
                                !failoverModelOptions.some(
                                  (model) =>
                                    model.id === modelForm.fallbackModelId1
                                ) ? (
                                  <SelectItem
                                    value={modelForm.fallbackModelId1}
                                  >
                                    已配置旧模型引用（
                                    {modelForm.fallbackModelId1}）
                                  </SelectItem>
                                ) : null}
                                {failoverModelOptions.map((model) => (
                                  <SelectItem key={model.id} value={model.id}>
                                    {model.displayName} · {model.providerName} ·{" "}
                                    {model.modelId}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>
                          <div className="space-y-2">
                            <Label className="text-muted-foreground text-xs">
                              备用模型 2（最后备用）
                            </Label>
                            <Select
                              onValueChange={(value) =>
                                setModelForm({
                                  ...modelForm,
                                  fallbackModelId2:
                                    value === "__none__" ? "" : value,
                                })
                              }
                              value={modelForm.fallbackModelId2 || "__none__"}
                            >
                              <SelectTrigger>
                                <SelectValue placeholder="选择备用模型" />
                              </SelectTrigger>
                              <SelectContent className="!bg-white dark:!bg-zinc-950">
                                <SelectItem value="__none__">
                                  不设置备用模型
                                </SelectItem>
                                {modelForm.fallbackModelId2 &&
                                !failoverModelOptions.some(
                                  (model) =>
                                    model.id === modelForm.fallbackModelId2
                                ) ? (
                                  <SelectItem
                                    value={modelForm.fallbackModelId2}
                                  >
                                    已配置旧模型引用（
                                    {modelForm.fallbackModelId2}）
                                  </SelectItem>
                                ) : null}
                                {failoverModelOptions.map((model) => (
                                  <SelectItem key={model.id} value={model.id}>
                                    {model.displayName} · {model.providerName} ·{" "}
                                    {model.modelId}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>
                          <p className="text-muted-foreground text-xs">
                            生图模型会优先按这里选择的备用模型迁移；若仍失败，系统再走自动故障迁移候选池。
                          </p>
                        </div>

                        <div className="flex gap-4">
                          <div className="flex items-center gap-2">
                            <Switch
                              checked={modelForm.supportsVision}
                              onCheckedChange={(checked) =>
                                setModelForm({
                                  ...modelForm,
                                  supportsVision: checked,
                                })
                              }
                            />
                            <Label className="whitespace-nowrap">
                              支持视觉
                            </Label>
                          </div>
                          <div className="flex items-center gap-2">
                            <Switch
                              checked={modelForm.supportsImageGen}
                              onCheckedChange={(checked) =>
                                setModelForm({
                                  ...modelForm,
                                  supportsImageGen: checked,
                                  isDefaultTextEditModel: checked
                                    ? modelForm.isDefaultTextEditModel
                                    : false,
                                })
                              }
                            />
                            <Label className="whitespace-nowrap">
                              支持绘图
                            </Label>
                          </div>
                        </div>
                        <div className="space-y-3">
                          <div className="flex gap-6">
                            <div className="flex items-center gap-2">
                              <Switch
                                checked={modelForm.isEnabled}
                                onCheckedChange={(checked) =>
                                  setModelForm({
                                    ...modelForm,
                                    isEnabled: checked,
                                  })
                                }
                              />
                              <Label className="whitespace-nowrap">启用</Label>
                            </div>
                            <div className="flex items-center gap-2">
                              <Switch
                                checked={modelForm.isDefault}
                                onCheckedChange={(checked) =>
                                  setModelForm({
                                    ...modelForm,
                                    isDefault: checked,
                                  })
                                }
                              />
                              <Label className="whitespace-nowrap">
                                设为默认
                              </Label>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <Switch
                              checked={modelForm.isDefaultTextEditModel}
                              disabled={!modelForm.supportsImageGen}
                              onCheckedChange={(checked) =>
                                setModelForm({
                                  ...modelForm,
                                  isDefaultTextEditModel: checked,
                                })
                              }
                            />
                            <Label
                              className={
                                modelForm.supportsImageGen
                                  ? ""
                                  : "text-muted-foreground"
                              }
                            >
                              默认文字编辑生图模型（无限画布文字编辑使用）
                            </Label>
                          </div>
                          <p className="text-muted-foreground text-xs">
                            建议给可用的火山生图模型开启。未配置时，系统仍会回退到当前可用的火山生图模型。
                          </p>
                          <div className="flex items-center gap-2">
                            <Switch
                              checked={modelForm.isHidden}
                              onCheckedChange={(checked) =>
                                setModelForm({
                                  ...modelForm,
                                  isHidden: checked,
                                })
                              }
                            />
                            <Label>vip模型</Label>
                          </div>
                          <p className="text-muted-foreground text-xs">
                            开启后，该模型不会出现在前端，也不会参与第三方生图
                            API 的选模或返回模型列表。
                          </p>
                        </div>
                        <div className="flex items-center gap-2">
                          <Switch
                            checked={modelForm.isAgentModel}
                            onCheckedChange={(checked) =>
                              setModelForm({
                                ...modelForm,
                                isAgentModel: checked,
                              })
                            }
                          />
                          <Label>
                            Agent 自动模型（前端隐藏，仅后台 Agent 使用）
                          </Label>
                        </div>
                        {modelForm.isAgentModel && (
                          <div className="space-y-2">
                            <Label className="text-sm">
                              编程模型 ID（可选）
                            </Label>
                            <Input
                              onChange={(e) =>
                                setModelForm({
                                  ...modelForm,
                                  agentCodingModelId: e.target.value,
                                })
                              }
                              placeholder="例如: doubao-seed-2-0-code-preview-260215"
                              value={modelForm.agentCodingModelId}
                            />
                            <p className="text-muted-foreground text-xs">
                              Agent 需要结构化规划/编程输出时优先使用该模型
                              ID，留空则使用当前 Agent 模型。
                            </p>
                          </div>
                        )}
                        <div className="flex items-center gap-2">
                          <Switch
                            checked={modelForm.isMultimodal || false}
                            onCheckedChange={(checked) =>
                              setModelForm({
                                ...modelForm,
                                isMultimodal: checked,
                              })
                            }
                          />
                          <Label>
                            多模态模型（Agent 识图与分析使用同一模型）
                          </Label>
                        </div>
                        <div className="space-y-3 rounded-md border p-3">
                          <div className="text-sm font-medium">
                            故障保护策略
                          </div>
                          <div className="flex items-center gap-2">
                            <Switch
                              checked={modelForm.excludeFromFailover || false}
                              onCheckedChange={(checked) =>
                                setModelForm({
                                  ...modelForm,
                                  excludeFromFailover: checked,
                                })
                              }
                            />
                            <Label>
                              不参与故障迁移候选池
                            </Label>
                          </div>
                          <p className="text-xs text-muted-foreground">
                            开启后，该模型不会作为其他模型请求失败时的自动备用模型。
                          </p>
                          <div className="flex items-center gap-2">
                            <Switch
                              checked={modelForm.excludeFromHealthBan || false}
                              onCheckedChange={(checked) =>
                                setModelForm({
                                  ...modelForm,
                                  excludeFromHealthBan: checked,
                                })
                              }
                            />
                            <Label>
                              不参与故障封禁池
                            </Label>
                          </div>
                          <p className="text-xs text-muted-foreground">
                            开启后，健康检查仍会记录故障日志，但不会因为连续失败自动禁用该模型。
                          </p>
                        </div>

                        {/* 🆕 图片生成模型特性配置 */}
                        {(isImageProviderForModelConfig ||
                          isVideoProviderForModelConfig) && (
                          <div className="space-y-4 rounded-lg border bg-muted/30 p-4">
                            <div className="font-medium text-sm">生成配置</div>

                            <div className="grid grid-cols-2 gap-4">
                              <div className="space-y-2">
                                <Label>最大输出图片数</Label>
                                <Input
                                  max={10}
                                  min={1}
                                  onChange={(e) =>
                                    setModelForm({
                                      ...modelForm,
                                      imageGenConfig: {
                                        ...modelForm.imageGenConfig,
                                        maxImages:
                                          Number.parseInt(e.target.value) || 2,
                                      },
                                    })
                                  }
                                  type="number"
                                  value={
                                    modelForm.imageGenConfig?.maxImages || 2
                                  }
                                />
                                <p className="text-muted-foreground text-xs">
                                  Gemini: 1-2, 阿里: 1-6
                                </p>
                              </div>

                              <div className="space-y-2">
                                <Label>每张图片积分消耗</Label>
                                <Input
                                  min={0}
                                  onChange={(e) =>
                                    setModelForm({
                                      ...modelForm,
                                      imageGenConfig: {
                                        ...modelForm.imageGenConfig,
                                        creditCostPerImage: Math.max(
                                          0,
                                          Number.parseInt(e.target.value, 10) ||
                                            0
                                        ),
                                      },
                                    })
                                  }
                                  step={1}
                                  type="number"
                                  value={
                                    modelForm.imageGenConfig
                                      ?.creditCostPerImage ?? 0
                                  }
                                />
                                <p className="text-muted-foreground text-xs">
                                  开启积分系统后，将按“单价 ×
                                  实际出图张数”扣除积分。
                                </p>
                              </div>

                              <div className="space-y-2">
                                <Label>积分折扣（折）</Label>
                                <Input
                                  max={10}
                                  min={0.1}
                                  onChange={(e) => {
                                    const rawValue = String(
                                      e.target.value || ""
                                    ).trim();
                                    const nextRate = rawValue
                                      ? Math.min(
                                          10,
                                          Math.max(
                                            0.1,
                                            Number.parseFloat(rawValue) || 0
                                          )
                                        )
                                      : undefined;
                                    setModelForm({
                                      ...modelForm,
                                      imageGenConfig: {
                                        ...modelForm.imageGenConfig,
                                        creditDiscountRate: nextRate,
                                      },
                                    });
                                  }}
                                  placeholder="留空或 10 表示不打折"
                                  step={0.1}
                                  type="number"
                                  value={
                                    modelForm.imageGenConfig
                                      ?.creditDiscountRate ?? ""
                                  }
                                />
                                <p className="text-muted-foreground text-xs">
                                  例如输入 5 表示 5折，7.5 表示
                                  7.5折；前台模型列表会自动显示折扣标识。
                                </p>
                                {formatImageModelCreditDiscountLabel(
                                  modelForm.imageGenConfig?.creditDiscountRate
                                ) ? (
                                  <p className="text-emerald-600 text-xs">
                                    当前生效：
                                    {formatImageModelCreditDiscountLabel(
                                      modelForm.imageGenConfig
                                        ?.creditDiscountRate
                                    )}
                                    ，图片单价将按{" "}
                                    {getGenerationCreditCostFromImageGenConfig(
                                      modelForm.imageGenConfig,
                                      "image"
                                    )}{" "}
                                    积分结算。
                                  </p>
                                ) : null}
                              </div>

                              <div className="col-span-2 space-y-3 rounded-md border bg-background/70 p-3">
                                <div className="space-y-1">
                                  <div className="font-medium text-sm">
                                    图片尺寸积分倍率
                                  </div>
                                  <p className="text-muted-foreground text-xs">
                                    以“每张图片积分消耗”为基准，按用户选择的
                                    1K/2K/4K 档位乘以倍率后扣费；未配置时默认 1
                                    倍。
                                  </p>
                                </div>
                                <div className="grid grid-cols-3 gap-4">
                                  {IMAGE_PRICING_PREVIEW_SIZES.map(
                                    (sizeKey) => (
                                      <div className="space-y-2" key={sizeKey}>
                                        <Label>{sizeKey} 倍率</Label>
                                        <Input
                                          max={100}
                                          min={0.01}
                                          onChange={(e) => {
                                            const multiplier =
                                              normalizeAdminMultiplier(
                                                e.target.value,
                                                1
                                              );
                                            setModelForm({
                                              ...modelForm,
                                              imageGenConfig: {
                                                ...modelForm.imageGenConfig,
                                                creditCostMultiplierBySize: {
                                                  ...(modelForm.imageGenConfig
                                                    ?.creditCostMultiplierBySize ||
                                                    {}),
                                                  [sizeKey]: multiplier,
                                                },
                                              },
                                            });
                                          }}
                                          step={0.1}
                                          type="number"
                                          value={formatCompactNumber(
                                            getImageSizeCreditMultiplier(
                                              modelForm.imageGenConfig,
                                              sizeKey
                                            )
                                          )}
                                        />
                                        <p className="text-[11px] text-muted-foreground">
                                          实扣{" "}
                                          {getGenerationCreditCostFromImageGenConfig(
                                            modelForm.imageGenConfig,
                                            "image",
                                            { imageSize: sizeKey }
                                          )}{" "}
                                          积分/张
                                        </p>
                                      </div>
                                    )
                                  )}
                                </div>
                              </div>

                              <div className="space-y-2">
                                <Label>每条视频积分消耗</Label>
                                <Input
                                  min={0}
                                  onChange={(e) =>
                                    setModelForm({
                                      ...modelForm,
                                      imageGenConfig: {
                                        ...modelForm.imageGenConfig,
                                        creditCostPerVideo: Math.max(
                                          0,
                                          Number.parseInt(e.target.value, 10) ||
                                            0
                                        ),
                                      },
                                    })
                                  }
                                  step={1}
                                  type="number"
                                  value={
                                    modelForm.imageGenConfig
                                      ?.creditCostPerVideo ?? 0
                                  }
                                />
                                <p className="text-muted-foreground text-xs">
                                  视频生成成功后按每条视频扣除积分。未配置时默认使用“每张图片积分”作为兼容值。
                                </p>
                              </div>

                              {isVideoProviderForModelConfig && (
                                <div className="col-span-2 space-y-4 rounded-lg border border-dashed bg-background/80 p-4">
                                  <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                                    <div className="space-y-1">
                                      <div className="font-medium text-sm">
                                        推荐视频积分规则
                                      </div>
                                      <p className="text-muted-foreground text-xs">
                                        按 5/10/15 秒 = 165/350/600
                                        积分，480p/720p/1080p = 600 × 1/1.5/2
                                        倍计算。
                                      </p>
                                    </div>
                                    <Button
                                      onClick={() => {
                                        setVideoDurationOptionsInput(
                                          "5, 10, 15"
                                        );
                                        setModelForm({
                                          ...modelForm,
                                          imageGenConfig:
                                            applyRecommendedVideoPricing(
                                              modelForm.imageGenConfig
                                            ),
                                        });
                                      }}
                                      size="sm"
                                      type="button"
                                      variant="outline"
                                    >
                                      套用推荐价格
                                    </Button>
                                  </div>

                                  <div className="space-y-3 rounded-lg border bg-muted/20 p-3">
                                    <div className="space-y-1">
                                      <div className="font-medium text-sm">
                                        前台分辨率显示
                                      </div>
                                      <p className="text-muted-foreground text-xs">
                                        关闭某个档位后，前台视频参数条不会再显示该分辨率，服务端也会拒绝该档位。
                                      </p>
                                    </div>
                                    <div className="grid grid-cols-3 gap-4">
                                      {VIDEO_PRICING_PREVIEW_RESOLUTIONS.map(
                                        (resolutionKey) => {
                                          const checked =
                                            modelVideoSupportedResolutions.includes(
                                              resolutionKey
                                            );
                                          return (
                                            <div
                                              className="flex items-center gap-2"
                                              key={`video-resolution-${resolutionKey}`}
                                            >
                                              <Switch
                                                checked={checked}
                                                onCheckedChange={(
                                                  nextChecked
                                                ) => {
                                                  const currentSet = new Set(
                                                    modelVideoSupportedResolutions
                                                  );
                                                  if (nextChecked) {
                                                    currentSet.add(
                                                      resolutionKey
                                                    );
                                                  } else {
                                                    currentSet.delete(
                                                      resolutionKey
                                                    );
                                                  }
                                                  const nextResolutions =
                                                    VIDEO_PRICING_PREVIEW_RESOLUTIONS.filter(
                                                      (item) =>
                                                        currentSet.has(item)
                                                    );
                                                  if (
                                                    nextResolutions.length === 0
                                                  ) {
                                                    toast.error(
                                                      "视频模型至少保留一个可用分辨率"
                                                    );
                                                    return;
                                                  }
                                                  setModelForm({
                                                    ...modelForm,
                                                    capabilities:
                                                      updateAdminVideoSupportedResolutions(
                                                        modelForm.capabilities,
                                                        nextResolutions
                                                      ),
                                                  });
                                                }}
                                              />
                                              <Label className="text-sm">
                                                {resolutionKey}
                                              </Label>
                                            </div>
                                          );
                                        }
                                      )}
                                    </div>
                                  </div>

                                  <div className="space-y-2">
                                    <Label>支持视频秒数</Label>
                                    <Input
                                      inputMode="text"
                                      onChange={(e) => {
                                        const nextInput = e.target.value;
                                        setVideoDurationOptionsInput(nextInput);
                                        const durationOptions =
                                          parseVideoDurationOptionsInput(
                                            nextInput
                                          );
                                        setModelForm({
                                          ...modelForm,
                                          imageGenConfig:
                                            syncVideoDurationPricing(
                                              modelForm.imageGenConfig,
                                              durationOptions
                                            ),
                                        });
                                      }}
                                      placeholder="例如：4, 6, 8 或 5, 10, 15"
                                      type="text"
                                      value={videoDurationOptionsInput}
                                    />
                                    <p className="text-muted-foreground text-xs">
                                      前端会按这里显示可选视频秒数。留空时继续使用服务商默认能力。
                                    </p>
                                  </div>

                                  {configuredVideoDurationOptions.length > 0 ? (
                                    <div className="space-y-3">
                                      <div className="font-medium text-sm">
                                        时长倍率参考积分
                                      </div>
                                      <div className="grid grid-cols-2 gap-4">
                                        {configuredVideoDurationOptions.map(
                                          (duration) => {
                                            const durationKey =
                                              String(duration);
                                            return (
                                              <div
                                                className="space-y-2"
                                                key={durationKey}
                                              >
                                                <Label>
                                                  {duration} 秒参考积分
                                                </Label>
                                                <Input
                                                  min={0}
                                                  onChange={(e) => {
                                                    const nextValue = Math.max(
                                                      0,
                                                      Number.parseInt(
                                                        e.target.value,
                                                        10
                                                      ) || 0
                                                    );
                                                    setModelForm({
                                                      ...modelForm,
                                                      imageGenConfig: {
                                                        ...syncVideoDurationPricing(
                                                          modelForm.imageGenConfig,
                                                          configuredVideoDurationOptions
                                                        ),
                                                        creditCostPerVideoByDuration:
                                                          {
                                                            ...(syncVideoDurationPricing(
                                                              modelForm.imageGenConfig,
                                                              configuredVideoDurationOptions
                                                            )
                                                              .creditCostPerVideoByDuration ||
                                                              {}),
                                                            [durationKey]:
                                                              nextValue,
                                                          },
                                                      },
                                                    });
                                                  }}
                                                  step={1}
                                                  type="number"
                                                  value={
                                                    modelForm.imageGenConfig
                                                      ?.creditCostPerVideoByDuration?.[
                                                      durationKey
                                                    ] ??
                                                    modelForm.imageGenConfig
                                                      ?.creditCostPerVideo ??
                                                    0
                                                  }
                                                />
                                              </div>
                                            );
                                          }
                                        )}
                                      </div>
                                      <p className="text-muted-foreground text-xs">
                                        系统会把最长秒数的参考积分作为 1
                                        倍，其它秒数按比例乘下方分辨率倍率。
                                      </p>
                                    </div>
                                  ) : (
                                    <p className="text-muted-foreground text-xs">
                                      当前还没有配置秒数档位，将按“每条视频积分消耗”统一扣费。
                                    </p>
                                  )}

                                  <div className="space-y-3 border-t pt-4">
                                    <div className="space-y-1">
                                      <div className="font-medium text-sm">
                                        分辨率倍率
                                      </div>
                                      <p className="text-muted-foreground text-xs">
                                        当前按 {videoReferenceDurationCost}{" "}
                                        积分作为 1 倍参考；例如 720p 填 1.5
                                        时，该分辨率基准为{" "}
                                        {formatCompactNumber(
                                          videoReferenceDurationCost * 1.5
                                        )}{" "}
                                        积分。
                                      </p>
                                    </div>
                                    <div className="grid grid-cols-3 gap-4">
                                      {VIDEO_PRICING_PREVIEW_RESOLUTIONS.map(
                                        (resolutionKey) => (
                                          <div
                                            className="space-y-2"
                                            key={resolutionKey}
                                          >
                                            <Label>{resolutionKey} 倍率</Label>
                                            <Input
                                              min={0}
                                              onChange={(e) => {
                                                const multiplier =
                                                  normalizeAdminMultiplier(
                                                    e.target.value,
                                                    DEFAULT_VIDEO_RESOLUTION_MULTIPLIERS[
                                                      resolutionKey
                                                    ]
                                                  );
                                                setModelForm({
                                                  ...modelForm,
                                                  imageGenConfig: {
                                                    ...modelForm.imageGenConfig,
                                                    creditCostPerVideoByResolution:
                                                      {
                                                        ...(modelForm
                                                          .imageGenConfig
                                                          ?.creditCostPerVideoByResolution ||
                                                          {}),
                                                        [resolutionKey]:
                                                          roundCreditCost(
                                                            videoReferenceDurationCost *
                                                              multiplier
                                                          ),
                                                      },
                                                  },
                                                });
                                              }}
                                              step={0.1}
                                              type="number"
                                              value={formatCompactNumber(
                                                getVideoResolutionMultiplier(
                                                  modelForm.imageGenConfig,
                                                  resolutionKey
                                                )
                                              )}
                                            />
                                            <p className="text-[11px] text-muted-foreground">
                                              {videoReferenceDurationCost} ×{" "}
                                              {formatCompactNumber(
                                                getVideoResolutionMultiplier(
                                                  modelForm.imageGenConfig,
                                                  resolutionKey
                                                )
                                              )}{" "}
                                              ={" "}
                                              {roundCreditCost(
                                                videoReferenceDurationCost *
                                                  getVideoResolutionMultiplier(
                                                    modelForm.imageGenConfig,
                                                    resolutionKey
                                                  )
                                              )}{" "}
                                              积分
                                            </p>
                                          </div>
                                        )
                                      )}
                                    </div>
                                    <p className="text-muted-foreground text-xs">
                                      配置后按用户选择的视频分辨率倍率取基准价，再叠加上方秒数比例；未命中再回退到秒数或统一价格。
                                    </p>
                                  </div>

                                  <div className="space-y-3 border-t pt-4">
                                    <div className="space-y-1">
                                      <div className="font-medium text-sm">
                                        实际价格预览
                                      </div>
                                      <p className="text-muted-foreground text-xs">
                                        按当前手动输入值实时计算，保存后前台会按这个矩阵扣积分。
                                      </p>
                                    </div>
                                    <div className="overflow-x-auto rounded-lg border">
                                      <table className="w-full min-w-[520px] text-sm">
                                        <thead className="bg-muted/60">
                                          <tr>
                                            <th className="px-3 py-2 text-left font-medium">
                                              分辨率
                                            </th>
                                            {recommendedVideoDurationOptions.map(
                                              (duration) => (
                                                <th
                                                  className="px-3 py-2 text-left font-medium"
                                                  key={duration}
                                                >
                                                  {duration} 秒
                                                </th>
                                              )
                                            )}
                                          </tr>
                                        </thead>
                                        <tbody>
                                          {VIDEO_PRICING_PREVIEW_RESOLUTIONS.map(
                                            (resolution) => (
                                              <tr
                                                className="border-t"
                                                key={resolution}
                                              >
                                                <td className="px-3 py-2 font-medium">
                                                  {resolution}
                                                </td>
                                                {recommendedVideoDurationOptions.map(
                                                  (duration) => (
                                                    <td
                                                      className="px-3 py-2"
                                                      key={`${resolution}-${duration}`}
                                                    >
                                                      {getVideoCreditCostFromConfig(
                                                        modelForm.imageGenConfig,
                                                        duration,
                                                        resolution
                                                      )}{" "}
                                                      {formatImageModelCreditDiscountLabel(
                                                        modelForm.imageGenConfig
                                                          ?.creditDiscountRate
                                                      )
                                                        ? `→ ${getGenerationCreditCostFromImageGenConfig(
                                                            modelForm.imageGenConfig,
                                                            "video",
                                                            {
                                                              duration,
                                                              resolution,
                                                            }
                                                          )} `
                                                        : ""}
                                                      积分
                                                    </td>
                                                  )
                                                )}
                                              </tr>
                                            )
                                          )}
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </div>
                              )}

                              <div className="space-y-2">
                                <Label>占位图颜色主题</Label>
                                <Select
                                  onValueChange={(value) =>
                                    setModelForm({
                                      ...modelForm,
                                      imageGenConfig: {
                                        ...modelForm.imageGenConfig,
                                        loadingColor: value,
                                      },
                                    })
                                  }
                                  value={
                                    modelForm.imageGenConfig?.loadingColor ||
                                    "purple"
                                  }
                                >
                                  <SelectTrigger>
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="purple">
                                      紫色 (Gemini)
                                    </SelectItem>
                                    <SelectItem value="orange">
                                      橙色 (阿里)
                                    </SelectItem>
                                    <SelectItem value="blue">
                                      蓝色 (火山)
                                    </SelectItem>
                                    <SelectItem value="green">绿色</SelectItem>
                                    <SelectItem value="red">红色</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                            </div>

                            <div className="grid grid-cols-2 gap-4">
                              <div className="flex items-center gap-2">
                                <Switch
                                  checked={
                                    modelForm.imageGenConfig
                                      ?.supportsPromptExtend || false
                                  }
                                  onCheckedChange={(checked) =>
                                    setModelForm({
                                      ...modelForm,
                                      imageGenConfig: {
                                        ...modelForm.imageGenConfig,
                                        supportsPromptExtend: checked,
                                      },
                                    })
                                  }
                                />
                                <Label className="text-sm">
                                  支持提示词优化
                                </Label>
                              </div>

                              <div className="flex items-center gap-2">
                                <Switch
                                  checked={
                                    modelForm.imageGenConfig
                                      ?.supportsNegativePrompt || false
                                  }
                                  onCheckedChange={(checked) =>
                                    setModelForm({
                                      ...modelForm,
                                      imageGenConfig: {
                                        ...modelForm.imageGenConfig,
                                        supportsNegativePrompt: checked,
                                      },
                                    })
                                  }
                                />
                                <Label className="text-sm">
                                  支持反向提示词
                                </Label>
                              </div>

                              <div className="flex items-center gap-2">
                                <Switch
                                  checked={
                                    modelForm.imageGenConfig?.supportsSize ||
                                    false
                                  }
                                  onCheckedChange={(checked) =>
                                    setModelForm({
                                      ...modelForm,
                                      imageGenConfig: {
                                        ...modelForm.imageGenConfig,
                                        supportsSize: checked,
                                      },
                                    })
                                  }
                                />
                                <Label className="text-sm">
                                  支持自定义分辨率
                                </Label>
                              </div>

                              <div className="flex items-center gap-2">
                                <Switch
                                  checked={
                                    modelForm.imageGenConfig
                                      ?.enableLoadingPlaceholder !== false
                                  }
                                  onCheckedChange={(checked) =>
                                    setModelForm({
                                      ...modelForm,
                                      imageGenConfig: {
                                        ...modelForm.imageGenConfig,
                                        enableLoadingPlaceholder: checked,
                                      },
                                    })
                                  }
                                />
                                <Label className="text-sm">
                                  启用加载占位图
                                </Label>
                              </div>
                            </div>

                            {/* 分辨率档位开关 */}
                            <div className="space-y-2 rounded-md border bg-muted/20 p-3">
                              <div className="font-medium text-muted-foreground text-sm">
                                分辨率档位控制
                              </div>
                              <p className="text-muted-foreground text-xs">
                                控制前台用户可选的分辨率档位，关闭后用户将无法选择对应分辨率
                              </p>
                              <div className="mt-2 grid grid-cols-3 gap-4">
                                <div className="flex items-center gap-2">
                                  <Switch
                                    checked={
                                      modelForm.imageGenConfig?.supports1K !==
                                      false
                                    }
                                    onCheckedChange={(checked) =>
                                      setModelForm({
                                        ...modelForm,
                                        imageGenConfig: {
                                          ...modelForm.imageGenConfig,
                                          supports1K: checked,
                                        },
                                      })
                                    }
                                  />
                                  <Label className="text-sm">1K</Label>
                                </div>
                                <div className="flex items-center gap-2">
                                  <Switch
                                    checked={
                                      modelForm.imageGenConfig?.supports2K !==
                                      false
                                    }
                                    onCheckedChange={(checked) =>
                                      setModelForm({
                                        ...modelForm,
                                        imageGenConfig: {
                                          ...modelForm.imageGenConfig,
                                          supports2K: checked,
                                        },
                                      })
                                    }
                                  />
                                  <Label className="text-sm">2K</Label>
                                </div>
                                <div className="flex items-center gap-2">
                                  <Switch
                                    checked={
                                      modelForm.imageGenConfig?.supports4K !==
                                      false
                                    }
                                    onCheckedChange={(checked) =>
                                      setModelForm({
                                        ...modelForm,
                                        imageGenConfig: {
                                          ...modelForm.imageGenConfig,
                                          supports4K: checked,
                                        },
                                      })
                                    }
                                  />
                                  <Label className="text-sm">4K</Label>
                                </div>
                              </div>
                            </div>
                          </div>
                        )}
                      </>
                    )}
                  </div>
                  <DialogFooter>
                    <Button
                      onClick={() => setShowModelDialog(false)}
                      variant="outline"
                    >
                      取消
                    </Button>
                    <Button onClick={handleSaveModel}>保存</Button>
                  </DialogFooter>
                </DialogContent>
              </Dialog>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="rounded-lg border bg-muted/20 p-4">
                  <div className="flex items-center justify-between gap-3">
                    <div>
                      <div className="font-medium text-sm">模型故障日志</div>
                      <p className="text-muted-foreground text-xs">
                        只记录真实模型故障和严重超时；质检不通过不会触发自动禁用。
                      </p>
                    </div>
                    <Button
                      onClick={() => {
                        mutateModels();
                        mutateModelHealth();
                      }}
                      size="sm"
                      type="button"
                      variant="outline"
                    >
                      <RefreshCw className="mr-2 h-4 w-4" />
                      刷新
                    </Button>
                  </div>
                  <div className="mt-3 space-y-2">
                    {recentCriticalModelHealthEvents.length > 0 ? (
                      recentCriticalModelHealthEvents.map((event) => (
                        <div
                          className="rounded-md border bg-background px-3 py-2 text-xs"
                          key={event.id}
                        >
                          <div className="flex flex-wrap items-center gap-2">
                            <span className="font-medium">
                              {event.modelDisplayName ||
                                event.modelRuntimeId ||
                                "未知模型"}
                            </span>
                            <span className="rounded bg-red-100 px-2 py-0.5 text-red-700">
                              {event.eventType}
                            </span>
                            {event.autoDisabled && (
                              <span className="rounded bg-zinc-900 px-2 py-0.5 text-white">
                                已自动禁用
                              </span>
                            )}
                            <span className="text-muted-foreground">
                              连续失败 {event.consecutiveFailures} 次
                            </span>
                            {event.elapsedMs ? (
                              <span className="text-muted-foreground">
                                耗时 {Math.round(event.elapsedMs / 1000)} 秒
                              </span>
                            ) : null}
                            <span className="text-muted-foreground">
                              {formatBeijingTime(event.createdAt, {
                                month: "2-digit",
                                day: "2-digit",
                                hour: "2-digit",
                                minute: "2-digit",
                              })}
                            </span>
                          </div>
                          {event.errorMessage && (
                            <div className="mt-1 line-clamp-2 text-muted-foreground">
                              {event.errorMessage}
                            </div>
                          )}
                        </div>
                      ))
                    ) : (
                      <div className="rounded-md border border-dashed px-3 py-4 text-center text-muted-foreground text-xs">
                        暂无模型故障日志。
                      </div>
                    )}
                  </div>
                </div>
                {modelsData?.models?.map((model) => {
                  const provider = providersData?.providers?.find(
                    (p) => p.id === model.providerId
                  );
                  const isVideoModel = isVideoModelDescriptor({
                    providerType: provider?.type,
                    modelId: model.modelId,
                    capabilities: (model as any).capabilities,
                    supportsImageGen: model.supportsImageGen,
                  });
                  const is3DModel = is3DModelDescriptor({
                    providerType: provider?.type,
                    modelId: model.modelId,
                    capabilities: (model as any).capabilities,
                  });
                  const isImageModel = isImageGenerationModelDescriptor({
                    providerType: provider?.type,
                    modelId: model.modelId,
                    capabilities: (model as any).capabilities,
                    supportsImageGen: model.supportsImageGen,
                  });
                  const healthStatus = model.healthStatus || "healthy";
                  const isObservationPool =
                    healthStatus === "degraded" &&
                    Boolean(model.healthObservationStartedAt);
                  const recoverySuccessStreak = Math.max(
                    0,
                    Number(model.healthRecoverySuccessStreak || 0)
                  );
                  const autoDisableCooldownUntil = model.healthAutoDisabledAt
                    ? new Date(
                        new Date(model.healthAutoDisabledAt).getTime() +
                          2 * 60 * 60 * 1000
                      )
                    : null;
                  const modelHealthEvents =
                    modelHealthEventsByModelId.get(model.id) || [];
                  const latestHealthEvent = modelHealthEvents[0];
                  return (
                    <div
                      className="flex items-center justify-between rounded-lg border p-4"
                      key={model.id}
                    >
                      <div className="flex flex-1 items-center gap-3">
                        <div className="h-10 w-10 overflow-hidden rounded-full border bg-muted">
                          {model.avatarUrl ? (
                            <img
                              alt={model.displayName}
                              className="h-full w-full object-cover"
                              src={model.avatarUrl}
                            />
                          ) : (
                            <div className="flex h-full w-full items-center justify-center text-muted-foreground text-xs">
                              无图
                            </div>
                          )}
                        </div>
                        <div className="min-w-0">
                          <div className="flex items-center gap-2 font-medium">
                            <span className="truncate">
                              {model.displayName}
                            </span>
                            {model.isDefault && (
                              <span className="rounded bg-blue-100 px-2 py-0.5 text-blue-800 text-xs">
                                默认
                              </span>
                            )}
                            {model.isDefaultTextEditModel && (
                              <span className="rounded bg-fuchsia-100 px-2 py-0.5 text-fuchsia-800 text-xs">
                                文字编辑默认
                              </span>
                            )}
                            {model.isAgentModel && (
                              <span className="rounded bg-violet-100 px-2 py-0.5 text-violet-800 text-xs">
                                Agent
                              </span>
                            )}
                            {is3DModel && (
                              <span className="rounded bg-amber-100 px-2 py-0.5 text-amber-800 text-xs">
                                3D模型
                              </span>
                            )}
                            {isImageModel && (
                              <span className="rounded bg-sky-100 px-2 py-0.5 text-sky-800 text-xs">
                                图片模型
                              </span>
                            )}
                            {isVideoModel && (
                              <span className="rounded bg-red-100 px-2 py-0.5 text-red-800 text-xs">
                                视频模型
                              </span>
                            )}
                            {!is3DModel && !isImageModel && !isVideoModel && (
                              <span className="rounded bg-slate-100 px-2 py-0.5 text-slate-700 text-xs">
                                对话模型
                              </span>
                            )}
                            {model.isMultimodal && (
                              <span className="rounded bg-emerald-100 px-2 py-0.5 text-emerald-800 text-xs">
                                多模态
                              </span>
                            )}
                            {model.isHidden && (
                              <span className="rounded bg-amber-100 px-2 py-0.5 text-amber-800 text-xs">
                                前台隐藏
                              </span>
                            )}
                            {(model as any).excludeFromFailover && (
                              <span className="rounded bg-rose-100 px-2 py-0.5 text-rose-700 text-xs">
                                不参与故障迁移
                              </span>
                            )}
                            {(model as any).excludeFromHealthBan && (
                              <span className="rounded bg-stone-100 px-2 py-0.5 text-stone-700 text-xs">
                                不参与封禁池
                              </span>
                            )}
                            {healthStatus === "auto_disabled" && (
                              <span className="rounded bg-red-100 px-2 py-0.5 text-red-700 text-xs">
                                系统自动禁用
                              </span>
                            )}
                            {healthStatus === "degraded" && (
                              <span className="rounded bg-orange-100 px-2 py-0.5 text-orange-700 text-xs">
                                {isObservationPool
                                  ? `观察池 ${recoverySuccessStreak}/3`
                                  : "健康观察中"}
                              </span>
                            )}
                          </div>
                          <div className="truncate text-muted-foreground text-sm">
                            ID: {model.modelId} | 提供商:{" "}
                            {provider?.name ?? "未知"}
                          </div>
                          {(healthStatus !== "healthy" ||
                            latestHealthEvent) && (
                            <div className="mt-1 space-y-1 text-muted-foreground text-xs">
                              <div className="flex flex-wrap items-center gap-2">
                                <span>
                                  连续故障：
                                  {model.healthConsecutiveFailures || 0} 次
                                </span>
                                {model.healthLastEventType && (
                                  <span>类型：{model.healthLastEventType}</span>
                                )}
                                {model.healthAutoDisabledAt && (
                                  <span>
                                    禁用时间：
                                    {formatBeijingTime(
                                      model.healthAutoDisabledAt,
                                      {
                                        month: "2-digit",
                                        day: "2-digit",
                                        hour: "2-digit",
                                        minute: "2-digit",
                                      }
                                    )}
                                  </span>
                                )}
                                {healthStatus === "auto_disabled" &&
                                  autoDisableCooldownUntil && (
                                    <span>
                                      解冻时间：
                                      {formatBeijingTime(
                                        autoDisableCooldownUntil,
                                        {
                                          month: "2-digit",
                                          day: "2-digit",
                                          hour: "2-digit",
                                          minute: "2-digit",
                                        }
                                      )}
                                    </span>
                                  )}
                                {isObservationPool && (
                                  <span>
                                    观察成功：{recoverySuccessStreak}/3
                                  </span>
                                )}
                                {isObservationPool &&
                                  model.healthObservationStartedAt && (
                                    <span>
                                      观察开始：
                                      {formatBeijingTime(
                                        model.healthObservationStartedAt,
                                        {
                                          month: "2-digit",
                                          day: "2-digit",
                                          hour: "2-digit",
                                          minute: "2-digit",
                                        }
                                      )}
                                    </span>
                                  )}
                              </div>
                              {(model.healthLastError ||
                                latestHealthEvent?.errorMessage) && (
                                <div className="line-clamp-2 max-w-[760px]">
                                  最近原因：
                                  {model.healthLastError ||
                                    latestHealthEvent?.errorMessage}
                                </div>
                              )}
                            </div>
                          )}
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        {healthStatus === "auto_disabled" && (
                          <Button
                            onClick={() => handleRestoreModelHealth(model)}
                            size="sm"
                            variant="outline"
                          >
                            恢复
                          </Button>
                        )}
                        <Button
                          onClick={() => {
                            setModelForm({
                              id: model.id,
                              providerId: model.providerId,
                              modelId: model.modelId,
                              displayName: model.displayName,
                              avatarUrl: (model as any).avatarUrl || "",
                              description: model.description || "",
                              supportsVision: model.supportsVision,
                              supportsImageGen: model.supportsImageGen,
                              isEnabled: model.isEnabled,
                              isHidden: model.isHidden || false,
                              isDefault: model.isDefault,
                              isDefaultTextEditModel:
                                model.isDefaultTextEditModel || false,
                              isAgentModel: model.isAgentModel || false,
                              agentCodingModelId:
                                model.agentCodingModelId || "",
                              isMultimodal: model.isMultimodal || false,
                              sortOrder: model.sortOrder || 0,
                              fallbackModelId1:
                                (model as any).fallbackModelId1 || "",
                              fallbackModelId2:
                                (model as any).fallbackModelId2 || "",
                              excludeFromFailover:
                                (model as any).excludeFromFailover || false,
                              excludeFromHealthBan:
                                (model as any).excludeFromHealthBan || false,
                              capabilities:
                                (model as any).capabilities &&
                                typeof (model as any).capabilities ===
                                  "object" &&
                                !Array.isArray((model as any).capabilities)
                                  ? (model as any).capabilities
                                  : {},
                              imageGenConfig: {
                                ...createDefaultImageGenConfig(),
                                ...((model as any).imageGenConfig || {}),
                                creditCostMultiplierBySize: {
                                  ...createDefaultImageGenConfig()
                                    .creditCostMultiplierBySize,
                                  ...((model as any).imageGenConfig
                                    ?.creditCostMultiplierBySize || {}),
                                },
                              },
                            });
                            setVideoDurationOptionsInput(
                              formatVideoDurationOptionsInput(
                                (model as any).imageGenConfig
                                  ?.videoDurationOptions
                              )
                            );
                            setEditingModel(model.id);
                            setShowModelDialog(true);
                          }}
                          size="sm"
                          variant="outline"
                        >
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button
                          onClick={() => handleDeleteModel(model.id)}
                          size="sm"
                          variant="destructive"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  );
                })}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* 存储配置 */}
        <TabsContent className="mt-6 space-y-6" value="storage">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <div>
                <CardTitle>存储配置</CardTitle>
                <CardDescription>
                  配置 S3 兼容对象存储、阿里云 OSS 或七牛云 Kodo
                </CardDescription>
              </div>
              <Dialog
                onOpenChange={setShowStorageDialog}
                open={showStorageDialog}
              >
                <DialogTrigger asChild>
                  <Button
                    onClick={() => {
                      resetStorageForm();
                      setShowStorageDialog(true);
                    }}
                  >
                    <Plus className="mr-2 h-4 w-4" /> 添加配置
                  </Button>
                </DialogTrigger>
                <DialogContent className="!bg-white dark:!bg-zinc-950">
                  <DialogHeader>
                    <DialogTitle>
                      {editingStorage ? "编辑配置" : "添加配置"}
                    </DialogTitle>
                  </DialogHeader>
                  <div className="max-h-96 space-y-4 overflow-y-auto">
                    <div className="space-y-2">
                      <Label>配置名称</Label>
                      <Input
                        onChange={(e) =>
                          setStorageForm({
                            ...storageForm,
                            name: e.target.value,
                          })
                        }
                        value={storageForm.name}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>类型</Label>
                      <Select
                        onValueChange={(value) =>
                          setStorageForm({ ...storageForm, type: value as any })
                        }
                        value={storageForm.type}
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent className="!bg-white dark:!bg-zinc-950">
                          <SelectItem value="s3">S3 兼容</SelectItem>
                          <SelectItem value="aliyun-oss">阿里云 OSS</SelectItem>
                          <SelectItem value="qiniu-kodo">七牛云 Kodo</SelectItem>
                          <SelectItem value="local">本地存储</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    {(storageForm.type === "s3" ||
                      storageForm.type === "aliyun-oss" ||
                      storageForm.type === "qiniu-kodo") && (
                      <>
                        {storageForm.type === "aliyun-oss" && (
                          <div className="mb-4 rounded-md border border-blue-100 bg-blue-50 p-3 text-blue-700 text-xs">
                            <p className="mb-1 font-semibold">
                              阿里云 OSS 配置说明：
                            </p>
                            <p>
                              • Endpoint
                              示例：https://oss-cn-shanghai.aliyuncs.com
                            </p>
                            <p>• 请确保 AccessKey 拥有对应 Bucket 的读写权限</p>
                          </div>
                        )}
                        {storageForm.type === "qiniu-kodo" && (
                          <div className="mb-4 rounded-md border border-emerald-100 bg-emerald-50 p-3 text-emerald-700 text-xs">
                            <p className="mb-1 font-semibold">
                              七牛云 Kodo 配置说明：
                            </p>
                            <p>
                              • Endpoint 填写七牛 S3 兼容访问端点，例如：https://s3.cn-east-1.qiniucs.com
                            </p>
                            <p>
                              • Region 填写七牛 S3 Region ID，例如：cn-east-1
                            </p>
                            <p>
                              • Public URL 必填公开访问域名，例如：https://img.example.com
                            </p>
                          </div>
                        )}
                        <div className="space-y-2">
                          <Label>
                            {storageForm.type === "qiniu-kodo"
                              ? "七牛 S3 Endpoint"
                              : "端点 (Endpoint)"}
                          </Label>
                          <Input
                            onChange={(e) =>
                              setStorageForm({
                                ...storageForm,
                                endpoint: e.target.value,
                              })
                            }
                            value={storageForm.endpoint}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label>Bucket</Label>
                          <Input
                            onChange={(e) =>
                              setStorageForm({
                                ...storageForm,
                                bucket: e.target.value,
                              })
                            }
                            value={storageForm.bucket}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label>
                            {storageForm.type === "qiniu-kodo"
                              ? "AccessKey"
                              : "Access Key"}
                          </Label>
                          <Input
                            onChange={(e) =>
                              setStorageForm({
                                ...storageForm,
                                accessKeyId: e.target.value,
                              })
                            }
                            placeholder={editingStorage ? "留空则不修改" : ""}
                            value={storageForm.accessKeyId}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label>
                            {storageForm.type === "qiniu-kodo"
                              ? "SecretKey"
                              : "Secret Key"}
                          </Label>
                          <Input
                            onChange={(e) =>
                              setStorageForm({
                                ...storageForm,
                                secretAccessKey: e.target.value,
                              })
                            }
                            placeholder={editingStorage ? "留空则不修改" : ""}
                            type="password"
                            value={storageForm.secretAccessKey}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label>
                            {storageForm.type === "qiniu-kodo"
                              ? "Region ID"
                              : "Region"}
                          </Label>
                          <Input
                            onChange={(e) =>
                              setStorageForm({
                                ...storageForm,
                                region: e.target.value,
                              })
                            }
                            value={storageForm.region}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label>
                            {storageForm.type === "qiniu-kodo"
                              ? "公开访问域名 (Public URL)"
                              : "Public URL"}
                          </Label>
                          <Input
                            onChange={(e) =>
                              setStorageForm({
                                ...storageForm,
                                publicUrl: e.target.value,
                              })
                            }
                            value={storageForm.publicUrl}
                          />
                        </div>
                      </>
                    )}
                    <div className="flex gap-4">
                      <div className="flex items-center gap-2">
                        <Switch
                          checked={storageForm.isEnabled}
                          onCheckedChange={(checked) =>
                            setStorageForm({
                              ...storageForm,
                              isEnabled: checked,
                            })
                          }
                        />
                        <Label>启用</Label>
                      </div>
                      <div className="flex items-center gap-2">
                        <Switch
                          checked={storageForm.isDefault}
                          onCheckedChange={(checked) =>
                            setStorageForm({
                              ...storageForm,
                              isDefault: checked,
                            })
                          }
                        />
                        <Label>默认</Label>
                      </div>
                    </div>
                  </div>
                  <DialogFooter>
                    <Button
                      onClick={() => setShowStorageDialog(false)}
                      variant="outline"
                    >
                      取消
                    </Button>
                    <Button onClick={handleSaveStorage}>保存</Button>
                  </DialogFooter>
                </DialogContent>
              </Dialog>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {storageData?.configs?.map((config) => (
                  <div
                    className="flex items-center justify-between rounded-lg border p-4"
                    key={config.id}
                  >
                    <div className="flex-1">
                      <div className="flex items-center gap-2 font-medium">
                        {config.name}
                        {config.isDefault && (
                          <span className="rounded bg-blue-100 px-2 py-0.5 text-blue-800 text-xs">
                            默认
                          </span>
                        )}
                        {!config.isEnabled && (
                          <span className="rounded bg-gray-200 px-2 py-0.5 text-xs">
                            已禁用
                          </span>
                        )}
                      </div>
                      <div className="text-muted-foreground text-sm">
                        {config.type === "s3"
                          ? (config.endpoint?.includes("aliyuncs.com")
                              ? "阿里云 OSS"
                              : "S3") + ` | Bucket: ${config.bucket}`
                          : config.type === "qiniu-kodo"
                            ? `七牛云 Kodo | Bucket: ${config.bucket}`
                            : "本地存储"}
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <Button
                        onClick={() => {
                          setStorageForm({
                            id: config.id,
                            name: config.name,
                            type:
                              config.type === "qiniu-kodo"
                                ? "qiniu-kodo"
                                : config.type === "s3" &&
                                    config.endpoint?.includes("aliyuncs.com")
                                  ? "aliyun-oss"
                                  : (config.type as any),
                            endpoint: config.endpoint || "",
                            region: config.region || "",
                            bucket: config.bucket || "",
                            accessKeyId: "",
                            secretAccessKey: "",
                            publicUrl: config.publicUrl || "",
                            isDefault: config.isDefault,
                            isEnabled: config.isEnabled,
                          });
                          setEditingStorage(config.id);
                          setShowStorageDialog(true);
                        }}
                        size="sm"
                        variant="outline"
                      >
                        <Edit className="h-4 w-4" />
                      </Button>
                      <Button
                        onClick={() => handleDeleteStorage(config.id)}
                        size="sm"
                        variant="destructive"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>存储故障迁移</CardTitle>
              <CardDescription>
                主存储桶上传失败时，自动切换到备用 MinIO/S3/阿里云
                OSS/七牛云 Kodo 等对象存储桶。
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between rounded-lg border p-4">
                <div className="space-y-1">
                  <Label className="font-medium text-sm">
                    启用备用桶故障迁移
                  </Label>
                  <p className="text-muted-foreground text-xs">
                    建议仅在主桶不稳定时开启，避免无效重试。
                  </p>
                </div>
                <Switch
                  checked={siteSettings.storageFailoverConfig.enabled}
                  onCheckedChange={(checked) =>
                    setSiteSettings((prev) => ({
                      ...prev,
                      storageFailoverConfig: {
                        ...prev.storageFailoverConfig,
                        enabled: checked,
                      },
                    }))
                  }
                />
              </div>

              <div className="space-y-2">
                <Label>备用存储配置</Label>
                <Select
                  onValueChange={(value) =>
                    setSiteSettings((prev) => ({
                      ...prev,
                      storageFailoverConfig: {
                        ...prev.storageFailoverConfig,
                        backupStorageConfigId: value === "none" ? "" : value,
                      },
                    }))
                  }
                  value={
                    siteSettings.storageFailoverConfig.backupStorageConfigId ||
                    "none"
                  }
                >
                  <SelectTrigger>
                    <SelectValue placeholder="选择备用 S3/MinIO/阿里云 OSS 配置" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="none">不使用备用配置</SelectItem>
                    {(storageData?.configs || [])
                      .filter(
                        (config) => config.type === "s3" && config.isEnabled
                      )
                      .map((config) => (
                        <SelectItem key={config.id} value={config.id}>
                          {config.name}
                          {config.isDefault ? "（当前默认）" : ""}
                        </SelectItem>
                      ))}
                  </SelectContent>
                </Select>
                <p className="text-muted-foreground text-xs">
                  仅可选择已启用的 S3 兼容配置（如阿里云 OSS、MinIO
                  等）作为备用桶。
                </p>
              </div>

              {siteSettings.storageFailoverConfig.enabled &&
                siteSettings.storageFailoverConfig.backupStorageConfigId &&
                (storageData?.configs || []).some(
                  (config) =>
                    config.id ===
                      siteSettings.storageFailoverConfig
                        .backupStorageConfigId && config.isDefault
                ) && (
                  <div className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-amber-700 text-xs">
                    备用桶不能与默认桶相同，请选择另一条存储配置。
                  </div>
                )}

              <div className="flex justify-end">
                <Button onClick={handleSaveSiteSettings}>
                  保存故障迁移设置
                </Button>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>阿里云 OSS 自动转存</CardTitle>
              <CardDescription>
                若已配置阿里云 OSS，上传优先进入
                OSS；到期后自动转存到目标默认桶并替换数据库 URL。
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between rounded-lg border p-4">
                <div className="space-y-1">
                  <Label className="font-medium text-sm">
                    启用 OSS 自动转存
                  </Label>
                  <p className="text-muted-foreground text-xs">
                    开启后执行“先 OSS、后迁移、再清理”的生命周期策略（不依赖
                    CDN）。
                  </p>
                </div>
                <Switch
                  checked={siteSettings.ossImageMigrationConfig.enabled}
                  onCheckedChange={(checked) =>
                    setSiteSettings((prev) => ({
                      ...prev,
                      ossImageMigrationConfig: {
                        ...prev.ossImageMigrationConfig,
                        enabled: checked,
                      },
                    }))
                  }
                />
              </div>

              <div className="flex items-center justify-between rounded-lg border p-4">
                <div className="space-y-1">
                  <Label className="font-medium text-sm">
                    默认使用阿里云 OSS 入口桶
                  </Label>
                  <p className="text-muted-foreground text-xs">
                    关闭后新上传图片直接走当前默认存储，不再优先进入阿里云 OSS。
                  </p>
                  <p className="text-muted-foreground text-xs">
                    该开关只影响新图上传入口，不影响下方的转存时间、清理时间、单次批量任务设置。
                  </p>
                </div>
                <Switch
                  checked={
                    siteSettings.ossImageMigrationConfig.preferAliyunForUploads
                  }
                  onCheckedChange={(checked) =>
                    setSiteSettings((prev) => ({
                      ...prev,
                      ossImageMigrationConfig: {
                        ...prev.ossImageMigrationConfig,
                        preferAliyunForUploads: checked,
                      },
                    }))
                  }
                />
              </div>

              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label>OSS 源桶（可选指定）</Label>
                  <Select
                    onValueChange={(value) =>
                      setSiteSettings((prev) => ({
                        ...prev,
                        ossImageMigrationConfig: {
                          ...prev.ossImageMigrationConfig,
                          sourceStorageConfigId: value === "auto" ? "" : value,
                        },
                      }))
                    }
                    value={
                      siteSettings.ossImageMigrationConfig
                        .sourceStorageConfigId || "auto"
                    }
                  >
                    <SelectTrigger
                      disabled={
                        !siteSettings.ossImageMigrationConfig
                          .preferAliyunForUploads
                      }
                    >
                      <SelectValue placeholder="自动选择阿里云 OSS（默认优先）" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="auto">自动选择阿里云 OSS</SelectItem>
                      {(storageData?.configs || [])
                        .filter(
                          (config) =>
                            config.type === "s3" &&
                            config.isEnabled &&
                            config.endpoint?.includes("aliyuncs.com")
                        )
                        .map((config) => (
                          <SelectItem key={config.id} value={config.id}>
                            {config.name}
                            {config.isDefault ? "（默认）" : ""}
                          </SelectItem>
                        ))}
                    </SelectContent>
                  </Select>
                  {siteSettings.ossImageMigrationConfig
                    .preferAliyunForUploads ? null : (
                    <p className="text-muted-foreground text-xs">
                      已关闭默认走阿里云 OSS，当前源桶选择不会用于新上传图片。
                    </p>
                  )}
                </div>

                <div className="space-y-2">
                  <Label>目标转存桶（可选指定）</Label>
                  <Select
                    onValueChange={(value) =>
                      setSiteSettings((prev) => ({
                        ...prev,
                        ossImageMigrationConfig: {
                          ...prev.ossImageMigrationConfig,
                          targetStorageConfigId:
                            value === "default" ? "" : value,
                        },
                      }))
                    }
                    value={
                      siteSettings.ossImageMigrationConfig
                        .targetStorageConfigId || "default"
                    }
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="默认存储桶（建议非阿里云）" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="default">
                        使用当前默认存储桶
                      </SelectItem>
                      {(storageData?.configs || [])
                        .filter(
                          (config) => config.type === "s3" && config.isEnabled
                        )
                        .map((config) => (
                          <SelectItem key={config.id} value={config.id}>
                            {config.name}
                            {config.endpoint?.includes("aliyuncs.com")
                              ? "（阿里云 OSS，不建议）"
                              : ""}
                            {config.isDefault ? "（默认）" : ""}
                          </SelectItem>
                        ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="grid gap-4 md:grid-cols-3">
                <div className="space-y-2">
                  <Label>转存时间（小时）</Label>
                  <Input
                    max={720}
                    min={1}
                    onChange={(e) =>
                      setSiteSettings((prev) => ({
                        ...prev,
                        ossImageMigrationConfig: {
                          ...prev.ossImageMigrationConfig,
                          migrateAfterHours: Math.max(
                            1,
                            Math.min(720, Number(e.target.value) || 48)
                          ),
                        },
                      }))
                    }
                    type="number"
                    value={
                      siteSettings.ossImageMigrationConfig.migrateAfterHours
                    }
                  />
                </div>
                <div className="space-y-2">
                  <Label>清理时间（小时）</Label>
                  <Input
                    max={1440}
                    min={2}
                    onChange={(e) =>
                      setSiteSettings((prev) => ({
                        ...prev,
                        ossImageMigrationConfig: {
                          ...prev.ossImageMigrationConfig,
                          cleanupAfterHours: Math.max(
                            2,
                            Math.min(1440, Number(e.target.value) || 72)
                          ),
                        },
                      }))
                    }
                    type="number"
                    value={
                      siteSettings.ossImageMigrationConfig.cleanupAfterHours
                    }
                  />
                </div>
                <div className="space-y-2">
                  <Label>单次批量任务</Label>
                  <Input
                    max={100}
                    min={1}
                    onChange={(e) =>
                      setSiteSettings((prev) => ({
                        ...prev,
                        ossImageMigrationConfig: {
                          ...prev.ossImageMigrationConfig,
                          batchSize: Math.max(
                            1,
                            Math.min(100, Number(e.target.value) || 20)
                          ),
                        },
                      }))
                    }
                    type="number"
                    value={siteSettings.ossImageMigrationConfig.batchSize}
                  />
                </div>
              </div>

              <div className="rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-blue-700 text-xs">
                推荐值：转存 48 小时，清理 72 小时。并配置定时调用
                <code className="mx-1">/api/jobs/migrate-oss-images</code>
                执行迁移任务。
              </div>

              <div className="flex justify-end">
                <Button onClick={handleSaveSiteSettings}>
                  保存 OSS 自动转存设置
                </Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* 本地AI设置 */}
        <TabsContent className="mt-6 space-y-6" value="rmbg">
          <LocalAiCommandCenter
            isSectionExpanded={isLocalAiSectionExpanded}
            modelCount={modelsData?.models?.length || 0}
            onFocusSection={focusLocalAiSection}
            onSetAllExpanded={setAllLocalAiSectionsExpanded}
            openSectionCount={openLocalAiSectionCount}
            overviewItems={localAiOverviewItems}
            providerCount={providersData?.providers?.length || 0}
            quickLinks={localAiQuickLinks}
          />

          <LocalAiPlanningSections
            handleSaveMoonshotDetailAgentConfig={
              handleSaveMoonshotDetailAgentConfig
            }
            handleSaveProductPlanningAiModelConfig={
              handleSaveProductPlanningAiModelConfig
            }
            handleSaveProductPlanningApiConfig={
              handleSaveProductPlanningApiConfig
            }
            isLocalAiSectionExpanded={isLocalAiSectionExpanded}
            moonshotDetailAgentConfig={moonshotDetailAgentConfig}
            productPlanningAiModelConfig={productPlanningAiModelConfig}
            productPlanningApiConfig={productPlanningApiConfig}
            setMoonshotDetailAgentConfig={setMoonshotDetailAgentConfig}
            setProductPlanningAiModelConfig={setProductPlanningAiModelConfig}
            setProductPlanningApiConfig={setProductPlanningApiConfig}
            setSiteSettings={
              setSiteSettings as LocalAiPlanningSectionsProps["setSiteSettings"]
            }
            siteSettings={siteSettings}
            toggleLocalAiSection={toggleLocalAiSection}
          />

          <LocalAiModel3dSections
            enabledTripoProviderCount={enabledTripoProviderCount}
            enabledWorldlabsProviderCount={enabledWorldlabsProviderCount}
            filteredTripoProviders={filteredTripoProviders}
            filteredWorldlabsProviders={filteredWorldlabsProviders}
            getProviderDefaultBaseUrl={getProviderDefaultBaseUrl}
            handleAddThreeDModelAliasEntry={handleAddThreeDModelAliasEntry}
            handleAddTripo3dPoolKey={handleAddTripo3dPoolKey}
            handleAddWorldlabs3dPoolKey={handleAddWorldlabs3dPoolKey}
            handleDeleteProvider={handleDeleteProvider}
            handleEditTripoPoolProvider={handleEditTripoPoolProvider}
            handleEditWorldlabsPoolProvider={handleEditWorldlabsPoolProvider}
            handleImportWorldlabs3dPoolKeys={handleImportWorldlabs3dPoolKeys}
            handleRemoveThreeDModelAliasEntry={
              handleRemoveThreeDModelAliasEntry
            }
            handleResetThreeDModelAliasConfig={
              handleResetThreeDModelAliasConfig
            }
            handleSaveKittycadCadConfig={handleSaveKittycadCadConfig}
            handleSaveThreeDModelAliasConfig={handleSaveThreeDModelAliasConfig}
            handleSaveTripo3dConfig={handleSaveTripo3dConfig}
            handleSaveWorldlabs3dConfig={handleSaveWorldlabs3dConfig}
            handleTestKittycadCadConfig={handleTestKittycadCadConfig}
            handleThreeDModelAliasEntryChange={
              handleThreeDModelAliasEntryChange
            }
            handleToggleTripoPoolProvider={handleToggleTripoPoolProvider}
            handleToggleWorldlabsPoolProvider={
              handleToggleWorldlabsPoolProvider
            }
            isLocalAiSectionExpanded={isLocalAiSectionExpanded}
            isTestingKittycadCad={isTestingKittycadCad}
            kittycadCadConfig={kittycadCadConfig}
            setKittycadCadConfig={setKittycadCadConfig}
            setThreeDModelAliasConfig={setThreeDModelAliasConfig}
            setTripo3dConfig={setTripo3dConfig}
            setTripoProviderSearch={setTripoProviderSearch}
            setWorldlabs3dConfig={setWorldlabs3dConfig}
            setWorldlabsApiKeysDraft={setWorldlabsApiKeysDraft}
            setWorldlabsKeyPoolConfig={setWorldlabsKeyPoolConfig}
            setWorldlabsProviderSearch={setWorldlabsProviderSearch}
            threeDModelAliasConfig={threeDModelAliasConfig}
            toggleLocalAiSection={toggleLocalAiSection}
            tripo3dConfig={tripo3dConfig}
            tripoProviderBusyId={tripoProviderBusyId}
            tripoProviderSearch={tripoProviderSearch}
            tripoProviders={tripoProviders}
            worldlabs3dConfig={worldlabs3dConfig}
            worldlabsApiKeysDraft={worldlabsApiKeysDraft}
            worldlabsKeyPoolConfig={worldlabsKeyPoolConfig}
            worldlabsProviderBusyId={worldlabsProviderBusyId}
            worldlabsProviderSearch={worldlabsProviderSearch}
            worldlabsProviders={worldlabsProviders}
          />

          <LocalAiGroupHeading
            description="管理对外生图 API、访问 Key 和调用日志，避免和内部模型供应商配置混在一起。"
            eyebrow="Open API"
            title="外部开放能力"
          />

          <ExternalImageApiSettingsCard
            expanded={isLocalAiSectionExpanded("external-image-api")}
            onToggle={() => toggleLocalAiSection("external-image-api")}
          />

          <LocalAiImagePipelineSections
            angleEditConfig={angleEditConfig}
            aiWashConfig={aiWashConfig}
            aiWashModeIconUploading={aiWashModeIconUploading}
            canvasLocalEditConfig={canvasLocalEditConfig}
            draftEnhanceProKeyRows={draftEnhanceProKeyRows}
            draggingEnhanceProPresetId={draggingEnhanceProPresetId}
            enhanceConfig={enhanceConfig}
            enhanceProApiKeysDraft={enhanceProApiKeysDraft}
            enhanceProApiKeysDraftCount={enhanceProApiKeysDraftCount}
            enhanceProConfig={enhanceProConfig}
            enhanceProPresetEditorMode={enhanceProPresetEditorMode}
            extendConfig={extendConfig}
            getEnhanceProPresetSummary={getEnhanceProPresetSummary}
            handleAddEnhanceProPoolKey={handleAddEnhanceProPoolKey}
            handleAddEnhanceProPreset={handleAddEnhanceProPreset}
            handleAiWashModeIconUpload={handleAiWashModeIconUpload}
            handleDeleteEnhanceProPoolKey={handleDeleteEnhanceProPoolKey}
            handleEnhanceProPresetDragEnd={handleEnhanceProPresetDragEnd}
            handleEnhanceProPresetDragStart={handleEnhanceProPresetDragStart}
            handleEnhanceProPresetDrop={handleEnhanceProPresetDrop}
            handleMoveEnhanceProPreset={handleMoveEnhanceProPreset}
            handleResetEnhanceProPresets={handleResetEnhanceProPresets}
            handleSaveAngleEditConfig={handleSaveAngleEditConfig}
            handleSaveAiWashConfig={handleSaveAiWashConfig}
            handleSaveCanvasLocalEditConfig={handleSaveCanvasLocalEditConfig}
            handleSaveEnhanceConfig={handleSaveEnhanceConfig}
            handleSaveEnhanceProConfig={handleSaveEnhanceProConfig}
            handleSaveExtendConfig={handleSaveExtendConfig}
            handleSaveLayerSplitConfig={handleSaveLayerSplitConfig}
            handleSaveRmbgConfig={handleSaveRmbgConfig}
            handleSaveWatermarkRemoveConfig={handleSaveWatermarkRemoveConfig}
            handleToggleEnhanceProModelVisible={
              handleToggleEnhanceProModelVisible
            }
            isLocalAiSectionExpanded={isLocalAiSectionExpanded}
            layerSplitConfig={layerSplitConfig}
            modelsData={modelsData}
            pointsSystemConfig={pointsSystemConfig}
            renderEnhanceProPresetEditor={renderEnhanceProPresetEditor}
            rmbgConfig={rmbgConfig}
            savedEnhanceProKeyRows={savedEnhanceProKeyRows}
            selectedEnhanceProPreset={selectedEnhanceProPreset}
            selectedEnhanceProPresetId={selectedEnhanceProPresetId}
            selectedEnhanceProPresetIndex={selectedEnhanceProPresetIndex}
            setAngleEditConfig={setAngleEditConfig}
            setAiWashConfig={setAiWashConfig}
            setCanvasLocalEditConfig={setCanvasLocalEditConfig}
            setEnhanceConfig={setEnhanceConfig}
            setEnhanceProApiKeysDraft={setEnhanceProApiKeysDraft}
            setEnhanceProConfig={setEnhanceProConfig}
            setEnhanceProPresetEditorMode={setEnhanceProPresetEditorMode}
            setExtendConfig={setExtendConfig}
            setLayerSplitConfig={setLayerSplitConfig}
            setRmbgConfig={setRmbgConfig}
            setSelectedEnhanceProPresetId={setSelectedEnhanceProPresetId}
            setWatermarkRemoveConfig={setWatermarkRemoveConfig}
            toggleLocalAiSection={toggleLocalAiSection}
            updatePointsCostField={updatePointsCostField}
            watermarkRemoveConfig={watermarkRemoveConfig}
          />

          <LocalAiRuntimeSections
            canvasImageTaskQueueConfig={canvasImageTaskQueueConfig}
            DEFAULT_BFL_BASE_URL={DEFAULT_BFL_BASE_URL}
            DEFAULT_BFL_REALTIME_MODEL={DEFAULT_BFL_REALTIME_MODEL}
            handleSaveCanvasImageTaskQueueConfig={
              handleSaveCanvasImageTaskQueueConfig
            }
            handleSaveRealtimeCanvasConfig={handleSaveRealtimeCanvasConfig}
            handleSaveSceneFusionConfig={handleSaveSceneFusionConfig}
            handleSaveThirdPartySqlServerConfig={
              handleSaveThirdPartySqlServerConfig
            }
            handleTestThirdPartySqlServerConfig={
              handleTestThirdPartySqlServerConfig
            }
            hasThirdPartySqlServerConfiguredValue={
              hasThirdPartySqlServerConfiguredValue
            }
            isLocalAiSectionExpanded={isLocalAiSectionExpanded}
            isTestingThirdPartySqlServer={isTestingThirdPartySqlServer}
            isThirdPartySqlServerFieldsVisible={
              isThirdPartySqlServerFieldsVisible
            }
            modelsData={modelsData}
            providersData={providersData}
            realtimeCanvasConfig={realtimeCanvasConfig}
            sceneFusionConfig={sceneFusionConfig}
            setCanvasImageTaskQueueConfig={setCanvasImageTaskQueueConfig}
            setIsThirdPartySqlServerFieldsVisible={
              setIsThirdPartySqlServerFieldsVisible
            }
            setRealtimeCanvasConfig={setRealtimeCanvasConfig}
            setSceneFusionConfig={setSceneFusionConfig}
            setThirdPartySqlServerConfig={setThirdPartySqlServerConfig}
            thirdPartySqlServerConfig={thirdPartySqlServerConfig}
            toggleLocalAiSection={toggleLocalAiSection}
          />
        </TabsContent>
      </Tabs>

      {/* 批量设置出图限额对话框 */}
      <Dialog
        onOpenChange={setShowBatchLimitDialog}
        open={showBatchLimitDialog}
      >
        <DialogContent className="!bg-white dark:!bg-zinc-950 sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>批量设置出图限额</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 pt-4">
            {/* 设置类型选择 */}
            <div className="space-y-2">
              <Label>设置范围</Label>
              <Select
                onValueChange={(
                  value: "all" | "department" | "no_department"
                ) => {
                  setBatchLimitType(value);
                  setBatchLimitDepartment("");
                }}
                value={batchLimitType}
              >
                <SelectTrigger>
                  <SelectValue placeholder="选择设置范围" />
                </SelectTrigger>
                <SelectContent className="!bg-white dark:!bg-zinc-950">
                  <SelectItem value="all">所有用户</SelectItem>
                  <SelectItem value="department">按部门设置</SelectItem>
                  <SelectItem value="no_department">无部门用户</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* 部门选择（仅在按部门设置时显示） */}
            {batchLimitType === "department" && (
              <div className="space-y-2">
                <Label>选择部门</Label>
                <Select
                  onValueChange={setBatchLimitDepartment}
                  value={batchLimitDepartment}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="选择部门" />
                  </SelectTrigger>
                  <SelectContent className="!bg-white max-h-60 overflow-y-auto dark:!bg-zinc-950">
                    {departmentsData?.departments?.map((dept) => (
                      <SelectItem key={dept} value={dept}>
                        {dept}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                {departmentsData?.departments?.length === 0 && (
                  <p className="text-muted-foreground text-sm">
                    暂无部门数据，请先同步钉钉用户
                  </p>
                )}
              </div>
            )}

            {/* 限额输入 */}
            <div className="space-y-2">
              <Label>月度出图限额</Label>
              <div className="flex items-center gap-2">
                <Input
                  className="flex-1"
                  min="0"
                  onChange={(e) => setBatchLimitValue(e.target.value)}
                  placeholder="留空表示无限制"
                  type="number"
                  value={batchLimitValue}
                />
                <span className="text-muted-foreground text-sm">张/月</span>
              </div>
              <p className="text-muted-foreground text-xs">
                设置为空或0表示无限制
              </p>
            </div>

            {/* 预览信息 */}
            <div className="rounded-md bg-muted p-3 text-sm">
              <p className="mb-1 font-medium">即将执行：</p>
              <p className="text-muted-foreground">
                {batchLimitType === "all" && "将为所有用户设置出图限额"}
                {batchLimitType === "department" &&
                  batchLimitDepartment &&
                  `将为部门「${batchLimitDepartment}」的用户设置出图限额`}
                {batchLimitType === "department" &&
                  !batchLimitDepartment &&
                  "请先选择部门"}
                {batchLimitType === "no_department" &&
                  "将为所有无部门用户设置出图限额"}
                {" → "}
                {batchLimitValue ? `${batchLimitValue} 张/月` : "无限制"}
              </p>
            </div>
          </div>
          <DialogFooter className="mt-4">
            <Button
              onClick={() => setShowBatchLimitDialog(false)}
              variant="outline"
            >
              取消
            </Button>
            <Button
              disabled={
                batchLimitType === "department" && !batchLimitDepartment
              }
              onClick={handleBatchSetLimit}
            >
              确认设置
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}