import {
  Match,
  Show,
  Switch,
  createMemo,
  createSignal,
  onCleanup,
  onMount,
} from "solid-js";
import { sendMessage } from "../App";
import { RuneBackground } from "../components/RuneBackground";
import { formatPairingCode, parsePairingCode } from "../../shared/pairing-code";
import { parsePairingInvitation } from "../../shared/pairing-invitation";
import type { PairingQrScannerHandle } from "../pairing-qr-scanner";

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

export interface AdoptVaultViewProps {
  onCancel(): void;
  onDone(): void | Promise<void>;
  startAdoption(args: {
    password: string;
    connection:
      | { mode: "relay"; invitation: string }
      | { mode: "lan"; 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 [invitation, setInvitation] = createSignal("");
  const [lanOnly, setLanOnly] = createSignal(false);
  const [manualEntry, setManualEntry] = createSignal(false);
  const [scanning, setScanning] = createSignal(false);
  const [scanError, setScanError] = createSignal("");
  const [connecting, setConnecting] = createSignal(false);
  let videoEl: HTMLVideoElement | undefined;
  let qrScanner: PairingQrScannerHandle | null = null;

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

  onCleanup(() => qrScanner?.stop());
  onMount(() => {
    void sendMessage({ type: "GET_RELAY_SETTINGS" })
      .then((response) => {
        const result = response as {
          ok: boolean;
          data?: { lanOnly?: boolean };
        };
        if (result.ok) setLanOnly(result.data?.lanOnly === true);
      })
      .catch(() => {
        // Fresh installs default to relay mode if the background is still
        // starting; the save path will reconcile before pairing completes.
      });
  });

  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() {
    const connection = lanOnly()
      ? (codeReady() ? { mode: "lan" as const, code: code() } : null)
      : (invitationReady()
        ? { mode: "relay" as const, invitation: invitation() }
        : null);
    if (!connection || connecting()) return;
    stopScanning();
    setPhase("pair");
    setError("");
    setConnecting(true);
    try {
      await props.startAdoption({
        password: password(),
        connection,
        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("");
      setInvitation("");
    }
  }

  async function startScanning() {
    if (scanning()) return;
    setScanError("");
    setScanning(true);
    await Promise.resolve();
    if (!videoEl) {
      setScanning(false);
      setScanError("Camera preview could not start. Enter the invitation instead.");
      return;
    }
    try {
      const { startPairingQrScanner } = await import("../pairing-qr-scanner");
      qrScanner = await startPairingQrScanner(
        videoEl,
        (value) => {
          if (!parsePairingInvitation(value)) return;
          setInvitation(value);
          stopScanning();
          void beginPairing();
        },
        () => setScanError("Couldn't read that QR code. Hold it steady or enter the invitation."),
      );
    } catch {
      stopScanning();
      setScanError("Camera access is unavailable. Enter the invitation instead.");
      setManualEntry(true);
    }
  }

  function stopScanning() {
    qrScanner?.stop();
    qrScanner = null;
    setScanning(false);
  }

  async function chooseLanOnly(next: boolean) {
    stopScanning();
    setLanOnly(next);
    setManualEntry(false);
    const response = (await sendMessage({
      type: "SET_RELAY_SETTINGS",
      payload: { lanOnly: next },
    })) as { ok: boolean; error?: string };
    if (!response.ok) setScanError(response.error ?? "Could not update sync mode.");
  }

  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>
            <Show
              when={!lanOnly()}
              fallback={
                <>
                  <p>
                    Local network only. Both devices must be on the same Wi-Fi;
                    this will not work over VPN or from different locations.
                  </p>
                  <label class="peach-label" for="adopt-pair-code">local 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(); }}
                  />
                  <button class="peach-btn peach-btn--ghost peach-btn--sm" onClick={() => void chooseLanOnly(false)}>
                    Use secure relay instead
                  </button>
                </>
              }
            >
              <p>Connecting via secure relay — works anywhere.</p>
              <Show when={scanning()}>
                <video
                  ref={videoEl}
                  class="peach-adopt-qr-video"
                  autoplay
                  muted
                  playsinline
                  aria-label="Pairing QR camera preview"
                />
              </Show>
              <Show when={!scanning()}>
                <button class="peach-btn peach-btn--accent peach-btn--md" onClick={() => void startScanning()}>
                  Scan pairing QR
                </button>
              </Show>
              <button
                class="peach-btn peach-btn--ghost peach-btn--sm"
                onClick={() => { stopScanning(); setManualEntry(!manualEntry()); }}
              >
                {manualEntry() ? "Hide manual entry" : "Enter invitation manually"}
              </button>
              <Show when={manualEntry()}>
                <label class="peach-label" for="adopt-relay-invitation">pairing invitation</label>
                <textarea
                  id="adopt-relay-invitation"
                  class="peach-underline-input peach-adopt-input"
                  rows={3}
                  autocomplete="off"
                  spellcheck={false}
                  aria-label="Pairing invitation"
                  disabled={connecting()}
                  value={invitation()}
                  onInput={(event) =>
                    setInvitation((event.target as HTMLTextAreaElement).value.trim())
                  }
                />
              </Show>
              <button class="peach-btn peach-btn--ghost peach-btn--sm" onClick={() => void chooseLanOnly(true)}>
                Switch to local network only
              </button>
            </Show>
            <Show when={scanError()}>
              <p class="peach-hint peach-hint-error">{scanError()}</p>
            </Show>
            <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={(lanOnly() ? !codeReady() : !invitationReady()) || connecting()}
                onClick={() => void beginPairing()}
              >
                Connect securely
              </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>
  );
}