import { useCallback, useEffect, useRef, useState } from "react"; import type { ReactNode } from "react"; import { Link2, UploadCloud, DownloadCloud, Loader2, Save, Check, Info, AlertTriangle, } from "lucide-react"; import type { LucideIcon } from "lucide-react"; import { useTranslation } from "react-i18next"; import { useQueryClient } from "@tanstack/react-query"; import { toast } from "sonner"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Switch } from "@/components/ui/switch"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { settingsApi } from "@/lib/api"; import { ConfirmDialog } from "@/components/ConfirmDialog"; import type { SettingsFormState } from "@/hooks/useSettings"; import type { RemoteSnapshotInfo, S3SyncSettings, WebDavSyncSettings, } from "@/types"; // ─── WebDAV service presets ───────────────────────────────── interface WebDavPreset { id: string; label: string; baseUrl: string; hint: string; matchPattern?: string; // substring match on URL } const WEBDAV_PRESETS: WebDavPreset[] = [ { id: "jianguoyun", label: "settings.webdavSync.presets.jianguoyun", baseUrl: "https://dav.jianguoyun.com/dav/", hint: "settings.webdavSync.presets.jianguoyunHint", matchPattern: "jianguoyun.com", }, { id: "nextcloud", label: "settings.webdavSync.presets.nextcloud", baseUrl: "https://your-server/remote.php/dav/files/USERNAME/", hint: "settings.webdavSync.presets.nextcloudHint", matchPattern: "remote.php/dav", }, { id: "synology", label: "settings.webdavSync.presets.synology", baseUrl: "http://your-nas-ip:5005/", hint: "settings.webdavSync.presets.synologyHint", matchPattern: ":5005", }, { id: "custom", label: "settings.webdavSync.presets.custom", baseUrl: "", hint: "", }, ]; /** Match a URL to one of the preset providers, or "custom". */ function detectPreset(url: string): string { if (!url) return "custom"; for (const preset of WEBDAV_PRESETS) { if (preset.matchPattern && url.includes(preset.matchPattern)) { return preset.id; } } return "custom"; } // ─── S3 service presets ────────────────────────────────────── interface S3Preset { id: string; label: string; hint: string; defaultEndpoint?: string; regionPlaceholder?: string; } const S3_PRESETS: S3Preset[] = [ { id: "aws-s3", label: "settings.s3Sync.presets.awsS3", hint: "settings.s3Sync.presets.awsS3Hint", regionPlaceholder: "us-east-1", }, { id: "s3-minio", label: "settings.s3Sync.presets.minio", hint: "settings.s3Sync.presets.minioHint", regionPlaceholder: "us-east-1", }, { id: "s3-r2", label: "settings.s3Sync.presets.r2", hint: "settings.s3Sync.presets.r2Hint", regionPlaceholder: "auto", }, { id: "s3-oss", label: "settings.s3Sync.presets.oss", hint: "settings.s3Sync.presets.ossHint", regionPlaceholder: "cn-hangzhou", }, { id: "s3-cos", label: "settings.s3Sync.presets.cos", hint: "settings.s3Sync.presets.cosHint", regionPlaceholder: "ap-guangzhou", }, { id: "s3-obs", label: "settings.s3Sync.presets.obs", hint: "settings.s3Sync.presets.obsHint", regionPlaceholder: "cn-north-4", }, { id: "s3-custom", label: "settings.s3Sync.presets.custom", hint: "settings.s3Sync.presets.customHint", regionPlaceholder: "us-east-1", }, ]; /** Format an RFC 3339 date string for display; falls back to raw string. */ function formatDate(rfc3339: string): string { const d = new Date(rfc3339); return Number.isNaN(d.getTime()) ? rfc3339 : d.toLocaleString(); } function formatDbCompatVersion(version?: number | null): string | null { return typeof version === "number" ? `db-v${version}` : null; } function buildPasswordPreservationKey(values: { baseUrl?: string | null; username?: string | null; remoteRoot?: string | null; profile?: string | null; }) { return JSON.stringify({ baseUrl: values.baseUrl ?? "", username: values.username ?? "", remoteRoot: values.remoteRoot ?? "cc-switch-sync", profile: values.profile ?? "default", }); } // ─── Types ────────────────────────────────────────────────── type ActionState = | "idle" | "testing" | "saving" | "uploading" | "downloading" | "fetching_remote"; type SyncType = "webdav" | "s3"; type DialogType = "upload" | "download" | "mutual_exclusion" | null; interface WebdavSyncSectionProps { config?: WebDavSyncSettings; s3Config?: S3SyncSettings; settings?: SettingsFormState; onAutoSave?: (updates: Partial) => Promise; } // ─── ActionButton ─────────────────────────────────────────── /** Reusable button with loading spinner. */ function ActionButton({ actionState, targetState, alsoActiveFor, icon: Icon, activeLabel, idleLabel, disabled, ...props }: { actionState: ActionState; targetState: ActionState; alsoActiveFor?: ActionState[]; icon: LucideIcon; activeLabel: ReactNode; idleLabel: ReactNode; } & Omit, "children">) { const isActive = actionState === targetState || (alsoActiveFor?.includes(actionState) ?? false); return ( ); } // ─── Main component ───────────────────────────────────────── export function WebdavSyncSection({ config, s3Config, settings, onAutoSave, }: WebdavSyncSectionProps) { const { t } = useTranslation(); const queryClient = useQueryClient(); const [actionState, setActionState] = useState("idle"); const [dirty, setDirty] = useState(false); const [passwordTouched, setPasswordTouched] = useState(false); const [justSaved, setJustSaved] = useState(false); const justSavedTimerRef = useRef | null>(null); const pendingPasswordPreservationRef = useRef<{ key: string; password: string; } | null>(null); // ─── Sync type selector ──────────────────────────────────── const [syncType, setSyncType] = useState(() => s3Config?.enabled ? "s3" : "webdav", ); const [pendingSyncType, setPendingSyncType] = useState(null); // Sync the selector when settings load asynchronously useEffect(() => { if (s3Config?.enabled) { setSyncType("s3"); } }, [s3Config?.enabled]); // Local form state — credentials are only persisted on explicit "Save". const [form, setForm] = useState(() => ({ baseUrl: config?.baseUrl ?? "", username: config?.username ?? "", password: config?.password ?? "", remoteRoot: config?.remoteRoot ?? "cc-switch-sync", profile: config?.profile ?? "default", autoSync: config?.autoSync ?? false, })); // ─── S3 form state ───────────────────────────────────────── const [s3Preset, setS3Preset] = useState("aws-s3"); const [s3Region, setS3Region] = useState(s3Config?.region ?? ""); const [s3Bucket, setS3Bucket] = useState(s3Config?.bucket ?? ""); const [s3AccessKeyId, setS3AccessKeyId] = useState( s3Config?.accessKeyId ?? "", ); const [s3SecretAccessKey, setS3SecretAccessKey] = useState( s3Config?.secretAccessKey ?? "", ); const [s3Endpoint, setS3Endpoint] = useState(s3Config?.endpoint ?? ""); const [s3RemoteRoot, setS3RemoteRoot] = useState( s3Config?.remoteRoot ?? "cc-switch-sync", ); const [s3Profile, setS3Profile] = useState(s3Config?.profile ?? "default"); const [s3AutoSync, setS3AutoSync] = useState(s3Config?.autoSync ?? false); const [s3Enabled, setS3Enabled] = useState(s3Config?.enabled ?? false); const [s3SecretTouched, setS3SecretTouched] = useState(false); const [s3Dirty, setS3Dirty] = useState(false); const [s3JustSaved, setS3JustSaved] = useState(false); const s3JustSavedTimerRef = useRef | null>( null, ); const [s3ActionState, setS3ActionState] = useState("idle"); const [s3DialogType, setS3DialogType] = useState(null); const [s3RemoteInfo, setS3RemoteInfo] = useState( null, ); const activeS3Preset = S3_PRESETS.find((p) => p.id === s3Preset); // Preset selector — derived from initial URL, updated on user selection const [presetId, setPresetId] = useState(() => detectPreset(config?.baseUrl ?? ""), ); const activePreset = WEBDAV_PRESETS.find((p) => p.id === presetId); // Confirmation dialog state const [dialogType, setDialogType] = useState(null); const [remoteInfo, setRemoteInfo] = useState(null); const [showAutoSyncConfirm, setShowAutoSyncConfirm] = useState(false); const closeDialog = useCallback(() => { setDialogType(null); setRemoteInfo(null); }, []); const closeS3Dialog = useCallback(() => { setS3DialogType(null); setS3RemoteInfo(null); }, []); // Cleanup justSaved timer on unmount useEffect(() => { return () => { if (justSavedTimerRef.current) clearTimeout(justSavedTimerRef.current); if (s3JustSavedTimerRef.current) clearTimeout(s3JustSavedTimerRef.current); }; }, []); // Sync form when config is loaded/updated from backend, but not while user is editing useEffect(() => { if (!config || dirty) return; setForm(() => { const nextBaseUrl = config.baseUrl ?? ""; const nextUsername = config.username ?? ""; const nextRemoteRoot = config.remoteRoot ?? "cc-switch-sync"; const nextProfile = config.profile ?? "default"; const nextKey = buildPasswordPreservationKey({ baseUrl: nextBaseUrl, username: nextUsername, remoteRoot: nextRemoteRoot, profile: nextProfile, }); const shouldPreserveRedactedPassword = !config.password && pendingPasswordPreservationRef.current?.key === nextKey && !!pendingPasswordPreservationRef.current.password; const nextPassword = shouldPreserveRedactedPassword ? pendingPasswordPreservationRef.current!.password : (config.password ?? ""); pendingPasswordPreservationRef.current = null; return { baseUrl: nextBaseUrl, username: nextUsername, password: nextPassword, remoteRoot: nextRemoteRoot, profile: nextProfile, autoSync: config.autoSync ?? false, }; }); setPasswordTouched(false); setPresetId(detectPreset(config.baseUrl ?? "")); }, [config, dirty]); // Sync S3 form when s3Config is loaded/updated from backend useEffect(() => { if (!s3Config || s3Dirty) return; setS3Region(s3Config.region ?? ""); setS3Bucket(s3Config.bucket ?? ""); setS3AccessKeyId(s3Config.accessKeyId ?? ""); setS3SecretAccessKey(s3Config.secretAccessKey ?? ""); setS3Endpoint(s3Config.endpoint ?? ""); setS3RemoteRoot(s3Config.remoteRoot ?? "cc-switch-sync"); setS3Profile(s3Config.profile ?? "default"); setS3AutoSync(s3Config.autoSync ?? false); setS3Enabled(s3Config.enabled ?? false); setS3SecretTouched(false); }, [s3Config, s3Dirty]); const updateField = useCallback((field: keyof typeof form, value: string) => { setForm((prev) => ({ ...prev, [field]: value })); if (field === "password") { setPasswordTouched(true); } setDirty(true); setJustSaved(false); if (justSavedTimerRef.current) { clearTimeout(justSavedTimerRef.current); justSavedTimerRef.current = null; } }, []); const handlePresetChange = useCallback((id: string) => { setPresetId(id); const preset = WEBDAV_PRESETS.find((p) => p.id === id); if (preset?.baseUrl) { setForm((prev) => ({ ...prev, baseUrl: preset.baseUrl })); setDirty(true); setJustSaved(false); if (justSavedTimerRef.current) { clearTimeout(justSavedTimerRef.current); justSavedTimerRef.current = null; } } }, []); // When user edits the URL, check if it still matches the current preset on blur const handleBaseUrlBlur = useCallback(() => { if (presetId === "custom") return; const detected = detectPreset(form.baseUrl); if (detected !== presetId) { setPresetId("custom"); } }, [form.baseUrl, presetId]); const handleAutoSyncChange = useCallback( (checked: boolean) => { if (checked && !settings?.autoSyncConfirmed) { setShowAutoSyncConfirm(true); return; } setForm((prev) => ({ ...prev, autoSync: checked })); setDirty(true); setJustSaved(false); if (justSavedTimerRef.current) { clearTimeout(justSavedTimerRef.current); justSavedTimerRef.current = null; } }, [settings?.autoSyncConfirmed], ); const handleAutoSyncConfirm = useCallback(async () => { setShowAutoSyncConfirm(false); await onAutoSave?.({ autoSyncConfirmed: true }); setForm((prev) => ({ ...prev, autoSync: true })); setDirty(true); setJustSaved(false); if (justSavedTimerRef.current) { clearTimeout(justSavedTimerRef.current); justSavedTimerRef.current = null; } }, [onAutoSave]); const buildSettings = useCallback((): WebDavSyncSettings | null => { const baseUrl = form.baseUrl.trim(); if (!baseUrl) return null; return { enabled: true, baseUrl, username: form.username.trim(), // 未重新触碰密码时，提交空值让后端沿用已保存密码，表单里的值仅用于 UI 显示 password: passwordTouched ? form.password : "", remoteRoot: form.remoteRoot.trim() || "cc-switch-sync", profile: form.profile.trim() || "default", autoSync: form.autoSync, }; }, [form, passwordTouched]); // ─── Handlers ─────────────────────────────────────────── const handleTest = useCallback(async () => { const settings = buildSettings(); if (!settings) { toast.error(t("settings.webdavSync.missingUrl")); return; } setActionState("testing"); try { await settingsApi.webdavTestConnection(settings, !passwordTouched); toast.success(t("settings.webdavSync.testSuccess")); } catch (error) { toast.error( t("settings.webdavSync.testFailed", { error: (error as Error)?.message ?? String(error), }), ); } finally { setActionState("idle"); } }, [buildSettings, passwordTouched, t]); const handleSave = useCallback(async () => { const settings = buildSettings(); if (!settings) { toast.error(t("settings.webdavSync.missingUrl")); return; } setActionState("saving"); pendingPasswordPreservationRef.current = form.password ? { key: buildPasswordPreservationKey(settings), password: form.password, } : null; try { await settingsApi.webdavSyncSaveSettings(settings, passwordTouched); setDirty(false); setPasswordTouched(false); // Show "saved" indicator for 2 seconds setJustSaved(true); if (justSavedTimerRef.current) clearTimeout(justSavedTimerRef.current); justSavedTimerRef.current = setTimeout(() => { setJustSaved(false); justSavedTimerRef.current = null; }, 2000); await queryClient.invalidateQueries(); } catch (error) { pendingPasswordPreservationRef.current = null; toast.error( t("settings.webdavSync.saveFailed", { error: (error as Error)?.message ?? String(error), }), ); setActionState("idle"); return; } // Auto-test connection after save setActionState("testing"); try { await settingsApi.webdavTestConnection(settings, true); toast.success(t("settings.webdavSync.saveAndTestSuccess")); } catch (error) { toast.warning( t("settings.webdavSync.saveAndTestFailed", { error: (error as Error)?.message ?? String(error), }), ); } finally { setActionState("idle"); } }, [buildSettings, form.password, passwordTouched, queryClient, t]); /** Fetch remote info, then open upload confirmation dialog. */ const handleUploadClick = useCallback(async () => { if (dirty) { toast.error(t("settings.webdavSync.unsavedChanges")); return; } setActionState("fetching_remote"); try { const info = await settingsApi.webdavSyncFetchRemoteInfo(); if ("empty" in info) { setRemoteInfo(null); } else { setRemoteInfo(info); } setDialogType("upload"); } catch { setRemoteInfo(null); toast.error(t("settings.webdavSync.fetchRemoteFailed")); setActionState("idle"); return; } setActionState("idle"); }, [dirty, t]); /** Actually perform the upload after user confirms. */ const handleUploadConfirm = useCallback(async () => { if (dirty) { toast.error(t("settings.webdavSync.unsavedChanges")); return; } closeDialog(); setActionState("uploading"); try { await settingsApi.webdavSyncUpload(); toast.success(t("settings.webdavSync.uploadSuccess")); await queryClient.invalidateQueries(); } catch (error) { toast.error( t("settings.webdavSync.uploadFailed", { error: (error as Error)?.message ?? String(error), }), ); } finally { setActionState("idle"); } }, [closeDialog, dirty, queryClient, t]); /** Fetch remote info, then open download confirmation dialog. */ const handleDownloadClick = useCallback(async () => { if (dirty) { toast.error(t("settings.webdavSync.unsavedChanges")); return; } setActionState("fetching_remote"); try { const info = await settingsApi.webdavSyncFetchRemoteInfo(); if ("empty" in info) { toast.info(t("settings.webdavSync.noRemoteData")); return; } if (!info.compatible) { toast.error( t("settings.webdavSync.incompatibleVersion", { protocolVersion: info.protocolVersion, dbCompatVersion: formatDbCompatVersion(info.dbCompatVersion) ?? t("common.unknown"), }), ); return; } setRemoteInfo(info); setDialogType("download"); } catch (error) { toast.error( t("settings.webdavSync.downloadFailed", { error: (error as Error)?.message ?? String(error), }), ); } finally { setActionState("idle"); } }, [dirty, t]); /** Actually perform the download after user confirms. */ const handleDownloadConfirm = useCallback(async () => { if (dirty) { toast.error(t("settings.webdavSync.unsavedChanges")); return; } closeDialog(); setActionState("downloading"); try { await settingsApi.webdavSyncDownload(); toast.success(t("settings.webdavSync.downloadSuccess")); await queryClient.invalidateQueries(); } catch (error) { toast.error( t("settings.webdavSync.downloadFailed", { error: (error as Error)?.message ?? String(error), }), ); } finally { setActionState("idle"); } }, [closeDialog, dirty, queryClient, t]); // ─── S3 helpers ──────────────────────────────────────────── const markS3Dirty = useCallback(() => { setS3Dirty(true); setS3JustSaved(false); if (s3JustSavedTimerRef.current) { clearTimeout(s3JustSavedTimerRef.current); s3JustSavedTimerRef.current = null; } }, []); const handleS3PresetChange = useCallback( (id: string) => { setS3Preset(id); markS3Dirty(); }, [markS3Dirty], ); const buildS3Settings = useCallback((): S3SyncSettings => { return { enabled: s3Enabled, autoSync: s3AutoSync, region: s3Region.trim(), bucket: s3Bucket.trim(), accessKeyId: s3AccessKeyId.trim(), secretAccessKey: s3SecretAccessKey, endpoint: s3Endpoint.trim() || undefined, remoteRoot: s3RemoteRoot.trim() || "cc-switch-sync", profile: s3Profile.trim() || "default", }; }, [ s3Enabled, s3AutoSync, s3Region, s3Bucket, s3AccessKeyId, s3SecretAccessKey, s3Endpoint, s3RemoteRoot, s3Profile, ]); // ─── S3 Handlers ────────────────────────────────────────── const handleS3Test = useCallback(async () => { const s3Settings = buildS3Settings(); if (!s3Settings.bucket) { toast.error(t("settings.s3Sync.missingBucket")); return; } setS3ActionState("testing"); try { await settingsApi.s3TestConnection(s3Settings, !s3SecretTouched); toast.success(t("settings.s3Sync.testSuccess")); } catch (error) { toast.error( t("settings.s3Sync.testFailed", { error: (error as Error)?.message ?? String(error), }), ); } finally { setS3ActionState("idle"); } }, [buildS3Settings, s3SecretTouched, t]); const handleS3Save = useCallback(async () => { const s3Settings = buildS3Settings(); if (!s3Settings.bucket) { toast.error(t("settings.s3Sync.missingBucket")); return; } setS3ActionState("saving"); try { await settingsApi.s3SyncSaveSettings(s3Settings, s3SecretTouched); setS3Dirty(false); setS3SecretTouched(false); setS3JustSaved(true); if (s3JustSavedTimerRef.current) clearTimeout(s3JustSavedTimerRef.current); s3JustSavedTimerRef.current = setTimeout(() => { setS3JustSaved(false); s3JustSavedTimerRef.current = null; }, 2000); await queryClient.invalidateQueries(); } catch (error) { toast.error( t("settings.s3Sync.saveFailed", { error: (error as Error)?.message ?? String(error), }), ); setS3ActionState("idle"); return; } // Auto-test connection after save setS3ActionState("testing"); try { await settingsApi.s3TestConnection(s3Settings, true); toast.success(t("settings.s3Sync.saveAndTestSuccess")); } catch (error) { toast.warning( t("settings.s3Sync.saveAndTestFailed", { error: (error as Error)?.message ?? String(error), }), ); } finally { setS3ActionState("idle"); } }, [buildS3Settings, s3SecretTouched, queryClient, t]); const handleS3UploadClick = useCallback(async () => { if (s3Dirty) { toast.error(t("settings.s3Sync.unsavedChanges")); return; } setS3ActionState("fetching_remote"); try { const info = await settingsApi.s3SyncFetchRemoteInfo(); if ("empty" in info) { setS3RemoteInfo(null); } else { setS3RemoteInfo(info); } setS3DialogType("upload"); } catch { setS3RemoteInfo(null); toast.error(t("settings.s3Sync.fetchRemoteFailed")); setS3ActionState("idle"); return; } setS3ActionState("idle"); }, [s3Dirty, t]); const handleS3UploadConfirm = useCallback(async () => { if (s3Dirty) { toast.error(t("settings.s3Sync.unsavedChanges")); return; } closeS3Dialog(); setS3ActionState("uploading"); try { await settingsApi.s3SyncUpload(); toast.success(t("settings.s3Sync.uploadSuccess")); await queryClient.invalidateQueries(); } catch (error) { toast.error( t("settings.s3Sync.uploadFailed", { error: (error as Error)?.message ?? String(error), }), ); } finally { setS3ActionState("idle"); } }, [closeS3Dialog, s3Dirty, queryClient, t]); const handleS3DownloadClick = useCallback(async () => { if (s3Dirty) { toast.error(t("settings.s3Sync.unsavedChanges")); return; } setS3ActionState("fetching_remote"); try { const info = await settingsApi.s3SyncFetchRemoteInfo(); if ("empty" in info) { toast.info(t("settings.s3Sync.noRemoteData")); return; } if (!info.compatible) { toast.error( t("settings.s3Sync.incompatibleVersion", { version: info.version, }), ); return; } setS3RemoteInfo(info); setS3DialogType("download"); } catch (error) { toast.error( t("settings.s3Sync.downloadFailed", { error: (error as Error)?.message ?? String(error), }), ); } finally { setS3ActionState("idle"); } }, [s3Dirty, t]); const handleS3DownloadConfirm = useCallback(async () => { if (s3Dirty) { toast.error(t("settings.s3Sync.unsavedChanges")); return; } closeS3Dialog(); setS3ActionState("downloading"); try { await settingsApi.s3SyncDownload(); toast.success(t("settings.s3Sync.downloadSuccess")); await queryClient.invalidateQueries(); } catch (error) { toast.error( t("settings.s3Sync.downloadFailed", { error: (error as Error)?.message ?? String(error), }), ); } finally { setS3ActionState("idle"); } }, [closeS3Dialog, s3Dirty, queryClient, t]); // ─── Sync type switching with mutual exclusion ───────────── const handleSyncTypeChange = useCallback( (value: string) => { const next = value as SyncType; if (next === syncType) return; // Check if the "other" type is currently enabled const otherEnabled = next === "s3" ? config?.enabled !== false && Boolean(config?.baseUrl?.trim()) : s3Config?.enabled === true; if (otherEnabled) { setPendingSyncType(next); setDialogType("mutual_exclusion"); } else { setSyncType(next); } }, [syncType, config, s3Config], ); const handleMutualExclusionConfirm = useCallback(async () => { if (!pendingSyncType) return; closeDialog(); try { if (pendingSyncType === "s3") { // Disable WebDAV const disabledWebdav: WebDavSyncSettings = { ...config, enabled: false, autoSync: false, }; await settingsApi.webdavSyncSaveSettings(disabledWebdav, false); } else { // Disable S3 const disabledS3: S3SyncSettings = { ...s3Config, enabled: false, autoSync: false, }; await settingsApi.s3SyncSaveSettings(disabledS3, false); setS3Enabled(false); setS3AutoSync(false); } await queryClient.invalidateQueries(); setSyncType(pendingSyncType); } catch (error) { toast.error( t("settings.s3Sync.mutualExclusionFailed", { error: (error as Error)?.message ?? String(error), }), ); } setPendingSyncType(null); }, [pendingSyncType, closeDialog, config, s3Config, queryClient, t]); const handleMutualExclusionCancel = useCallback(() => { closeDialog(); setPendingSyncType(null); }, [closeDialog]); // ─── Derived state ────────────────────────────────────── const isLoading = actionState !== "idle"; const isS3Loading = s3ActionState !== "idle"; const hasSavedConfig = Boolean( config?.baseUrl?.trim() && config?.username?.trim(), ); const hasS3SavedConfig = Boolean( s3Config?.bucket?.trim() && s3Config?.accessKeyId?.trim(), ); const lastSyncAt = config?.status?.lastSyncAt; const lastSyncDisplay = lastSyncAt ? new Date(lastSyncAt * 1000).toLocaleString() : null; const lastError = config?.status?.lastError?.trim(); const showAutoSyncError = !!lastError && config?.status?.lastErrorSource === "auto"; const currentRemotePath = `/${form.remoteRoot.trim() || "cc-switch-sync"}/v2/db-v6/${form.profile.trim() || "default"}`; const currentS3RemotePath = `${s3Bucket.trim() || "bucket"}/${s3RemoteRoot.trim() || "cc-switch-sync"}/v2/db-v6/${s3Profile.trim() || "default"}`; const remoteDbCompatDisplay = formatDbCompatVersion( remoteInfo?.dbCompatVersion, ); const remoteIsLegacy = remoteInfo?.layout === "legacy"; const s3LastSyncAt = s3Config?.status?.lastSyncAt; const s3LastSyncDisplay = s3LastSyncAt ? new Date(s3LastSyncAt * 1000).toLocaleString() : null; const s3LastError = s3Config?.status?.lastError?.trim(); const s3ShowAutoSyncError = !!s3LastError && s3Config?.status?.lastErrorSource === "auto"; // ─── Render ───────────────────────────────────────────── return (

