"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import {
  Palette,
  Check,
  Code2,
  Loader2,
  Save,
  Undo2,
  RotateCcw,
  Pipette,
  Sparkles,
  ImageIcon,
  Monitor,
  LayoutDashboard,
  Trash2,
  Upload,
} from "lucide-react";
import {
  AdminPageHeader,
  AdminSection,
  AdminSettingRow,
  AdminStepper,
  AdminSwitch,
} from "@/components/admin";
import BgModePicker from "./BgModePicker";
import {
  apiUpdateSiteSettings,
  apiUploadSiteBackground,
  type PublicSettings,
} from "@/lib/api";
import { toast } from "@/lib/toast";
import {
  ACCENT_PRESETS,
  DEFAULT_ACCENT,
  applyAccentTheme,
  deriveAccentPair,
  findPreset,
  normalizeHex,
} from "@/lib/theme";
import {
  BG_PREVIEW_ASPECT,
  applySiteBackground,
  bgConfigFromSettings,
  previewBoxStyle,
  type BgMode,
  type BgSurface,
  type SiteBgConfig,
} from "@/lib/bg";

// 后台「外观设置」：主题色、代码块折叠与界面动画。
// 主题色修改时立即对整页实时预览（仅本地），保存后才写库并对所有用户生效。
export default function AppearanceAdmin({ initial }: { initial: PublicSettings }) {
  const router = useRouter();
  const initialAccent = initial.accent || "";
  const [savedHex, setSavedHex] = useState(initialAccent);
  const [draft, setDraft] = useState(initialAccent || DEFAULT_ACCENT);
  const [codeAutoFold, setCodeAutoFold] = useState(initial.code_block_auto_fold !== false);
  const [foldLines, setFoldLines] = useState(
    Number.isFinite(initial.code_block_fold_lines) ? initial.code_block_fold_lines : 5
  );
  const [togglingFold, setTogglingFold] = useState(false);
  const [savingFoldLines, setSavingFoldLines] = useState(false);
  const [uiAnimations, setUiAnimations] = useState(initial.ui_animations !== false);
  const [animCodeFold, setAnimCodeFold] = useState(initial.anim_code_fold !== false);
  const [animSmoothScroll, setAnimSmoothScroll] = useState(
    initial.anim_smooth_scroll !== false
  );
  const [animChrome, setAnimChrome] = useState(initial.anim_chrome !== false);
  const [togglingMotion, setTogglingMotion] = useState(false);
  const [saving, setSaving] = useState(false);
  const [bg, setBg] = useState<SiteBgConfig>(() => bgConfigFromSettings(initial));
  const [bgBusy, setBgBusy] = useState<BgSurface | null>(null);
  const siteFileRef = useRef<HTMLInputElement>(null);
  const adminFileRef = useRef<HTMLInputElement>(null);
  const savedRef = useRef(savedHex);
  savedRef.current = savedHex;

  const normalized = useMemo(() => normalizeHex(draft), [draft]);
  const pair = useMemo(
    () => (normalized ? deriveAccentPair(normalized) : null),
    [normalized]
  );
  const preset = useMemo(() => (normalized ? findPreset(normalized) : null), [normalized]);
  const submitHex = normalized && normalized !== DEFAULT_ACCENT ? normalized : "";
  const dirty = (savedHex || DEFAULT_ACCENT) !== (normalized || "");
  const invalid = draft.trim() !== "" && !normalized;

  useEffect(() => {
    if (normalized) applyAccentTheme(normalized);
    return () => {
      applyAccentTheme(savedRef.current || null);
    };
  }, [normalized]);

  const handleSave = async () => {
    if (!normalized || saving) return;
    setSaving(true);
    try {
      const res = await apiUpdateSiteSettings({ accent: submitHex });
      const next = (res.accent || "").toLowerCase();
      setSavedHex(next);
      applyAccentTheme(next || null);
      router.refresh();
      toast(next ? "主题色已保存并对全站生效" : "已恢复默认主题色");
    } catch (e) {
      toast(e instanceof Error ? e.message : "保存失败", "error");
      applyAccentTheme(savedRef.current || null);
    } finally {
      setSaving(false);
    }
  };

  const discard = () => {
    setDraft(savedHex || DEFAULT_ACCENT);
    applyAccentTheme(savedHex || null);
  };

  const toggleCodeFold = async () => {
    if (togglingFold) return;
    const next = !codeAutoFold;
    setTogglingFold(true);
    try {
      const res = await apiUpdateSiteSettings({ code_block_auto_fold: next });
      setCodeAutoFold(res.code_block_auto_fold);
      toast(
        res.code_block_auto_fold
          ? `已开启代码块自动折叠（超过 ${res.code_block_fold_lines} 行）`
          : "已关闭代码块自动折叠",
        "ok"
      );
    } catch (e) {
      toast(e instanceof Error ? e.message : "保存失败");
    } finally {
      setTogglingFold(false);
    }
  };

  const saveFoldLines = async () => {
    if (savingFoldLines) return;
    const raw = Math.round(Number(foldLines));
    const n = Number.isFinite(raw) ? Math.max(0, Math.min(100, raw)) : 5;
    setSavingFoldLines(true);
    try {
      const res = await apiUpdateSiteSettings({ code_block_fold_lines: n });
      setFoldLines(res.code_block_fold_lines);
      toast(
        res.code_block_fold_lines === 0
          ? "折叠预览已设为 0 行（无预览）"
          : `折叠阈值已设为超过 ${res.code_block_fold_lines} 行`,
        "ok"
      );
    } catch (e) {
      toast(e instanceof Error ? e.message : "保存失败");
    } finally {
      setSavingFoldLines(false);
    }
  };

  const toggleMotionField = async (
    key: "ui_animations" | "anim_code_fold" | "anim_smooth_scroll" | "anim_chrome",
    next: boolean
  ) => {
    if (togglingMotion) return;
    setTogglingMotion(true);
    try {
      const res = await apiUpdateSiteSettings({ [key]: next });
      setUiAnimations(res.ui_animations);
      setAnimCodeFold(res.anim_code_fold);
      setAnimSmoothScroll(res.anim_smooth_scroll);
      setAnimChrome(res.anim_chrome);
      const labels: Record<typeof key, [string, string]> = {
        ui_animations: ["已开启界面动画", "已关闭界面动画（全站减少动态效果）"],
        anim_code_fold: ["已开启代码折叠动画", "已关闭代码折叠动画"],
        anim_smooth_scroll: ["已开启平滑滚动", "已关闭平滑滚动"],
        anim_chrome: ["已开启装饰入场动画", "已关闭装饰入场动画"],
      };
      toast(next ? labels[key][0] : labels[key][1], "ok");
    } catch (e) {
      toast(e instanceof Error ? e.message : "保存失败");
    } finally {
      setTogglingMotion(false);
    }
  };

  const commitBg = (next: SiteBgConfig) => {
    setBg(next);
    applySiteBackground(next);
  };

  const saveBgPatch = async (patch: Partial<SiteBgConfig>, toastOk: string) => {
    const res = await apiUpdateSiteSettings(patch);
    commitBg(bgConfigFromSettings(res));
    toast(toastOk, "ok");
  };

  const onPickBg = async (surface: BgSurface, file: File | undefined) => {
    if (!file || bgBusy) return;
    if (!/^image\/(jpeg|png|webp)$/i.test(file.type) && !/\.(jpe?g|png|webp)$/i.test(file.name)) {
      toast("仅支持 JPEG / PNG / WebP", "error");
      return;
    }
    if (file.size > 8 * 1024 * 1024) {
      toast("背景图不能超过 8MB", "error");
      return;
    }
    setBgBusy(surface);
    try {
      const pendingMode = surface === "site" ? bg.bg_site_mode : bg.bg_admin_mode;
      let res = await apiUploadSiteBackground(surface, file);
      let next = bgConfigFromSettings(res);
      const savedMode = surface === "site" ? next.bg_site_mode : next.bg_admin_mode;
      if (pendingMode !== savedMode) {
        const modeKey = surface === "site" ? "bg_site_mode" : "bg_admin_mode";
        res = await apiUpdateSiteSettings({ [modeKey]: pendingMode });
        next = bgConfigFromSettings(res);
      }
      commitBg(next);
      toast(surface === "site" ? "前台背景已更新" : "后台背景已更新", "ok");
    } catch (e) {
      toast(e instanceof Error ? e.message : "上传失败", "error");
    } finally {
      setBgBusy(null);
    }
  };

  const onChangeBgMode = async (surface: BgSurface, mode: BgMode) => {
    if (bgBusy) return;
    const key = surface === "site" ? "bg_site_mode" : "bg_admin_mode";
    const url = surface === "site" ? bg.bg_site_url : bg.bg_admin_url;
    if (!url) {
      commitBg({ ...bg, [key]: mode });
      return;
    }
    setBgBusy(surface);
    try {
      await saveBgPatch(
        { [key]: mode },
        surface === "site" ? "前台铺放方式已保存" : "后台铺放方式已保存"
      );
    } catch (e) {
      toast(e instanceof Error ? e.message : "保存失败", "error");
    } finally {
      setBgBusy(null);
    }
  };

  const onClearBg = async (surface: BgSurface) => {
    if (bgBusy) return;
    const key = surface === "site" ? "bg_site_url" : "bg_admin_url";
    setBgBusy(surface);
    try {
      await saveBgPatch(
        { [key]: "" },
        surface === "site" ? "已恢复前台默认画布" : "已恢复后台默认画布"
      );
    } catch (e) {
      toast(e instanceof Error ? e.message : "保存失败", "error");
    } finally {
      setBgBusy(null);
    }
  };

  const renderBgRail = (
    surface: BgSurface,
    title: string,
    desc: string,
    Icon: typeof Monitor,
    fileRef: typeof siteFileRef
  ) => {
    const url = surface === "site" ? bg.bg_site_url : bg.bg_admin_url;
    const mode = surface === "site" ? bg.bg_site_mode : bg.bg_admin_mode;
    const busy = bgBusy === surface;
    return (
      <div className="flex flex-col gap-3 min-w-0">
        <div className="flex items-start justify-between gap-2">
          <div className="min-w-0">
            <h3 className="text-[14px] font-medium flex items-center gap-1.5" style={{ color: "var(--ink)" }}>
              <Icon size={15} /> {title}
            </h3>
            <p className="meta text-[12.5px] mt-0.5 leading-relaxed">{desc}</p>
          </div>
        </div>
        <div
          className="relative w-full max-w-[480px] rounded-[var(--r-sm)] border overflow-hidden"
          style={{
            aspectRatio: BG_PREVIEW_ASPECT,
            borderColor: "var(--line)",
            ...previewBoxStyle(url, mode),
          }}
          role="img"
          aria-label={`${title}背景预览，按 16:9 常见显示器比例`}
          title="按 16:9（1920×1080）显示器比例预览"
        >
          {!url && (
            <span
              className="absolute inset-0 flex items-center justify-center text-[12.5px]"
              style={{ color: "var(--ink-3)" }}
            >
              默认纹饰画布
            </span>
          )}
          <span
            className="absolute bottom-1.5 right-1.5 text-[10.5px] leading-none px-1.5 py-1 rounded-[4px] pointer-events-none"
            aria-hidden
            style={{
              background: "color-mix(in srgb, var(--panel) 88%, transparent)",
              color: "var(--ink-3)",
              border: "1px solid var(--line)",
            }}
          >
            16:9
          </span>
        </div>
        <input
          ref={fileRef}
          type="file"
          accept="image/jpeg,image/png,image/webp,.jpg,.jpeg,.png,.webp"
          className="hidden"
          onChange={(e) => {
            const f = e.target.files?.[0];
            e.target.value = "";
            void onPickBg(surface, f);
          }}
        />
        <div className="flex flex-wrap items-center gap-2">
          <button
            type="button"
            className="btn btn-line btn-sm"
            disabled={busy}
            onClick={() => fileRef.current?.click()}
          >
            {busy ? <Loader2 size={14} className="animate-spin" /> : <Upload size={14} />}
            {url ? "更换图片" : "上传图片"}
          </button>
          {url ? (
            <button
              type="button"
              className="btn btn-line btn-sm"
              disabled={busy}
              onClick={() => void onClearBg(surface)}
            >
              <Trash2 size={14} /> 恢复默认
            </button>
          ) : null}
        </div>
        <div>
          <p className="field-label mb-2">铺放方式</p>
          <BgModePicker
            value={mode}
            disabled={busy}
            ariaLabel={`${title}铺放方式`}
            onChange={(next) => void onChangeBgMode(surface, next)}
          />
        </div>
      </div>
    );
  };

  return (
    <div>
      <AdminPageHeader
        icon={Palette}
        title="外观设置"
        description="配置站点主题色、背景图、代码块折叠与界面动画"
      />

      <div className="grid grid-cols-1 xl:grid-cols-3 gap-4 mb-6">
        {/* 主题色列 */}
        <div className="flex flex-col gap-4 xl:col-span-2">
          <AdminSection
            title="预设主题色"
            description="浅/暗两套色板均已调校，保证文字对比度达标"
          >
            <div className="grid grid-cols-3 sm:grid-cols-6 gap-3">
              {ACCENT_PRESETS.map((p) => {
                const active = normalized === p.light;
                const isDefault = p.light === DEFAULT_ACCENT;
                return (
                  <button
                    key={p.key}
                    type="button"
                    onClick={() => setDraft(p.light)}
                    className="group flex flex-col items-center gap-2 py-3 rounded-[var(--r-sm)] border transition-colors"
                    style={{
                      borderColor: active ? "var(--accent)" : "var(--line)",
                      background: active ? "var(--accent-soft)" : "var(--panel)",
                      cursor: "pointer",
                    }}
                    aria-pressed={active}
                    data-tip={isDefault ? `${p.name}（默认）` : p.name}
                  >
                    <span className="relative flex items-center justify-center">
                      <span className="w-9 h-9 rounded-full overflow-hidden grid grid-rows-2 border-2 border-[var(--panel)] shadow-sm">
                        <span style={{ background: p.light }} />
                        <span style={{ background: p.dark }} />
                      </span>
                      {active && (
                        <span
                          className="absolute -bottom-1 -right-1 min-w-[18px] min-h-[18px] w-[18px] h-[18px] rounded-full flex items-center justify-center"
                          style={{ background: "var(--accent)", color: "var(--accent-on)" }}
                        >
                          <Check size={11} strokeWidth={3} />
                        </span>
                      )}
                    </span>
                    <span
                      className="text-[12px] leading-none"
                      style={{ color: active ? "var(--accent)" : "var(--ink-2)" }}
                    >
                      {p.name}
                    </span>
                  </button>
                );
              })}
            </div>
          </AdminSection>

          <AdminSection
            title={
              <span className="inline-flex items-center gap-1.5">
                <Pipette size={15} /> 自定义颜色
              </span>
            }
            description="取色器选色或输入 HEX 值；浅色下对比度过低时会自动校正"
          >
            <div className="flex flex-wrap items-center gap-3">
              <label
                className="relative w-11 h-11 rounded-[var(--r-sm)] overflow-hidden border cursor-pointer shrink-0"
                style={{ borderColor: "var(--line-2)" }}
                data-tip="打开取色器"
              >
                <input
                  type="color"
                  className="absolute inset-0 w-[200%] h-[200%] -translate-x-1/4 -translate-y-1/4 cursor-pointer border-0 p-0 bg-transparent"
                  value={normalized || DEFAULT_ACCENT}
                  onChange={(e) => setDraft(e.target.value)}
                  aria-label="自定义主题色取色器"
                />
              </label>
              <div className="flex flex-col gap-1">
                <div
                  className={`admin-field-shell px-3 h-11 font-mono text-[14px] w-40${invalid ? " is-invalid" : ""}`}
                >
                  <span style={{ color: "var(--ink-3)" }}>#</span>
                  <input
                    value={draft.startsWith("#") ? draft.slice(1) : draft}
                    onChange={(e) => setDraft("#" + e.target.value.replace(/[^0-9a-fA-F#]/g, ""))}
                    className="admin-field-input flex-1 min-w-0 px-0 py-0 ml-1 uppercase"
                    maxLength={7}
                    spellCheck={false}
                    aria-label="主题色 HEX 值"
                  />
                </div>
              </div>
              {pair && (
                <div className="flex items-center gap-2 text-[12px]" style={{ color: "var(--ink-3)" }}>
                  <span className="inline-flex items-center gap-1.5">
                    <span
                      className="w-3.5 h-3.5 rounded-full border"
                      style={{ background: pair.light, borderColor: "var(--line)" }}
                    />
                    浅色 {pair.light}
                  </span>
                  <span className="inline-flex items-center gap-1.5">
                    <span
                      className="w-3.5 h-3.5 rounded-full border"
                      style={{ background: pair.dark, borderColor: "var(--line)" }}
                    />
                    暗色 {pair.dark}
                  </span>
                </div>
              )}
            </div>
            {invalid && (
              <p className="mt-2.5 text-[12.5px]" style={{ color: "var(--danger)" }}>
                颜色格式无效，请输入 6 位 HEX 值（如 3B5BDB）
              </p>
            )}
            {pair?.adjusted && (
              <p className="mt-2.5 text-[12.5px]" style={{ color: "var(--gold)" }}>
                该颜色与白底对比度不足，浅色模式已自动校正为 {pair.light}（暗色模式同步派生{" "}
                {pair.dark}）
              </p>
            )}
            {preset && preset.light === DEFAULT_ACCENT && (
              <p className="mt-2.5 text-[12.5px] meta">当前为内置默认色，保存时会清除自定义配置</p>
            )}
          </AdminSection>

          <AdminSection title="实时预览">
            <div
              className="rounded-[var(--r-sm)] border p-4 space-y-4"
              style={{
                borderColor: "var(--line)",
                background: "var(--bg)",
              }}
            >
              <div className="flex flex-wrap items-center gap-2.5">
                <button type="button" className="btn btn-primary btn-sm">
                  <Save size={14} /> 主按钮
                </button>
                <button type="button" className="btn btn-line btn-sm">
                  次要按钮
                </button>
                <a
                  className="text-[13px]"
                  style={{ color: "var(--accent)" }}
                  href="#preview"
                  onClick={(e) => e.preventDefault()}
                >
                  文字链接示例
                </a>
              </div>
              <div className="flex flex-wrap items-center gap-2">
                <span className="admin-seg">未选中</span>
                <span className="admin-seg" aria-selected="true">
                  选中标签
                </span>
                <span
                  className="inline-flex items-center rounded-full px-3.5 py-2 text-[13.5px]"
                  style={{ background: "var(--nav-active-bg)", color: "var(--nav-active-ink)" }}
                >
                  导航选中态
                </span>
              </div>
              <div className="max-w-xs">
                <section className="j13-module">
                  <p className="j13-module-title mb-2.5">板块目录</p>
                  <div className="j13-bcard" aria-current="page">
                    <span
                      className="j13-bcard-ico"
                      style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
                    >
                      <Palette size={16} />
                    </span>
                    <span className="j13-bcard-name flex-1">选中的板块</span>
                  </div>
                </section>
              </div>
            </div>
          </AdminSection>
        </div>

        {/* 代码折叠 + 动画列 */}
        <div className="flex flex-col gap-4">
          <AdminSettingRow
            title={
              <>
                <Code2 size={15} /> 代码块自动折叠
              </>
            }
            description="超过阈值行数的 Markdown 代码块默认折叠，读者可点「展开全部」。"
            control={
              <AdminSwitch
                checked={codeAutoFold}
                disabled={togglingFold}
                onChange={() => void toggleCodeFold()}
                label="代码块自动折叠"
              />
            }
          >
            {codeAutoFold ? (
              <>
                <label className="field-label" htmlFor="fold-lines">
                  折叠行数阈值
                </label>
                <p className="meta text-[12.5px] mb-2.5 leading-relaxed">
                  超过该值时折叠；折叠后约露出同样行数。设为 0 表示无预览。范围 0–100，默认 5。
                </p>
                <div className="flex flex-wrap items-center gap-2.5">
                  <AdminStepper
                    id="fold-lines"
                    value={foldLines}
                    onChange={setFoldLines}
                    min={0}
                    max={100}
                    unit="行"
                    ariaLabel="折叠行数阈值"
                    disabled={savingFoldLines}
                  />
                  <button
                    type="button"
                    className="btn btn-line btn-sm"
                    disabled={savingFoldLines}
                    onClick={() => void saveFoldLines()}
                  >
                    {savingFoldLines ? (
                      <Loader2 size={14} className="animate-spin" />
                    ) : (
                      <Save size={14} />
                    )}
                    保存
                  </button>
                </div>
              </>
            ) : null}
          </AdminSettingRow>

          <AdminSettingRow
            title={
              <>
                <Sparkles size={15} /> 界面动画
              </>
            }
            description="总开关关闭后全站即时切换。系统「减少动态效果」始终优先。"
            control={
              <AdminSwitch
                checked={uiAnimations}
                disabled={togglingMotion}
                onChange={() => void toggleMotionField("ui_animations", !uiAnimations)}
                label="界面动画总开关"
              />
            }
          >
            {uiAnimations ? (
              <div className="space-y-4">
                <div className="flex items-start justify-between gap-4 flex-wrap">
                  <div className="min-w-0 flex-1">
                    <p className="text-[13.5px] font-medium" style={{ color: "var(--ink)" }}>
                      代码折叠动画
                    </p>
                    <p className="meta text-[12.5px] mt-0.5 leading-relaxed">
                      代码块展开/收起的高度过渡与跟滚。
                    </p>
                  </div>
                  <AdminSwitch
                    checked={animCodeFold}
                    disabled={togglingMotion}
                    onChange={() => void toggleMotionField("anim_code_fold", !animCodeFold)}
                    label="代码折叠动画"
                  />
                </div>
                <div className="flex items-start justify-between gap-4 flex-wrap">
                  <div className="min-w-0 flex-1">
                    <p className="text-[13.5px] font-medium" style={{ color: "var(--ink)" }}>
                      平滑滚动
                    </p>
                    <p className="meta text-[12.5px] mt-0.5 leading-relaxed">
                      目录跳转、回顶、新内容提示等 scroll 行为。
                    </p>
                  </div>
                  <AdminSwitch
                    checked={animSmoothScroll}
                    disabled={togglingMotion}
                    onChange={() =>
                      void toggleMotionField("anim_smooth_scroll", !animSmoothScroll)
                    }
                    label="平滑滚动"
                  />
                </div>
                <div className="flex items-start justify-between gap-4 flex-wrap">
                  <div className="min-w-0 flex-1">
                    <p className="text-[13.5px] font-medium" style={{ color: "var(--ink)" }}>
                      装饰入场
                    </p>
                    <p className="meta text-[12.5px] mt-0.5 leading-relaxed">
                      列表入场、Toast、点赞弹出、在线脉冲等装饰性动画。
                    </p>
                  </div>
                  <AdminSwitch
                    checked={animChrome}
                    disabled={togglingMotion}
                    onChange={() => void toggleMotionField("anim_chrome", !animChrome)}
                    label="装饰入场"
                  />
                </div>
              </div>
            ) : null}
          </AdminSettingRow>
        </div>
      </div>

      <AdminSection
        className="mb-6"
        title={
          <span className="inline-flex items-center gap-1.5">
            <ImageIcon size={15} /> 站点背景图
          </span>
        }
        description="前台与后台可分别上传 JPEG / PNG / WebP（≤8MB）。预览按 16:9 常见显示器比例。未配置时使用默认纹饰画布。"
      >
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {renderBgRail(
            "site",
            "前台",
            "访客看到的论坛页面，含首页、帖子与个人主页。",
            Monitor,
            siteFileRef
          )}
          {renderBgRail(
            "admin",
            "后台",
            "管理面板专用。与前台互不影响，可配更克制的图案。",
            LayoutDashboard,
            adminFileRef
          )}
        </div>
      </AdminSection>

      <div className="flex items-center justify-between gap-3 sticky bottom-5 panel !p-3.5 pl-5 z-10">
        <p className="text-[12.5px] meta hidden sm:block">
          {dirty ? "有未保存的改动，整页正处于实时预览状态" : "设置已是保存状态"}
        </p>
        <div className="flex items-center gap-2.5 ml-auto">
          {dirty && (
            <button type="button" className="btn btn-line btn-sm" onClick={discard}>
              <Undo2 size={14} /> 撤销改动
            </button>
          )}
          <button
            type="button"
            className="btn btn-line btn-sm"
            onClick={() => {
              setDraft(DEFAULT_ACCENT);
            }}
          >
            <RotateCcw size={14} /> 恢复默认
          </button>
          <button
            type="button"
            className="btn btn-primary btn-sm"
            onClick={handleSave}
            disabled={!normalized || saving || !dirty}
          >
            {saving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
            保存并全站生效
          </button>
        </div>
      </div>
    </div>
  );
}