import { For, Match, Show, Switch, createMemo, createSignal, onCleanup, onMount } from "solid-js";
import { sendMessage } from "../App";
import { LockRuneCanvas } from "../components/LockRuneCanvas";
import { PeachMark, PeachWordmark } from "../components/PeachMark";
import { RecoveryWordEntryView } from "./RecoveryWordEntry";
import { RecoveryWordDisplayView } from "./RecoveryWordDisplay";
import { RuneBackground } from "../components/RuneBackground";
import { storageGet, storageSet } from "../../shared/storage";
import { isPeachScript, decodePeachScript, normalisePeachScript } from "../../crypto/peachScript";
import { parsePayload } from "../../crypto/peachPayload";
import { parseImportSource } from "../../shared/import";
import { isNativePlatform, nativePlugin } from "../../shared/native";

const peachMarkImg = new Image();
peachMarkImg.src = `data:image/svg+xml,${encodeURIComponent(
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">' +
  '<path d="M32 54C16 54 8 44 8 31C8 18 17 10 27 10C28 7 30 5.5 32 5.5C34 5.5 36 7 37 10C47 10 56 18 56 31C56 44 48 54 32 54Z" fill="#D96830"/>' +
  '<path d="M37 8.5C40.5 3.5 48 5 46 10.5C42 11 37 8.5 37 8.5Z" fill="#7B9060"/>' +
  '<path d="M32 5.5Q35.5 1 39 2.5" stroke="#7B9060" stroke-width="1.5" stroke-linecap="round"/>' +
  '</svg>'
)}`;

// Lazy-load zxcvbn — it's heavy (~800 kB) and only needed during vault creation
let _zxcvbn: ((password: string) => { score: number }) | null = null;
async function getZxcvbn() {
  if (_zxcvbn) return _zxcvbn;
  const mod = await import("zxcvbn");
  _zxcvbn = mod.default;
  return _zxcvbn;
}

interface LockProps {
  hasVault: boolean;
  ready: boolean;
  isPro?: boolean;
  /** When true, render the recovery-words display directly instead of the
   *  unlock UI. Used after a popup close+reopen during the create-vault
   *  recovery confirmation flow (peach_recovery_pending flag). */
  forceRecoveryWords?: boolean;
  onUnlock: () => void | Promise<void>;
  /** Optional escape hatch: rewind from the create-vault screen back to
   *  Onboarding. Only meaningful when the user reached create-vault from
   *  Onboarding in the first place. */
  onBackToOnboarding?: () => void;
  /** Optional: open the Peach Codex restore flow (camera scan of printed
   *  Codex pages). Surfaced as a small footer link on the new-vault screen. */
  onOpenCodexRestore?: () => void;
}

type RestoreSurface = "restore" | null;
type RecoverSurface = "words" | "new-password" | null;

