import { App, Button, Form, Input, Skeleton } from "antd";
import { Select } from "@/pages/admin/ui/controls";
import { Switch } from "@/pages/admin/ui/controls";
import { AlertTriangle, BadgeCheck, Check, Cloud, Database, Globe2, HardDrive, KeyRound, LocateFixed, RefreshCw, RotateCcw, Save, Server, ShieldCheck, Wifi } from "lucide-react";
import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
import { useBlocker } from "react-router";

import { changesRequireOSSRetest, DEFAULT_OSS_PATH_PREFIX, getS3PresetHints, normalizeOSSConnectionTestInput, S3_PRESET_OPTIONS, type OSSConnectionTestResult, type S3Preset } from "@/lib/oss-settings";
import { cn } from "@/lib/utils";
import { getAdminOSSSetting, testAdminOSSConnection, updateAdminOSSSetting, type AdminOSSSetting } from "@/services/api/auth";
import { useAppearanceStore } from "@/stores/use-appearance-store";
import { AdminPageFrame } from "../components/admin-shell";
import { AdminStatusBadge, configuredSecretText, SettingsSectionCard } from "../components/admin-ui";

type StorageMode = "local" | AdminOSSSetting["provider"];
type OSSFormValues = {
    mode: StorageMode;
    publicBaseUrl: string;
    region: string;
    endpoint: string;
    cdnBaseUrl: string;
    cdnAuthMode: "" | "public" | "qiniu" | string;
    requireCDN: boolean;
    allowPrivateProxy: boolean;
    bucket: string;
    accessKeyId: string;
    accessKeySecret: string;
    sessionToken: string;
    pathPrefix: string;
    s3Preset: S3Preset;
    pathStyle: boolean;
    allowUserS3: boolean;
};

type StoragePayload = Pick<
    AdminOSSSetting,
    | "enabled"
    | "provider"
    | "region"
    | "endpoint"
    | "cdnBaseUrl"
    | "cdnAuthMode"
    | "requireCDN"
    | "allowPrivateProxy"
    | "bucket"
    | "accessKeyId"
    | "accessKeySecret"
    | "sessionToken"
    | "publicBaseUrl"
    | "pathPrefix"
    | "s3Preset"
    | "pathStyle"
    | "allowUserS3"
>;

const STORAGE_MODES: Array<{ mode: StorageMode; label: string; short: string; description: string }> = [
    { mode: "local", label: "服务器本地", short: "本地磁盘", description: "新增资源写入当前部署的数据目录，通过后端签名链接访问。" },
    { mode: "aliyun", label: "阿里云 OSS", short: "对象存储", description: "新增资源写入阿里云 Bucket，可选 CDN 域名读取。" },
    { mode: "tencent", label: "腾讯云 COS", short: "对象存储", description: "新增资源写入腾讯云 Bucket，可由 Region 生成 Endpoint。" },
    { mode: "qiniu", label: "七牛云 Kodo", short: "对象存储", description: "新增资源上传到 Kodo；无绑定域名时由后端代理读取。" },
    { mode: "s3", label: "S3 兼容存储", short: "对象存储", description: "支持 AWS S3、Cloudflare R2、Backblaze B2、RustFS 与自定义 S3 Endpoint。" },
];

