"use client";

import { ArrowLeft, Clock3, Download, Loader2, LogOut, Sparkles, Upload } from "lucide-react";
import { signOut, useSession } from "next-auth/react";
import {
  type CSSProperties,
  type KeyboardEvent as ReactKeyboardEvent,
  type PointerEvent as ReactPointerEvent,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import useSWR from "swr";
import { toast } from "sonner";
import { BrandTopBar, BrandTopBarButton } from "@/components/layout/brand-top-bar";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
} from "@/components/ui/select";
import { imageGenerationService } from "@/services/canvas";
import { downloadCanvasImageAsPng } from "@/lib/client/canvas-image-download";
import { cn, fetcher } from "@/lib/utils";
import type {
  PublicStyleProCategory,
  PublicStyleProCustomField,
  PublicStyleProConfig,
  StyleProCustomInputMap,
  StyleProGenerationMode,
  StyleProHistoryItem,
  StyleProPersistedState,
  StyleProSelectionMap,
} from "@/lib/style-pro/config";

type BrandingSettings = {
  siteName?: string;
  siteLogo?: string | null;
  siteLogoDark?: string | null;
};

type StyleProConfigResponse = {
  success: boolean;
  config?: PublicStyleProConfig;
  error?: string;
};

type StyleProModelOption = {
  id: string;
  modelId: string;
  displayName: string;
  avatarUrl?: string | null;
  providerName: string;
  providerType: string;
  isDefault: boolean;
  unitCost: number;
  creditDiscountLabel?: string | null;
  availabilityStatus?: "available" | "maintenance" | "testing";
  availabilityLabel?: string | null;
  selectable?: boolean;
  disabledReason?: string | null;
};

type StyleProModelsResponse = {
  success: boolean;
  defaultModelId?: string | null;
  realisticUnitCost?: number | null;
  models?: StyleProModelOption[];
  error?: string;
};

type StyleProMembershipSummaryResponse = {
  currentPlan?: {
    name?: string;
    monthlyCredits?: number;
    dailyFreeCredits?: number;
  };
  summary?: {
    currentCredits?: number;
    dailyFreeCredits?: number;
  };
};

type StyleProAccountCenterResponse = {
  profile?: {
    name?: string;
    email?: string;
    currentPlanName?: string;
    availablePoints?: number;
    monthlyCredits?: number;
    dailyFreeCredits?: number;
  };
};

type StyleProGenerateResponse = {
  success: boolean;
  error?: string;
  taskId?: string;
  status?: string;
  queueStatus?: {
    status?: "pending" | "running" | "succeeded" | "failed";
    queuePosition?: number;
    sameModelPendingCount?: number;
    sameModelRunningCount?: number;
    concurrencyLimit?: number;
    estimatedWaitMs?: number;
    source?: "model_queue" | "batch_queue";
  };
  task?: {
    id: string;
    status: "pending" | "running" | "succeeded" | "failed";
    attempts: number;
    error?: string | null;
    createdAt?: string | Date | null;
    startedAt?: string | Date | null;
    completedAt?: string | Date | null;
    queueStatus?: StyleProGenerateResponse["queueStatus"];
    result?: {
      imageUrl: string;
      thumbnailUrl?: string;
      model?: string;
      modelRef?: string;
      gallerySavedImageCount?: number;
      gallerySaveError?: string;
      generationMode?: StyleProGenerationMode;
      chargedPoints?: number;
      selections: StyleProSelectionMap;
      customInputs?: StyleProCustomInputMap;
      optionLabels: string[];
    } | null;
  };
};

type StyleProWorkspaceProps = {
  canvasId: string;
  initialSourceImageUrl?: string | null;
  persistedState?: StyleProPersistedState | null;
  onAddToCanvas?: (item: StyleProHistoryItem) => void | Promise<void>;
  onBack?: () => void;
  onPersistState?: (state: StyleProPersistedState) => void | Promise<void>;
};

const STYLE_PRO_HISTORY_LIMIT = 4;
const STYLE_PRO_TASK_POLL_INTERVAL_MS = 1600;
const STYLE_PRO_TASK_TIMEOUT_MS = 10 * 60 * 1000;

type StyleProTaskState = {
  taskId: string;
  status: "pending" | "running" | "succeeded" | "failed";
  queueStatus?: StyleProGenerateResponse["queueStatus"];
  error?: string | null;
  generationMode: StyleProGenerationMode;
};

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

function createStyleProRequestId() {
  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
    return crypto.randomUUID();
  }
  return undefined;
}

function loadImageDimensions(url: string) {
  return new Promise<{ width?: number; height?: number }>((resolve) => {
    if (typeof window === "undefined" || !url) {
      resolve({});
      return;
    }
    const image = new window.Image();
    image.onload = () => {
      resolve({
        width: image.naturalWidth || undefined,
        height: image.naturalHeight || undefined,
      });
    };
    image.onerror = () => resolve({});
    image.src = url;
  });
}

function sleep(ms: number) {
  return new Promise((resolve) => window.setTimeout(resolve, ms));
}

function normalizeHistory(history: StyleProHistoryItem[] | undefined) {
  return Array.isArray(history)
    ? history.slice(0, STYLE_PRO_HISTORY_LIMIT)
    : [];
}

function getLocalStyleProStateKey(canvasId: string) {
  return `style-pro-state:${canvasId || "draft"}`;
}

function readLocalStyleProState(
  canvasId: string
): StyleProPersistedState | null {
  if (typeof window === "undefined") return null;
  try {
    const raw = window.localStorage.getItem(getLocalStyleProStateKey(canvasId));
    if (!raw) return null;
    const parsed = JSON.parse(raw) as StyleProPersistedState;
    return {
      sourceImageUrl:
        typeof parsed.sourceImageUrl === "string"
          ? parsed.sourceImageUrl
          : undefined,
      history: normalizeHistory(
        Array.isArray(parsed.history)
          ? parsed.history.filter(
              (item) =>
                item &&
                typeof item.sourceImageUrl === "string" &&
                typeof item.resultImageUrl === "string"
            )
          : []
      ),
    };
  } catch {
    return null;
  }
}

function writeLocalStyleProState(
  canvasId: string,
  state: StyleProPersistedState
) {
  if (typeof window === "undefined") return;
  try {
    window.localStorage.setItem(
      getLocalStyleProStateKey(canvasId),
      JSON.stringify({
        sourceImageUrl: state.sourceImageUrl,
        history: normalizeHistory(state.history),
      })
    );
  } catch {
    // Local persistence is a safety net; server persistence remains authoritative.
  }
}

function mergeStyleProHistory(
  ...historyGroups: Array<StyleProHistoryItem[] | undefined>
) {
  const byKey = new Map<string, StyleProHistoryItem>();
  for (const history of historyGroups) {
    for (const item of history || []) {
      if (!item?.sourceImageUrl || !item?.resultImageUrl) continue;
      const key = item.id || `${item.sourceImageUrl}::${item.resultImageUrl}`;
      if (!byKey.has(key)) {
        byKey.set(key, item);
      }
    }
  }
  return Array.from(byKey.values())
    .sort((left, right) => {
      const leftTime = Date.parse(left.createdAt || "") || 0;
      const rightTime = Date.parse(right.createdAt || "") || 0;
      return rightTime - leftTime;
    })
    .slice(0, STYLE_PRO_HISTORY_LIMIT);
}

function mergeStyleProState(
  ...states: Array<StyleProPersistedState | null | undefined>
): StyleProPersistedState {
  return {
    sourceImageUrl:
      states.find((state) => String(state?.sourceImageUrl || "").trim())
        ?.sourceImageUrl || undefined,
    history: mergeStyleProHistory(...states.map((state) => state?.history)),
  };
}

function cloneCustomInputs(
  inputs?: StyleProCustomInputMap | null
): StyleProCustomInputMap {
  return {
    global: { ...(inputs?.global || {}) },
    categories: Object.fromEntries(
      Object.entries(inputs?.categories || {}).map(([categoryId, values]) => [
        categoryId,
        { ...(values || {}) },
      ])
    ),
  };
}