export function LockView(props: LockProps) {
  const [password, setPassword] = createSignal("");
  const [confirmPassword, setConfirmPassword] = createSignal("");
  const [error, setError] = createSignal("");
  const [loading, setLoading] = createSignal(false);
  const [restoreSurface, setRestoreSurface] = createSignal<RestoreSurface>(null);
  const [showPassword, setShowPassword] = createSignal(false);
  const [recoverSurface, setRecoverSurface] = createSignal<RecoverSurface>(null);
  // After vault creation succeeds, set this to show the recovery words screen.
  // Only meaningful when hasVault === false.
  const [showRecoveryWords, setShowRecoveryWords] = createSignal(props.forceRecoveryWords ?? false);

  const MIN_LENGTH = 12;
  const MIN_ZXCVBN_SCORE = 2;

  const [strengthScore, setStrengthScore] = createSignal<number | null>(null);
  const [biometricAvailable, setBiometricAvailable] = createSignal(false);
  const [biometricBusy, setBiometricBusy] = createSignal(false);

  const canCreate = createMemo(
    () =>
      password().length >= MIN_LENGTH &&
      confirmPassword().length >= MIN_LENGTH &&
      password() === confirmPassword() &&
      strengthScore() !== null &&
      strengthScore()! >= MIN_ZXCVBN_SCORE
  );

  const passwordStrength = createMemo(() => {
    const score = strengthScore();
    if (score === null) return null;
    if (score <= 1) return "weak";
    if (score === 2) return "fair";
    if (score === 3) return "good";
    return "strong";
  });

  const createBlockerMessage = createMemo(() => {
    if (!password()) return null;
    if (password().length < MIN_LENGTH) return `need ${MIN_LENGTH - password().length} more characters`;
    if (!confirmPassword()) return "confirm your password";
    if (password() !== confirmPassword()) return "passwords don't match";
    if (strengthScore() === null) return "checking strength…";
    if (strengthScore()! < MIN_ZXCVBN_SCORE) return "password too weak — add words or length";
    return null;
  });

  // Update strength asynchronously when password changes
  createMemo(() => {
    const value = password();
    if (!value) { setStrengthScore(null); return; }
    getZxcvbn().then((zxcvbn) => {
      if (password() === value) setStrengthScore(zxcvbn(value).score);
    }).catch(() => {
      // zxcvbn unavailable — fall back to length-only heuristic
      if (password() === value) setStrengthScore(value.length >= 16 ? 3 : value.length >= 12 ? 2 : 1);
    });
  });

  async function handleUnlock() {
    if (!password().trim()) return;
    setLoading(true);
    setError("");
    const response = await sendMessage({
      type: "UNLOCK",
      payload: { password: password() },
    });
    const result = response as { ok: boolean; error?: string };
    if (result.ok) {
      await props.onUnlock();
      setLoading(false);
      return;
    }
    setError(getDisplayError(result.error, "incorrect password"));
    setPassword("");
    const passwordField = document.querySelector(".lock-password-input") as HTMLInputElement | undefined;
    passwordField?.classList.add("shake");
    setTimeout(() => passwordField?.classList.remove("shake"), 300);
    setLoading(false);
  }

  async function checkBiometricAvailable(): Promise<void> {
    if (!props.hasVault || !isNativePlatform()) return;
    const keystore = nativePlugin<{ hasMasterKey: () => Promise<{ exists: boolean }> }>("KeystorePlugin");
    const biometric = nativePlugin<{ isAvailable: () => Promise<{ available: boolean }> }>("BiometricPlugin");
    if (!keystore || !biometric) return;
    try {
      const stored = await keystore.hasMasterKey();
      if (!stored.exists) return;
      const avail = await biometric.isAvailable();
      if (!avail.available) return;
      setBiometricAvailable(true);
      window.setTimeout(() => { void handleBiometricUnlock(); }, 400);
    } catch { /* missing plugins or runtime error — silently skip */ }
  }

  async function handleBiometricUnlock(): Promise<void> {
    if (biometricBusy()) return;
    const biometric = nativePlugin<{ authenticate: (opts: Record<string, string>) => Promise<void> }>("BiometricPlugin");
    const keystore = nativePlugin<{ retrieveMasterKey: () => Promise<{ masterKeyHex: string }> }>("KeystorePlugin");
    if (!biometric || !keystore) return;
    setBiometricBusy(true);
    setError("");
    try {
      await biometric.authenticate({
        title: "Unlock Peach",
        subtitle: "Use biometrics to access your vault",
        negativeButtonText: "Use Password",
      });
      const { masterKeyHex } = await keystore.retrieveMasterKey();
      const res = (await sendMessage({
        type: "UNLOCK_WITH_KEY",
        payload: { masterKeyHex },
      })) as { ok: boolean; error?: string };
      if (res.ok) {
        await props.onUnlock();
        return;
      }
      if (res.error === "biometric_key_invalidated") {
        await sendMessage({
          type: "UPDATE_SETTINGS",
          payload: { biometricsEnabled: false },
        });
        setBiometricAvailable(false);
        setError("biometric key expired — re-enable in settings");
      } else {
        setError("biometric unlock failed");
      }
    } catch (e) {
      const reason = e instanceof Error ? e.message : String(e);
      if (reason.includes("user_cancelled")) return;
      if (reason.includes("biometric_key_invalidated")) {
        await sendMessage({
          type: "UPDATE_SETTINGS",
          payload: { biometricsEnabled: false },
        });
        setBiometricAvailable(false);
        setError("biometric key expired — re-enable in settings");
        return;
      }
      if (reason.includes("biometric_lockout")) {
        setError("biometric locked out — use your password");
      }
    } finally {
      setBiometricBusy(false);
    }
  }

  onMount(() => { void checkBiometricAvailable(); });

  async function handleCreate() {
    if (!password().trim()) return;
    if (password().length < MIN_LENGTH) {
      setError(`password must be at least ${MIN_LENGTH} characters`);
      return;
    }
    if (password() !== confirmPassword()) {
      setError("passwords do not match");
      return;
    }
    const score = strengthScore();
    if (score === null || score < MIN_ZXCVBN_SCORE) {
      setError("password is too weak — try a longer or more varied passphrase");
      return;
    }
    setLoading(true);
    setError("");
    const response = await sendMessage({
      type: "CREATE_VAULT",
      payload: { password: password() },
    });
    const result = response as { ok: boolean; error?: string };
    if (result.ok) {
      // Don't unlock yet — show the recovery words screen first. Mark the
      // confirmation as pending in chrome.storage.local so it survives both
      // popup close (lock-on-close skips while set) and full browser restart
      // (next unlock re-routes to the recovery surface). Cleared when the
      // user types the 3 confirmation words successfully.
      try {
        await chrome.storage.local?.set({ peach_recovery_pending: "1" });
      } catch { /* best-effort */ }
      setShowRecoveryWords(true);
      setLoading(false);
      return;
    }
    setError(getDisplayError(result.error, "failed to create vault"));
    setLoading(false);
  }

  function openRestore(surface: Exclude<RestoreSurface, null>) {
    if (!props.ready || loading()) return;
    setPassword("");
    setConfirmPassword("");
    setError("");
    setRestoreSurface(surface);
  }

  // ── All surfaces routed reactively via Switch/Match ───────────────────
  return (
    <Switch>
      {/* ── Restore tab view ──────────────────────────────────────── */}
      <Match when={restoreSurface() === "restore"}>
        <RestoreTabView
          hasVault={props.hasVault}
          onBack={() => setRestoreSurface(null)}
          onUnlock={async () => {
            setRestoreSurface(null);
            await props.onUnlock();
          }}
        />
      </Match>

      {/* ── Recovery words display after fresh vault creation ────────── */}
      <Match when={showRecoveryWords() && (!props.hasVault || props.forceRecoveryWords)}>
        <RecoveryWordDisplayView
          onDone={props.onUnlock}
        />
      </Match>

      {/* ── Recovery word entry ─────────────────────────────────────── */}
      <Match when={recoverSurface() === "words"}>
        <RecoveryWordEntryView
          onCancel={() => setRecoverSurface(null)}
          onRecoveryComplete={props.onUnlock}
        />
      </Match>

      {/* ── Unlock (hasVault = true) ───────────────────────────────── */}
      <Match when={props.hasVault}>
        <section class="peach-screen peach-theme lock-screen lock-screen--vault-stage" data-motion-phase="enter">
          <header class="peach-screen-header lock-screen-header">
            <div class="peach-wordmark-stack">
              <PeachWordmark class="peach-wordmark-wrap" />
              <Show when={props.isPro}>
                <span class="peach-pro-mini-badge">pro</span>
              </Show>
            </div>
          </header>

          <div class="peach-lock-hero peach-lock-hero--unlock">
            <div class="peach-lock-hero-art" aria-hidden="true">
              <PeachMark class="peach-lock-hero-mark" />
            </div>
            <span class="peach-lock-eyebrow">vault locked</span>
            <h1 class="peach-onboarding-headline peach-lock-headline--unlock">
              unlock
              <br />
              your vault.
            </h1>
          </div>

          <LockRuneCanvas />

          <section class="peach-lock-panel peach-lock-panel--unlock peach-glass">
            <label class="peach-label" for="unlock-password">
              master password
            </label>
            <input
              id="unlock-password"
              class="peach-underline-input peach-unlock-input lock-password-input"
              type="password"
              placeholder="••••••••••••"
              autocomplete="current-password"
              value={password()}
              disabled={!props.ready}
              ref={(el) => { if (props.ready) setTimeout(() => el.focus(), 80); }}
              onInput={(event) => setPassword((event.target as HTMLInputElement).value)}
              onKeyDown={(event) => {
                if (event.key !== "Enter" || !props.ready) return;
                void handleUnlock();
              }}
            />

            <Show when={error()}>
              <p class="peach-hint peach-hint-error">{error()}</p>
            </Show>

            <button
              class="peach-btn peach-btn--accent peach-btn--md peach-lock-submit"
              onClick={() => void handleUnlock()}
              disabled={!props.ready || loading()}
            >
              {loading() ? "unlocking..." : "unlock"}
            </button>

            <Show when={biometricAvailable()}>
              <button
                class="peach-biometric-btn"
                type="button"
                onClick={() => void handleBiometricUnlock()}
                disabled={biometricBusy() || loading()}
                aria-label="Unlock with biometrics"
              >
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M12 11c-1.7 0-3 1.3-3 3v3"/>
                  <path d="M15 17v-3"/>
                  <path d="M9 4.5C9.7 4.2 10.8 4 12 4s2.3.2 3 .5"/>
                  <path d="M5 9c.7-1.6 2-2.9 3.6-3.6"/>
                  <path d="M19 9c-.7-1.6-2-2.9-3.6-3.6"/>
                  <path d="M5 15c0-1.7.3-3.3.8-4.7"/>
                  <path d="M19 15c0-1.7-.3-3.3-.8-4.7"/>
                </svg>
                {biometricBusy() ? "verifying…" : "use biometrics"}
              </button>
            </Show>

            <button
              class="peach-lock-recover-link"
              type="button"
              onClick={() => setRecoverSurface("words")}
            >
              forgot your password?
            </button>
          </section>
        </section>
      </Match>

      {/* ── Onboarding (hasVault = false) ─────────────────────────── */}
      <Match when={true}>
        <section
          class="peach-screen peach-theme lock-screen lock-screen--vault-stage peach-newvault"
          data-motion-phase="enter"
        >
          <header class="peach-screen-header peach-newvault-header">
            <Show when={props.onBackToOnboarding}>
              <button
                class="peach-newvault-back"
                type="button"
                onClick={() => props.onBackToOnboarding?.()}
                aria-label="Back to onboarding"
              >
                <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M7 2L3 5.5L7 9" />
                </svg>
                back
              </button>
            </Show>
            <div class="peach-wordmark-stack">
              <PeachWordmark class="peach-wordmark-wrap" />
              <Show when={props.isPro}>
                <span class="peach-pro-mini-badge">pro</span>
              </Show>
            </div>
          </header>

          <div class="peach-newvault-mark" aria-hidden="true">
            <PeachMark class="peach-newvault-mark-art" />
          </div>

          <div class="peach-newvault-card">
            <h1 class="peach-newvault-headline">{"keep your\nsecrets."}</h1>
            <hr class="peach-newvault-divider" />

            <div class="peach-newvault-field">
              <div class="peach-newvault-label-row">
                <label class="peach-label" for="master-password">
                  master password
                </label>
                <button
                  class="peach-lock-reveal-btn"
                  type="button"
                  onClick={() => setShowPassword((value) => !value)}
                  aria-label={showPassword() ? "Hide password" : "Show password"}
                >
                  <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>
              <input
                id="master-password"
                class="peach-underline-input peach-newvault-input lock-password-input"
                type={showPassword() ? "text" : "password"}
                placeholder="••••••••••••"
                autocomplete="new-password"
                value={password()}
                disabled={!props.ready}
                onInput={(event) => setPassword((event.target as HTMLInputElement).value)}
                onKeyDown={(event) => {
                  if (event.key !== "Enter" || !props.ready) return;
                  void handleCreate();
                }}
              />
              <Show
                when={password().length > 0 && passwordStrength() !== null}
                fallback={
                  <p class="peach-newvault-hint">at least 12 characters</p>
                }
              >
                <div class="peach-password-strength">
                  <div class={`peach-strength-bar peach-strength-bar--${passwordStrength()}`}>
                    <div class="peach-strength-fill"></div>
                  </div>
                  <span class="peach-strength-label">{passwordStrength()}</span>
                </div>
              </Show>
            </div>

            <div class="peach-newvault-field">
              <label class="peach-label" for="confirm-password">
                confirm password
              </label>
              <input
                id="confirm-password"
                class="peach-underline-input peach-newvault-input"
                type={showPassword() ? "text" : "password"}
                placeholder="••••••••••••"
                autocomplete="new-password"
                value={confirmPassword()}
                disabled={!props.ready}
                onInput={(event) => setConfirmPassword((event.target as HTMLInputElement).value)}
                onKeyDown={(event) => {
                  if (event.key === "Enter" && props.ready) void handleCreate();
                }}
              />
            </div>

            <Show when={error()}>
              <p class="peach-hint peach-hint-error">{error()}</p>
            </Show>

            <button
              class="peach-btn peach-btn--accent peach-btn--md peach-lock-submit peach-newvault-submit"
              onClick={() => void handleCreate()}
              disabled={!props.ready || loading() || !canCreate()}
              aria-live="polite"
            >
              <Show
                when={!canCreate() && createBlockerMessage()}
                fallback={loading() ? "creating..." : "create vault"}
              >
                {createBlockerMessage()}
              </Show>
            </button>

            <p class="peach-newvault-warning">
              <span class="peach-newvault-warning-icon" aria-hidden="true">⚠</span>
              <span>Save your 12 recovery words right after you create the vault — they're the only way in if you forget your password.</span>
            </p>
          </div>

          <div class="peach-newvault-footer">
            <p class="peach-hint">Already have a backup?</p>
            <button
              class="peach-lock-restore-link"
              onClick={() => void openRestore("restore")}
              disabled={!props.ready}
            >
              › restore from backup
            </button>
            <Show when={props.onOpenCodexRestore}>
              <button
                class="peach-lock-restore-link"
                onClick={() => props.onOpenCodexRestore?.()}
                disabled={!props.ready}
              >
                › restore from peach codex
              </button>
            </Show>
          </div>
        </section>
      </Match>
    </Switch>
  );
}