{t("settings.webdavSync.title")}

{t("settings.webdavSync.description")}

{/* ─── Sync type selector ───────────────────────────── */}

{t("settings.syncType.label")}

{/* ─── WebDAV form ──────────────────────────────────── */} {syncType === "webdav" && (

{/* Config fields */}

{/* Service preset selector */}

{t("settings.webdavSync.presets.label")}

{/* Server URL */}

{t("settings.webdavSync.baseUrl")} updateField("baseUrl", e.target.value)} onBlur={handleBaseUrlBlur} placeholder={t("settings.webdavSync.baseUrlPlaceholder")} className="text-xs flex-1" disabled={isLoading} />

{/* Username */}

{t("settings.webdavSync.username")} updateField("username", e.target.value)} placeholder={t("settings.webdavSync.usernamePlaceholder")} className="text-xs flex-1" disabled={isLoading} />

{/* Password */}

{t("settings.webdavSync.password")} updateField("password", e.target.value)} placeholder={t("settings.webdavSync.passwordPlaceholder")} className="text-xs flex-1" autoComplete="off" disabled={isLoading} />

{/* Preset hint */} {activePreset?.hint && (

{t(activePreset.hint)}

)} {/* Remote Root */}

{t("settings.webdavSync.remoteRoot")} {t("settings.webdavSync.remoteRootDefault")} updateField("remoteRoot", e.target.value)} placeholder="cc-switch-sync" className="text-xs flex-1" disabled={isLoading} />