export default function StorageSettingsPage() {
    const { message, modal } = App.useApp();
    const brandSlug = useAppearanceStore((state) => state.appearance.brandSlug);
    const [setting, setSetting] = useState<AdminOSSSetting | null>(null);
    const [loading, setLoading] = useState(true);
    const [refreshing, setRefreshing] = useState(false);
    const [saving, setSaving] = useState(false);
    const [testing, setTesting] = useState(false);
    const [testResult, setTestResult] = useState<OSSConnectionTestResult | null>(null);
    const [testStale, setTestStale] = useState(false);
    const [dirty, setDirty] = useState(false);
    const [draftMode, setDraftMode] = useState<StorageMode>("local");
    const [loadError, setLoadError] = useState("");
    const [saveError, setSaveError] = useState("");
    const [form] = Form.useForm<OSSFormValues>();
    const requestVersionRef = useRef(0);
    const navigationConfirmOpenRef = useRef(false);
    const navigationTriggerRef = useRef<HTMLElement | null>(null);

    const load = useCallback(
        async (initial = false, announce = false) => {
            const requestVersion = ++requestVersionRef.current;
            if (initial) setLoading(true);
            else setRefreshing(true);
            setLoadError("");
            try {
                const result = await getAdminOSSSetting();
                if (requestVersion !== requestVersionRef.current) return;
                if (!isAdminOSSSetting(result.setting)) throw new Error("服务端返回的存储配置格式无效");
                setSetting(result.setting);
                setTestResult(result.setting.testedAt ? { ok: true, testedAt: result.setting.testedAt, testedDigest: result.setting.testedDigest } : null);
                setTestStale(false);
                setDirty(false);
                setSaveError("");
                if (announce) message.success("已重新读取当前平台存储配置");
            } catch (error) {
                if (requestVersion !== requestVersionRef.current) return;
                const errorMessage = error instanceof Error ? error.message : "读取对象存储配置失败";
                setLoadError(errorMessage);
                if (!initial) message.error(errorMessage);
            } finally {
                if (requestVersion === requestVersionRef.current) {
                    setLoading(false);
                    setRefreshing(false);
                }
            }
        },
        [message],
    );

    useEffect(() => {
        void load(true);
        return () => {
            requestVersionRef.current += 1;
        };
    }, [load]);

    useEffect(() => {
        if (loading || !setting) return;
        const values = formValues(setting);
        form.setFieldsValue(values);
        setDraftMode(values.mode);
    }, [form, loading, setting]);

    const blocker = useBlocker(dirty && !saving);

    useEffect(() => {
        const beforeUnload = (event: BeforeUnloadEvent) => {
            if (!dirty || saving) return;
            event.preventDefault();
        };
        window.addEventListener("beforeunload", beforeUnload);
        return () => window.removeEventListener("beforeunload", beforeUnload);
    }, [dirty, saving]);

    useEffect(() => {
        if (blocker.state !== "blocked" || navigationConfirmOpenRef.current) return;
        navigationConfirmOpenRef.current = true;
        navigationTriggerRef.current = document.activeElement instanceof HTMLElement && document.activeElement !== document.body ? document.activeElement : null;
        modal.confirm({
            title: "放弃存储服务调整？",
            content: "当前页面有尚未保存的存储位置或接入配置，离开后这些草稿会丢失。服务端正在使用的存储配置不会改变。",
            okText: "放弃并离开",
            cancelText: "继续编辑",
            okButtonProps: { danger: true },
            onOk: () => {
                navigationConfirmOpenRef.current = false;
                navigationTriggerRef.current = null;
                blocker.proceed();
            },
            onCancel: () => {
                navigationConfirmOpenRef.current = false;
                blocker.reset();
                window.requestAnimationFrame(() => {
                    const fallback = document.querySelector<HTMLButtonElement>(".admin-storage-command-actions button");
                    const target = navigationTriggerRef.current?.isConnected ? navigationTriggerRef.current : fallback;
                    target?.focus();
                    navigationTriggerRef.current = null;
                });
            },
        });
    }, [blocker, modal]);

    const resetDraft = () => {
        if (!setting || saving) return;
        const values = formValues(setting);
        form.setFieldsValue(values);
        form.setFields([]);
        setDraftMode(values.mode);
        setDirty(false);
        setSaveError("");
        setTestResult(setting.testedAt ? { ok: true, testedAt: setting.testedAt, testedDigest: setting.testedDigest } : null);
        setTestStale(false);
        message.info("已撤销存储服务的未保存调整");
    };

    const requestRefresh = () => {
        if (!dirty) {
            void load(false, true);
            return;
        }
        modal.confirm({
            title: "放弃调整并重新读取？",
            content: "重新读取会丢弃当前存储表单中的未保存内容，并以服务端配置为准。",
            okText: "放弃并刷新",
            cancelText: "继续编辑",
            okButtonProps: { danger: true },
            onOk: () => load(false, true),
        });
    };

    const applyMode = (nextMode: StorageMode): OSSFormValues | null => {
        if (!setting) return null;
        const current = form.getFieldsValue(true);
        const nextValues: Partial<OSSFormValues> = { mode: nextMode };
        if (nextMode !== "local") {
            Object.assign(nextValues, providerDraftValues(nextMode, setting, current.pathPrefix));
        }
        form.setFieldsValue(nextValues);
        form.setFields([]);
        setDraftMode(nextMode);
        setDirty(hasStorageChanges({ ...current, ...nextValues }, setting));
        setTestStale(true);
        setSaveError("");
        return { ...current, ...nextValues } as OSSFormValues;
    };

    const requestModeChange = (nextMode: StorageMode) => {
        if (!setting || nextMode === draftMode || saving || refreshing) return;
        applyMode(nextMode);
    };

    const useBrandPathPrefix = () => {
        if (!setting || saving || refreshing) return;
        const current = form.getFieldsValue(true);
        form.setFieldValue("pathPrefix", brandSlug);
        setDirty(hasStorageChanges({ ...current, pathPrefix: brandSlug }, setting));
        setTestStale(true);
        setSaveError("");
    };

    const save = async (values: OSSFormValues) => {
        if (!setting) return;
        const expected = normalizeStoragePayload(values, setting);
        setSaving(true);
        setSaveError("");
        try {
            const result = await updateAdminOSSSetting(expected);
            if (!isAdminOSSSetting(result.setting) || !storageResponseMatches(result.setting, expected)) throw new Error("服务端返回的存储配置与本次保存内容不一致，请重新读取后核对");
            setSetting(result.setting);
            const nextValues = formValues(result.setting);
            form.setFieldsValue(nextValues);
            setDraftMode(nextValues.mode);
            setDirty(false);
            setTestResult(result.setting.testedAt ? { ok: true, testedAt: result.setting.testedAt, testedDigest: result.setting.testedDigest } : null);
            setTestStale(false);
            message.success("平台存储配置已保存");
        } catch (error) {
            const errorMessage = error instanceof Error ? error.message : "保存存储配置失败";
            setSaveError(`${errorMessage}。未自动重试，请重新读取当前配置后再决定是否保存。`);
            message.error(errorMessage);
            throw error;
        } finally {
            setSaving(false);
        }
    };

    const submitSave = async () => {
        if (!setting) return;
        let values: OSSFormValues;
        try {
            values = await form.validateFields();
        } catch {
            return;
        }
        const validationError = validateStorageDraft(values, setting);
        if (validationError) {
            message.error(validationError);
            return;
        }
        try {
            await save(values);
        } catch {
            // 保存错误已在 save 中就地提示。
        }
    };

    const testConnection = async () => {
        if (!setting) return;
        let values: OSSFormValues;
        try {
            values = await form.validateFields();
        } catch {
            return;
        }
        const validationError = validateStorageDraft(values, setting);
        if (validationError) {
            message.error(validationError);
            return;
        }
        if (values.mode === "local") return;
        setTesting(true);
        try {
            const result = await testAdminOSSConnection(connectionInput(values));
            setTestResult(result);
            setTestStale(false);
            result.ok ? message.success(result.message || "连接测试通过") : message.error(result.message || "连接测试失败");
        } catch (error) {
            const errorMessage = error instanceof Error ? error.message : "连接测试失败";
            setTestResult({ ok: false, message: errorMessage });
            setTestStale(false);
            message.error(errorMessage);
        } finally {
            setTesting(false);
        }
    };

    if (loading && !setting) {
        return (
            <AdminPageFrame title="存储服务" description="配置新增资源的默认存储位置" scroll>
                <div className="admin-settings-stack admin-storage-settings" aria-label="正在读取平台存储配置" role="status">
                    <div className="admin-storage-loading-card">
                        <Skeleton active paragraph={{ rows: 7 }} />
                    </div>
                </div>
            </AdminPageFrame>
        );
    }

    if (!setting) {
        return (
            <AdminPageFrame title="存储服务" description="配置新增资源的默认存储位置" scroll>
                <div className="admin-settings-stack admin-storage-settings">
                    <div className="admin-storage-load-error" role="alert">
                        <span className="admin-storage-load-error-icon">
                            <AlertTriangle className="size-5" aria-hidden="true" />
                        </span>
                        <div>
                            <h2>无法读取平台存储配置</h2>
                            <p>{loadError || "当前没有可显示的配置，请稍后重试。"}</p>
                        </div>
                        <Button icon={<RefreshCw className="size-4" />} loading={refreshing} onClick={() => void load(false, true)}>
                            重新读取
                        </Button>
                    </div>
                </div>
            </AdminPageFrame>
        );
    }

    const currentValues = form.getFieldsValue(true);
    const normalizedDraft = normalizeStoragePayload(currentValues, setting);
    const hasCurrentProviderSecret = draftMode !== "local" && setting.provider === draftMode && setting.hasAccessKeySecret;

    return (
        <AdminPageFrame title="存储服务" description="配置新增资源的默认存储位置" scroll>
            <div className="admin-settings-stack admin-storage-settings">
                <div className={cn("admin-storage-command-bar", dirty && "is-dirty")}>
                    <div className="admin-storage-command-copy" aria-live="polite">
                        <span className="admin-storage-command-icon">
                            <Database className="size-4" aria-hidden="true" />
                        </span>
                        <div>
                            <strong>{dirty ? "有未保存的存储调整" : `当前使用：${storageProviderLabel(draftMode)}`}</strong>
                            <p>{dirty ? "保存后仅影响新增资源。" : formatSettingTime(setting.updatedAt, "使用系统默认值")}</p>
                        </div>
                    </div>
                    <div className="admin-storage-command-actions">
                        {dirty ? (
                            <Button icon={<RotateCcw className="size-4" />} disabled={saving} onClick={resetDraft}>
                                撤销调整
                            </Button>
                        ) : null}
                        <Button icon={<RefreshCw className="size-4" />} loading={refreshing} disabled={saving} onClick={requestRefresh}>
                            刷新状态
                        </Button>
                    </div>
                </div>

                {loadError || saveError ? (
                    <div className="admin-storage-inline-alert" role="alert">
                        <AlertTriangle className="size-4 shrink-0" aria-hidden="true" />
                        <span>{saveError || `${loadError}。页面仍显示上一次成功读取的配置。`}</span>
                    </div>
                ) : null}

                <div id="admin-storage-mode" className="admin-settings-anchor">
                    <SettingsSectionCard
                        className="admin-storage-section admin-storage-mode-section"
                        icon={<HardDrive className="size-4" aria-hidden="true" />}
                        title="1. 选择新资源存储位置"
                        description="先选择一种存储方式。选择结果会决定下一步需要填写的接入信息，不会迁移已有资源。"
                        status={<AdminStatusBadge label={dirty ? "待保存" : "当前设置"} tone={dirty ? "warning" : "info"} />}
                    >
                        <div className="admin-storage-mode-content">
                            <div className="admin-storage-mode-grid" role="radiogroup" aria-label="新增资源存储位置">
                                {STORAGE_MODES.map((item) => (
                                    <button
                                        key={item.mode}
                                        type="button"
                                        role="radio"
                                        aria-checked={draftMode === item.mode}
                                        className={cn("admin-storage-mode-choice", draftMode === item.mode && "is-selected")}
                                        disabled={loading || refreshing || saving}
                                        onClick={() => requestModeChange(item.mode)}
                                    >
                                        <span className="admin-storage-mode-icon">{item.mode === "local" ? <HardDrive className="size-4" aria-hidden="true" /> : <Cloud className="size-4" aria-hidden="true" />}</span>
                                        <span className="admin-storage-mode-copy">
                                            <strong>{item.label}</strong>
                                            <small>{item.description}</small>
                                        </span>
                                        <span className="admin-storage-mode-meta">{item.short}</span>
                                        {draftMode === item.mode ? (
                                            <span className="admin-storage-mode-selected">
                                                <Check className="size-3.5" aria-hidden="true" />
                                                已选择
                                            </span>
                                        ) : null}
                                    </button>
                                ))}
                            </div>
                            <div className="admin-storage-history-note">
                                <ShieldCheck className="size-4" aria-hidden="true" />
                                <span>选择后继续完成第 2 步并保存。保存只改变新增资源；历史资源仍按自身记录的 provider、Endpoint 和 Bucket 读取。</span>
                            </div>
                        </div>
                    </SettingsSectionCard>
                </div>

                <div id="admin-storage-access" className="admin-settings-anchor">
                    <SettingsSectionCard
                        className="admin-storage-section admin-storage-configuration-section"
                        icon={draftMode === "local" ? <Server className="size-4" aria-hidden="true" /> : <Cloud className="size-4" aria-hidden="true" />}
                        title={draftMode === "local" ? "2. 配置服务器本地访问" : `2. 配置 ${storageProviderLabel(draftMode)} 接入`}
                        description={draftMode === "local" ? "填写浏览器访问本地资源时使用的服务器根地址，然后保存。" : "按顺序填写存储位置、读取出口和服务端访问密钥，然后测试并保存。"}
                        status={
                            <AdminStatusBadge
                                label={dirty ? "有调整" : storageConfigurationReady(draftMode, normalizedDraft, setting) ? "已配置" : "待配置"}
                                tone={dirty ? "warning" : storageConfigurationReady(draftMode, normalizedDraft, setting) ? "success" : "neutral"}
                            />
                        }
                        footer={
                            <>
                                <div className="admin-storage-footer-note">
                                    <BadgeCheck className="size-4" aria-hidden="true" />
                                    <span>{formatSettingTime(setting.updatedAt, "尚未保存平台存储配置")} · 保存不会自动连接存储服务，建议先执行连接测试</span>
                                </div>
                                <div className="flex flex-wrap items-center gap-2">
                                    {dirty ? (
                                        <Button icon={<RotateCcw className="size-4" />} disabled={saving} onClick={resetDraft}>
                                            撤销
                                        </Button>
                                    ) : null}
                                    <Button type="primary" icon={<Save className="size-4" />} loading={saving} disabled={!dirty || loading || refreshing} onClick={() => void submitSave()}>
                                        保存修改
                                    </Button>
                                </div>
                            </>
                        }
                    >
                        <Form
                            form={form}
                            layout="vertical"
                            requiredMark={false}
                            disabled={loading || refreshing || saving}
                            onValuesChange={(changedValues) => {
                                const values = form.getFieldsValue(true);
                                setDraftMode(values.mode || "local");
                                setDirty(hasStorageChanges(values, setting));
                                if (changesRequireOSSRetest(changedValues)) setTestStale(true);
                                setSaveError("");
                            }}
                        >
                            <Form.Item name="mode" hidden>
                                <Input />
                            </Form.Item>

                            {draftMode === "local" ? (
                                <div className="admin-storage-form-section">
                                    <FormSectionTitle icon={<Globe2 className="size-4" />} title="公开访问根地址" description="用于生成本地资源的短时签名链接；填写站点根地址，不要附带 /api、查询参数或片段。" />
                                    <div className="admin-storage-local-field">
                                        <Form.Item name="publicBaseUrl" label="服务器访问地址" extra="服务端还会按部署安全策略校验协议、主机及私网访问许可。">
                                            <div className="admin-storage-address-control">
                                                <Input aria-label="服务器访问地址" autoComplete="off" inputMode="url" placeholder="https://canvas.example.com" prefix={<Globe2 className="size-4 text-foreground/35" />} />
                                                <Button
                                                    icon={<LocateFixed className="size-4" />}
                                                    onClick={() => {
                                                        const value = window.location.origin;
                                                        form.setFieldValue("publicBaseUrl", value);
                                                        setDirty(hasStorageChanges({ ...form.getFieldsValue(true), publicBaseUrl: value }, setting));
                                                        setSaveError("");
                                                    }}
                                                >
                                                    使用当前地址
                                                </Button>
                                            </div>
                                        </Form.Item>
                                    </div>
                                    <div className="admin-storage-context-note">
                                        <HardDrive className="size-4" aria-hidden="true" />
                                        <span>本地模式适合单机或共享数据卷部署。该地址只决定资源访问链接，不会移动现有文件或改变数据目录。</span>
                                    </div>
                                </div>
                            ) : (
                                <>
                                    <div className="admin-storage-provider-note">
                                        <Cloud className="size-4" aria-hidden="true" />
                                        <span>{providerGuidance(draftMode)}</span>
                                    </div>

                                    <div className="admin-storage-form-section">
                                        <FormSectionTitle icon={<Database className="size-4" />} title="存储位置" description="Bucket 决定容器，路径前缀用于隔离当前应用写入的对象目录。" />
                                        {draftMode === "s3" ? (
                                            <Form.Item name="s3Preset" label="S3 预设" extra={getS3PresetHints(form.getFieldValue("s3Preset") || "custom").help}>
                                                <Select
                                                    options={S3_PRESET_OPTIONS}
                                                    onChange={(preset: S3Preset) => {
                                                        const hints = getS3PresetHints(preset);
                                                        form.setFieldsValue({ region: hints.region, endpoint: hints.endpoint });
                                                        setDirty(hasStorageChanges({ ...form.getFieldsValue(true), region: hints.region, endpoint: hints.endpoint, s3Preset: preset }, setting));
                                                        setTestStale(true);
                                                    }}
                                                />
                                            </Form.Item>
                                        ) : null}
                                        <div className="admin-storage-form-grid is-location">
                                            <Form.Item name="region" label="Region" extra={draftMode === "tencent" ? "Endpoint 留空时由 Region 自动生成。" : draftMode === "qiniu" ? "无绑定域名时用于兼容 S3 的私有读取。" : "按云厂商控制台显示值填写。"}>
                                                <Input
                                                    autoComplete="off"
                                                    placeholder={
                                                        draftMode === "s3" ? getS3PresetHints(form.getFieldValue("s3Preset") || "custom").region : draftMode === "tencent" ? "ap-guangzhou" : draftMode === "qiniu" ? "z0 / cn-east-1" : "oss-cn-hangzhou"
                                                    }
                                                />
                                            </Form.Item>
                                            <Form.Item name="bucket" label="Bucket">
                                                <Input autoComplete="off" placeholder={draftMode === "qiniu" ? "七牛云存储空间名称" : "对象存储 Bucket"} />
                                            </Form.Item>
                                            <Form.Item label="路径前缀" extra={`可自行填写；也可采用外观管理中的英文品牌标识 ${brandSlug}。保存时自动去除首尾斜杠。`}>
                                                <div className="admin-storage-address-control">
                                                    <Form.Item name="pathPrefix" noStyle>
                                                        <Input autoComplete="off" placeholder={`例如：${brandSlug}`} />
                                                    </Form.Item>
                                                    <Button disabled={saving || refreshing || form.getFieldValue("pathPrefix") === brandSlug} onClick={useBrandPathPrefix}>
                                                        使用品牌标识
                                                    </Button>
                                                </div>
                                            </Form.Item>
                                        </div>
                                    </div>

                                    <div className="admin-storage-form-section">
                                        <FormSectionTitle icon={<Globe2 className="size-4" />} title="连接与读取出口" description="Endpoint 用于服务端写入；CDN 或绑定域名只决定浏览器读取出口。" />
                                        <div className="admin-storage-form-grid">
                                            <Form.Item
                                                name="endpoint"
                                                label={draftMode === "qiniu" ? "上传 Endpoint" : "Endpoint"}
                                                extra={
                                                    draftMode === "s3"
                                                        ? getS3PresetHints(form.getFieldValue("s3Preset") || "custom").help
                                                        : draftMode === "tencent"
                                                          ? "可留空并由 Region 生成，也可填写完整 COS Endpoint。"
                                                          : "必须填写完整的 http/https 地址，服务端会继续执行出站安全校验。"
                                                }
                                            >
                                                <Input
                                                    autoComplete="off"
                                                    inputMode="url"
                                                    placeholder={
                                                        draftMode === "s3"
                                                            ? getS3PresetHints(form.getFieldValue("s3Preset") || "custom").endpoint
                                                            : draftMode === "tencent"
                                                              ? "https://cos.ap-guangzhou.myqcloud.com"
                                                              : draftMode === "qiniu"
                                                                ? "https://up-z0.qiniup.com"
                                                                : "https://oss-cn-hangzhou.aliyuncs.com"
                                                    }
                                                />
                                            </Form.Item>
                                            <Form.Item
                                                name="cdnBaseUrl"
                                                label={draftMode === "qiniu" ? "绑定域名（可选）" : "CDN 加速域名（可选）"}
                                                extra={draftMode === "qiniu" ? "留空时按下方分发策略处理；不会由浏览器自行决定是否代理。" : "只填写域名根地址，不包含路径、查询参数或认证信息。"}
                                            >
                                                <Input autoComplete="off" inputMode="url" placeholder="https://media.example.com" />
                                            </Form.Item>
                                            <Form.Item name="cdnAuthMode" label="CDN 访问鉴权" extra="public 适用于 CDN 已公开或由 CDN 自行鉴权；qiniu 仅支持七牛私有下载签名。阿里云/腾讯云私有 CDN 暂不自动签名。">
                                                <Select
                                                    options={[
                                                        { label: "未配置（回源或按兜底策略）", value: "" },
                                                        { label: "公开 CDN", value: "public" },
                                                        { label: "七牛私有下载签名", value: "qiniu" },
                                                    ]}
                                                />
                                            </Form.Item>
                                            <Form.Item name="requireCDN" label="必须走 CDN" valuePropName="checked" extra="开启后 CDN 鉴权配置不完整时直接失败，不会静默回源。">
                                                <Switch checkedChildren="严格" unCheckedChildren="允许回源" />
                                            </Form.Item>
                                            <Form.Item name="allowPrivateProxy" label="允许模型输入代理" valuePropName="checked" extra="仅允许服务端向第三方模型提交参考素材时读取私有源站。浏览器展示、复制、下载和本地处理始终直连 OSS/CDN，不会经平台中转媒体正文。">
                                                <Switch checkedChildren="允许" unCheckedChildren="禁止" />
                                            </Form.Item>
                                        </div>
                                    </div>

                                    <div className="admin-storage-form-section">
                                        <FormSectionTitle icon={<KeyRound className="size-4" />} title="服务端访问凭据" description="密钥仅用于当前后端读写对象；切换厂商时不能复用另一厂商的 Secret。" />
                                        <div className="admin-storage-form-grid">
                                            <Form.Item name="accessKeyId" label={accessKeyIdLabel(draftMode)}>
                                                <Input autoComplete="off" placeholder={accessKeyIdLabel(draftMode)} />
                                            </Form.Item>
                                            <Form.Item name="accessKeySecret" label={hasCurrentProviderSecret ? `${accessKeySecretLabel(draftMode)}（${configuredSecretText}）` : accessKeySecretLabel(draftMode)} extra="只在新增或替换当前厂商密钥时填写。">
                                                <Input.Password autoComplete="new-password" placeholder={hasCurrentProviderSecret ? "留空保留原密钥" : accessKeySecretLabel(draftMode)} />
                                            </Form.Item>
                                            {draftMode === "s3" ? (
                                                <Form.Item
                                                    name="sessionToken"
                                                    label={setting.provider === "s3" && setting.hasSessionToken ? `Session Token（${configuredSecretText}）` : "Session Token（可选）"}
                                                    extra="使用临时凭证时填写；留空会保留当前 S3 提供方已有 Token。"
                                                >
                                                    <Input.Password autoComplete="new-password" placeholder={setting.provider === "s3" && setting.hasSessionToken ? "留空保留原 Token" : "临时凭证 Session Token"} />
                                                </Form.Item>
                                            ) : null}
                                        </div>
                                        {draftMode === "s3" ? (
                                            <Form.Item name="pathStyle" label="Path Style" valuePropName="checked" extra="开启后强制使用 path-style；关闭时由后端按 Endpoint 自动选择。">
                                                <Switch checkedChildren="强制" unCheckedChildren="自动" />
                                            </Form.Item>
                                        ) : null}
                                    </div>
                                    <div className="admin-storage-form-section">
                                        <FormSectionTitle icon={<Wifi className="size-4" />} title="连接验证" description="使用当前草稿执行最小读写测试；测试不会保存配置，也不会迁移已有资源。" />
                                        <div className="flex flex-wrap items-center gap-3">
                                            <Button icon={<Wifi className="size-4" />} loading={testing} disabled={saving || refreshing} onClick={() => void testConnection()}>
                                                测试连接
                                            </Button>
                                            <ConnectionTestStatus result={testResult} stale={testStale} />
                                        </div>
                                    </div>
                                </>
                            )}
                            <div className="admin-storage-form-section">
                                <FormSectionTitle icon={<ShieldCheck className="size-4" />} title="用户自有存储" description="允许用户配置个人 S3 兼容存储；个人配置停用时仍回退到平台存储。" />
                                <Form.Item name="allowUserS3" label="允许个人 S3 兼容存储" valuePropName="checked">
                                    <Switch checkedChildren="允许" unCheckedChildren="不允许" />
                                </Form.Item>
                            </div>
                        </Form>
                    </SettingsSectionCard>
                </div>
            </div>
        </AdminPageFrame>
    );
}