// ── Restore tab view ───────────────────────────────────────────────────────

type RestoreTab = "symbols" | "csv" | "phone";

function tabLabel(tab: RestoreTab): string {
  return (
    { symbols: "PeachScript", csv: "CSV", phone: "From Phone" }[tab]
  );
}

function RestoreTabView(props: {
  hasVault: boolean;
  onBack: () => void;
  onUnlock: () => void | Promise<void>;
}) {
  const [activeTab, setActiveTab] = createSignal<RestoreTab>("symbols");
  const [showIntro, setShowIntro] = createSignal(false);
  const [pendingUnlock] = createSignal(false);

  async function handleRestoreSuccess() {
    const seen = await storageGet("peach_shown_restore_intro").catch(() => null);
    if (!seen) {
      setShowIntro(true);
    } else {
      await props.onUnlock();
    }
  }

  async function dismissIntro() {
    await storageSet("peach_shown_restore_intro", "true").catch(() => {});
    setShowIntro(false);
    await props.onUnlock();
  }

  return (
    <section
      class="peach-screen peach-theme lock-screen lock-screen--vault-stage peach-restore-tabview"
      data-motion-phase="enter"
    >
      <RuneBackground opacity={0.05} />

      <header class="peach-screen-header lock-screen-header">
        <PeachWordmark class="peach-wordmark-wrap" />
        <button class="peach-lock-restore-link" onClick={props.onBack}>
          ‹ back
        </button>
      </header>

      <div class="peach-newvault-card peach-restore-tabcard">
        <div class="peach-restore-tabs" role="tablist">
          <For each={["symbols", "csv", "phone"] as RestoreTab[]}>
            {(tab) => (
              <button
                class="peach-restore-tab"
                classList={{ "is-active": activeTab() === tab }}
                onClick={() => setActiveTab(tab)}
                role="tab"
                aria-selected={activeTab() === tab}
              >
                {tabLabel(tab)}
              </button>
            )}
          </For>
        </div>
        <div class="peach-restore-content">
          <Show when={activeTab() === "symbols"}>
            <RestoreSymbols hasVault={props.hasVault} onSuccess={handleRestoreSuccess} />
          </Show>
          <Show when={activeTab() === "csv"}>
            <RestoreCSV hasVault={props.hasVault} onSuccess={handleRestoreSuccess} />
          </Show>
          <Show when={activeTab() === "phone"}>
            <RestoreFromPhone onSuccess={handleRestoreSuccess} />
          </Show>
        </div>
      </div>

      {/* One-time intro popup after first restore */}
      <Show when={showIntro()}>
        <div class="peach-restore-intro-overlay">
          <div class="peach-restore-intro-card">
            <p class="peach-restore-intro-headline">welcome to peach.</p>
            <div class="peach-restore-intro-body">
              <p>Your vault lives only on this device. No server has a copy.</p>
              <p>The inline bubble fills passwords automatically when you visit sites.</p>
              <p>Export your vault from Settings before switching devices.</p>
            </div>
            <button
              class="peach-btn peach-btn--accent peach-btn--md peach-restore-intro-btn"
              onClick={() => void dismissIntro()}
              disabled={pendingUnlock()}
            >
              got it
            </button>
          </div>
        </div>
      </Show>
    </section>
  );
}