function buildDefaultCustomInputs(
  config?: PublicStyleProConfig | null,
  current?: StyleProCustomInputMap | null
): StyleProCustomInputMap {
  const next = cloneCustomInputs(current);
  for (const field of config?.customFields || []) {
    if (next.global?.[field.id] === undefined && field.defaultValue) {
      next.global![field.id] = field.defaultValue;
    }
  }
  for (const category of config?.categories || []) {
    for (const field of category.customFields || []) {
      if (!field.defaultValue) continue;
      next.categories![category.id] = next.categories![category.id] || {};
      if (next.categories![category.id][field.id] === undefined) {
        next.categories![category.id][field.id] = field.defaultValue;
      }
    }
  }
  return next;
}

function hasCustomFields(config?: PublicStyleProConfig | null) {
  return Boolean(
    (config?.customFields || []).length ||
      (config?.categories || []).some((category) => category.customFields?.length)
  );
}

function getCustomFieldColorValue(value?: string | null) {
  const trimmed = String(value || "").trim();
  const shortHex = trimmed.match(/^#([0-9a-fA-F]{3})$/);
  if (/^#[0-9a-fA-F]{6}$/.test(trimmed)) {
    return trimmed;
  }
  if (shortHex) {
    return `#${shortHex[1]
      .split("")
      .map((char) => `${char}${char}`)
      .join("")}`;
  }
  return "#ffffff";
}

function StyleProCustomFieldInput({
  field,
  onChange,
  value,
}: {
  field: PublicStyleProCustomField;
  onChange: (value: string) => void;
  value?: string;
}) {
  const inputValue = value || "";
  const label = (
    <label
      className="mb-1.5 block text-[12px] font-semibold text-black/62"
      htmlFor={`style-pro-custom-${field.id}`}
    >
      {field.label}
      {field.required ? <span className="ml-0.5 text-red-500">*</span> : null}
    </label>
  );

  if (field.type === "color") {
    return (
      <div className="min-w-[230px] flex-1">
        {label}
        <div className="flex h-10 items-center gap-2 rounded-[14px] border border-black/10 bg-white px-2 shadow-sm">
          <input
            aria-label={`${field.label}颜色`}
            className="h-7 w-8 shrink-0 cursor-pointer rounded-md border-0 bg-transparent p-0"
            onChange={(event) => onChange(event.target.value)}
            type="color"
            value={getCustomFieldColorValue(inputValue || field.defaultValue)}
          />
          <input
            className="min-w-0 flex-1 bg-transparent font-mono text-[13px] font-semibold text-black/72 outline-none"
            id={`style-pro-custom-${field.id}`}
            maxLength={7}
            onChange={(event) => onChange(event.target.value)}
            placeholder={field.placeholder || "#FFFFFF"}
            value={inputValue}
          />
        </div>
        {field.description ? (
          <div className="mt-1 text-[11px] text-black/40">{field.description}</div>
        ) : null}
      </div>
    );
  }

  if (field.type === "textarea") {
    return (
      <div className="min-w-[260px] flex-1 md:col-span-2">
        {label}
        <textarea
          className="min-h-[76px] w-full resize-y rounded-[14px] border border-black/10 bg-white px-3 py-2 text-[13px] text-black/72 shadow-sm outline-none transition placeholder:text-black/35 focus:border-black/25"
          id={`style-pro-custom-${field.id}`}
          maxLength={field.maxLength || 800}
          onChange={(event) => onChange(event.target.value)}
          placeholder={field.placeholder || "请输入自定义要求..."}
          value={inputValue}
        />
        {field.description ? (
          <div className="mt-1 text-[11px] text-black/40">{field.description}</div>
        ) : null}
      </div>
    );
  }

  return (
    <div className="min-w-[230px] flex-1">
      {label}
      <input
        className="h-10 w-full rounded-[14px] border border-black/10 bg-white px-3 text-[13px] text-black/72 shadow-sm outline-none transition placeholder:text-black/35 focus:border-black/25"
        id={`style-pro-custom-${field.id}`}
        maxLength={field.maxLength || 160}
        onChange={(event) => onChange(event.target.value)}
        placeholder={field.placeholder || "请输入自定义要求..."}
        value={inputValue}
      />
      {field.description ? (
        <div className="mt-1 text-[11px] text-black/40">{field.description}</div>
      ) : null}
    </div>
  );
}

function getStyleProUserInitials(name?: string | null, email?: string | null) {
  const source = String(name || email || "mu").trim();
  return (source || "mu").slice(0, 2).toLowerCase();
}

function formatStyleProCredits(value?: number | null) {
  const numeric = Number(value ?? 0);
  if (!Number.isFinite(numeric)) return "0";
  return Math.max(0, Math.round(numeric)).toLocaleString("zh-CN");
}

function formatStyleProHistoryDateTime(value?: string | null) {
  const date = new Date(value || "");
  if (Number.isNaN(date.getTime())) return "时间未知";
  const dateText = date
    .toLocaleDateString("zh-CN", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
    })
    .replace(/\//g, "-");
  const timeText = date.toLocaleTimeString("zh-CN", {
    hour: "2-digit",
    minute: "2-digit",
  });
  return `${dateText} ${timeText}`;
}

function buildStyleProDownloadName(item: StyleProHistoryItem) {
  const mode =
    item.generationMode === "realistic" ? "style-pro-realistic" : "style-pro";
  const createdAt = item.createdAt
    ? item.createdAt.replace(/[T:.]/g, "-").slice(0, 19)
    : String(Date.now());
  return `${mode}-${createdAt}`;
}

function formatStyleProEstimatedWait(estimatedWaitMs?: number | null) {
  const numeric = Number(estimatedWaitMs || 0);
  if (!Number.isFinite(numeric) || numeric <= 0) {
    return "预计即将开始";
  }
  const seconds = Math.max(1, Math.round(numeric / 1000));
  if (seconds < 60) {
    return `预计 ${seconds} 秒`;
  }
  const minutes = Math.floor(seconds / 60);
  const remainSeconds = seconds % 60;
  return remainSeconds > 0
    ? `预计 ${minutes} 分 ${remainSeconds} 秒`
    : `预计 ${minutes} 分钟`;
}

function StyleProAccountActions() {
  const { data: session, status } = useSession();
  const [accountCenterOpen, setAccountCenterOpen] = useState(false);
  const isAuthenticated = status === "authenticated" && Boolean(session?.user);
  const { data: membershipData } = useSWR<StyleProMembershipSummaryResponse>(
    isAuthenticated ? "/api/user/membership-summary" : null,
    fetcher
  );
  const { data: accountCenterData, isLoading: accountCenterLoading } =
    useSWR<StyleProAccountCenterResponse>(
      isAuthenticated && accountCenterOpen ? "/api/user/account-center" : null,
      fetcher
    );

  const accountProfile = useMemo(() => {
    const profile = accountCenterData?.profile;
    return {
      name: profile?.name || session?.user?.name || "用户",
      email: profile?.email || session?.user?.email || "",
      planName:
        profile?.currentPlanName || membershipData?.currentPlan?.name || "Free",
      availablePoints:
        profile?.availablePoints ??
        membershipData?.summary?.currentCredits ??
        0,
      monthlyCredits:
        profile?.monthlyCredits ??
        membershipData?.currentPlan?.monthlyCredits ??
        0,
      dailyFreeCredits:
        profile?.dailyFreeCredits ??
        membershipData?.summary?.dailyFreeCredits ??
        membershipData?.currentPlan?.dailyFreeCredits ??
        0,
    };
  }, [
    accountCenterData?.profile,
    membershipData?.currentPlan?.dailyFreeCredits,
    membershipData?.currentPlan?.monthlyCredits,
    membershipData?.currentPlan?.name,
    membershipData?.summary?.currentCredits,
    membershipData?.summary?.dailyFreeCredits,
    session?.user?.email,
    session?.user?.name,
  ]);

  const userInitials = getStyleProUserInitials(
    session?.user?.name,
    session?.user?.email
  );

  const openLogin = useCallback(() => {
    if (typeof window === "undefined") {
      return;
    }
    const callbackUrl = `${window.location.pathname}${window.location.search}`;
    window.location.href = `/login?callbackUrl=${encodeURIComponent(callbackUrl)}`;
  }, []);

  const handleLogout = useCallback(async () => {
    try {
      await fetch("/api/auth/logout", { method: "POST" });
      await signOut({ callbackUrl: "/login", redirect: false });
    } finally {
      window.location.replace("/login");
    }
  }, []);

  if (status === "loading") {
    return (
      <div className="h-8 w-[96px] animate-pulse rounded-[14px] bg-black/8 dark:bg-white/8" />
    );
  }

  if (!isAuthenticated) {
    return (
      <button
        className="inline-flex h-8 items-center justify-center rounded-full border border-black/15 bg-white px-3 text-xs font-medium text-black/80 transition hover:bg-black/5 dark:border-white/12 dark:bg-[#161618] dark:text-white/80 dark:hover:bg-white/8"
        onClick={openLogin}
        type="button"
      >
        登录
      </button>
    );
  }

  return (
    <>
      <button
        aria-label="个人中心"
        className="inline-flex h-8 items-center gap-2 rounded-[14px] border border-black/10 bg-white px-2.5 text-[12px] font-medium text-black/72 shadow-sm transition hover:bg-black/5 hover:text-black dark:border-white/10 dark:bg-white/6 dark:text-white/72 dark:hover:bg-white/10 dark:hover:text-white"
        onClick={() => setAccountCenterOpen(true)}
        type="button"
      >
        <span className="flex h-6 w-6 items-center justify-center rounded-full bg-[#d4551f] text-[11px] font-semibold text-white">
          {userInitials}
        </span>
        <span className="hidden sm:inline">个人中心</span>
      </button>

      <Dialog open={accountCenterOpen} onOpenChange={setAccountCenterOpen}>
        <DialogContent className="w-[92vw] max-w-[520px] rounded-[22px] border-black/10 bg-[#f6f6f7]/95 p-0 shadow-2xl dark:border-white/10 dark:bg-[#101014]/95 dark:text-white">
          <DialogHeader className="sr-only">
            <DialogTitle>个人中心</DialogTitle>
          </DialogHeader>
          <div className="p-4">
            <div className="rounded-[18px] border border-black/10 bg-white p-4 dark:border-white/10 dark:bg-[#17171b]">
              <div className="flex items-center gap-3">
                <div className="flex h-11 w-11 items-center justify-center rounded-full bg-[#d4551f] text-[14px] font-semibold text-white">
                  {userInitials}
                </div>
                <div className="min-w-0 flex-1">
                  <div className="truncate text-[15px] font-semibold text-black dark:text-white">
                    {accountProfile.name}
                  </div>
                  <div className="truncate text-[12px] text-black/45 dark:text-white/45">
                    {accountProfile.email || "登录后查看账户邮箱"}
                  </div>
                </div>
                <Button
                  className="h-8 rounded-xl border-black/10 bg-white px-3 text-[12px] text-black/75 hover:bg-black/5 dark:border-white/12 dark:bg-[#111115] dark:text-white/75 dark:hover:bg-white/6"
                  onClick={() => {
                    void handleLogout();
                  }}
                  variant="outline"
                >
                  <LogOut className="mr-1.5 h-3.5 w-3.5" />
                  退出
                </Button>
              </div>
            </div>

            <div className="mt-3 grid grid-cols-2 gap-3">
              <div className="rounded-[16px] border border-black/10 bg-white p-3 dark:border-white/10 dark:bg-[#17171b]">
                <div className="text-[12px] text-black/45 dark:text-white/45">
                  积分余额
                </div>
                <div className="mt-1 text-[20px] font-semibold text-black dark:text-white">
                  {accountCenterLoading ? (
                    <Loader2 className="h-4 w-4 animate-spin" />
                  ) : (
                    formatStyleProCredits(accountProfile.availablePoints)
                  )}
                </div>
              </div>
              <div className="rounded-[16px] border border-black/10 bg-white p-3 dark:border-white/10 dark:bg-[#17171b]">
                <div className="text-[12px] text-black/45 dark:text-white/45">
                  当前套餐
                </div>
                <div className="mt-1 truncate text-[20px] font-semibold text-black dark:text-white">
                  {accountProfile.planName}
                </div>
              </div>
              <div className="rounded-[16px] border border-black/10 bg-white p-3 dark:border-white/10 dark:bg-[#17171b]">
                <div className="text-[12px] text-black/45 dark:text-white/45">
                  每月更新
                </div>
                <div className="mt-1 text-[20px] font-semibold text-black dark:text-white">
                  {formatStyleProCredits(accountProfile.monthlyCredits)}
                </div>
              </div>
              <div className="rounded-[16px] border border-black/10 bg-white p-3 dark:border-white/10 dark:bg-[#17171b]">
                <div className="text-[12px] text-black/45 dark:text-white/45">
                  每日赠送
                </div>
                <div className="mt-1 text-[20px] font-semibold text-black dark:text-white">
                  {formatStyleProCredits(accountProfile.dailyFreeCredits)}
                </div>
              </div>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}

function ImagePreview({
  alt,
  className,
  fit = "contain",
  imageUrl,
}: {
  alt: string;
  className?: string;
  fit?: "contain" | "cover";
  imageUrl?: string | null;
}) {
  if (!imageUrl) {
    return (
      <div
        className={cn(
          "flex h-full min-h-[220px] items-center justify-center rounded-lg border border-dashed border-gray-200 bg-gray-50 text-gray-400 text-sm",
          className
        )}
      >
        等待图片
      </div>
    );
  }

  return (
    <img
      alt={alt}
      className={cn(
        "block h-full max-h-none w-full max-w-none rounded-lg",
        fit === "cover" ? "object-cover" : "object-contain",
        className
      )}
      draggable={false}
      src={imageUrl}
    />
  );
}

function GeneratingImagePlaceholder({
  taskState,
}: {
  taskState?: StyleProTaskState | null;
}) {
  const queueStatus = taskState?.queueStatus;
  const queuePosition = Math.max(0, Number(queueStatus?.queuePosition || 0));
  const sameModelRunningCount = Math.max(
    0,
    Number(queueStatus?.sameModelRunningCount || 0)
  );
  const concurrencyLimit = Math.max(
    0,
    Number(queueStatus?.concurrencyLimit || 0)
  );
  const isQueued = taskState?.status === "pending";
  const isFailed = taskState?.status === "failed";
  const title = isFailed
    ? "本次生成失败"
    : isQueued
      ? `排队中，前方 ${queuePosition} 个`
      : taskState?.generationMode === "realistic"
        ? "正在生成实景化结果"
        : "正在生成图片";
  const description = isFailed
    ? taskState?.error || "请调整参数后重试。"
    : isQueued
      ? `当前模型运行 ${sameModelRunningCount}/${concurrencyLimit || "?"}，${formatStyleProEstimatedWait(
          queueStatus?.estimatedWaitMs
        )}`
      : taskState?.generationMode === "realistic"
        ? "系统会先完成基础实景化，再合成最终风格结果。"
        : "模型已开始执行，结果完成后会自动回填。";

  return (
    <div className="min-h-[620px] rounded-lg border border-white/10 bg-white p-5 text-neutral-800 lg:min-h-[720px]">
      <div className="mb-4 flex items-center justify-between gap-3">
        <div>
          <div className="font-semibold text-[15px] text-neutral-700">
            {title}
          </div>
          <div className="mt-1 text-xs text-neutral-400">
            {description}
          </div>
        </div>
        <span className="inline-flex items-center gap-2 rounded-lg bg-neutral-100 px-3 py-1.5 text-xs font-medium text-neutral-500">
          {!isFailed ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : null}
          {isFailed ? "失败" : isQueued ? "排队中" : "生成中"}
        </span>
      </div>
      <div className="style-pro-generating-frame relative mx-auto h-[520px] max-h-[62vh] w-full max-w-[430px] overflow-hidden rounded-[28px] p-[2px]">
        <div className="style-pro-generating-surface relative h-full overflow-hidden rounded-[26px] bg-[#f4f4f4]">
          <div className="style-pro-dot-field absolute inset-0" />
          <div className="style-pro-light-field absolute inset-0" />
        </div>
      </div>
      <style>{`
        @keyframes styleProBorderSpin {
          to { transform: rotate(1turn); }
        }
        @keyframes styleProDotDrift {
          0% { transform: translate3d(-10px, -8px, 0); opacity: 0.35; }
          45% { transform: translate3d(8px, 18px, 0); opacity: 0.78; }
          100% { transform: translate3d(18px, -4px, 0); opacity: 0.42; }
        }
        @keyframes styleProLightFloat {
          0% { transform: translate3d(-18%, -10%, 0) scale(1); opacity: 0.72; }
          50% { transform: translate3d(18%, 16%, 0) scale(1.06); opacity: 0.98; }
          100% { transform: translate3d(34%, -4%, 0) scale(1); opacity: 0.74; }
        }
        .style-pro-generating-frame {
          background: rgba(255,255,255,0.82);
          box-shadow: 0 18px 50px rgba(0,0,0,0.08);
          isolation: isolate;
        }
        .style-pro-generating-frame::before {
          position: absolute;
          content: "";
          inset: -42%;
          z-index: -1;
          background:
            conic-gradient(
              from 0deg,
              rgba(22, 163, 74, 0.18),
              rgba(37, 99, 235, 0.46),
              rgba(245, 158, 11, 0.32),
              rgba(20, 184, 166, 0.42),
              rgba(22, 163, 74, 0.18)
            );
          animation: styleProBorderSpin 5.2s linear infinite;
        }
        .style-pro-generating-frame::after {
          position: absolute;
          content: "";
          inset: 2px;
          border-radius: 26px;
          pointer-events: none;
          box-shadow:
            inset 0 0 0 1px rgba(255,255,255,0.72),
            inset 0 0 28px rgba(255,255,255,0.55);
        }
        .style-pro-generating-surface {
          box-shadow: inset 0 0 0 1px rgba(0,0,0,0.025);
        }
        .style-pro-dot-field {
          background-image: radial-gradient(circle, rgba(116,116,116,0.32) 1.05px, transparent 1.05px);
          background-size: 16px 16px;
          mask-image: radial-gradient(ellipse 88% 72% at 50% 44%, #000 0%, rgba(0,0,0,0.78) 48%, transparent 82%);
          animation: styleProDotDrift 3.8s ease-in-out infinite alternate;
        }
        .style-pro-light-field {
          background:
            radial-gradient(ellipse 52% 38% at 28% 28%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.52) 38%, transparent 72%),
            radial-gradient(ellipse 56% 42% at 72% 70%, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.42) 36%, transparent 74%),
            radial-gradient(ellipse 90% 70% at 50% 50%, rgba(255,255,255,0.28) 0%, transparent 68%);
          filter: blur(14px);
          inset: -14%;
          mix-blend-mode: screen;
          animation: styleProLightFloat 4.4s ease-in-out infinite alternate;
          will-change: transform, opacity;
        }
      `}</style>
    </div>
  );
}

function BeforeAfterSlider({
  afterUrl,
  beforeUrl,
  downloadDisabled,
  downloading,
  onDownload,
  taskState,
}: {
  afterUrl?: string | null;
  beforeUrl?: string | null;
  downloadDisabled?: boolean;
  downloading?: boolean;
  onDownload?: () => void;
  taskState?: StyleProTaskState | null;
}) {
  const showTaskState =
    taskState?.status === "pending" || taskState?.status === "running";
  const [position, setPosition] = useState(50);
  const sliderRef = useRef<HTMLDivElement | null>(null);
  const updatePositionFromClientX = useCallback((clientX: number) => {
    const rect = sliderRef.current?.getBoundingClientRect();
    if (!rect || rect.width <= 0) return;
    const next = ((clientX - rect.left) / rect.width) * 100;
    setPosition(Math.min(100, Math.max(0, Math.round(next * 10) / 10)));
  }, []);
  const handlePointerDown = useCallback(
    (event: ReactPointerEvent<HTMLDivElement>) => {
      event.currentTarget.setPointerCapture(event.pointerId);
      updatePositionFromClientX(event.clientX);
    },
    [updatePositionFromClientX]
  );
  const handlePointerMove = useCallback(
    (event: ReactPointerEvent<HTMLDivElement>) => {
      if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
      updatePositionFromClientX(event.clientX);
    },
    [updatePositionFromClientX]
  );
  const handlePointerEnd = useCallback(
    (event: ReactPointerEvent<HTMLDivElement>) => {
      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
        event.currentTarget.releasePointerCapture(event.pointerId);
      }
    },
    []
  );
  const handleSliderKeyDown = useCallback(
    (event: ReactKeyboardEvent<HTMLDivElement>) => {
      const step = event.shiftKey ? 10 : 3;
      if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
        event.preventDefault();
        setPosition((current) => Math.max(0, current - step));
      } else if (event.key === "ArrowRight" || event.key === "ArrowUp") {
        event.preventDefault();
        setPosition((current) => Math.min(100, current + step));
      } else if (event.key === "Home") {
        event.preventDefault();
        setPosition(0);
      } else if (event.key === "End") {
        event.preventDefault();
        setPosition(100);
      }
    },
    []
  );

  if (showTaskState || taskState?.status === "failed") {
    return <GeneratingImagePlaceholder taskState={taskState} />;
  }

  if (!beforeUrl && !afterUrl) {
    return (
      <div className="flex h-full min-h-[620px] items-center justify-center rounded-lg border border-dashed border-gray-200 bg-gray-50 text-gray-400 lg:min-h-[720px]">
        上传图片后开始生成
      </div>
    );
  }

  if (!afterUrl) {
    return (
      <div className="h-full min-h-[620px] overflow-hidden rounded-lg border border-gray-200 bg-gray-50 lg:min-h-[720px]">
        <ImagePreview alt="上传图片" fit="cover" imageUrl={beforeUrl} />
      </div>
    );
  }

  return (
    <div
      className="relative h-full min-h-[620px] select-none overflow-hidden rounded-lg border border-gray-200 bg-gray-50 lg:min-h-[720px]"
      ref={sliderRef}
    >
      <ImagePreview
        alt="生成后"
        className="absolute inset-0 h-full w-full"
        fit="cover"
        imageUrl={afterUrl}
      />
      <div
        className="absolute inset-0 overflow-hidden"
        style={{ clipPath: `inset(0 ${100 - position}% 0 0)` }}
      >
        <ImagePreview
          alt="生成前"
          className="h-full w-full"
          fit="cover"
          imageUrl={beforeUrl}
        />
      </div>
      <div
        className="pointer-events-none absolute inset-y-0 w-px bg-white"
        style={{ left: `${position}%` }}
      />
      <div
        aria-label="拖动查看原图和结果对比"
        aria-valuemax={100}
        aria-valuemin={0}
        aria-valuenow={Math.round(position)}
        className="-translate-x-1/2 absolute top-1/2 z-10 flex h-11 w-11 -translate-y-1/2 cursor-ew-resize touch-none select-none items-center justify-center rounded-full border border-white/80 bg-black/75 text-[11px] font-semibold text-white shadow-lg outline-none transition hover:bg-black focus-visible:ring-2 focus-visible:ring-black/40 focus-visible:ring-offset-2"
        onKeyDown={handleSliderKeyDown}
        onPointerCancel={handlePointerEnd}
        onPointerDown={handlePointerDown}
        onPointerMove={handlePointerMove}
        onPointerUp={handlePointerEnd}
        role="slider"
        style={{
          left: `clamp(22px, ${position}%, calc(100% - 22px))`,
        }}
        tabIndex={0}
      >
        对比
      </div>
      <div className="absolute left-4 top-4 rounded-full bg-black/65 px-3 py-1 text-xs text-white/80">
        原图
      </div>
      <div className="absolute right-4 top-4 rounded-full bg-emerald-500/90 px-3 py-1 text-xs font-semibold text-black">
        结果
      </div>
      {afterUrl ? (
        <button
          className="absolute bottom-4 right-4 z-20 inline-flex h-11 items-center gap-2 rounded-full border border-white/25 bg-black/72 px-4 text-[13px] font-semibold text-white shadow-[0_14px_32px_rgba(0,0,0,0.24)] backdrop-blur transition hover:bg-black disabled:cursor-not-allowed disabled:opacity-55"
          disabled={downloadDisabled || downloading}
          onClick={(event) => {
            event.stopPropagation();
            onDownload?.();
          }}
          type="button"
        >
          {downloading ? (
            <Loader2 className="h-4 w-4 animate-spin" />
          ) : (
            <Download className="h-4 w-4" />
          )}
          下载
        </button>
      ) : null}
    </div>
  );
}