function FormSectionTitle({ icon, title, description }: { icon: ReactNode; title: string; description: string }) {
    return (
        <div className="admin-storage-form-section-heading">
            <span>{icon}</span>
            <div>
                <h3>{title}</h3>
                <p>{description}</p>
            </div>
        </div>
    );
}

function formValues(setting: AdminOSSSetting): OSSFormValues {
    return {
        mode: setting.enabled ? setting.provider : "local",
        publicBaseUrl: setting.publicBaseUrl || "",
        region: setting.region || "",
        endpoint: setting.endpoint || "",
        cdnBaseUrl: setting.cdnBaseUrl || "",
        cdnAuthMode: setting.cdnAuthMode || "",
        requireCDN: setting.requireCDN === true,
        allowPrivateProxy: setting.allowPrivateProxy === true,
        bucket: setting.bucket || "",
        accessKeyId: setting.accessKeyId || "",
        accessKeySecret: "",
        sessionToken: "",
        pathPrefix: setting.pathPrefix || DEFAULT_OSS_PATH_PREFIX,
        s3Preset: setting.s3Preset || "custom",
        pathStyle: setting.pathStyle === true,
        allowUserS3: setting.allowUserS3 === true,
    };
}

function providerDraftValues(mode: Exclude<StorageMode, "local">, setting: AdminOSSSetting, pathPrefix: string): Partial<OSSFormValues> {
    if (mode === setting.provider) {
        return {
            region: setting.region || "",
            endpoint: setting.endpoint || "",
            cdnBaseUrl: setting.cdnBaseUrl || "",
            cdnAuthMode: setting.cdnAuthMode || "",
            requireCDN: setting.requireCDN === true,
            allowPrivateProxy: setting.allowPrivateProxy === true,
            bucket: setting.bucket || "",
            accessKeyId: setting.accessKeyId || "",
            accessKeySecret: "",
            sessionToken: "",
            pathPrefix: setting.pathPrefix || pathPrefix || "",
            s3Preset: setting.s3Preset || "custom",
            pathStyle: setting.pathStyle === true,
        };
    }
    return {
        region: "",
        endpoint: "",
        cdnBaseUrl: "",
        cdnAuthMode: "",
        requireCDN: false,
        allowPrivateProxy: false,
        bucket: "",
        accessKeyId: "",
        accessKeySecret: "",
        sessionToken: "",
        pathPrefix: pathPrefix || DEFAULT_OSS_PATH_PREFIX,
        s3Preset: "custom",
        pathStyle: false,
    };
}