// ── PeachScript tab ────────────────────────────────────────────────────────

function RestoreSymbols(props: { hasVault: boolean; onSuccess: () => void | Promise<void> }) {
  const [scriptInput, setScriptInput] = createSignal("");
  const [backupPass, setBackupPass] = createSignal("");
  const [working, setWorking] = createSignal(false);
  const [animating, setAnimating] = createSignal<"chaos" | "snap" | "bloom" | null>(null);
  const [error, setError] = createSignal<string | null>(null);
  let canvasRef: HTMLCanvasElement | undefined;
  let animFrameId = 0;
  let runes: { x: number; y: number; vx: number; vy: number; char: string; size: number; angle: number; va: number }[] = [];

  const scriptValid = createMemo(() => isPeachScript(scriptInput()));

  function stopAnim() {
    cancelAnimationFrame(animFrameId);
    animFrameId = 0;
  }

  function startChaos(canvas: HTMLCanvasElement) {
    const ctx = canvas.getContext("2d")!;
    const W = canvas.width;
    const H = canvas.height;
    const RUNE_CHARS = Array.from({ length: 40 }, (_, i) =>
      String.fromCodePoint(0xe000 + i)
    );
    if (runes.length === 0) {
      runes = Array.from({ length: 60 }, () => ({
        x: Math.random() * W,
        y: Math.random() * H,
        vx: (Math.random() - 0.5) * 3,
        vy: (Math.random() - 0.5) * 3,
        char: RUNE_CHARS[Math.floor(Math.random() * RUNE_CHARS.length)]!,
        size: 14 + Math.random() * 20,
        angle: Math.random() * Math.PI * 2,
        va: (Math.random() - 0.5) * 0.1,
      }));
    }

    function draw() {
      ctx.clearRect(0, 0, W, H);
      for (const r of runes) {
        r.x = (r.x + r.vx + W) % W;
        r.y = (r.y + r.vy + H) % H;
        r.angle += r.va;
        ctx.save();
        ctx.translate(r.x, r.y);
        ctx.rotate(r.angle);
        ctx.font = `${r.size}px PeachScript, monospace`;
        const alpha = 0.5 + 0.5 * Math.sin(Date.now() / 400 + r.x);
        ctx.fillStyle = `rgba(232, 149, 109, ${alpha})`;
        ctx.shadowColor = "rgba(232, 149, 109, 0.7)";
        ctx.shadowBlur = 8;
        ctx.fillText(r.char, 0, 0);
        ctx.restore();
      }
      animFrameId = requestAnimationFrame(draw);
    }
    draw();
  }

  function snapToGrid(canvas: HTMLCanvasElement, onDone: () => void) {
    stopAnim();
    const ctx = canvas.getContext("2d")!;
    const W = canvas.width;
    const H = canvas.height;
    const cols = 8;
    const rows = 6;
    const cellW = W / cols;
    const cellH = H / rows;
    const targets = runes.slice(0, cols * rows).map((_, i) => ({
      x: (i % cols) * cellW + cellW / 2,
      y: Math.floor(i / cols) * cellH + cellH / 2,
    }));
    const start = performance.now();
    const DURATION = 400;

    function drawSnap(now: number) {
      const t = Math.min((now - start) / DURATION, 1);
      const ease = t < 1 ? 1 - Math.pow(1 - t, 3) : 1;
      ctx.clearRect(0, 0, W, H);
      runes.slice(0, targets.length).forEach((r, i) => {
        const tx = targets[i]!.x;
        const ty = targets[i]!.y;
        const cx = r.x + (tx - r.x) * ease;
        const cy = r.y + (ty - r.y) * ease;
        ctx.font = `16px PeachScript, monospace`;
        ctx.fillStyle = `rgba(232, 149, 109, ${0.8 * ease})`;
        ctx.shadowColor = "rgba(232, 149, 109, 0.6)";
        ctx.shadowBlur = 6;
        ctx.fillText(r.char, cx - 8, cy + 8);
      });
      if (t < 1) {
        animFrameId = requestAnimationFrame(drawSnap);
      } else {
        onDone();
      }
    }
    animFrameId = requestAnimationFrame(drawSnap);
  }

  function bloom(canvas: HTMLCanvasElement, onDone: () => void) {
    stopAnim();
    const ctx = canvas.getContext("2d")!;
    const W = canvas.width;
    const H = canvas.height;
    const start = performance.now();
    const DURATION = 900;

    function drawBloom(now: number) {
      const t = Math.min((now - start) / DURATION, 1);
      ctx.clearRect(0, 0, W, H);
      // Runes dissolve
      const runeAlpha = 1 - Math.min(t / 0.4, 1);
      if (runeAlpha > 0) {
        for (const r of runes.slice(0, 48)) {
          ctx.font = `16px PeachScript, monospace`;
          ctx.fillStyle = `rgba(232, 149, 109, ${runeAlpha * 0.8})`;
          ctx.fillText(r.char, r.x - 8, r.y + 8);
        }
      }
      // Peach mark bloom
      const markT = Math.max(0, (t - 0.2) / 0.5);
      const markScale = Math.min(markT * 1.2, 1);
      const markAlpha = markT < 0.5 ? markT * 2 : 2 - markT * 2;
      if (markAlpha > 0) {
        ctx.save();
        ctx.globalAlpha = markAlpha;
        ctx.shadowColor = `rgba(217, 104, 48, ${markAlpha * 0.8})`;
        ctx.shadowBlur = 30;
        ctx.translate(W / 2, H / 2);
        ctx.scale(markScale, markScale);
        ctx.drawImage(peachMarkImg, -32, -32, 64, 64);
        ctx.restore();
      }
      if (t < 1) {
        animFrameId = requestAnimationFrame(drawBloom);
      } else {
        onDone();
      }
    }
    animFrameId = requestAnimationFrame(drawBloom);
  }

  onCleanup(() => stopAnim());

  async function handleRestore() {
    if (!scriptValid() || !backupPass().trim() || working()) return;
    setError(null);
    setWorking(true);
    setAnimating("chaos");

    const canvas = canvasRef;
    if (canvas) startChaos(canvas);

    try {
      const bytes = decodePeachScript(normalisePeachScript(scriptInput()));
      const payload = await parsePayload(bytes, backupPass());

      if (!props.hasVault) {
        const cr = await sendMessage({ type: "CREATE_VAULT", payload: { password: backupPass() } });
        if (!(cr as { ok: boolean }).ok) throw new Error("CREATE_VAULT_FAILED");
      }

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

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

      setAnimating("snap");
      stopAnim();
      if (canvas) {
        snapToGrid(canvas, () => {
          setAnimating("bloom");
          bloom(canvas, async () => {
            setAnimating(null);
            await props.onSuccess();
          });
        });
      } else {
        await props.onSuccess();
      }
    } catch (err) {
      stopAnim();
      setAnimating(null);
      const code = err instanceof Error ? err.message : String(err);
      setError(
        code === "INVALID_PASSPHRASE" || code === "INVALID_EXPORT_PASSWORD"
          ? "That passphrase didn't work."
          : code === "CREATE_VAULT_FAILED"
            ? "Couldn't create a new local vault."
            : "Could not read this backup.",
      );
    } finally {
      setWorking(false);
    }
  }

  return (
    <div class="peach-rt-symbols">
      <Show when={animating() !== null}>
        <canvas
          ref={(el) => { canvasRef = el; }}
          class="peach-rt-anim-canvas"
          width={280}
          height={200}
        />
      </Show>
      <Show when={animating() === null}>
        <textarea
          class="peach-restore-symbols-textarea"
          placeholder="paste peachscript…"
          rows={3}
          value={scriptInput()}
          onInput={(e) => setScriptInput((e.target as HTMLTextAreaElement).value)}
        />
        <div class="peach-rt-divider">— or —</div>
        <label class="peach-btn peach-btn--ghost peach-btn--sm peach-rt-file-label">
          open .peach file
          <input
            type="file"
            accept=".peach,text/plain"
            style="display:none"
            onChange={async (e) => {
              const file = (e.currentTarget as HTMLInputElement).files?.[0];
              if (!file) return;
              try {
                setScriptInput(await file.text());
              } catch {
                setError("Couldn't read file.");
              } finally {
                (e.currentTarget as HTMLInputElement).value = "";
              }
            }}
          />
        </label>
        <input
          class="peach-restore-symbols-pass"
          type="password"
          placeholder="backup password"
          value={backupPass()}
          onInput={(e) => setBackupPass((e.target as HTMLInputElement).value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" && scriptValid() && backupPass().trim() && !working()) {
              e.preventDefault();
              void handleRestore();
            }
          }}
        />
        <button
          class="peach-btn peach-btn--accent peach-btn--md peach-rt-submit"
          onClick={() => void handleRestore()}
          disabled={!scriptValid() || !backupPass().trim() || working()}
        >
          restore vault →
        </button>
        <Show when={error()}>
          <p class="peach-rt-error">{error()}</p>
        </Show>
      </Show>
    </div>
  );
}