export function StyleProWorkspace({
  canvasId,
  initialSourceImageUrl,
  onAddToCanvas,
  onBack,
  onPersistState,
  persistedState,
}: StyleProWorkspaceProps) {
  const fileInputRef = useRef<HTMLInputElement | null>(null);
  const activeGenerateRequestRef = useRef<string | null>(null);
  const { data: brandingData } = useSWR<BrandingSettings>(
    "/api/site-settings?scope=branding",
    fetcher
  );
  const { data: configData, isLoading: configLoading } =
    useSWR<StyleProConfigResponse>("/api/style-pro/config", fetcher);
  const { data: modelsData, isLoading: modelsLoading } =
    useSWR<StyleProModelsResponse>("/api/style-pro/model-options", fetcher);
  const config = configData?.config;
  const modelOptions = useMemo(
    () => (modelsData?.models || []).filter((model) => Boolean(model.id)),
    [modelsData?.models]
  );
  const selectableModelOptions = useMemo(
    () => modelOptions.filter((model) => model.selectable !== false),
    [modelOptions]
  );
  const enabledCategories = useMemo(
    () =>
      (config?.categories || [])
        .filter((category) => category.enabled)
        .map((category) => ({
          ...category,
          options: category.options.filter((option) => option.enabled),
        }))
        .filter((category) => category.options.length > 0),
    [config?.categories]
  );

  const [sourceImageUrl, setSourceImageUrl] = useState(
    () =>
      mergeStyleProState(
        persistedState,
        readLocalStyleProState(canvasId),
        initialSourceImageUrl
          ? { sourceImageUrl: initialSourceImageUrl, history: [] }
          : null
      ).sourceImageUrl || ""
  );
  const [currentResult, setCurrentResult] =
    useState<StyleProHistoryItem | null>(() => {
      const merged = mergeStyleProState(
        persistedState,
        readLocalStyleProState(canvasId)
      );
      return merged.history[0] || null;
    });
  const [history, setHistory] = useState<StyleProHistoryItem[]>(
    () =>
      mergeStyleProState(persistedState, readLocalStyleProState(canvasId))
        .history
  );
  const [selections, setSelections] = useState<StyleProSelectionMap>({});
  const [customInputs, setCustomInputs] = useState<StyleProCustomInputMap>({
    global: {},
    categories: {},
  });
  const [generationMode, setGenerationMode] =
    useState<StyleProGenerationMode>("style");
  const [selectedModelId, setSelectedModelId] = useState("");
  const [uploading, setUploading] = useState(false);
  const [downloadingImageId, setDownloadingImageId] = useState<string | null>(
    null
  );
  const [generationTaskState, setGenerationTaskState] =
    useState<StyleProTaskState | null>(null);
  const generating =
    generationTaskState?.status === "pending" ||
    generationTaskState?.status === "running";

  useEffect(() => {
    if (selectableModelOptions.length === 0) {
      setSelectedModelId("");
      return;
    }
    setSelectedModelId((current) => {
      if (
        current &&
        selectableModelOptions.some((model) => model.id === current)
      ) {
        return current;
      }
      const defaultModel = selectableModelOptions.find(
        (model) => model.id === modelsData?.defaultModelId
      );
      return defaultModel?.id || selectableModelOptions[0]?.id || "";
    });
  }, [modelsData?.defaultModelId, selectableModelOptions]);

  useEffect(() => {
    setCustomInputs((current) => buildDefaultCustomInputs(config, current));
  }, [config]);

  useEffect(() => {
    const localState = readLocalStyleProState(canvasId);
    const nextSource =
      persistedState?.sourceImageUrl ||
      localState?.sourceImageUrl ||
      initialSourceImageUrl ||
      "";
    setSourceImageUrl((current) => current || nextSource);
    setHistory((currentHistory) =>
      mergeStyleProHistory(
        currentHistory,
        persistedState?.history,
        localState?.history
      )
    );
    setCurrentResult(
      (current) =>
        current ||
        mergeStyleProHistory(persistedState?.history, localState?.history)[0] ||
        null
    );
  }, [
    canvasId,
    initialSourceImageUrl,
    persistedState?.history,
    persistedState?.sourceImageUrl,
  ]);

  const siteName = brandingData?.siteName || "由壹点AI";
  const logo = brandingData?.siteLogoDark || brandingData?.siteLogo || "";

  const selectedOptionLabels = useMemo(() => {
    const labels: string[] = [];
    for (const category of enabledCategories) {
      const selected = selections[category.id] || [];
      for (const optionId of selected) {
        const option = category.options.find((item) => item.id === optionId);
        if (option) {
          labels.push(`${category.title}：${option.label}`);
        }
      }
    }
    return labels;
  }, [enabledCategories, selections]);

  const selectedModel = useMemo(
    () =>
      selectableModelOptions.find((model) => model.id === selectedModelId) ||
      selectableModelOptions[0] ||
      null,
    [selectableModelOptions, selectedModelId]
  );

  const selectedModelCostLabel = selectedModel
    ? selectedModel.unitCost > 0
      ? `${selectedModel.unitCost} 积分/张`
      : "未设置积分"
    : modelsLoading
      ? "加载价格"
      : "暂无模型";
  const realisticUnitCost = Math.max(0, Number(modelsData?.realisticUnitCost || 0));
  const currentCostLabel =
    generationMode === "realistic"
      ? realisticUnitCost > 0
        ? `${realisticUnitCost} 积分/张`
        : "后台模型未计费"
      : selectedModelCostLabel;
  const currentUnitCost =
    generationMode === "realistic"
      ? realisticUnitCost
      : selectedModel?.unitCost || 0;

  const missingRequiredCategories = useMemo(
    () =>
      enabledCategories.filter((category) => {
        if (!category.required && category.minSelections <= 0) return false;
        const selectedCount = selections[category.id]?.length || 0;
        return (
          selectedCount <
          Math.max(category.required ? 1 : 0, category.minSelections)
        );
      }),
    [enabledCategories, selections]
  );

  const missingRequiredCustomField = useMemo(() => {
    for (const field of config?.customFields || []) {
      if (!field.required) continue;
      const value = String(customInputs.global?.[field.id] || "").trim();
      if (!value) return field.label;
    }
    for (const category of enabledCategories) {
      for (const field of category.customFields || []) {
        if (!field.required) continue;
        const value = String(
          customInputs.categories?.[category.id]?.[field.id] || ""
        ).trim();
        if (!value) return `${category.title} / ${field.label}`;
      }
    }
    return "";
  }, [config?.customFields, customInputs, enabledCategories]);

  const persistState = useCallback(
    async (nextState: StyleProPersistedState) => {
      const normalizedState = {
        sourceImageUrl: nextState.sourceImageUrl,
        history: normalizeHistory(nextState.history),
      };
      writeLocalStyleProState(canvasId, normalizedState);
      await onPersistState?.(normalizedState);
    },
    [canvasId, onPersistState]
  );

  const updateSourceImage = useCallback(
    async (url: string) => {
      const nextUrl = String(url || "").trim();
      setSourceImageUrl(nextUrl);
      setCurrentResult(null);
      setGenerationTaskState(null);
      await persistState({ sourceImageUrl: nextUrl, history });
    },
    [history, persistState]
  );

  const handleFile = useCallback(
    async (file: File | null | undefined) => {
      if (!file) return;
      if (!file.type.startsWith("image/")) {
        toast.error("请上传图片文件");
        return;
      }
      setUploading(true);
      try {
        const result = await imageGenerationService.uploadImage(file);
        if (!result.success || !result.data?.url) {
          throw new Error(result.error || "上传失败");
        }
        await updateSourceImage(result.data.url);
        toast.success("图片已上传");
      } catch (error) {
        toast.error(error instanceof Error ? error.message : "上传失败");
      } finally {
        setUploading(false);
      }
    },
    [updateSourceImage]
  );

  const toggleOption = useCallback(
    (category: PublicStyleProCategory, optionId: string) => {
      setSelections((current) => {
        const previous = current[category.id] || [];
        const selected = previous.includes(optionId);
        let nextSelected = selected
          ? previous.filter((id) => id !== optionId)
          : [...previous, optionId];
        if (!selected && category.maxSelections <= 1) {
          nextSelected = [optionId];
        }
        if (nextSelected.length > category.maxSelections) {
          nextSelected = nextSelected.slice(-category.maxSelections);
        }
        return {
          ...current,
          [category.id]: nextSelected,
        };
      });
    },
    []
  );

  const updateCustomInput = useCallback(
    ({
      categoryId,
      fieldId,
      scope,
      value,
    }: {
      categoryId?: string;
      fieldId: string;
      scope: "global" | "category";
      value: string;
    }) => {
      setCustomInputs((current) => {
        const next = cloneCustomInputs(current);
        if (scope === "global") {
          next.global = {
            ...(next.global || {}),
            [fieldId]: value,
          };
          return next;
        }
        if (!categoryId) return next;
        next.categories = {
          ...(next.categories || {}),
          [categoryId]: {
            ...(next.categories?.[categoryId] || {}),
            [fieldId]: value,
          },
        };
        return next;
      });
    },
    []
  );

  const handleGenerate = useCallback(async () => {
    if (activeGenerateRequestRef.current || generating) {
      toast.info("当前图片正在生成中，请稍候");
      return;
    }
    if (!sourceImageUrl) {
      toast.error("请先上传一张图片");
      return;
    }
    if (!config?.enabled) {
      toast.error("风格化 PRO 暂未启用");
      return;
    }
    if (missingRequiredCategories.length > 0) {
      toast.error(`请完成必选项：${missingRequiredCategories[0].title}`);
      return;
    }
    if (missingRequiredCustomField) {
      toast.error(`请填写：${missingRequiredCustomField}`);
      return;
    }

    const requestId = createStyleProRequestId();
    const localRequestKey = requestId || `local-${Date.now()}`;
    activeGenerateRequestRef.current = localRequestKey;
    setGenerationTaskState({
      taskId: localRequestKey,
      status: "pending",
      error: null,
      generationMode,
    });

    try {
      const response = await fetch("/api/style-pro/generate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          canvasId,
          ...(requestId ? { requestId } : {}),
          generationMode,
          modelId:
            generationMode === "style"
              ? selectedModel?.id || selectedModelId || undefined
              : undefined,
          sourceImageUrl,
          selections,
          customInputs,
        }),
      });
      const payload = (await response.json().catch(() => ({}))) as
        | StyleProGenerateResponse
        | undefined;
      if (!response.ok || !payload?.success) {
        throw new Error(payload?.error || "生成失败");
      }
      const taskId = String(payload.taskId || "").trim();
      if (!taskId) {
        throw new Error("生成任务创建失败");
      }
      setGenerationTaskState({
        taskId,
        status: payload.status === "running" ? "running" : "pending",
        queueStatus: payload.queueStatus,
        error: null,
        generationMode,
      });

      const deadline = Date.now() + STYLE_PRO_TASK_TIMEOUT_MS;
      let taskResult:
        | NonNullable<NonNullable<StyleProGenerateResponse["task"]>["result"]>
        | null = null;
      let lastError = "";

      while (Date.now() < deadline) {
        await sleep(STYLE_PRO_TASK_POLL_INTERVAL_MS);

        let statusResponse: Response;
        try {
          statusResponse = await fetch(
            `/api/style-pro/generate?taskId=${encodeURIComponent(taskId)}`,
            { cache: "no-store" }
          );
        } catch (pollError) {
          lastError =
            pollError instanceof Error ? pollError.message : "查询任务失败";
          continue;
        }

        const statusPayload = (await statusResponse.json().catch(() => ({}))) as
          | StyleProGenerateResponse
          | undefined;
        if (!statusResponse.ok || !statusPayload?.success || !statusPayload.task) {
          lastError =
            statusPayload?.error || `查询任务失败(${statusResponse.status})`;
          continue;
        }

        const task = statusPayload.task;
        setGenerationTaskState({
          taskId: task.id,
          status: task.status,
          queueStatus: task.queueStatus,
          error: task.error || null,
          generationMode,
        });

        if (task.status === "succeeded") {
          taskResult = task.result || null;
          break;
        }
        if (task.status === "failed") {
          throw new Error(task.error || "生成失败");
        }
      }

      if (!taskResult?.imageUrl) {
        throw new Error(lastError || "生成超时，请稍后重试");
      }

      const dimensions = await loadImageDimensions(taskResult.imageUrl);
      const item: StyleProHistoryItem = {
        id: getHistoryId(),
        sourceImageUrl,
        resultImageUrl: taskResult.imageUrl,
        selections: taskResult.selections || selections,
        optionLabels: taskResult.optionLabels || selectedOptionLabels,
        customInputs: taskResult.customInputs || customInputs,
        createdAt: new Date().toISOString(),
        generationMode: taskResult.generationMode || generationMode,
        model: taskResult.model,
        modelRef: taskResult.modelRef,
        width: dimensions.width,
        height: dimensions.height,
      };
      const nextHistory = [
        item,
        ...history.filter((entry) => entry.id !== item.id),
      ].slice(0, 4);
      setHistory(nextHistory);
      setCurrentResult(item);
      try {
        await persistState({ sourceImageUrl, history: nextHistory });
      } catch (persistError) {
        console.error(
          "[Style Pro] Failed to persist generated result:",
          persistError
        );
        toast.warning("结果已生成，历史记录稍后同步");
      }
      setGenerationTaskState(null);
      if (taskResult.gallerySaveError) {
        toast.warning(
          `结果已生成，但个人相册同步失败：${taskResult.gallerySaveError}`
        );
      } else {
        toast.success("风格化 PRO 生成完成，已保存到个人相册");
      }
    } catch (error) {
      setGenerationTaskState((current) =>
        current
          ? {
              ...current,
              status: "failed",
              error: error instanceof Error ? error.message : "生成失败",
            }
          : null
      );
      toast.error(error instanceof Error ? error.message : "生成失败");
    } finally {
      activeGenerateRequestRef.current = null;
    }
  }, [
    canvasId,
    config?.enabled,
    generationMode,
    generating,
    history,
    customInputs,
    missingRequiredCategories,
    missingRequiredCustomField,
    persistState,
    selectedOptionLabels,
    selectedModel?.id,
    selectedModelId,
    selections,
    sourceImageUrl,
  ]);

  const restoreHistoryItem = useCallback(
    (item: StyleProHistoryItem) => {
      setSourceImageUrl(item.sourceImageUrl);
      setSelections(item.selections || {});
      setCustomInputs(buildDefaultCustomInputs(config, item.customInputs));
      setGenerationMode(item.generationMode || "style");
      setCurrentResult(item);
      setGenerationTaskState(null);
    },
    [config]
  );

  const handleDownloadResult = useCallback(
    async (item?: StyleProHistoryItem | null) => {
      const target = item || currentResult;
      if (!target?.resultImageUrl) {
        toast.error("暂无可下载的结果图");
        return;
      }

      const downloadId = target.id || target.resultImageUrl;
      setDownloadingImageId(downloadId);
      try {
        await downloadCanvasImageAsPng({
          url: target.resultImageUrl,
          name: buildStyleProDownloadName(target),
          candidates: [target.resultImageUrl],
        });
        toast.success("图片已开始下载");
      } catch (error) {
        toast.error(error instanceof Error ? error.message : "下载失败");
      } finally {
        setDownloadingImageId((current) =>
          current === downloadId ? null : current
        );
      }
    },
    [currentResult]
  );

  const disabledReason = !sourceImageUrl
    ? "请先上传图片"
    : generationMode === "realistic" && config?.realisticModeAvailable === false
      ? "请先配置实景化模型"
    : generationMode === "style" &&
        modelsData?.success === true &&
        selectableModelOptions.length === 0
      ? "暂无可用生图模型"
      : missingRequiredCategories.length > 0
        ? `还差：${missingRequiredCategories[0].title}`
        : missingRequiredCustomField
          ? `还差：${missingRequiredCustomField}`
        : "";
  const promptDisplayMode = config?.promptDisplayMode || "stacked";
  const themeStyle = {
    "--style-pro-title-color": config?.titleTextColor || "#2563eb",
    "--style-pro-button-bg": config?.buttonBackgroundColor || "#ffffff",
    "--style-pro-button-text": config?.buttonTextColor || "#374151",
    "--style-pro-selected-button-bg":
      config?.selectedButtonBackgroundColor || "#eff6ff",
    "--style-pro-selected-button-text":
      config?.selectedButtonTextColor || "#2563eb",
  } as CSSProperties & Record<string, string>;
  const renderPromptCategory = (
    category: PublicStyleProCategory,
    layout: "stacked" | "carousel" = "stacked"
  ) => {
    const selectedIds = selections[category.id] || [];
    const categoryCustomFields = category.customFields || [];
    return (
      <div
        className={cn(
          "rounded-[20px] bg-black/[0.025] p-4",
          layout === "carousel" && "h-full min-h-[126px]"
        )}
      >
        <div className="mb-3 flex items-start gap-4">
          <span className="subsection-title mt-2 w-20 shrink-0">
            {category.title}
          </span>
          <div className="min-w-0 flex-1">
            <div className="flex flex-wrap gap-2">
              {category.options.map((option) => {
                const selected = selectedIds.includes(option.id);
                return (
                  <button
                    className={cn(
                      "option-btn rounded-full px-4 py-2 text-[14px] font-semibold",
                      selected && "active"
                    )}
                    key={option.id}
                    onClick={() => toggleOption(category, option.id)}
                    title={option.description || option.label}
                    type="button"
                  >
                    {option.label}
                  </button>
                );
              })}
            </div>
          </div>
        </div>
        {categoryCustomFields.length > 0 ? (
          <div
            className={cn(
              "mt-3 grid gap-3 border-black/5 border-t pt-3",
              layout === "carousel" ? "grid-cols-1" : "md:grid-cols-2"
            )}
          >
            {categoryCustomFields.map((field) => (
              <StyleProCustomFieldInput
                field={field}
                key={field.id}
                onChange={(value) =>
                  updateCustomInput({
                    categoryId: category.id,
                    fieldId: field.id,
                    scope: "category",
                    value,
                  })
                }
                value={customInputs.categories?.[category.id]?.[field.id] || ""}
              />
            ))}
          </div>
        ) : null}
      </div>
    );
  };

  return (
    <div
      className="style-pro-index-shell flex h-dvh w-full overflow-hidden bg-[#f4f4f4] text-[#171717]"
      style={themeStyle}
    >
      <style>{`
        .style-pro-index-shell .section-card {
          background: #fff;
          border: 1px solid rgba(0, 0, 0, 0.08);
          border-radius: 24px;
          box-shadow: 0 12px 35px rgba(15, 23, 42, 0.05);
        }
        .style-pro-index-shell .subsection-title {
          color: var(--style-pro-title-color);
          font-size: 13px;
          font-weight: 650;
          white-space: nowrap;
        }
        .style-pro-index-shell .option-btn {
          border: 1px solid rgba(0, 0, 0, 0.1);
          background: var(--style-pro-button-bg);
          color: var(--style-pro-button-text);
          transition: all 0.18s ease;
        }
        .style-pro-index-shell .option-btn:hover {
          background: var(--style-pro-selected-button-bg);
          border-color: var(--style-pro-selected-button-text);
          color: var(--style-pro-selected-button-text);
        }
        .style-pro-index-shell .option-btn.active {
          background: var(--style-pro-selected-button-bg);
          color: var(--style-pro-selected-button-text);
          border-color: var(--style-pro-selected-button-text);
          box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
        }
        .style-pro-index-shell .prompt-carousel-scroll {
          scrollbar-width: thin;
          scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
          scroll-padding-inline: 8px;
        }
        .style-pro-index-shell .prompt-carousel-scroll::-webkit-scrollbar {
          height: 8px;
        }
        .style-pro-index-shell .prompt-carousel-scroll::-webkit-scrollbar-track {
          background: transparent;
        }
        .style-pro-index-shell .prompt-carousel-scroll::-webkit-scrollbar-thumb {
          background: rgba(15, 23, 42, 0.16);
          border-radius: 999px;
        }
      `}</style>

      <main className="min-w-0 flex-1 overflow-y-auto">
        <BrandTopBar
          actions={
            <>
              {onBack ? (
                <BrandTopBarButton onClick={onBack}>
                  <ArrowLeft className="h-3.5 w-3.5" />
                  返回画布
                </BrandTopBarButton>
              ) : null}
              <StyleProAccountActions />
            </>
          }
          logo={logo}
          onLogoClick={() => {
            window.location.href = "/";
          }}
          position="sticky"
          siteName={siteName}
        />

        <div className="mx-auto max-w-[1920px] space-y-5 px-6 py-6">
          <section className="section-card p-6">
            <div className="rounded-[20px] bg-black/[0.025] p-4">
              <div className="mb-3 flex items-center justify-between gap-3">
                <span className="subsection-title">上传图片</span>
                <span className="text-[12px] text-black/40">支持拖拽上传</span>
              </div>
              <button
                className="flex min-h-[260px] w-full items-center justify-center overflow-hidden rounded-2xl border border-dashed border-black/15 bg-white transition hover:border-black/35"
                onClick={() => fileInputRef.current?.click()}
                onDragOver={(event) => event.preventDefault()}
                onDrop={(event) => {
                  event.preventDefault();
                  void handleFile(event.dataTransfer.files?.[0]);
                }}
                type="button"
              >
                {sourceImageUrl ? (
                  <img
                    alt="上传图片"
                    className="h-full max-h-[360px] w-full object-contain"
                    src={sourceImageUrl}
                  />
                ) : (
                  <span className="flex flex-col items-center gap-3 text-gray-500">
                    {uploading ? (
                      <Loader2 className="h-6 w-6 animate-spin" />
                    ) : (
                      <Upload className="h-6 w-6" />
                    )}
                    <span className="text-[13px]">点击上传，或拖入图片</span>
                  </span>
                )}
              </button>
              <input
                accept="image/*"
                className="hidden"
                onChange={(event) => {
                  void handleFile(event.target.files?.[0]);
                  event.currentTarget.value = "";
                }}
                ref={fileInputRef}
                type="file"
              />
            </div>
          </section>

          {configLoading ? (
            <section className="section-card flex min-h-[180px] items-center justify-center p-6 text-[13px] text-black/45">
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              正在加载配置
            </section>
          ) : !config?.enabled ? (
            <section className="section-card border-amber-200 bg-amber-50 p-6 text-amber-800">
              风格化 PRO 暂未启用，请联系管理员开启。
            </section>
          ) : promptDisplayMode === "carousel" ? (
            <section className="section-card p-6">
              <div className="prompt-carousel-scroll -mx-2 flex snap-x gap-4 overflow-x-auto px-2 pb-2">
                {enabledCategories.map((category) => (
                  <div
                    className="w-[min(760px,calc(100vw-96px))] shrink-0 snap-start"
                    key={category.id}
                  >
                    {renderPromptCategory(category, "carousel")}
                  </div>
                ))}
              </div>
            </section>
          ) : (
            enabledCategories.map((category) => (
              <section className="section-card p-6" key={category.id}>
                {renderPromptCategory(category)}
              </section>
            ))
          )}

          {hasCustomFields(config) && (config?.customFields || []).length > 0 ? (
            <section className="section-card p-6">
              <div className="rounded-[20px] bg-black/[0.025] p-4">
                <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
                  <div>
                    <span className="subsection-title">自定义参数</span>
                    <p className="mt-1 text-[13px] text-black/45">
                      这里的内容会作为隐藏要求加入生成提示词。
                    </p>
                  </div>
                </div>
                <div className="grid gap-3 md:grid-cols-2">
                  {(config?.customFields || []).map((field) => (
                    <StyleProCustomFieldInput
                      field={field}
                      key={field.id}
                      onChange={(value) =>
                        updateCustomInput({
                          fieldId: field.id,
                          scope: "global",
                          value,
                        })
                      }
                      value={customInputs.global?.[field.id] || ""}
                    />
                  ))}
                </div>
              </div>
            </section>
          ) : null}

          <section className="section-card p-5">
            <div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_300px] 2xl:grid-cols-[minmax(0,1fr)_320px]">
              <div className="flex min-h-[calc(100vh-172px)] flex-col rounded-[20px] bg-black/[0.025] p-4">
                <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
                  <div>
                    <span className="subsection-title">生图结果</span>
                    <p className="mt-1 text-[13px] text-black/45">
                      生成后拖动滑块查看原图与结果图。
                    </p>
                  </div>
                  <div className="flex flex-wrap items-center gap-2">
                    <div className="flex h-8 items-center gap-2 rounded-[14px] border border-black/10 bg-white px-2 text-[12px] text-black/65 shadow-sm">
                      <span className="text-black/45">模式</span>
                      <select
                        aria-label="选择生成模式"
                        className="h-6 max-w-[110px] bg-transparent font-semibold text-black/75 outline-none"
                        disabled={generating}
                        onChange={(event) =>
                          setGenerationMode(
                            event.target.value === "realistic"
                              ? "realistic"
                              : "style"
                          )
                        }
                        value={generationMode}
                      >
                        <option value="style">风格化</option>
                        <option value="realistic">实景化</option>
                      </select>
                    </div>
                    {generationMode === "style" ? (
                      <div className="flex h-8 items-center gap-2 rounded-[14px] border border-black/10 bg-white px-2 text-[12px] text-black/65 shadow-sm">
                        <span className="text-black/45">模型</span>
                        {modelOptions.length > 0 ? (
                          <Select
                            disabled={
                              modelsLoading ||
                              selectableModelOptions.length === 0 ||
                              generating
                            }
                            onValueChange={setSelectedModelId}
                            value={selectedModel?.id || selectedModelId}
                          >
                            <SelectTrigger
                              aria-label="选择生图模型"
                              className="h-7 w-[190px] rounded-[10px] border-0 bg-transparent px-1 py-0 text-[12px] font-semibold text-black/75 shadow-none ring-offset-0 focus:ring-0 focus:ring-offset-0 disabled:opacity-60 sm:w-[230px]"
                            >
                              <span className="min-w-0 flex-1 truncate text-left">
                                {selectedModel?.displayName || "选择模型"}
                              </span>
                            </SelectTrigger>
                            <SelectContent className="z-[50000] max-h-[360px] min-w-[340px] rounded-2xl border-black/10 bg-white p-1.5 text-black shadow-[0_16px_44px_rgba(15,23,42,0.16)]">
                              {modelOptions.map((model) => (
                                <SelectItem
                                  className="min-h-10 rounded-xl py-2 pl-8 pr-3 text-[13px] focus:bg-black/[0.04]"
                                  disabled={model.selectable === false}
                                  key={model.id}
                                  title={model.disabledReason || model.displayName}
                                  value={model.id}
                                >
                                  <div className="flex w-full min-w-0 items-center gap-2">
                                    {model.avatarUrl ? (
                                      <img
                                        alt=""
                                        className="h-5 w-5 shrink-0 rounded-full object-cover"
                                        src={model.avatarUrl}
                                      />
                                    ) : null}
                                    <span className="min-w-0 flex-1 whitespace-normal break-words font-semibold leading-snug text-black/80">
                                      {model.displayName}
                                    </span>
                                    {model.availabilityLabel ? (
                                      <span className="shrink-0 rounded-full bg-amber-50 px-2 py-0.5 text-[11px] font-semibold text-amber-600">
                                        {model.availabilityLabel}
                                      </span>
                                    ) : null}
                                    {model.creditDiscountLabel ? (
                                      <span className="shrink-0 rounded-full bg-emerald-50 px-2 py-0.5 text-[11px] font-semibold text-emerald-600">
                                        {model.creditDiscountLabel}
                                      </span>
                                    ) : null}
                                  </div>
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        ) : (
                          <span className="h-6 max-w-[210px] truncate bg-transparent font-semibold text-black/40">
                            {modelsLoading ? "加载模型" : "暂无模型"}
                          </span>
                        )}
                        <span className="rounded-full bg-black/[0.04] px-2 py-0.5 font-semibold text-black/55">
                          {currentCostLabel}
                        </span>
                        {selectedModel?.creditDiscountLabel ? (
                          <span className="rounded-full bg-emerald-50 px-2 py-0.5 font-semibold text-emerald-600">
                            {selectedModel.creditDiscountLabel}
                          </span>
                        ) : null}
                        {selectedModel?.availabilityLabel ? (
                          <span className="rounded-full bg-amber-50 px-2 py-0.5 font-semibold text-amber-600">
                            {selectedModel.availabilityLabel}
                          </span>
                        ) : null}
                      </div>
                    ) : null}
                    {generationMode === "realistic" ? (
                      <div className="flex h-8 items-center rounded-[14px] border border-black/10 bg-white px-3 text-[12px] font-semibold text-black/55 shadow-sm">
                        {currentCostLabel}
                      </div>
                    ) : null}
                    <Button
                      className="h-8 rounded-[14px] bg-[#1c1c1e] px-4 text-[12px] text-white hover:bg-black"
                      disabled={generating || Boolean(disabledReason)}
                      onClick={handleGenerate}
                      title={disabledReason || currentCostLabel}
                    >
                      {generating ? (
                        <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
                      ) : (
                        <Sparkles className="mr-1.5 h-3.5 w-3.5" />
                      )}
                      {generating
                        ? generationTaskState?.status === "pending"
                          ? "排队中"
                          : "生成中"
                        : currentUnitCost
                          ? `执行 · ${currentUnitCost}积分`
                          : "执行"}
                    </Button>
                    <Button
                      className="h-8 rounded-[14px] border-black/10 bg-white px-4 text-[12px] text-black/70 shadow-sm hover:bg-black/5"
                      disabled={!currentResult}
                      onClick={() =>
                        currentResult && onAddToCanvas?.(currentResult)
                      }
                      variant="outline"
                    >
                      添加到画布
                    </Button>
                  </div>
                </div>
                <div className="min-h-0 flex-1">
                  <BeforeAfterSlider
                    afterUrl={currentResult?.resultImageUrl}
                    beforeUrl={currentResult?.sourceImageUrl || sourceImageUrl}
                    downloadDisabled={!currentResult?.resultImageUrl}
                    downloading={Boolean(
                      currentResult &&
                        downloadingImageId ===
                          (currentResult.id || currentResult.resultImageUrl)
                    )}
                    onDownload={() => {
                      void handleDownloadResult(currentResult);
                    }}
                    taskState={generationTaskState}
                  />
                </div>
              </div>

              <div className="rounded-[20px] bg-black/[0.025] p-4">
                <div className="mb-3 flex items-center justify-between gap-3">
                  <span className="subsection-title">历史记录</span>
                  <span className="text-[12px] text-black/40">最近 4 条</span>
                </div>
                <div className="grid grid-cols-2 gap-3 xl:grid-cols-1">
                  {history.length > 0 ? (
                    history.map((item) => (
                      <button
                        className={cn(
                          "overflow-hidden rounded-2xl border bg-white text-left transition hover:border-black/35",
                          currentResult?.id === item.id
                            ? "border-black/30 shadow-[0_4px_12px_rgba(15,23,42,0.12)]"
                            : "border-black/10"
                        )}
                        key={item.id}
                        onClick={() => restoreHistoryItem(item)}
                        type="button"
                      >
                        <div className="aspect-[4/3] bg-gray-100">
                          <img
                            alt="风格化历史"
                            className="h-full w-full object-cover"
                            src={item.resultImageUrl}
                          />
                        </div>
                        <div className="space-y-1 p-2">
                          <div className="flex items-center gap-1 text-[11px] text-gray-400">
                            <Clock3 className="h-3 w-3" />
                            {formatStyleProHistoryDateTime(item.createdAt)}
                          </div>
                          <div className="line-clamp-1 text-[12px] text-black/70">
                            {item.optionLabels[0] || "风格化结果"}
                          </div>
                        </div>
                      </button>
                    ))
                  ) : (
                    <div className="col-span-2 rounded-2xl border border-dashed border-black/15 bg-white p-5 text-center text-[13px] text-black/40 xl:col-span-1">
                      生成后会在这里保存历史。
                    </div>
                  )}
                </div>
              </div>
            </div>
          </section>
        </div>
      </main>
    </div>
  );
}