{/* Profile */}

{t("settings.webdavSync.profile")} {t("settings.webdavSync.profileDefault")} updateField("profile", e.target.value)} placeholder="default" className="text-xs flex-1" disabled={isLoading} />

{t("settings.webdavSync.autoSync")} {t("settings.webdavSync.autoSyncHint")}

{/* Last sync time */} {lastSyncDisplay && (

{t("settings.webdavSync.lastSync", { time: lastSyncDisplay })}

)} {showAutoSyncError && (

{t("settings.webdavSync.autoSyncLastErrorTitle")}

{lastError}

{t("settings.webdavSync.autoSyncLastErrorHint")}

)} {/* Config buttons + save status */}

{/* Save status indicator */} {dirty && ( {t("settings.webdavSync.unsaved")} )} {!dirty && justSaved && ( {t("settings.webdavSync.saved")} )}

{/* Sync buttons */}

{!hasSavedConfig && (

{t("settings.webdavSync.saveBeforeSync")}

)}

)} {/* ─── S3 form ──────────────────────────────────────── */} {syncType === "s3" && (

{/* S3 preset selector */}

{t("settings.s3Sync.presets.label")}

{/* Preset hint */} {activeS3Preset?.hint && (

{t(activeS3Preset.hint)}

)} {/* Region */}

{t("settings.s3Sync.region")} { setS3Region(e.target.value); markS3Dirty(); }} placeholder={activeS3Preset?.regionPlaceholder ?? "us-east-1"} className="text-xs flex-1" disabled={isS3Loading} />

{/* Bucket */}

{t("settings.s3Sync.bucket")} { setS3Bucket(e.target.value); markS3Dirty(); }} placeholder={t("settings.s3Sync.bucketPlaceholder")} className="text-xs flex-1" disabled={isS3Loading} />