function normalizeStoragePayload(values: Partial<OSSFormValues>, setting: AdminOSSSetting): StoragePayload {
    const mode = values.mode || "local";
    const provider = mode === "local" ? setting.provider || "aliyun" : mode;
    const region = values.region?.trim() || "";
    let endpoint = trimTrailingSlash(values.endpoint || "");
    if (provider === "tencent" && !endpoint && region) endpoint = `https://cos.${region}.myqcloud.com`;
    return {
        enabled: mode !== "local",
        provider,
        region,
        endpoint,
        cdnBaseUrl: trimTrailingSlash(values.cdnBaseUrl || ""),
        cdnAuthMode: values.cdnAuthMode || "",
        requireCDN: values.requireCDN === true,
        allowPrivateProxy: values.allowPrivateProxy === true,
        bucket: values.bucket?.trim() || "",
        accessKeyId: values.accessKeyId?.trim() || "",
        accessKeySecret: values.accessKeySecret?.trim() || "",
        sessionToken: values.sessionToken?.trim() || "",
        publicBaseUrl: trimTrailingSlash(values.publicBaseUrl || ""),
        pathPrefix: (values.pathPrefix?.trim() || DEFAULT_OSS_PATH_PREFIX).replace(/^\/+|\/+$/g, ""),
        s3Preset: values.s3Preset || "custom",
        pathStyle: values.pathStyle === true,
        allowUserS3: values.allowUserS3 === true,
    };
}

