// Signal-conditioned views in this file must use <Show>, never a
// signal-conditioned early return — see Projects.md §4.1.
import { createMemo, createSignal, Show } from "solid-js";

import { sendMessage } from "../App";
import { PeachWordmark } from "../components/PeachMark";
import {
  parseImportSource,
  type ImportParseResult,
} from "../../shared/import";
import {
  decodePeachScript,
  isPeachScript,
  normalisePeachScript,
} from "../../crypto/peachScript";
import { parsePayload } from "../../crypto/peachPayload";
import { IMPORT_LIMITS } from "../../shared/import-limits";
import type { VaultEntry } from "../../shared/types";

type ImportSubview = "menu" | "peachscript" | "file";
type ImportMergeMode = "add" | "replace";

interface ImportProps {
  mode?: "existing" | "onboarding";
  replacesExistingVault?: boolean;
  /** Skip the menu and open straight into a specific subview. */
  initialView?: ImportSubview;
  onBack: () => void;
  onImport: () => void | Promise<void>;
}

function OnboardingMasterPasswordFields(props: {
  idPrefix: string;
  copy: string;
  masterPlaceholder: string;
  password: string;
  confirm: string;
  onPasswordInput: (value: string) => void;
  onConfirmInput: (value: string) => void;
}) {
  const [showPassword, setShowPassword] = createSignal(false);

  return (
    <>
      <div class="peach-newvault-label-row">
        <label class="peach-label" for={`${props.idPrefix}-master-password`}>
          new master password
        </label>
        <button
          class="peach-lock-reveal-btn"
          type="button"
          onClick={() => setShowPassword((value) => !value)}
          aria-label={showPassword() ? "Hide passwords" : "Show passwords"}
        >
          <Show
            when={showPassword()}
            fallback={
              <svg width="15" height="10" viewBox="0 0 14 10" fill="none" stroke="currentColor" stroke-width="0.9" stroke-linecap="round">
                <path d="M1 5C1 5 2.8 1 7 1C11.2 1 13 5 13 5C13 5 11.2 9 7 9C2.8 9 1 5 1 5Z" />
                <circle cx="7" cy="5" r="1.75" />
              </svg>
            }
          >
            <svg width="15" height="10" viewBox="0 0 14 10" fill="none" stroke="currentColor" stroke-width="0.9" stroke-linecap="round">
              <path d="M1 2C3 4.5 5 6 7 6C9 6 11 4.5 13 2" />
              <path d="M3.5 5.5L2.5 7.5" />
              <path d="M7 6.5V8.5" />
              <path d="M10.5 5.5L11.5 7.5" />
            </svg>
          </Show>
          {showPassword() ? "hide" : "show"}
        </button>
      </div>
      <p class="peach-export-card-copy">{props.copy}</p>
      <div class="peach-settings-stack peach-export-password-stack">
        <input
          id={`${props.idPrefix}-master-password`}
          class="peach-settings-input"
          type={showPassword() ? "text" : "password"}
          placeholder={props.masterPlaceholder}
          value={props.password}
          onInput={(event) => props.onPasswordInput((event.target as HTMLInputElement).value)}
        />
        <input
          id={`${props.idPrefix}-confirm-password`}
          class="peach-settings-input"
          type={showPassword() ? "text" : "password"}
          placeholder="confirm master password"
          value={props.confirm}
          onInput={(event) => props.onConfirmInput((event.target as HTMLInputElement).value)}
        />
        <Show when={props.confirm.length > 0 && props.password !== props.confirm}>
          <p class="peach-export-note" style="color:var(--peach-t2)">
            Passwords don't match
          </p>
        </Show>
      </div>
    </>
  );
}

