import {
  Match,
  Show,
  Switch,
  createEffect,
  createMemo,
  createSignal,
  onCleanup,
} from "solid-js";
import { sendMessage } from "../App";
import { DesktopBird, MobileBird } from "../components/PairingBirds";
import { RuneBackground } from "../components/RuneBackground";
import { PairingQrCode } from "../components/PairingQrCode";
import { PairingProRequired } from "../components/PairingProRequired";
import { RELAY_DISCLOSURE } from "../components/SyncModeSelector";

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

export interface AdoptVaultViewProps {
  onCancel(): void;
  onDone(): void | Promise<void>;
}

/**
 * PB-26-607: never echo a raw background error string into the UI.
 * ADOPT_PRO_REQUIRED survives because the error phase branches on it to show
 * the Pro upsell instead of the generic failure copy.
 */
function describeAdoptionError(error: string | undefined, fallback: string): string {
  return error === "ADOPT_PRO_REQUIRED" ? error : fallback;
}

const MIN_LENGTH = 12;
const MIN_ZXCVBN_SCORE = 2;
const PAIRING_CELEBRATION_MS = 5_000;

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 [receiverInvitation, setReceiverInvitation] = createSignal("");
  const [receiverSas, setReceiverSas] = createSignal("");
  const [receiverError, setReceiverError] = createSignal("");
  const [receiverComplete, setReceiverComplete] = createSignal(false);
  let completionTimer: number | undefined;

  onCleanup(() => {
    if (completionTimer !== undefined) window.clearTimeout(completionTimer);
    // Tell the background to release the relay room if we still hold it.
    void sendMessage({ type: "CANCEL_ADOPTION_SOURCE" }).catch(() => undefined);
  });

  // When the user enters the pair phase, the empty extension becomes the
  // source of a "pairing request" QR. The populated phone scans it and the
  // phone is responsible for sending the vault back over the Noise channel.
  // The password is shipped to the background once so the adopted root key
  // can be wrapped at rest without asking the user to retype it later.
  createEffect(() => {
    if (phase() !== "pair") return;
    if (receiverInvitation() || receiverError()) return;
    void (async () => {
      const response = (await sendMessage({
        type: "START_ADOPTION_RECEIVER",
        payload: { password: password() },
      })) as { ok: boolean; data?: { invitation?: string }; error?: string };
      if (response.ok && response.data?.invitation) {
        setReceiverInvitation(response.data.invitation);
      } else {
        setReceiverError(
          describeAdoptionError(
            response.error,
            "could not start joining this vault. please try again.",
          ),
        );
      }
    })();
  });

  const [receiverSasId, setReceiverSasId] = createSignal("");
  const [receiverSasDecision, setReceiverSasDecision] = createSignal(false);

  function confirmReceiverSas(): void {
    if (!receiverSas() || !receiverSasId()) return;
    void sendMessage({
      type: "RECEIVER_SAS_DECISION",
      payload: { id: receiverSasId(), sas: receiverSas(), ok: true },
    });
    setReceiverSasDecision(true);
  }

  // The receiver must explicitly confirm the displayed SAS before adoption.

  if (typeof chrome !== "undefined" && chrome.runtime?.onMessage) {
    const handler = (msg: { type?: string; payload?: unknown }) => {
      if (msg?.type === "ADOPTION_SOURCE_SAS") {
        const p = msg.payload as {
          id?: string;
          sas?: string;
          displayOnly?: boolean;
        } | undefined;
        if (p?.displayOnly === false && typeof p.sas === "string" && typeof (p as { id?: unknown }).id === "string") {
          setReceiverSas(p.sas);
          setReceiverSasId((p as { id: string }).id);
          setReceiverSasDecision(false);
        }
      } else if (msg?.type === "ADOPTION_SOURCE_RESULT") {
        const p = msg.payload as {
          status?: "complete" | "error";
          error?: string;
        } | undefined;
        if (p?.status === "complete") {
          if (receiverComplete()) return;
          setReceiverComplete(true);
          completionTimer = window.setTimeout(() => {
            completionTimer = undefined;
            void props.onDone();
          }, PAIRING_CELEBRATION_MS);
        } else if (p?.status === "error") {
          setReceiverError(
            describeAdoptionError(
              p.error,
              "the other device could not finish the transfer. please try again.",
            ),
          );
          setPhase("error");
        }
      }
    };
    chrome.runtime.onMessage.addListener(handler);
    onCleanup(() => chrome.runtime.onMessage.removeListener(handler));
  }

  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;
  });

  function tryAgain(): void {
    setReceiverError("");
    setReceiverInvitation("");
    setReceiverSas("");
    setPhase("pair");
  }

  return (
    <section
      class="peach-screen peach-theme peach-adopt-vault"
      classList={{ "peach-adopt-vault--pair": phase() === "pair" }}
    >
      <RuneBackground opacity={0.07} />
      <div
        class="peach-adopt-card"
        classList={{ "peach-adopt-card--pair": phase() === "pair" }}
      >
        <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)}
              onKeyDown={(event) => {
                if (event.key === "Enter" && canContinue()) setPhase("pair");
              }}
            />
            <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)}
              onKeyDown={(event) => {
                if (event.key === "Enter" && canContinue()) setPhase("pair");
              }}
            />
            <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-pairing"
              classList={{
                "has-sas": Boolean(receiverSas()),
                "is-complete": receiverComplete(),
              }}
            >
              <div
                class={`peach-pair-stage peach-adopt-bird-stage ${
                  receiverComplete()
                    ? "act-paired"
                    : receiverSas()
                      ? "act-handshake"
                      : "act-listening"
                }`}
                aria-hidden="true"
              >
                <div class="peach-pair-bird-slot peach-pair-bird-slot-desktop">
                  <DesktopBird pose={receiverComplete() ? "happy" : "chirping"} />
                </div>
                <Show when={receiverComplete()}>
                  <span class="peach-adopt-connection" />
                </Show>
                <div class="peach-pair-bird-slot peach-pair-bird-slot-mobile">
                  <MobileBird pose={receiverComplete() ? "happy" : "attentive"} />
                </div>
              </div>

              <h1>{receiverComplete() ? "Paired" : "Pair a device"}</h1>
              <p class="peach-adopt-pair-lede" aria-live="polite">
                {receiverComplete()
                  ? "Your devices are connected. Getting your vault ready…"
                  : receiverSas()
                    ? "Make sure this code matches the one on your phone."
                    : "Scan this QR in Peach on the device that already has your vault."}
              </p>

              <Show
                when={!receiverComplete()}
                fallback={
                  <div class="peach-adopt-paired-status" role="status">
                    <span />
                    Secure connection established
                  </div>
                }
              >
                <Show
                  when={receiverSas()}
                  fallback={
                    <div class="peach-adopt-qr-wrap" aria-live="polite">
                      <Show
                        when={receiverInvitation()}
                        fallback={
                          <Show
                            when={receiverError()}
                            fallback={<p class="peach-adopt-pair-status">Preparing your secure pairing code…</p>}
                          >
                            <p class="peach-hint peach-hint-error">{receiverError()}</p>
                          </Show>
                        }
                      >
                        <PairingQrCode value={receiverInvitation()} size={144} />
                      </Show>
                    </div>
                  }
                >
                  <div class="peach-adopt-confirmation">
                    <p class="peach-adopt-confirmation-label">8-DIGIT SAFETY CODE</p>
                    <div class="peach-adoption-sas" aria-label="Pairing confirmation code">
                      <strong>{receiverSas()}</strong>
                    </div>
                    <p class="peach-adopt-confirmation-help">
                      Confirm this 8-digit code matches the phone you intend to
                      trust. Approving replaces this empty device with a complete
                      copy of its vault, including existing passwords, passkeys,
                      notes, and recovery access.
                    </p>
                    <button
                      class="peach-btn peach-btn--accent peach-btn--md"
                      disabled={receiverSasDecision()}
                      onClick={confirmReceiverSas}
                    >
                      {receiverSasDecision() ? "Code confirmed" : "Confirm code"}
                    </button>
                  </div>
                </Show>

                <div class="peach-adopt-privacy">
                  <svg viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M7 10V8a5 5 0 0 1 10 0v2" />
                    <rect x="5" y="10" width="14" height="10" rx="3" />
                    <path d="M12 14v2" />
                  </svg>
                  <p><strong>Private by design.</strong> {RELAY_DISCLOSURE}</p>
                </div>

                <div class="peach-adopt-actions peach-adopt-pair-actions">
                  <button class="peach-btn peach-btn--ghost peach-btn--md" onClick={props.onCancel}>Cancel</button>
                </div>
              </Show>
            </div>
          </Match>

          <Match when={phase() === "error"}>
            <Show
              when={receiverError() === "ADOPT_PRO_REQUIRED"}
              fallback={
                <>
                  <h1>Could not join the vault.</h1>
                  <p class="peach-hint peach-hint-error">{receiverError()}</p>
                  <div class="peach-adopt-actions">
                    <button class="peach-btn peach-btn--accent peach-btn--md" onClick={tryAgain}>
                      Try again
                    </button>
                    <button class="peach-btn peach-btn--ghost peach-btn--md" onClick={props.onCancel}>Cancel</button>
                  </div>
                </>
              }
            >
              <PairingProRequired onRetry={tryAgain} />
            </Show>
          </Match>
        </Switch>
      </div>
    </section>
  );
}