function hasStorageChanges(values: Partial<OSSFormValues>, setting: AdminOSSSetting | null) {
    if (!setting) return false;
    const draft = normalizeStoragePayload(values, setting);
    const saved = normalizeStoragePayload(formValues(setting), setting);
    if (draft.accessKeySecret || draft.sessionToken) return true;
    return (Object.keys(saved) as Array<keyof StoragePayload>).some((key) => key !== "accessKeySecret" && key !== "sessionToken" && draft[key] !== saved[key]);
}

function validateStorageDraft(values: OSSFormValues, setting: AdminOSSSetting) {
    const draft = normalizeStoragePayload(values, setting);
    if (!draft.enabled) return validatePublicBaseURL(draft.publicBaseUrl);
    if (!draft.bucket) return "请填写对象存储 Bucket";
    if (!draft.endpoint)
        return draft.provider === "tencent" ? "请填写腾讯云 COS Region 或 Endpoint" : draft.provider === "qiniu" ? "请填写七牛云 Kodo 上传 Endpoint" : draft.provider === "s3" ? "请填写 S3 Endpoint 服务根 URL" : "请填写阿里云 OSS Endpoint";
    if (draft.provider === "s3" && !draft.region) return "请填写 S3 Region";
    if (!isHTTPURL(draft.endpoint)) return "Endpoint 必须是完整的 http/https 地址";
    if (draft.cdnBaseUrl && !isValidCDNBaseURL(draft.cdnBaseUrl)) return "CDN 或绑定域名只能填写 http/https 根地址，不能包含认证、路径、查询参数或片段";
    if (!draft.accessKeyId) return `请填写 ${accessKeyIdLabel(draft.provider)}`;
    if (!draft.accessKeySecret && !(setting.provider === draft.provider && setting.hasAccessKeySecret)) return `请填写 ${accessKeySecretLabel(draft.provider)}`;
    return "";
}

