// DRAFT DESTINATION: src/popup/views/AdoptVaultView.tsx plus small hunks in
// src/popup/views/Onboarding.tsx, src/popup/views/Lock.tsx, and src/popup/App.tsx.
// Phase 5: "I already have Peach" receiver path.

import { Match, Show, Switch, createMemo, createSignal } from "solid-js";
import { sendMessage } from "../App";
import { RuneBackground } from "../components/RuneBackground";

type AdoptPhase = "password" | "pair" | "sas" | "success" | "error";

interface AdoptVaultViewProps {
  onCancel(): void;
  onDone(): void | Promise<void>;
  startAdoption(args: {
    password: string;
    confirmSAS(sas: string): Promise<boolean>;
    createVault(rootKeyHex: string): Promise<{ vaultId: string }>;
  }): Promise<void>;
}

const MIN_LENGTH = 12;

export function AdoptVaultView(props: AdoptVaultViewProps) {
  const [phase, setPhase] = createSignal<AdoptPhase>("password");
  const [password, setPassword] = createSignal("");
  const [confirmPassword, setConfirmPassword] = createSignal("");
  const [sas, setSas] = createSignal("");
  const [sasResolve, setSasResolve] = createSignal<((ok: boolean) => void) | null>(null);
  const [error, setError] = createSignal("");

  const canContinue = createMemo(() =>
    password().length >= MIN_LENGTH &&
    confirmPassword().length >= MIN_LENGTH &&
    password() === confirmPassword()
  );

  function blocker(): string | null {
    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";
    return null;
  }

  async function beginPairing() {
    setPhase("pair");
    setError("");
    try {
      await props.startAdoption({
        password: password(),
        confirmSAS: (code) => new Promise<boolean>((resolve) => {
          setSas(code);
          setSasResolve(() => resolve);
          setPhase("sas");
        }),
        createVault: async (rootKeyHex) => {
          const res = await sendMessage({
            type: "CREATE_VAULT_FROM_ROOT_KEY",
            payload: { password: password(), rootKeyHex },
          }) as { ok: boolean; vaultId?: string; error?: string };
          if (!res.ok || !res.vaultId) throw new Error(res.error ?? "adoption_create_failed");
          return { vaultId: res.vaultId };
        },
      });
      setPhase("success");
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
      setPhase("error");
    }
  }

  function confirmSas(ok: boolean) {
    const resolve = sasResolve();
    setSasResolve(null);
    resolve?.(ok);
    if (!ok) {
      setPhase("password");
      setPassword("");
      setConfirmPassword("");
    }
  }

  return (
    <section class="peach-screen peach-theme peach-adopt-vault">
      <RuneBackground opacity={0.07} />
      <Switch>
        <Match when={phase() === "password"}>
          <h1>Set a password for this device.</h1>
          <p>This protects your vault on this device only. It can be different from your other devices.</p>
          <label class="peach-label" for="adopt-password">password</label>
          <input
            id="adopt-password"
            class="peach-underline-input"
            type="password"
            autocomplete="new-password"
            value={password()}
            onInput={(event) => setPassword((event.target as HTMLInputElement).value)}
          />
          <label class="peach-label" for="adopt-confirm-password">confirm password</label>
          <input
            id="adopt-confirm-password"
            class="peach-underline-input"
            type="password"
            autocomplete="new-password"
            value={confirmPassword()}
            onInput={(event) => setConfirmPassword((event.target as HTMLInputElement).value)}
          />
          <Show when={blocker()}>
            <p class="peach-hint">{blocker()}</p>
          </Show>
          <button class="peach-btn peach-btn--accent peach-btn--md" disabled={!canContinue()} onClick={() => setPhase("pair")}>
            Continue ->
          </button>
          <button class="peach-btn peach-btn--ghost peach-btn--md" onClick={props.onCancel}>Cancel</button>
        </Match>

        <Match when={phase() === "pair"}>
          <div class="peach-adopt-birds" aria-hidden="true" />
          <h1>Pair with your other device.</h1>
          <p>Open Peach on the device that has your vault. Bring both devices close together.</p>
          <button class="peach-btn peach-btn--accent peach-btn--md" onClick={() => void beginPairing()}>
            Pair a device ->
          </button>
          <button class="peach-btn peach-btn--ghost peach-btn--md" onClick={props.onCancel}>Cancel</button>
        </Match>

        <Match when={phase() === "sas"}>
          <h1>Confirm this code matches on your other device:</h1>
          <div class="peach-adopt-sas">{sas().replace(/(\d)(?=\d)/g, "$1 ")}</div>
          <button class="peach-btn peach-btn--accent peach-btn--md" onClick={() => confirmSas(true)}>Confirm</button>
          <button class="peach-btn peach-btn--ghost peach-btn--md" onClick={() => confirmSas(false)}>Cancel</button>
        </Match>

        <Match when={phase() === "success"}>
          <div class="peach-adopt-birds" aria-hidden="true" />
          <h1>Joined your vault.</h1>
          <p>Your passwords will sync shortly.</p>
          <button class="peach-btn peach-btn--accent peach-btn--md" onClick={() => void props.onDone()}>
            Open Peach ->
          </button>
        </Match>

        <Match when={phase() === "error"}>
          <h1>Couldn't join your vault.</h1>
          <p class="peach-hint peach-hint-error">{error()}</p>
          <button class="peach-btn peach-btn--accent peach-btn--md" onClick={() => setPhase("password")}>Try again</button>
          <button class="peach-btn peach-btn--ghost peach-btn--md" onClick={props.onCancel}>Cancel</button>
        </Match>
      </Switch>
    </section>
  );
}

// DRAFT HUNK: src/popup/views/Onboarding.tsx
// - Extend props with `onAdopt?: () => void | Promise<void>`.
// - On the final card, render a third action button:
//     <button class="peach-onboarding-adopt" onClick={props.onAdopt}>
//       I already have Peach ->
//     </button>
//   Keep Create vault and Restore from backup visible in LockView as they are
//   today; this is an additional path, not a replacement.

// DRAFT HUNK: src/popup/App.tsx
// - Add `| "adopting"` to `View`.
// - Lazy-load `AdoptVaultView`.
// - Pass `onAdopt={() => setView("adopting")}` into Onboarding.
// - Render AdoptVaultView while hasVault() is false.
// - On success, refresh HAS_VAULT, mark onboarding complete, call handleUnlock.