{/* Access Key ID */}

{t("settings.s3Sync.accessKeyId")} { setS3AccessKeyId(e.target.value); markS3Dirty(); }} placeholder={t("settings.s3Sync.accessKeyIdPlaceholder")} className="text-xs flex-1" disabled={isS3Loading} />

{/* Secret Access Key */}

{t("settings.s3Sync.secretAccessKey")} { setS3SecretAccessKey(e.target.value); setS3SecretTouched(true); markS3Dirty(); }} placeholder={t("settings.s3Sync.secretAccessKeyPlaceholder")} className="text-xs flex-1" autoComplete="off" disabled={isS3Loading} />

{/* Endpoint (optional) */}

{t("settings.s3Sync.endpoint")} {t("settings.s3Sync.endpointHint")} { setS3Endpoint(e.target.value); markS3Dirty(); }} placeholder={t("settings.s3Sync.endpointPlaceholder")} className="text-xs flex-1" disabled={isS3Loading} />

{/* Remote Root */}

{t("settings.s3Sync.remoteRoot")} {t("settings.s3Sync.remoteRootDefault")} { setS3RemoteRoot(e.target.value); markS3Dirty(); }} placeholder="cc-switch-sync" className="text-xs flex-1" disabled={isS3Loading} />

{/* Profile */}