// ── CSV tab ────────────────────────────────────────────────────────────────

function RestoreCSV(props: { hasVault: boolean; onSuccess: () => void | Promise<void> }) {
  const [importing, setImporting] = createSignal(false);
  const [error, setError] = createSignal<string | null>(null);

  async function handleFile(e: Event) {
    const input = e.currentTarget as HTMLInputElement;
    const file = input.files?.[0];
    input.value = "";
    if (!file) return;
    setImporting(true);
    setError(null);
    try {
      const text = await file.text();
      const parsed = await parseImportSource(text);
      if (parsed.entries.length === 0) throw new Error("NO_ENTRIES");

      if (props.hasVault === false) {
        // No vault yet — this path shouldn't normally occur for CSV (no backup password
        // means no way to create a locked vault). Create an unlocked placeholder vault.
        // The user can set a master password from settings.
        const cr = await sendMessage({ type: "CREATE_VAULT", payload: { password: "" } });
        if (!(cr as { ok: boolean }).ok) throw new Error("CREATE_VAULT_FAILED");
      }

      const res = await sendMessage({ type: "BATCH_ADD_ENTRIES", payload: { entries: parsed.entries } });
      if (!(res as { ok: boolean }).ok) throw new Error("IMPORT_FAILED");
      if (parsed.licenseKey) {
        await sendMessage({ type: "ACTIVATE_LICENSE", payload: { key: parsed.licenseKey } }).catch(() => {});
      }
      await props.onSuccess();
    } catch (err) {
      const code = err instanceof Error ? err.message : String(err);
      setError(
        code === "NO_ENTRIES" ? "No entries found in this file." :
        code === "CREATE_VAULT_FAILED" ? "Couldn't create a new local vault." :
        "Import failed. Check the file format and try again."
      );
    } finally {
      setImporting(false);
    }
  }

  return (
    <div class="peach-rt-csv">
      <label class="peach-btn peach-btn--accent peach-btn--md peach-rt-csv-btn" classList={{ "is-busy": importing() }}>
        {importing() ? "importing…" : "open csv file"}
        <input
          type="file"
          accept=".csv,.json,.peach,application/x-peach"
          style="display:none"
          onChange={handleFile}
          disabled={importing()}
        />
      </label>
      <p class="peach-rt-csv-sources">
        Imports from Bitwarden, 1Password, Proton Pass,<br />
        Chrome, Safari, and Edge.
      </p>
      <p class="peach-rt-csv-warning">PLAIN-TEXT — DELETE THE FILE AFTER IMPORT</p>
      <Show when={error()}>
        <p class="peach-rt-error">{error()}</p>
      </Show>
    </div>
  );
}