function validatePublicBaseURL(value: string) {
    if (!value) return "服务器本地存储需要填写服务器访问地址";
    try {
        const parsed = new URL(value);
        if (!parsed.hostname || !["http:", "https:"].includes(parsed.protocol)) return "服务器访问地址必须是完整的 http/https 地址";
        if (parsed.search || parsed.hash) return "服务器访问地址不能包含查询参数或片段";
        if (parsed.pathname.replace(/\/+$/, "").endsWith("/api")) return "服务器访问地址请填写站点根地址，不要包含 /api";
        return "";
    } catch {
        return "服务器访问地址必须是完整的 http/https 地址";
    }
}

function storageResponseMatches(setting: AdminOSSSetting, expected: StoragePayload) {
    const actual = normalizeStoragePayload(formValues(setting), setting);
    const fields: Array<keyof StoragePayload> = ["enabled", "provider", "region", "endpoint", "cdnBaseUrl", "cdnAuthMode", "requireCDN", "allowPrivateProxy", "bucket", "accessKeyId", "publicBaseUrl", "pathPrefix", "s3Preset", "pathStyle", "allowUserS3"];
    if (expected.accessKeySecret && !setting.hasAccessKeySecret) return false;
    if (expected.sessionToken && !setting.hasSessionToken) return false;
    return fields.every((key) => actual[key] === expected[key]);
}