{t("settings.s3Sync.profile")} {t("settings.s3Sync.profileDefault")} { setS3Profile(e.target.value); markS3Dirty(); }} placeholder="default" className="text-xs flex-1" disabled={isS3Loading} />

{/* Auto Sync toggle */}

{t("settings.s3Sync.autoSync")} {t("settings.s3Sync.autoSyncHint")}

{ setS3AutoSync(checked); markS3Dirty(); }} aria-label={t("settings.s3Sync.autoSync")} disabled={isS3Loading} />

{/* Enabled toggle */}

{t("settings.s3Sync.enabled")} {t("settings.s3Sync.enabledHint")}

{ setS3Enabled(checked); markS3Dirty(); }} aria-label={t("settings.s3Sync.enabled")} disabled={isS3Loading} />

{/* Last sync time */} {s3LastSyncDisplay && (

{t("settings.s3Sync.lastSync", { time: s3LastSyncDisplay })}

)} {s3ShowAutoSyncError && (

{t("settings.s3Sync.autoSyncLastErrorTitle")}

{s3LastError}

{t("settings.s3Sync.autoSyncLastErrorHint")}

)} {/* Config buttons + save status */}

{/* Save status indicator */} {s3Dirty && ( {t("settings.s3Sync.unsaved")} )} {!s3Dirty && s3JustSaved && ( {t("settings.s3Sync.saved")} )}

{/* Sync buttons */}

{!hasS3SavedConfig && (

{t("settings.s3Sync.saveBeforeSync")}

)}

)} {/* ─── WebDAV Upload confirmation dialog ───────────── */} {/* ─── WebDAV Download confirmation dialog ─────────── */} {/* ─── S3 Upload confirmation dialog ───────────────── */} {/* ─── S3 Download confirmation dialog ─────────────── */} {/* ─── Mutual exclusion confirmation dialog ────────── */} {/* ─── Auto-sync confirmation dialog ────────────────── */} void handleAutoSyncConfirm()} onCancel={() => setShowAutoSyncConfirm(false)} />

); }