// ── From Phone tab ─────────────────────────────────────────────────────────

type PhoneState = "waiting" | "connected" | "trust" | "error";

function RestoreFromPhone(props: { onSuccess: () => void | Promise<void> }) {
  const [state, setState] = createSignal<PhoneState>("waiting");
  const [code, setCode] = createSignal<string | null>(null);
  const [qrUrl, setQrUrl] = createSignal<string | null>(null);
  const [expired, setExpired] = createSignal(false);
  const [deviceName, setDeviceName] = createSignal<string | null>(null);
  const [accepting, setAccepting] = createSignal(false);
  const [serverError, setServerError] = createSignal<string | null>(null);
  let expireTimer: ReturnType<typeof setTimeout> | null = null;

  function clearExpire() {
    if (expireTimer !== null) { clearTimeout(expireTimer); expireTimer = null; }
  }

  async function startPairing() {
    setExpired(false);
    setCode(null);
    setQrUrl(null);
    setServerError(null);
    clearExpire();
    const res = await sendMessage({ type: "START_PAIRING_SERVER" });
    const r = res as { ok: boolean; error?: string; data?: { token: string; expiresAt: number } };
    if (!r.ok || !r.data) {
      setServerError(r.error === "pro_required" ? "Pro required." : "Couldn't start pairing server.");
      return;
    }
    const token = r.data.token;
    const formatted = token.length === 6 ? `${token.slice(0, 3)} ${token.slice(3)}` : token;
    setCode(formatted);
    const qrData = `peach://handoff?token=${token}`;
    try {
      const QRCode = (await import("qrcode")).default;
      const url = await QRCode.toDataURL(qrData, { errorCorrectionLevel: "M", margin: 2, scale: 4, color: { dark: "#000000", light: "#ffffff" } });
      setQrUrl(url);
    } catch {
      // QR optional — code is the primary affordance
    }
    const remaining = Math.max(0, r.data.expiresAt - Date.now());
    expireTimer = setTimeout(() => {
      setCode(null);
      setQrUrl(null);
      setExpired(true);
    }, remaining);
  }

  function handleRuntimeMsg(msg: unknown) {
    const m = msg as { type?: string; payload?: { deviceName?: string } };
    if (m?.type === "PAIRING_COMPLETED") {
      clearExpire();
      setDeviceName(m.payload?.deviceName ?? "your phone");
      setState("trust");
    }
  }

  onMount(() => {
    void startPairing();
    // chrome global is absent in the Capacitor WebView — guard at runtime.
    if (typeof chrome !== "undefined" && chrome.runtime?.onMessage) {
      chrome.runtime.onMessage.addListener(handleRuntimeMsg);
    }
  });

  onCleanup(() => {
    clearExpire();
    if (typeof chrome !== "undefined" && chrome.runtime?.onMessage) {
      chrome.runtime.onMessage.removeListener(handleRuntimeMsg);
    }
    sendMessage({ type: "STOP_PAIRING_SERVER" }).catch(() => {});
  });

  async function handleAccept(trust: boolean) {
    setAccepting(true);
    if (trust) {
      await sendMessage({ type: "ACCEPT_PAIRING" }).catch(() => {});
    }
    await props.onSuccess();
  }

  return (
    <div class="peach-rt-phone">
      <Show when={state() === "waiting"}>
        <Show when={!expired()}>
          <Show when={code() !== null} fallback={<p class="peach-rt-phone-hint">starting…</p>}>
            <p class="peach-rt-phone-code">{code()}</p>
            <Show when={qrUrl() !== null}>
              <img class="peach-rt-phone-qr" src={qrUrl()!} alt="pairing QR code" />
            </Show>
            <p class="peach-rt-phone-hint">
              Open Peach on your phone and tap<br />
              Settings → Send to desktop.<br />
              Same WiFi required.
            </p>
          </Show>
          <Show when={serverError()}>
            <p class="peach-rt-error">{serverError()}</p>
          </Show>
        </Show>
        <Show when={expired()}>
          <p class="peach-rt-phone-hint">Code expired.</p>
          <button class="peach-btn peach-btn--ghost peach-btn--sm" onClick={() => void startPairing()}>
            Generate new code
          </button>
        </Show>
      </Show>

      <Show when={state() === "connected"}>
        <p class="peach-rt-phone-hint">
          Connected to {deviceName() ?? "your phone"}.<br />
          Receiving vault…
        </p>
      </Show>

      <Show when={state() === "trust"}>
        <p class="peach-rt-phone-hint" style="margin-bottom:10px">
          Vault received from {deviceName() ?? "your phone"}.<br />
          Trust this network for sync?
        </p>
        <button
          class="peach-btn peach-btn--accent peach-btn--md peach-rt-submit"
          onClick={() => void handleAccept(true)}
          disabled={accepting()}
        >
          Yes, trust this network
        </button>
        <button
          class="peach-btn peach-btn--ghost peach-btn--sm"
          style="margin-top:6px"
          onClick={() => void handleAccept(false)}
          disabled={accepting()}
        >
          Not now
        </button>
      </Show>

      <Show when={state() === "error"}>
        <p class="peach-rt-phone-hint">
          Could not connect. Check that both devices<br />
          are on the same WiFi network.
        </p>
        <button class="peach-btn peach-btn--accent peach-btn--md peach-rt-submit" onClick={() => { setState("waiting"); void startPairing(); }}>
          Try again
        </button>
      </Show>
    </div>
  );
}

// ── Helpers ────────────────────────────────────────────────────────────────

function getDisplayError(error: string | undefined, fallback: string): string {
  if (!error) return fallback;
  if (
    error === "SERVICE_WORKER_UNAVAILABLE" ||
    error.includes("Receiving end does not exist") ||
    error.includes("message port closed")
  ) {
    return "background service unavailable";
  }
  return error;
}