function isAdminOSSSetting(value: unknown): value is AdminOSSSetting {
    if (!value || typeof value !== "object") return false;
    const setting = value as Partial<AdminOSSSetting>;
    return (
        typeof setting.enabled === "boolean" &&
        ["aliyun", "tencent", "qiniu", "s3"].includes(setting.provider || "") &&
        ["aws", "r2", "b2", "rustfs", "custom"].includes(setting.s3Preset || "") &&
        typeof setting.region === "string" &&
        typeof setting.endpoint === "string" &&
        typeof setting.cdnBaseUrl === "string" &&
        typeof setting.cdnAuthMode === "string" &&
        typeof setting.requireCDN === "boolean" &&
        typeof setting.allowPrivateProxy === "boolean" &&
        typeof setting.bucket === "string" &&
        typeof setting.accessKeyId === "string" &&
        typeof setting.hasAccessKeySecret === "boolean" &&
        typeof setting.hasSessionToken === "boolean" &&
        typeof setting.pathStyle === "boolean" &&
        typeof setting.allowUserS3 === "boolean" &&
        typeof setting.publicBaseUrl === "string" &&
        typeof setting.pathPrefix === "string"
    );
}

function storageConfigurationReady(mode: StorageMode, values: StoragePayload, setting: AdminOSSSetting) {
    if (mode === "local") return !validatePublicBaseURL(values.publicBaseUrl);
    return !validateStorageDraft({ ...formValues(setting), ...values, mode }, setting);
}

