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";

export 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;
const MIN_ZXCVBN_SCORE = 2;

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("");

  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() {
    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) {
      if (err instanceof Error && err.message === "sas_rejected") return;
      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("");
      setStrengthScore(null);
    }
  }

  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. Bring both devices close together.</p>
            <div class="peach-adopt-actions">
              <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>
            </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>
  );
}