@bygghammar/cms-platform 0.25.0 → 0.27.0

package/src/backoffice/BackupView.tsx

@@ -0,0 +1,788 @@
+import { useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { Download, Upload, ShieldAlert, Loader2, CheckCircle2, AlertTriangle } from "lucide-react";
+
+import { ProgressBar } from "./ProgressBar";
+import { ALL_GROUP_IDS, DATASET_GROUPS, DEFAULT_GROUP_IDS, type ImportMode } from "../backup/datasets";
+
+type Estimate = {
+  counts: Record<string, number>;
+  mediaFiles: number;
+  mediaBytes: number;
+  mediaError?: string;
+};
+
+type Analysis = {
+  manifest: {
+    createdAt: string;
+    createdBy: string | null;
+    site: string | null;
+    groups: string[];
+    mediaFiles: number;
+    mediaBytes: number;
+  };
+  compatible: boolean;
+  problems: string[];
+  mediaFiles: number;
+  mediaBytes: number;
+  datasets: {
+    group: string;
+    label: string;
+    insertOnly: boolean;
+    tables: { table: string; incoming: number; existing: number }[];
+    mediaFiles?: number;
+    mediaBytes?: number;
+  }[];
+};
+
+type ImportResult = {
+  ok: boolean;
+  applied: {
+    table: string;
+    inserted: number;
+    skipped: number;
+    mode: string;
+    failedKeys?: string[];
+  }[];
+  aborted?: string[];
+  mediaRestored: number;
+  mediaBytesRestored: number;
+  mediaFilesInArchive: number;
+  mediaBytesInArchive: number;
+  quarantinedMedia?: string[];
+  warnings: string[];
+};
+
+export type MediaArchiveProgress = {
+  phase: string;
+  completedFiles: number;
+  completedBytes: number;
+  totalFiles: number;
+  totalBytes: number;
+};
+
+/** Host-provided permissions, credentials and media assembly for the backup tool. */
+export type BackupDeps = {
+  /** Permission state, resolved by the host. */
+  isSuper: boolean;
+  loading?: boolean;
+  error?: boolean;
+  retry?: () => void;
+  /** Authorization header for the backup HTTP endpoints. */
+  authHeaders: () => Promise<Record<string, string>>;
+  /**
+   * Assembles the large media payload in the browser. The host loads the
+   * implementation lazily and supplies its own storage client.
+   */
+  buildBrowserMediaArchive: (args: {
+    baseArchive: Uint8Array;
+    groups: string[];
+    onProgress: (p: MediaArchiveProgress) => void;
+  }) => Promise<{ blob: Blob }>;
+  /** Endpoint overrides; defaults match the canonical route layout. */
+  endpoints?: { estimate?: string; export?: string; import?: string; analyze?: string };
+};
+
+function bytes(n: number) {
+  if (!n) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  const i = Math.min(units.length - 1, Math.floor(Math.log(n) / Math.log(1024)));
+  return `${(n / 1024 ** i).toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
+}
+
+type Progress = { label: string; value: number | null; detail?: string };
+
+/**
+ * Ramps a value towards `ceiling` while the server works without reporting
+ * progress, so the bar keeps moving during opaque phases.
+ */
+function createRamp(from: number, ceiling: number, ms: number, onTick: (v: number) => void) {
+  const start = Date.now();
+  const id = setInterval(() => {
+    const t = Math.min(1, (Date.now() - start) / ms);
+    onTick(from + (ceiling - from) * (1 - Math.pow(1 - t, 2)));
+  }, 200);
+  return () => clearInterval(id);
+}
+
+/** POST a body with real upload progress (fetch cannot report upload bytes). */
+function postWithUploadProgress(
+  url: string,
+  body: XMLHttpRequestBodyInit,
+  headers: Record<string, string>,
+  onUpload: (loaded: number, total: number) => void,
+  onUploaded: () => void,
+): Promise<{ ok: boolean; status: number; text: string }> {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", url, true);
+    for (const [k, v] of Object.entries(headers)) xhr.setRequestHeader(k, v);
+    xhr.upload.onprogress = (e) => {
+      if (e.lengthComputable) onUpload(e.loaded, e.total);
+    };
+    xhr.upload.onload = () => onUploaded();
+    xhr.onerror = () => reject(new Error("Network error"));
+    xhr.onload = () =>
+      resolve({
+        ok: xhr.status >= 200 && xhr.status < 300,
+        status: xhr.status,
+        text: xhr.responseText,
+      });
+    xhr.send(body);
+  });
+}
+
+/** Shared Backup & restore screen. Permissions and media come from the host. */
+export function BackupView({ deps }: { deps: BackupDeps }) {
+  if (deps.loading) {
+    return <div className="p-8 md:p-12 text-sm text-ink/60">Loading…</div>;
+  }
+  if (deps.error) {
+    return (
+      <div className="p-8 md:p-12">
+        <div className="flex items-start gap-3 border border-ink/10 bg-white p-6">
+          <ShieldAlert className="size-5 text-ink/60" />
+          <div>
+            <div className="font-serif text-lg text-ink">Could not verify your permissions</div>
+            <p className="mt-1 text-sm text-ink/60">
+              The connection to the server failed. Please try again.
+            </p>
+            <button
+              type="button"
+              onClick={() => deps.retry?.()}
+              className="mt-3 border border-ink/20 px-3 py-1.5 text-xs uppercase tracking-wide text-ink hover:bg-ink/5"
+            >
+              Try again
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  if (!deps.isSuper) {
+    return (
+      <div className="p-8 md:p-12">
+        <div className="flex items-start gap-3 border border-ink/10 bg-white p-6">
+          <ShieldAlert className="size-5 text-ink/60" />
+          <div>
+            <div className="font-serif text-lg text-ink">Superadmin only</div>
+            <p className="mt-1 text-sm text-ink/60">
+              Backup and restore is restricted to superadmins.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  return <BackupTool deps={deps} />;
+}
+
+function BackupTool({ deps }: { deps: BackupDeps }) {
+  const endpoints = {
+    estimate: deps.endpoints?.estimate ?? "/api/backup/estimate",
+    export: deps.endpoints?.export ?? "/api/backup/export",
+    import: deps.endpoints?.import ?? "/api/backup/import",
+    analyze: deps.endpoints?.analyze ?? "/api/backup/analyze",
+  };
+
+  /* ---------------- export ---------------- */
+  const [selected, setSelected] = useState<string[]>(DEFAULT_GROUP_IDS);
+  const [estimate, setEstimate] = useState<Estimate | null>(null);
+  const [estimating, setEstimating] = useState(false);
+  const [exporting, setExporting] = useState(false);
+  const [exportProgress, setExportProgress] = useState<Progress | null>(null);
+
+  const toggle = (id: string) =>
+    setSelected((s) => (s.includes(id) ? s.filter((x) => x !== id) : [...s, id]));
+
+  const estimateRows = useMemo(
+    () => (estimate ? Object.values(estimate.counts).reduce((a, b) => a + b, 0) : null),
+    [estimate],
+  );
+
+  const runEstimate = async (groups = selected) => {
+    setEstimating(true);
+    try {
+      const res = await fetch(endpoints.estimate, {
+        method: "POST",
+        headers: { ...(await deps.authHeaders()), "content-type": "application/json" },
+        body: JSON.stringify({ groups }),
+      });
+      if (!res.ok) throw new Error(await res.text());
+      setEstimate((await res.json()) as Estimate);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Could not calculate size");
+    } finally {
+      setEstimating(false);
+    }
+  };
+
+  const download = async (groups: string[], label: string, onProgress?: (p: Progress) => void) => {
+    onProgress?.({ label: "Collecting data", value: 2 });
+    const headers = { ...(await deps.authHeaders()), "content-type": "application/json" };
+    const browserMedia = groups.includes("mediaFiles");
+
+    // Non-media exports are built entirely by the server. Media exports defer
+    // their large payload to the authenticated browser below.
+    let ramped = 2;
+    const stopRamp = createRamp(2, browserMedia ? 10 : 60, 25_000, (v) => {
+      ramped = v;
+      onProgress?.({ label: browserMedia ? "Collecting metadata" : "Building archive", value: v });
+    });
+
+    let res: Response;
+    try {
+      res = await fetch(endpoints.export, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({ groups, label, deferMediaToBrowser: browserMedia }),
+      });
+    } finally {
+      stopRamp();
+    }
+    if (!res.ok) throw new Error(await res.text());
+
+    const total = Number(res.headers.get("content-length") ?? 0);
+    let blob: Blob;
+    if (browserMedia) {
+      onProgress?.({ label: "Downloading metadata", value: 10 });
+      const baseArchive = new Uint8Array(await res.arrayBuffer());
+      const built = await deps.buildBrowserMediaArchive({
+        baseArchive,
+        groups,
+        onProgress: (progress) => {
+          if (progress.phase === "listing") {
+            onProgress?.({ label: "Listing media files", value: 12 });
+            return;
+          }
+          if (progress.phase === "finalizing") {
+            onProgress?.({
+              label: "Finalizing archive",
+              value: 98,
+              detail: `${progress.completedFiles.toLocaleString()} files · ${bytes(
+                progress.completedBytes,
+              )}`,
+            });
+            return;
+          }
+
+          const fileRatio = progress.totalFiles ? progress.completedFiles / progress.totalFiles : 0;
+          const byteRatio = progress.totalBytes
+            ? progress.completedBytes / progress.totalBytes
+            : fileRatio;
+          const ratio = Math.max(0, Math.min(1, byteRatio));
+          onProgress?.({
+            label: `Downloading media ${progress.completedFiles.toLocaleString()} / ${progress.totalFiles.toLocaleString()}`,
+            value: 12 + ratio * 84,
+            detail: `${bytes(progress.completedBytes)} of ${bytes(progress.totalBytes)}`,
+          });
+        },
+      });
+      blob = built.blob;
+    } else if (res.body) {
+      const reader = res.body.getReader();
+      const chunks: BlobPart[] = [];
+      let loaded = 0;
+      for (;;) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        chunks.push(value as unknown as BlobPart);
+        loaded += value.byteLength;
+        onProgress?.({
+          label: "Downloading archive",
+          value: total ? 60 + (loaded / total) * 39 : Math.min(98, ramped + loaded / 2_000_000),
+          detail: total ? `${bytes(loaded)} of ${bytes(total)}` : bytes(loaded),
+        });
+      }
+      blob = new Blob(chunks, { type: "application/zip" });
+    } else {
+      blob = await res.blob();
+    }
+
+    const name =
+      res.headers.get("content-disposition")?.match(/filename="(.+?)"/)?.[1] ?? `${label}.zip`;
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = name;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    // Revoking immediately can cancel a large browser download.
+    setTimeout(() => URL.revokeObjectURL(url), 30_000);
+    onProgress?.({ label: "Done", value: 100, detail: bytes(blob.size) });
+  };
+
+  const runExport = async (groups: string[], label: string) => {
+    setExporting(true);
+    setExportProgress({ label: "Starting", value: 0 });
+    try {
+      await download(groups, label, setExportProgress);
+      toast.success("Backup downloaded.");
+      setTimeout(() => setExportProgress(null), 2500);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Export failed");
+      setExportProgress(null);
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  /* ---------------- import ---------------- */
+  const fileRef = useRef<HTMLInputElement>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [analysis, setAnalysis] = useState<Analysis | null>(null);
+  const [analyzing, setAnalyzing] = useState(false);
+  const [importGroups, setImportGroups] = useState<string[]>([]);
+  const [mode, setMode] = useState<ImportMode>("merge");
+  const [includeMedia, setIncludeMedia] = useState(true);
+  const [rewriteMedia, setRewriteMedia] = useState(false);
+  const [mediaBase, setMediaBase] = useState("");
+
+  const [importing, setImporting] = useState(false);
+  const [result, setResult] = useState<ImportResult | null>(null);
+  const [confirmText, setConfirmText] = useState("");
+  const [analyzeProgress, setAnalyzeProgress] = useState<Progress | null>(null);
+  const [importProgress, setImportProgress] = useState<Progress | null>(null);
+
+  const onPick = async (f: File | null) => {
+    setFile(f);
+    setAnalysis(null);
+    setResult(null);
+    setConfirmText("");
+    setImportProgress(null);
+    setAnalyzeProgress(null);
+    if (!f) return;
+    setAnalyzing(true);
+    const ramp: { stop: (() => void) | null } = { stop: null };
+    try {
+      setAnalyzeProgress({ label: "Uploading archive", value: 0, detail: bytes(0) });
+      const res = await postWithUploadProgress(
+        endpoints.analyze,
+        f,
+        { ...(await deps.authHeaders()), "content-type": "application/zip" },
+        (loaded, total) =>
+          setAnalyzeProgress({
+            label: "Uploading archive",
+            value: (loaded / total) * 70,
+            detail: `${bytes(loaded)} of ${bytes(total)}`,
+          }),
+        () => {
+          ramp.stop = createRamp(70, 97, 15_000, (v) =>
+            setAnalyzeProgress({ label: "Reading archive", value: v }),
+          );
+        },
+      );
+      ramp.stop?.();
+      if (!res.ok) throw new Error(res.text || `Request failed (${res.status})`);
+      const a = JSON.parse(res.text) as Analysis;
+      setAnalysis(a);
+      setImportGroups(a.manifest.groups ?? []);
+      setAnalyzeProgress({ label: "Archive read", value: 100 });
+      setTimeout(() => setAnalyzeProgress(null), 1500);
+    } catch (e) {
+      ramp.stop?.();
+      setAnalyzeProgress(null);
+      toast.error(e instanceof Error ? e.message : "Could not read the archive");
+    } finally {
+      setAnalyzing(false);
+    }
+  };
+
+  const runImport = async () => {
+    if (!file || !analysis) return;
+    setImporting(true);
+    setResult(null);
+    const ramp: { stop: (() => void) | null } = { stop: null };
+    try {
+      // Safety snapshot of everything the import will touch, taken first.
+      toast.info("Taking a safety snapshot before importing…");
+      await download(importGroups, "pre-import-snapshot", (p) =>
+        // Snapshot occupies the first 40% of the import progress.
+        setImportProgress({
+          label: `Safety snapshot — ${p.label.toLowerCase()}`,
+          value: p.value === null ? null : (p.value / 100) * 40,
+          detail: p.detail,
+        }),
+      );
+
+      const qs = new URLSearchParams({
+        groups: importGroups.join(","),
+        mode,
+        media: includeMedia ? "1" : "0",
+        rewrite: rewriteMedia ? "1" : "0",
+        ...(rewriteMedia && mediaBase.trim() ? { mediaBase: mediaBase.trim() } : {}),
+      });
+
+      const res = await postWithUploadProgress(
+        `${endpoints.import}?${qs}`,
+        file,
+        { ...(await deps.authHeaders()), "content-type": "application/zip" },
+        (loaded, total) =>
+          setImportProgress({
+            label: "Uploading archive",
+            value: 40 + (loaded / total) * 30,
+            detail: `${bytes(loaded)} of ${bytes(total)}`,
+          }),
+        () => {
+          ramp.stop = createRamp(70, 97, 30_000, (v) =>
+            setImportProgress({ label: "Restoring data & media", value: v }),
+          );
+        },
+      );
+      ramp.stop?.();
+      if (!res.ok) throw new Error(res.text || `Request failed (${res.status})`);
+      const r = JSON.parse(res.text) as ImportResult;
+      setResult(r);
+      setImportProgress({ label: "Import complete", value: 100 });
+      toast.success("Import finished.");
+      setTimeout(() => setImportProgress(null), 2500);
+    } catch (e) {
+      ramp.stop?.();
+      setImportProgress(null);
+      toast.error(e instanceof Error ? e.message : "Import failed");
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  const canImport =
+    Boolean(analysis?.compatible) &&
+    importGroups.length > 0 &&
+    (mode === "merge" || confirmText === "REPLACE") &&
+    !importing;
+
+  return (
+    <div className="p-8 md:p-12 w-full space-y-10">
+      <header>
+        <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">Superadmin</div>
+        <h2 className="mt-2 font-serif text-2xl text-ink">Backup &amp; restore</h2>
+        <p className="mt-2 max-w-2xl text-sm text-ink/60">
+          Export the whole site — content, settings, forms, submissions, media and roles — as a
+          single archive, and restore it again on this or another installation. Customer submissions
+          are always insert-only and can never be overwritten or deleted by an import.
+        </p>
+      </header>
+
+      {/* EXPORT */}
+      <section className="border border-ink/10 bg-white p-6">
+        <div className="flex items-center gap-3">
+          <Download className="size-5 text-ink/70" />
+          <h3 className="font-serif text-lg text-ink">Export</h3>
+        </div>
+
+        <div className="mt-6 grid gap-3 md:grid-cols-2">
+          {DATASET_GROUPS.map((g) => (
+            <label
+              key={g.id}
+              className="flex cursor-pointer items-start gap-3 border border-ink/10 p-4 hover:border-sea"
+            >
+              <input
+                type="checkbox"
+                checked={selected.includes(g.id)}
+                onChange={() => toggle(g.id)}
+                className="mt-1"
+              />
+              <span>
+                <span className="block text-sm text-ink">{g.label}</span>
+                <span className="mt-1 block text-xs text-ink/55">{g.description}</span>
+                {estimate && selected.includes(g.id) ? (
+                  <span className="mt-2 block text-[0.65rem] uppercase tracking-[0.18em] text-ink/45">
+                    {g.special === "mediaFiles"
+                      ? estimate.mediaError
+                        ? `Media unavailable — ${estimate.mediaError}`
+                        : `${estimate.mediaFiles.toLocaleString()} files · ${bytes(estimate.mediaBytes)}`
+                      : `${g.tables
+                          .reduce((s, t) => s + (estimate.counts[t.table] ?? 0), 0)
+                          .toLocaleString()} rows`}
+                  </span>
+                ) : null}
+              </span>
+            </label>
+          ))}
+        </div>
+
+        <div className="mt-6 flex flex-wrap items-center gap-3">
+          <button
+            type="button"
+            onClick={() => setSelected(ALL_GROUP_IDS)}
+            className="border border-ink/20 px-3 py-2 text-xs uppercase tracking-[0.22em] text-ink hover:border-sea"
+          >
+            Select everything
+          </button>
+          <button
+            type="button"
+            onClick={() => setSelected(DEFAULT_GROUP_IDS)}
+            className="border border-ink/20 px-3 py-2 text-xs uppercase tracking-[0.22em] text-ink hover:border-sea"
+          >
+            Recommended
+          </button>
+          <button
+            type="button"
+            onClick={() => runEstimate()}
+            disabled={estimating || !selected.length}
+            className="border border-ink/20 px-3 py-2 text-xs uppercase tracking-[0.22em] text-ink hover:border-sea disabled:opacity-50"
+          >
+            {estimating ? "Calculating…" : "Calculate size"}
+          </button>
+          <button
+            type="button"
+            onClick={() => runExport(selected, "backup")}
+            disabled={exporting || !selected.length}
+            className="inline-flex items-center gap-2 border border-ink bg-ink px-4 py-2 text-xs uppercase tracking-[0.22em] text-white hover:bg-sea hover:border-sea disabled:opacity-50"
+          >
+            {exporting ? (
+              <Loader2 className="size-3.5 animate-spin" />
+            ) : (
+              <Download className="size-3.5" />
+            )}
+            {exporting ? "Building archive…" : "Download backup"}
+          </button>
+          <button
+            type="button"
+            onClick={() => runExport(ALL_GROUP_IDS, "full-backup")}
+            disabled={exporting}
+            className="border border-ink/20 px-3 py-2 text-xs uppercase tracking-[0.22em] text-ink hover:border-sea disabled:opacity-50"
+          >
+            Full backup (everything)
+          </button>
+        </div>
+
+        {selected.includes("mediaFiles") ? (
+          <p className="mt-4 max-w-2xl text-xs text-ink/55">
+            Media files are downloaded and verified one at a time in this browser. Keep this tab
+            open until the ZIP download starts; the progress bar shows the real file and byte count.
+          </p>
+        ) : null}
+
+        {exportProgress ? (
+          <div className="mt-6">
+            <ProgressBar
+              value={exportProgress.value}
+              label={exportProgress.label}
+              detail={exportProgress.detail}
+            />
+          </div>
+        ) : null}
+
+        {estimateRows !== null ? (
+          <p className="mt-4 text-xs text-ink/55">
+            {estimateRows.toLocaleString()} rows
+            {estimate?.mediaFiles
+              ? ` · ${estimate.mediaFiles.toLocaleString()} media files (${bytes(estimate.mediaBytes)})`
+              : ""}
+            {estimate?.mediaError ? ` · media: ${estimate.mediaError}` : ""}
+          </p>
+        ) : null}
+      </section>
+
+      {/* IMPORT */}
+      <section className="border border-ink/10 bg-white p-6">
+        <div className="flex items-center gap-3">
+          <Upload className="size-5 text-ink/70" />
+          <h3 className="font-serif text-lg text-ink">Import / restore</h3>
+        </div>
+        <p className="mt-2 max-w-2xl text-sm text-ink/60">
+          Upload an archive created by this tool. Nothing is written until you confirm — and a
+          safety snapshot of the affected data is downloaded automatically first.
+        </p>
+
+        <input
+          ref={fileRef}
+          type="file"
+          accept=".zip,application/zip"
+          disabled={analyzing}
+          onChange={(e) => onPick(e.target.files?.[0] ?? null)}
+          className="mt-4 block text-sm text-ink"
+        />
+
+        {analyzeProgress ? (
+          <div className="mt-4">
+            <ProgressBar
+              value={analyzeProgress.value}
+              label={analyzeProgress.label}
+              detail={analyzeProgress.detail}
+            />
+          </div>
+        ) : null}
+
+        {analysis ? (
+          <div className="mt-6 space-y-5">
+            <div className="text-xs text-ink/60">
+              Created {new Date(analysis.manifest.createdAt).toLocaleString()}
+              {analysis.manifest.createdBy ? ` by ${analysis.manifest.createdBy}` : ""}
+              {analysis.manifest.site ? ` on ${analysis.manifest.site}` : ""}
+              {analysis.mediaFiles
+                ? ` · verified ${analysis.mediaFiles.toLocaleString()} media files (${bytes(analysis.mediaBytes)})`
+                : ""}
+            </div>
+
+            {analysis.problems.length ? (
+              <ul className="border border-red-300 bg-red-50 p-4 text-xs text-red-700 space-y-1">
+                {analysis.problems.map((p) => (
+                  <li key={p}>{p}</li>
+                ))}
+              </ul>
+            ) : null}
+
+            <div className="space-y-3">
+              {analysis.datasets.map((d) => (
+                <label key={d.group} className="flex items-start gap-3 border border-ink/10 p-4">
+                  <input
+                    type="checkbox"
+                    checked={importGroups.includes(d.group)}
+                    onChange={() =>
+                      setImportGroups((s) =>
+                        s.includes(d.group) ? s.filter((x) => x !== d.group) : [...s, d.group],
+                      )
+                    }
+                    className="mt-1"
+                  />
+                  <span className="flex-1">
+                    <span className="block text-sm text-ink">
+                      {d.label}
+                      {d.insertOnly ? (
+                        <span className="ml-2 text-[0.6rem] uppercase tracking-[0.18em] text-ink/45">
+                          insert-only
+                        </span>
+                      ) : null}
+                    </span>
+                    <span className="mt-1 block text-xs text-ink/55">
+                      {d.tables
+                        .map((t) => `${t.table}: ${t.incoming} in archive / ${t.existing} here`)
+                        .join(" · ")}
+                      {d.mediaFiles !== undefined
+                        ? ` · ${d.mediaFiles.toLocaleString()} media files · ${bytes(d.mediaBytes ?? 0)}`
+                        : ""}
+                    </span>
+                  </span>
+                </label>
+              ))}
+            </div>
+
+            <div className="flex flex-wrap items-center gap-4">
+              <label className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">Mode</label>
+              <select
+                value={mode}
+                onChange={(e) => setMode(e.target.value as ImportMode)}
+                className="border border-ink/20 bg-white px-3 py-2 text-xs uppercase tracking-[0.22em] text-ink"
+              >
+                <option value="merge">Merge — update and add, delete nothing</option>
+                <option value="replace">Replace — clear tables first</option>
+              </select>
+              <label className="inline-flex items-center gap-2 text-xs text-ink/70">
+                <input
+                  type="checkbox"
+                  checked={includeMedia}
+                  onChange={(e) => setIncludeMedia(e.target.checked)}
+                />
+                Restore media files
+              </label>
+              <label className="inline-flex items-center gap-2 text-xs text-ink/70">
+                <input
+                  type="checkbox"
+                  checked={rewriteMedia}
+                  onChange={(e) => setRewriteMedia(e.target.checked)}
+                />
+                Rewrite media URLs to this installation
+              </label>
+              {rewriteMedia ? (
+                <input
+                  value={mediaBase}
+                  onChange={(e) => setMediaBase(e.target.value)}
+                  placeholder="/media"
+                  className="w-56 border border-ink/20 bg-white px-2 py-1 text-xs text-ink"
+                />
+              ) : null}
+            </div>
+
+            {mode === "replace" ? (
+              <div className="border border-amber-300 bg-amber-50 p-4 text-xs text-amber-800">
+                Replace clears the selected tables before loading. Customer data is never cleared.
+                Type <strong>REPLACE</strong> to confirm.
+                <input
+                  value={confirmText}
+                  onChange={(e) => setConfirmText(e.target.value)}
+                  className="mt-2 block w-40 border border-amber-400 bg-white px-2 py-1 text-xs text-ink"
+                />
+              </div>
+            ) : null}
+
+            <button
+              type="button"
+              onClick={runImport}
+              disabled={!canImport}
+              className="inline-flex items-center gap-2 border border-ink bg-ink px-4 py-2 text-xs uppercase tracking-[0.22em] text-white hover:bg-sea hover:border-sea disabled:opacity-50"
+            >
+              {importing ? (
+                <Loader2 className="size-3.5 animate-spin" />
+              ) : (
+                <Upload className="size-3.5" />
+              )}
+              {importing ? "Importing…" : "Snapshot & import"}
+            </button>
+
+            {importProgress ? (
+              <ProgressBar
+                value={importProgress.value}
+                label={importProgress.label}
+                detail={importProgress.detail}
+              />
+            ) : null}
+          </div>
+        ) : null}
+
+        {result ? (
+          <div className="mt-6 border border-ink/10 p-4">
+            <div className="flex items-center gap-2 text-sm text-ink">
+              {result.ok ? (
+                <>
+                  <CheckCircle2 className="size-4 text-sea" /> Import complete
+                </>
+              ) : (
+                <>
+                  <AlertTriangle className="size-4 text-red-600" /> Import finished with errors —
+                  the restore is incomplete
+                </>
+              )}
+            </div>
+            <ul className="mt-3 space-y-1 text-xs text-ink/60">
+              {result.applied.map((a) => (
+                <li key={a.table} className={a.skipped ? "text-red-700" : undefined}>
+                  {a.table}: {a.inserted} written{a.skipped ? `, ${a.skipped} failed` : ""} (
+                  {a.mode})
+                  {a.failedKeys?.length
+                    ? ` — ${a.failedKeys.slice(0, 5).join(", ")}${a.failedKeys.length > 5 ? " …" : ""}`
+                    : ""}
+                </li>
+              ))}
+              {result.aborted?.length ? (
+                <li className="text-red-700">not attempted: {result.aborted.join(", ")}</li>
+              ) : null}
+              {result.mediaFilesInArchive ? (
+                <li>
+                  media restored: {result.mediaRestored.toLocaleString()}/
+                  {result.mediaFilesInArchive.toLocaleString()} files ·{" "}
+                  {bytes(result.mediaBytesRestored)} of {bytes(result.mediaBytesInArchive)}
+                </li>
+              ) : null}
+              {result.quarantinedMedia?.length ? (
+                <li className="text-amber-700">
+                  {result.quarantinedMedia.length} non-media entries were not restored
+                </li>
+              ) : null}
+            </ul>
+
+            {result.warnings.length ? (
+              <ul className="mt-3 space-y-1 text-xs text-amber-700">
+                {result.warnings.map((w, i) => (
+                  <li key={i}>{w}</li>
+                ))}
+              </ul>
+            ) : null}
+          </div>
+        ) : null}
+      </section>
+    </div>
+  );
+}