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

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

export interface AdoptVaultViewProps {
  onCancel(): void;
  onDone(): void | Promise<void>;
  startAdoption(args: {
    password: string;
    /** The pairing code shown by the device that already holds the vault. */
    code: string;
    confirmSAS(sas: string): Promise<boolean>;
    createVault(rootKeyHex: string): Promise<{ vaultId: string }>;
  }): Promise<void>;
}

const MIN_LENGTH = 12;
const MIN_ZXCVBN_SCORE = 2;

/** Turn a dial/adoption failure into something a person can act on. */
function adoptionErrorCopy(err: unknown): string {
  const message = err instanceof Error ? err.message : String(err);
  switch (message) {
    case "invalid_code":
      return "That code wasn't accepted — it may have expired. Get a fresh one from your other device.";
    case "no_host_found":
      return "Couldn't reach your other device. Check both are on the same Wi-Fi and its pairing screen is still open.";
    case "handshake_failed":
      return "The secure connection failed. Try again with a fresh code.";
    case "adoption_rejected":
      return "Your other device declined the request.";
    default:
      return message;
  }
}

let zxcvbnLoader: ((password: string) => { score: number }) | null = null;
async function getZxcvbn() {
  if (zxcvbnLoader) return zxcvbnLoader;
  const [{ zxcvbn, zxcvbnOptions }, common, en] = await Promise.all([
    import("@zxcvbn-ts/core"),
    import("@zxcvbn-ts/language-common"),
    import("@zxcvbn-ts/language-en"),
  ]);
  zxcvbnOptions.setOptions({
    translations: en.translations,
    graphs: common.adjacencyGraphs,
    dictionary: { ...common.dictionary, ...en.dictionary },
  });
  zxcvbnLoader = (password: string) => zxcvbn(password);
  return zxcvbnLoader;
}

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

  const codeReady = createMemo(() => parsePairingCode(code()) !== null);

  createMemo(() => {
    const value = password();
    if (!value) {
      setStrengthScore(null);
      return;
    }
    getZxcvbn().then((zxcvbn) => {
      if (password() === value) setStrengthScore(zxcvbn(value).score);
    }).catch(() => {
      if (password() === value) setStrengthScore(value.length >= 16 ? 2 : 1);
    });
  });

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

  const createBlocker = 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 - use a longer passphrase";
    return null;
  });

  async function beginPairing() {
    if (!codeReady() || connecting()) return;
    setPhase("pair");
    setError("");
    setConnecting(true);
    try {
      await props.startAdoption({
        password: password(),
        code: code(),
        confirmSAS: (sasCode) => new Promise<boolean>((resolve) => {
          setSas(sasCode);
          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) {
      if (err instanceof Error && err.message === "sas_rejected") return;
      setError(adoptionErrorCopy(err));
      setPhase("error");
    } finally {
      setConnecting(false);
    }
  }

  function confirmSas(ok: boolean) {
    const resolve = sasResolve();
    setSasResolve(null);
    resolve?.(ok);
    if (!ok) {
      setPhase("password");
      setPassword("");
      setConfirmPassword("");
      setStrengthScore(null);
      // The code is single-use on the other device's side too — a rejected SAS
      // means starting over with a fresh one, not retrying this one.
      setCode("");
    }
  }

  return (
    <section class="peach-screen peach-theme peach-adopt-vault">
      <RuneBackground opacity={0.07} />
      <div class="peach-adopt-card">
        <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 peach-adopt-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 peach-adopt-input"
              type="password"
              autocomplete="new-password"
              value={confirmPassword()}
              onInput={(event) => setConfirmPassword((event.target as HTMLInputElement).value)}
            />
            <Show when={createBlocker()}>
              <p class="peach-hint">{createBlocker()}</p>
            </Show>
            <div class="peach-adopt-actions">
              <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>
            </div>
          </Match>

          <Match when={phase() === "pair"}>
            <div class="peach-adopt-birds" aria-hidden="true">
              <span />
              <span />
            </div>
            <h1>Pair with your other device.</h1>
            <p>
              Open Peach on the device that has your vault and tap “Pair a device”.
              Type the code it shows. Both devices need to be on the same Wi-Fi.
            </p>
            <label class="peach-label" for="adopt-pair-code">pairing code</label>
            <input
              id="adopt-pair-code"
              class="peach-underline-input peach-adopt-input peach-code-input"
              type="text"
              autocapitalize="characters"
              autocomplete="one-time-code"
              spellcheck={false}
              maxlength={32}
              placeholder="A74H-48J3-KI32-OEP4"
              aria-label="Pairing code"
              disabled={connecting()}
              value={code()}
              onInput={(event) =>
                setCode(formatPairingCode((event.target as HTMLInputElement).value).slice(0, 32))
              }
              onKeyDown={(event) => { if (event.key === "Enter") void beginPairing(); }}
            />
            <Show when={connecting()}>
              <p class="peach-hint">connecting to your other device...</p>
            </Show>
            <div class="peach-adopt-actions">
              <button
                class="peach-btn peach-btn--accent peach-btn--md"
                disabled={!codeReady() || connecting()}
                onClick={() => void beginPairing()}
              >
                Pair a device
              </button>
              <button class="peach-btn peach-btn--ghost peach-btn--md" onClick={props.onCancel}>Cancel</button>
            </div>
          </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>
            <div class="peach-adopt-actions">
              <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>
            </div>
          </Match>

          <Match when={phase() === "success"}>
            <div class="peach-adopt-birds" aria-hidden="true">
              <span />
              <span />
            </div>
            <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>Could not join your vault.</h1>
            <p class="peach-hint peach-hint-error">{error()}</p>
            <div class="peach-adopt-actions">
              <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>
            </div>
          </Match>
        </Switch>
      </div>
    </section>
  );
}