export function ImportView(props: ImportProps) {
  const [view, setView] = createSignal<ImportSubview>(props.initialView ?? "menu");
  // When FileImport detects a .peach file, it stashes the contents here and
  // routes the view to "peachscript" so the existing decode flow handles it.
  const [peachScriptPrefill, setPeachScriptPrefill] = createSignal<string>("");
  const mode = () => props.mode ?? "existing";
  const isOnboarding = () => mode() === "onboarding";
  // When the caller deep-links into a subview, the back arrow exits the
  // ImportView entirely. Otherwise it returns to the import menu.
  const subviewBack = () => (props.initialView ? props.onBack() : setView("menu"));

  return (
    <div class={isOnboarding() ? "peach-lock-view" : "peach-overlay-view ov-enter-right"} style="display:flex">
      <Show when={view() === "menu"}>
        <ImportMenu
          mode={mode()}
          replacesExistingVault={props.replacesExistingVault}
          onBack={props.onBack}
          onPick={(v) => setView(v)}
        />
      </Show>
      <Show when={view() === "peachscript"}>
        <PeachScriptImport
          mode={mode()}
          replacesExistingVault={props.replacesExistingVault}
          initialScript={peachScriptPrefill()}
          onBack={() => {
            setPeachScriptPrefill("");
            subviewBack();
          }}
          onImport={props.onImport}
        />
      </Show>
      <Show when={view() === "file"}>
        <FileImport
          mode={mode()}
          replacesExistingVault={props.replacesExistingVault}
          onBack={subviewBack}
          onImport={props.onImport}
          onLoadPeachFile={(content) => {
            setPeachScriptPrefill(content);
            setView("peachscript");
          }}
        />
      </Show>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Menu
// ---------------------------------------------------------------------------

function ImportMenu(props: {
  mode: "existing" | "onboarding";
  replacesExistingVault?: boolean;
  onBack: () => void;
  onPick: (view: ImportSubview) => void;
}) {
  const isOnboarding = props.mode === "onboarding";
  return (
    <>
      <Show
        when={isOnboarding}
        fallback={<OverlayHeader title="import" onBack={props.onBack} />}
      >
        <div class="peach-lock-view-header">
          <PeachWordmark class="peach-wordmark-wrap" />
          <button class="peach-lock-restore-link" onClick={props.onBack}>
            ‹ back
          </button>
        </div>
      </Show>
      <div class="peach-settings-body peach-export-menu">
        <Show when={isOnboarding && props.replacesExistingVault}>
          <div class="peach-settings-group">
            <div class="peach-restore-warning">
              Restoring now replaces the locked local vault on this device with
              a fresh one from your backup or export file.
            </div>
          </div>
        </Show>

        <div class="peach-settings-group peach-export-card peach-export-card--primary">
          <p class="peach-settings-label">peachscript</p>
          <p class="peach-export-card-copy">
            Paste a PeachScript backup from another Peach device.
            {props.mode === "existing" ? " We'll merge it into your vault." : ""}
          </p>
          <button
            class="peach-btn peach-btn--subtle peach-btn--sm"
            onClick={() => props.onPick("peachscript")}
          >
            Paste PeachScript →
          </button>
        </div>

        <div class="peach-settings-group peach-export-card">
          <p class="peach-settings-label">backup file</p>
          <p class="peach-export-card-copy">
            A file from Bitwarden, Proton Pass,
            1Password, or a browser CSV (Chrome, Safari, Edge).
          </p>
          <button
            class="peach-btn peach-btn--subtle peach-btn--sm"
            onClick={() => props.onPick("file")}
          >
            Choose file →
          </button>
        </div>
      </div>
    </>
  );
}

// ---------------------------------------------------------------------------
// PeachScript paste flow
// ---------------------------------------------------------------------------

function PeachScriptImport(props: {
  mode: "existing" | "onboarding";
  replacesExistingVault?: boolean;
  /** Optional initial PeachScript content — set when the user loaded a
   *  .peach file from the CSV/file card and was routed here. */
  initialScript?: string;
  onBack: () => void;
  onImport: () => void | Promise<void>;
}) {
  const [scriptInput, setScriptInput] = createSignal(props.initialScript ?? "");
  const [scriptPass, setScriptPass] = createSignal("");
  const [masterPassword, setMasterPassword] = createSignal("");
  const [masterConfirm, setMasterConfirm] = createSignal("");
  const [working, setWorking] = createSignal(false);
  const [error, setError] = createSignal<string | null>(null);
  const [result, setResult] = createSignal<{ entryCount: number } | null>(null);

  const scriptLooksValid = createMemo(() => isPeachScript(scriptInput()));
  const isOnboarding = props.mode === "onboarding";
  const masterPasswordReady = createMemo(
    () => masterPassword().length >= 8 && masterPassword() === masterConfirm()
  );

  async function handleImport() {
    setError(null);
    setResult(null);
    if (!scriptLooksValid()) {
      setError("Paste your PeachScript first.");
      return;
    }
    if (!scriptPass().trim()) {
      setError("Enter the backup password.");
      return;
    }
    setWorking(true);
    try {
      const bytes = decodePeachScript(normalisePeachScript(scriptInput()));
      const payload = await parsePayload(bytes, scriptPass());

      if (isOnboarding) {
        if (!masterPasswordReady()) {
          throw new Error("MASTER_PASSWORD_REQUIRED");
        }
        const createRes = await sendMessage({
          type: "CREATE_VAULT",
          payload: { password: masterPassword() },
        });
        if (!(createRes as { ok: boolean }).ok) throw new Error("CREATE_VAULT_FAILED");
      }

      const restoreRes = await sendMessage({
        type: "RESTORE_ENTRIES",
        payload: {
          entries: payload.entries,
          mode: "merge",
          settings: payload.settings,
        },
      });
      const restoreEnvelope = restoreRes as { ok: boolean; error?: string };
      if (!restoreEnvelope.ok) {
        throw new Error(restoreEnvelope.error ?? "RESTORE_FAILED");
      }

      if (payload.license?.key) {
        await sendMessage({
          type: "ACTIVATE_LICENSE",
          payload: { key: payload.license.key },
        }).catch(() => {});
      }

      setResult({ entryCount: payload.entries.length });
      await props.onImport();
    } catch (err) {
      const code = err instanceof Error ? err.message : String(err);
      setError(getImportErrorCopy(code));
    } finally {
      setWorking(false);
    }
  }

  return (
    <>
      <SubviewHeader title="peachscript" onBack={props.onBack} mode={props.mode} />
      <div class="peach-settings-body">
        <Show when={isOnboarding && props.replacesExistingVault}>
          <div class="peach-settings-group">
            <div class="peach-restore-warning">
              Restoring now replaces the locked local vault on this device with
              a fresh one from your backup.
            </div>
          </div>
        </Show>
        <div class="peach-settings-group peach-export-card peach-export-card--primary peach-export-pass-group">
          <p class="peach-settings-label">paste peachscript</p>
          <p class="peach-export-card-copy">
            {isOnboarding
              ? "Paste a PeachScript backup from another Peach device to restore your vault — or load a .peach file from disk."
              : "We'll merge the entries into your existing vault. You can paste PeachScript or load a .peach file."}
          </p>
          <textarea
            class="peach-script-input"
            placeholder="paste peachscript…"
            value={scriptInput()}
            onInput={(e) => setScriptInput((e.target as HTMLTextAreaElement).value)}
          />
          <label
            class="peach-btn peach-btn--ghost peach-btn--sm"
            style="display:inline-flex;align-items:center;justify-content:center;cursor:pointer;"
          >
            Load .peach file
            <input
              type="file"
              accept=".peach,application/x-peach,text/plain"
              style="display:none;"
              onChange={async (event) => {
                const input = event.currentTarget;
                const file = input.files?.[0];
                if (!file) return;
                try {
                  // PB-26-010: bound before reading the file into a string.
                  if (file.size > IMPORT_LIMITS.MAX_JSON_BYTES) {
                    setError("That file is too large.");
                    return;
                  }
                  const text = await file.text();
                  setScriptInput(text);
                } catch (err) {
                  setError(err instanceof Error ? err.message : "Couldn't read file.");
                } finally {
                  input.value = "";
                }
              }}
            />
          </label>
          <div class="peach-settings-stack peach-export-password-stack">
            <input
              class="peach-settings-input"
              type="password"
              placeholder="PeachScript password"
              value={scriptPass()}
              onInput={(e) => setScriptPass((e.target as HTMLInputElement).value)}
            />
          </div>
          <Show when={isOnboarding}>
            <OnboardingMasterPasswordFields
              idPrefix="peachscript"
              copy="Use at least 8 characters. This password unlocks Peach on this device after the restore, and both fields must match before Peach can create it."
              masterPlaceholder="new master password"
              password={masterPassword()}
              confirm={masterConfirm()}
              onPasswordInput={setMasterPassword}
              onConfirmInput={setMasterConfirm}
            />
          </Show>
          <button
            class="peach-btn peach-btn--subtle peach-btn--sm"
            onClick={() => void handleImport()}
            disabled={
              working() ||
              !scriptLooksValid() ||
              !scriptPass().trim() ||
              (isOnboarding && !masterPasswordReady())
            }
          >
            {working() ? "decoding…" : "Restore from PeachScript"}
          </button>
          <Show when={error()}>
            <div class="peach-restore-error">{error()}</div>
          </Show>
          <Show when={result()}>
            <div class="peach-export-success">
              <span class="peach-export-success-check">✓</span>
              <span>
                Restored {result()!.entryCount} entr
                {result()!.entryCount === 1 ? "y" : "ies"}.
              </span>
            </div>
          </Show>
        </div>
      </div>
    </>
  );
}

// ---------------------------------------------------------------------------
// File flow (Bitwarden / 1Password / etc.)
// ---------------------------------------------------------------------------

function FileImport(props: {
  mode: "existing" | "onboarding";
  replacesExistingVault?: boolean;
  onBack: () => void;
  onImport: () => void | Promise<void>;
  /** Called when the user picks a .peach file from this picker — the parent
   *  routes them to the PeachScript subview with the contents prefilled. */
  onLoadPeachFile?: (content: string) => void;
}) {
  const isOnboarding = props.mode === "onboarding";
  const needsMasterPassword = () => isOnboarding;

  const [preview, setPreview] = createSignal<ImportParseResult | null>(null);
  const [masterPassword, setMasterPassword] = createSignal("");
  const [masterConfirm, setMasterConfirm] = createSignal("");
  const [importing, setImporting] = createSignal(false);
  const [error, setError] = createSignal<string | null>(null);
  const [mergeMode, setMergeMode] = createSignal<ImportMergeMode>("add");
  const [awaitingReplaceConfirm, setAwaitingReplaceConfirm] = createSignal(false);
  const [importProgress, setImportProgress] = createSignal<{ current: number; total: number } | null>(null);
  const [duplicateWarning, setDuplicateWarning] = createSignal<number>(0);
  const [existingCount, setExistingCount] = createSignal<number>(0);

  const masterPasswordReady = createMemo(
    () => masterPassword().length >= 8 && masterPassword() === masterConfirm()
  );

  async function refreshExistingCount() {
    if (isOnboarding) return;
    const res = await sendMessage({ type: "GET_ENTRIES" });
    const list = (res as { ok: boolean; data?: VaultEntry[] }).data ?? [];
    setExistingCount(list.length);
  }
  void refreshExistingCount();

  async function parseSource(text: string) {
    try {
      const result = await parseImportSource(text);
      setPreview(result);
      setError(null);
      if (result.format === "unknown") {
        setError(
          "We couldn't recognise this file format. Peach supports: Bitwarden JSON/CSV, Proton Pass JSON/CSV, 1Password JSON, and generic browser CSV exports."
        );
      }
      return result;
    } catch (err) {
      const message = err instanceof Error ? err.message : String(err);
      setPreview(null);
      setError(getImportErrorCopy(message));
      return null;
    }
  }

  async function handleFileSelect(event: Event) {
    const input = event.target as HTMLInputElement;
    const file = input.files?.[0];
    if (!file) return;

    setPreview(null);
    setError(null);
    setAwaitingReplaceConfirm(false);

    if (file.size > IMPORT_LIMITS.MAX_JSON_BYTES) {
      setError("That file is too large.");
      input.value = "";
      return;
    }
    const text = await file.text();

    // Route .peach files to the PeachScript subview. Detection is two-pronged:
    // either the filename ends in .peach, or the body is entirely PUA chars
    // (the canonical PeachScript shape). The two-pronged check protects
    // against renamed-extension imports and against text editors that
    // accidentally save with a different extension.
    const looksLikePeach =
      file.name.toLowerCase().endsWith(".peach") || isPeachScript(text);
    if (looksLikePeach) {
      if (props.onLoadPeachFile) {
        props.onLoadPeachFile(text);
        input.value = "";
        return;
      }
      setError("This is a .peach file. Open the PeachScript card to import it.");
      return;
    }

    await parseSource(text);
  }

  async function countDuplicates(incoming: ImportParseResult["entries"]): Promise<number> {
    if (incoming.length === 0) return 0;
    const res = await sendMessage({ type: "GET_ENTRIES" });
    const existing = ((res as { ok: boolean; data?: VaultEntry[] }).data ?? []).filter((e) => !e.deletedAt);
    const keyOf = (title?: string, url?: string, username?: string) =>
      `${(title ?? "").toLowerCase()}|${(url ?? "").toLowerCase()}|${(username ?? "").toLowerCase()}`;
    const existingKeys = new Set(existing.map((e) => keyOf(e.title, e.url, e.username)));
    let dupes = 0;
    for (const entry of incoming) {
      const u = "username" in entry ? entry.username : undefined;
      const url = "url" in entry ? entry.url : undefined;
      if (existingKeys.has(keyOf(entry.title, url, u))) dupes += 1;
    }
    return dupes;
  }

  async function handleImport() {
    const currentPreview = preview();
    if (!currentPreview) return;

    if (needsMasterPassword()) {
      if (masterPassword().length < 8) {
        setError("Master password must be at least 8 characters.");
        return;
      }
      if (!masterPasswordReady()) {
        setError("Master passwords do not match.");
        return;
      }
    }

    if (!isOnboarding && mergeMode() === "replace" && !awaitingReplaceConfirm()) {
      setAwaitingReplaceConfirm(true);
      return;
    }

    setImporting(true);
    setError(null);
    setDuplicateWarning(0);
    setImportProgress(null);

    try {
      if (currentPreview.entries.length === 0) {
        throw new Error("NO_ENTRIES_IMPORTED");
      }

      if (needsMasterPassword()) {
        const createResponse = await sendMessage({
          type: "CREATE_VAULT",
          payload: { password: masterPassword() },
        });
        if (!(createResponse as { ok: boolean }).ok) {
          throw new Error("CREATE_VAULT_FAILED");
        }
      }

      if (!isOnboarding && mergeMode() === "replace") {
        const clearRes = await sendMessage({ type: "CLEAR_VAULT_ENTRIES" });
        if (!(clearRes as { ok: boolean }).ok) {
          throw new Error("CLEAR_VAULT_FAILED");
        }
      }

      let dupes = 0;
      if (!isOnboarding && mergeMode() === "add") {
        dupes = await countDuplicates(currentPreview.entries);
      }

      let imported = 0;
      setImportProgress({ current: 0, total: currentPreview.entries.length });

      const batchRes = await sendMessage({
        type: "BATCH_ADD_ENTRIES",
        payload: { entries: currentPreview.entries },
      });

      if ((batchRes as { ok: boolean }).ok) {
        imported = ((batchRes as { ok: boolean; data?: VaultEntry[] }).data ?? []).length;
        setImportProgress({ current: imported, total: currentPreview.entries.length });
      } else {
        for (const entry of currentPreview.entries) {
          const response = await sendMessage({
            type: "ADD_ENTRY",
            payload: entry,
          });
          if ((response as { ok: boolean }).ok) imported += 1;
          setImportProgress({ current: imported, total: currentPreview.entries.length });
        }
      }

      if (imported === 0) {
        throw new Error("NO_ENTRIES_IMPORTED");
      }

      setDuplicateWarning(dupes);
      await props.onImport();
    } catch (err) {
      const message = err instanceof Error ? err.message : String(err);
      setError(getImportErrorCopy(message));
      setImporting(false);
      setImportProgress(null);
      return;
    }

    setImporting(false);
    setImportProgress(null);
  }

  return (
    <>
      <SubviewHeader title="backup file" onBack={props.onBack} mode={props.mode} />
      <div class="peach-settings-body">
        <Show when={isOnboarding && props.replacesExistingVault}>
          <div class="peach-settings-group">
            <div class="peach-restore-warning">
              Restoring now replaces the locked local vault on this device with
              a fresh one from your backup.
            </div>
          </div>
        </Show>
        <div class="peach-settings-group peach-export-card peach-export-card--primary">
          <p class="peach-settings-label">choose a file</p>
          <p class="peach-export-card-copy">
            Bitwarden, 1Password, Proton Pass, Chrome / Edge / Safari CSV, FIDO
              credential-exchange passkeys.
          </p>

          <div class="peach-provider-chips">
            <span class="peach-provider-chip">FIDO passkeys</span>
            <span class="peach-provider-chip">Proton Pass</span>
            <span class="peach-provider-chip">Bitwarden</span>
            <span class="peach-provider-chip">1Password</span>
            <span class="peach-provider-chip">Browser CSV</span>
          </div>

          <input
            class="peach-restore-file"
            type="file"
            accept=".csv,.json,.peach,application/x-peach"
            onChange={(event) => void handleFileSelect(event)}
          />
        </div>

        <Show when={preview() && preview()!.format !== "unknown"}>
          <div class="peach-settings-group">
            <p class="peach-settings-label">{preview()!.label}</p>
            <div class="peach-import-summary">
              Found <strong>{preview()!.entries.length}</strong>{" "}
              entr{preview()!.entries.length === 1 ? "y" : "ies"}
              {preview()!.skippedItems > 0
                ? `. ${preview()!.skippedItems} skipped because no password was present.`
                : "."}
            </div>

            <div class="peach-import-preview">
              {preview()!.entries.slice(0, 8).map((entry) => (
                <div class="peach-import-preview-row">
                  <span class="peach-import-preview-title">{entry.title}</span>
                  <span class="peach-import-preview-meta">
                    {entry.passkey
                      ? `${entry.passkey.userName} • ${entry.passkey.rpId} (passkey)`
                      : entry.type === "note"
                        ? "secure note"
                        : entry.username || entry.url || "password item"}
                  </span>
                </div>
              ))}
              <Show when={preview()!.entries.length > 8}>
                <div class="peach-import-preview-more">
                  ...and {preview()!.entries.length - 8} more
                </div>
              </Show>
            </div>
          </div>
        </Show>

        <Show when={!isOnboarding && preview() && preview()!.format !== "unknown" && preview()!.entries.length > 0}>
          <div class="peach-settings-group">
            <p class="peach-settings-label">merge or replace</p>
            <label class="peach-import-choice">
              <input
                type="radio"
                name="merge-mode"
                value="add"
                checked={mergeMode() === "add"}
                onChange={() => { setMergeMode("add"); setAwaitingReplaceConfirm(false); }}
              />
              <span class="peach-import-choice-main">
                <span class="peach-import-choice-label">Add to existing vault</span>
                <span class="peach-import-choice-sub">
                  This will add {preview()!.entries.length} entries to your existing {existingCount()}.
                </span>
              </span>
            </label>
            <label class="peach-import-choice">
              <input
                type="radio"
                name="merge-mode"
                value="replace"
                checked={mergeMode() === "replace"}
                onChange={() => setMergeMode("replace")}
              />
              <span class="peach-import-choice-main">
                <span class="peach-import-choice-label">Replace vault</span>
                <span class="peach-import-choice-sub">
                  This will replace your {existingCount()} entries with {preview()!.entries.length} imported ones.
                </span>
              </span>
            </label>
            <Show when={awaitingReplaceConfirm()}>
              <div class="peach-restore-warning" style="margin-top:6px">
                Replace forever? This cannot be undone.
              </div>
            </Show>
          </div>
        </Show>

        <Show when={needsMasterPassword() && preview() && preview()!.format !== "unknown"}>
          <div class="peach-settings-group">
            <OnboardingMasterPasswordFields
              idPrefix="backup"
              copy="Use at least 8 characters. This password unlocks the Peach vault created on this device after import, and both fields must match before Peach can create it."
              masterPlaceholder="new master password"
              password={masterPassword()}
              confirm={masterConfirm()}
              onPasswordInput={setMasterPassword}
              onConfirmInput={setMasterConfirm}
            />
          </div>
        </Show>

        <Show when={error()}>
          <div class="peach-settings-group">
            <div class="peach-restore-error">{error()}</div>
          </div>
        </Show>

        <Show when={importing() && importProgress()}>
          <div class="peach-settings-group">
            <div class="peach-import-summary">
              Importing... [{importProgress()!.current} / {importProgress()!.total}]
            </div>
          </div>
        </Show>

        <Show when={duplicateWarning() > 0 && !importing()}>
          <div class="peach-settings-group">
            <div class="peach-export-card-copy">
              {duplicateWarning()} {duplicateWarning() === 1 ? "entry appears" : "entries appear"} to be duplicates of existing ones. They were still imported — you can review and delete them in your vault.
            </div>
          </div>
        </Show>

        <Show when={preview() && preview()!.format !== "unknown"}>
          <div class="peach-settings-group">
            <div class="peach-settings-actions">
              <button
                class="peach-btn peach-btn--subtle peach-btn--sm"
                onClick={() => void handleImport()}
                disabled={
                  importing() ||
                  preview()!.entries.length === 0 ||
                  (needsMasterPassword() && !masterPasswordReady())
                }
              >
                {importing()
                  ? "importing..."
                  : isOnboarding
                    ? `Create vault + import ${preview()!.entries.length}`
                    : mergeMode() === "replace"
                      ? awaitingReplaceConfirm()
                        ? "Yes, replace forever"
                        : `Replace vault with ${preview()!.entries.length}`
                      : `Import ${preview()!.entries.length}`}
              </button>
            </div>
          </div>
        </Show>
      </div>
    </>
  );
}

// ---------------------------------------------------------------------------
// Shared headers
// ---------------------------------------------------------------------------

function OverlayHeader(props: { title: string; onBack: () => void }) {
  return (
    <div class="peach-overlay-header">
      <button
        class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
        onClick={props.onBack}
        aria-label="Back"
      >
        <svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
          <path d="M6 1L1 6L6 11" />
        </svg>
      </button>
      <span class="peach-overlay-title">{props.title}</span>
      <div class="peach-overlay-spacer"></div>
    </div>
  );
}

function SubviewHeader(props: {
  title: string;
  onBack: () => void;
  mode: "existing" | "onboarding";
}) {
  // Onboarding sub-flows reuse the lock-screen header; existing-vault flows
  // use the standard overlay back-arrow header.
  return (
    <Show
      when={props.mode === "onboarding"}
      fallback={<OverlayHeader title={props.title} onBack={props.onBack} />}
    >
      <div class="peach-lock-view-header">
        <PeachWordmark class="peach-wordmark-wrap" />
        <button class="peach-lock-restore-link" onClick={props.onBack}>
          ‹ back
        </button>
      </div>
    </Show>
  );
}

function getImportErrorCopy(error: string): string {
  // UI-7 / MV-5: oversized-import errors carry a variable detail after the
  // code, so match the prefix and never surface the raw string.
  if (error.startsWith("IMPORT_TOO_LARGE")) {
    return "This file is too large to import (limit: 10 MiB for backups, 25 MiB for Codex PDFs). If this is a real PeachScript backup, please report it — backups never approach this size.";
  }
  switch (error) {
    case "UNSUPPORTED_IMPORT_FORMAT":
      return "Unrecognised file format. Use CSV, Bitwarden JSON, Proton Pass JSON/CSV, or a PeachScript backup.";
    case "INVALID_PASSPHRASE":
      return "Wrong backup password. This is the password you chose when you created the backup.";
    case "INVALID_PEACHSCRIPT_CHARACTER":
      return "This doesn't look like PeachScript. Make sure you copied the entire backup string.";
    case "PAYLOAD_TOO_SHORT":
      return "PeachScript looks truncated. Copy the full backup string and try again.";
    case "BAD_MAGIC":
    case "UNSUPPORTED_VERSION":
      return "This PeachScript was created by a different version of Peach.";
    case "CHECKSUM_FAILED":
      return "PeachScript appears corrupted. Re-copy from the source device.";
    case "CREATE_VAULT_FAILED":
      return "Peach couldn't create a new local vault before importing.";
    case "CLEAR_VAULT_FAILED":
      return "Peach couldn't clear the existing vault before replacing it.";
    case "MASTER_PASSWORD_REQUIRED":
      return "Choose a master password for your new vault first.";
    case "RESTORE_FAILED":
      return "Restore failed. Your existing vault is unchanged.";
    case "vault_locked":
      return "Peach is locked. Open Peach with your master password and try again.";
    case "refuse to replace with empty entry set":
      return "This PeachScript decoded to zero entries — refusing to wipe the vault.";
    case "NO_ENTRIES_IMPORTED":
      return "No importable password entries were found in that file.";
    case "PEACHSCRIPT_TOO_LARGE":
      return "That backup is too large.";
    default:
      // Never echo raw error strings — internal messages must not reach the UI.
      return "Import failed. Please try again.";
  }
}