function storageProviderLabel(provider?: StorageMode) {
    return provider === "s3" ? "S3 兼容存储" : provider === "tencent" ? "腾讯云 COS" : provider === "qiniu" ? "七牛云 Kodo" : provider === "aliyun" ? "阿里云 OSS" : "服务器本地";
}

function providerGuidance(mode: Exclude<StorageMode, "local">) {
    if (mode === "s3") return "使用预设快速填写 Region 与 Endpoint，也可以选择自定义；自托管 S3 仍受服务端私网主机白名单约束。";
    if (mode === "tencent") return "腾讯云可只填写 Region，由服务端生成标准 COS Endpoint；也可填写完整 Endpoint 覆盖。";
    if (mode === "qiniu") return "七牛上传必须配置上传 Endpoint；绑定域名可选，留空时资源由当前后端使用 AK/SK 代理读取。";
    return "阿里云需要完整 OSS Endpoint、Bucket 和访问密钥；CDN 域名可选。";
}

function accessKeyIdLabel(mode: Exclude<StorageMode, "local"> | AdminOSSSetting["provider"]) {
    return mode === "tencent" ? "SecretId" : mode === "qiniu" ? "AccessKey" : "AccessKey ID";
}

function accessKeySecretLabel(mode: Exclude<StorageMode, "local"> | AdminOSSSetting["provider"]) {
    return mode === "tencent" || mode === "qiniu" ? "SecretKey" : "AccessKey Secret";
}

function isHTTPURL(value: string) {
    try {
        const parsed = new URL(value);
        return Boolean(parsed.hostname) && ["http:", "https:"].includes(parsed.protocol);
    } catch {
        return false;
    }
}

function isValidCDNBaseURL(value: string) {
    try {
        const parsed = new URL(value);
        return Boolean(parsed.hostname) && ["http:", "https:"].includes(parsed.protocol) && !parsed.username && !parsed.password && !parsed.search && !parsed.hash && !parsed.pathname.replace(/\/+$/, "");
    } catch {
        return false;
    }
}

function trimTrailingSlash(value: string) {
    return value.trim().replace(/\/+$/, "");
}

function connectionInput(values: Partial<OSSFormValues>) {
    return normalizeOSSConnectionTestInput({
        provider: !values.mode || values.mode === "local" ? ("aliyun" as const) : values.mode,
        s3Preset: values.s3Preset,
        region: values.region,
        endpoint: values.endpoint,
        cdnBaseUrl: values.cdnBaseUrl,
        bucket: values.bucket,
        accessKeyId: values.accessKeyId,
        accessKeySecret: values.accessKeySecret,
        sessionToken: values.sessionToken,
        pathPrefix: values.pathPrefix,
        pathStyle: values.pathStyle === true,
    });
}

function ConnectionTestStatus({ result, stale }: { result: OSSConnectionTestResult | null; stale: boolean }) {
    if (stale) return <AdminStatusBadge label="配置已变化，请重新测试" tone="warning" />;
    if (!result) return <AdminStatusBadge label="尚未测试" tone="neutral" />;
    if (result.ok) return <AdminStatusBadge label={result.testedAt ? `测试通过 · ${formatSettingTime(result.testedAt, "刚刚")}` : "测试通过"} tone="success" />;
    return <AdminStatusBadge label={result.message || "测试失败"} tone="error" />;
}

function hasValidSettingTime(value?: string) {
    if (!value) return false;
    const date = new Date(value);
    return !Number.isNaN(date.getTime()) && date.getFullYear() >= 2000;
}

function formatSettingTime(value: string | undefined, fallback: string) {
    if (!hasValidSettingTime(value)) return fallback;
    return `更新于 ${new Date(value as string).toLocaleString("zh-CN", { hour12: false })}`;
}