import { Match, Show, Switch, createMemo, createSignal, onMount } from "solid-js";
import { Capacitor } from "@capacitor/core";

import { sendMessage } from "../App";
import { LockRuneCanvas } from "../components/LockRuneCanvas";
import { PeachMark, PeachWordmark } from "../components/PeachMark";
import { ImportView } from "./Import";
import { biometricUnlock, biometricAvailable } from "../../shared/biometric";

// Lazy-load zxcvbn — it's heavy (~800 kB) and only needed during vault creation
let _zxcvbn: ((password: string) => { score: number }) | null = null;
async function getZxcvbn() {
  if (_zxcvbn) return _zxcvbn;
  const mod = await import("zxcvbn");
  _zxcvbn = mod.default;
  return _zxcvbn;
}

interface LockProps {
  hasVault: boolean;
  ready: boolean;
  isPro?: boolean;
  onUnlock: () => void | Promise<void>;
  /** Optional escape hatch: rewind from the create-vault screen back to
   *  Onboarding. Only meaningful when the user reached create-vault from
   *  Onboarding in the first place. */
  onBackToOnboarding?: () => void;
}

// "restore" = picker, "peachscript" / "file" = detail flows,
// "mayan" = Mayan-code import (decoder not shipped yet — picker exposes a "soon" card).
type RestoreSurface = "restore" | "peachscript" | "file" | "mayan" | null;

export function LockView(props: LockProps) {
  const [password, setPassword] = createSignal("");
  const [confirmPassword, setConfirmPassword] = createSignal("");
  const [error, setError] = createSignal("");
  const [loading, setLoading] = createSignal(false);
  const [restoreSurface, setRestoreSurface] = createSignal<RestoreSurface>(null);
  const [showPassword, setShowPassword] = createSignal(false);

  const MIN_LENGTH = 12;
  const MIN_ZXCVBN_SCORE = 2;

  const [strengthScore, setStrengthScore] = createSignal<number | null>(null);

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

  const passwordStrength = createMemo(() => {
    const score = strengthScore();
    if (score === null) return null;
    if (score <= 1) return "weak";
    if (score === 2) return "fair";
    if (score === 3) return "good";
    return "strong";
  });

  const createBlockerMessage = 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 — add words or length";
    return null;
  });

  // Update strength asynchronously when password changes
  createMemo(() => {
    const value = password();
    if (!value) { setStrengthScore(null); return; }
    getZxcvbn().then((zxcvbn) => {
      if (password() === value) setStrengthScore(zxcvbn(value).score);
    }).catch(() => {
      // zxcvbn unavailable — fall back to length-only heuristic
      if (password() === value) setStrengthScore(value.length >= 16 ? 3 : value.length >= 12 ? 2 : 1);
    });
  });

  async function handleUnlock() {
    if (!password().trim()) return;
    setLoading(true);
    setError("");
    const response = await sendMessage({
      type: "UNLOCK",
      payload: { password: password() },
    });
    const result = response as { ok: boolean; error?: string };
    if (result.ok) {
      await props.onUnlock();
      setLoading(false);
      return;
    }
    setError(getDisplayError(result.error, "incorrect password"));
    setPassword("");
    const passwordField = document.querySelector(".lock-password-input") as HTMLInputElement | undefined;
    passwordField?.classList.add("shake");
    setTimeout(() => passwordField?.classList.remove("shake"), 300);
    setLoading(false);
  }

  async function handleCreate() {
    if (!password().trim()) return;
    if (password().length < MIN_LENGTH) {
      setError(`password must be at least ${MIN_LENGTH} characters`);
      return;
    }
    if (password() !== confirmPassword()) {
      setError("passwords do not match");
      return;
    }
    const score = strengthScore();
    if (score === null || score < MIN_ZXCVBN_SCORE) {
      setError("password is too weak — try a longer or more varied passphrase");
      return;
    }
    setLoading(true);
    setError("");
    const response = await sendMessage({
      type: "CREATE_VAULT",
      payload: { password: password() },
    });
    const result = response as { ok: boolean; error?: string };
    if (result.ok) {
      await props.onUnlock();
      setLoading(false);
      return;
    }
    setError(getDisplayError(result.error, "failed to create vault"));
    setLoading(false);
  }

  function openRestore(surface: Exclude<RestoreSurface, null>) {
    if (!props.ready || loading()) return;
    setPassword("");
    setConfirmPassword("");
    setError("");
    setRestoreSurface(surface);
  }

  // ── All surfaces routed reactively via Switch/Match ───────────────────
  return (
    <Switch>
      {/* ── Restore picker ────────────────────────────────────────── */}
      <Match when={restoreSurface() === "restore"}>
        <RestorePickerView
          onBack={() => setRestoreSurface(null)}
          onPickPeachScript={() => setRestoreSurface("peachscript")}
          onPickMayan={() => setRestoreSurface("mayan")}
          onPickCSV={() => setRestoreSurface("file")}
        />
      </Match>

      {/* ── Mayan code restore (decoder coming soon) ──────────────── */}
      <Match when={restoreSurface() === "mayan"}>
        <MayanComingSoonView onBack={() => setRestoreSurface("restore")} />
      </Match>

      {/* ── PeachScript restore ───────────────────────────────────── */}
      <Match when={restoreSurface() === "peachscript"}>
        <ImportView
          mode="onboarding"
          replacesExistingVault={props.hasVault}
          initialView="peachscript"
          onBack={() => setRestoreSurface("restore")}
          onImport={async () => {
            setRestoreSurface(null);
            await props.onUnlock();
          }}
        />
      </Match>

      {/* ── File restore ──────────────────────────────────────────── */}
      <Match when={restoreSurface() === "file"}>
        <ImportView
          mode="onboarding"
          replacesExistingVault={props.hasVault}
          initialView="file"
          onBack={() => setRestoreSurface("restore")}
          onImport={async () => {
            setRestoreSurface(null);
            await props.onUnlock();
          }}
        />
      </Match>

      {/* ── Unlock (hasVault = true) ───────────────────────────────── */}
      <Match when={props.hasVault}>
        <section class="peach-screen peach-theme lock-screen lock-screen--vault-stage" data-motion-phase="enter">
          <header class="peach-screen-header lock-screen-header">
            <div class="peach-wordmark-stack">
              <PeachWordmark class="peach-wordmark-wrap" />
              <Show when={props.isPro}>
                <span class="peach-pro-mini-badge">pro</span>
              </Show>
            </div>
          </header>

          <div class="peach-lock-hero peach-lock-hero--unlock">
            <div class="peach-lock-hero-art" aria-hidden="true">
              <PeachMark class="peach-lock-hero-mark" />
            </div>
            <span class="peach-lock-eyebrow">vault locked</span>
            <h1 class="peach-onboarding-headline peach-lock-headline--unlock">
              unlock
              <br />
              your vault.
            </h1>
          </div>

          <LockRuneCanvas />

          <section class="peach-lock-panel peach-lock-panel--unlock peach-glass">
            <label class="peach-label" for="unlock-password">
              master password
            </label>
            <input
              id="unlock-password"
              class="peach-underline-input peach-unlock-input lock-password-input"
              type="password"
              placeholder="••••••••••••"
              autocomplete="current-password"
              value={password()}
              disabled={!props.ready}
              ref={(el) => { if (props.ready) setTimeout(() => el.focus(), 80); }}
              onInput={(event) => setPassword((event.target as HTMLInputElement).value)}
              onKeyDown={(event) => {
                if (event.key !== "Enter" || !props.ready) return;
                void handleUnlock();
              }}
            />

            <Show when={error()}>
              <p class="peach-hint peach-hint-error">{error()}</p>
            </Show>

            <button
              class="peach-btn peach-btn--accent peach-btn--md peach-lock-submit"
              onClick={() => void handleUnlock()}
              disabled={!props.ready || loading()}
            >
              {loading() ? "unlocking..." : "unlock"}
            </button>

            <Show when={Capacitor.isNativePlatform()}>
              <BiometricUnlockButton ready={props.ready} loading={loading} onUnlock={props.onUnlock} />
            </Show>
          </section>
        </section>
      </Match>

      {/* ── Onboarding (hasVault = false) ─────────────────────────── */}
      <Match when={true}>
        <section
          class="peach-screen peach-theme lock-screen lock-screen--vault-stage peach-newvault"
          data-motion-phase="enter"
        >
          <header class="peach-screen-header peach-newvault-header">
            <Show when={props.onBackToOnboarding}>
              <button
                class="peach-newvault-back"
                type="button"
                onClick={() => props.onBackToOnboarding?.()}
                aria-label="Back to onboarding"
              >
                <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M7 2L3 5.5L7 9" />
                </svg>
                back
              </button>
            </Show>
            <div class="peach-wordmark-stack">
              <PeachWordmark class="peach-wordmark-wrap" />
              <Show when={props.isPro}>
                <span class="peach-pro-mini-badge">pro</span>
              </Show>
            </div>
          </header>

          <div class="peach-newvault-mark" aria-hidden="true">
            <PeachMark class="peach-newvault-mark-art" />
          </div>

          <div class="peach-newvault-card">
            <h1 class="peach-newvault-headline">{"keep your\nsecrets."}</h1>
            <hr class="peach-newvault-divider" />

            <div class="peach-newvault-field">
              <div class="peach-newvault-label-row">
                <label class="peach-label" for="master-password">
                  master password
                </label>
                <button
                  class="peach-lock-reveal-btn"
                  type="button"
                  onClick={() => setShowPassword((value) => !value)}
                  aria-label={showPassword() ? "Hide password" : "Show password"}
                >
                  <Show
                    when={showPassword()}
                    fallback={
                      <svg width="15" height="10" viewBox="0 0 14 10" fill="none" stroke="currentColor" stroke-width="0.9" stroke-linecap="round">
                        <path d="M1 5C1 5 2.8 1 7 1C11.2 1 13 5 13 5C13 5 11.2 9 7 9C2.8 9 1 5 1 5Z" />
                        <circle cx="7" cy="5" r="1.75" />
                      </svg>
                    }
                  >
                    <svg width="15" height="10" viewBox="0 0 14 10" fill="none" stroke="currentColor" stroke-width="0.9" stroke-linecap="round">
                      <path d="M1 2C3 4.5 5 6 7 6C9 6 11 4.5 13 2" />
                      <path d="M3.5 5.5L2.5 7.5" />
                      <path d="M7 6.5V8.5" />
                      <path d="M10.5 5.5L11.5 7.5" />
                    </svg>
                  </Show>
                  {showPassword() ? "hide" : "show"}
                </button>
              </div>
              <input
                id="master-password"
                class="peach-underline-input peach-newvault-input lock-password-input"
                type={showPassword() ? "text" : "password"}
                placeholder="••••••••••••"
                autocomplete="new-password"
                value={password()}
                disabled={!props.ready}
                onInput={(event) => setPassword((event.target as HTMLInputElement).value)}
                onKeyDown={(event) => {
                  if (event.key !== "Enter" || !props.ready) return;
                  void handleCreate();
                }}
              />
              <Show
                when={password().length > 0 && passwordStrength() !== null}
                fallback={
                  <p class="peach-newvault-hint">at least 12 characters</p>
                }
              >
                <div class="peach-password-strength">
                  <div class={`peach-strength-bar peach-strength-bar--${passwordStrength()}`}>
                    <div class="peach-strength-fill"></div>
                  </div>
                  <span class="peach-strength-label">{passwordStrength()}</span>
                </div>
              </Show>
            </div>

            <div class="peach-newvault-field">
              <label class="peach-label" for="confirm-password">
                confirm password
              </label>
              <input
                id="confirm-password"
                class="peach-underline-input peach-newvault-input"
                type={showPassword() ? "text" : "password"}
                placeholder="••••••••••••"
                autocomplete="new-password"
                value={confirmPassword()}
                disabled={!props.ready}
                onInput={(event) => setConfirmPassword((event.target as HTMLInputElement).value)}
                onKeyDown={(event) => {
                  if (event.key === "Enter" && props.ready) void handleCreate();
                }}
              />
            </div>

            <Show when={error()}>
              <p class="peach-hint peach-hint-error">{error()}</p>
            </Show>

            <button
              class="peach-btn peach-btn--accent peach-btn--md peach-lock-submit peach-newvault-submit"
              onClick={() => void handleCreate()}
              disabled={!props.ready || loading() || !canCreate()}
              aria-live="polite"
            >
              <Show
                when={!canCreate() && createBlockerMessage()}
                fallback={loading() ? "creating..." : "create vault"}
              >
                {createBlockerMessage()}
              </Show>
            </button>

            <p class="peach-newvault-warning">
              <span class="peach-newvault-warning-icon" aria-hidden="true">⚠</span>
              <span>If you forget it, your vault cannot be opened. There is no reset.</span>
            </p>
          </div>

          <div class="peach-newvault-footer">
            <p class="peach-hint">Already have a backup?</p>
            <button
              class="peach-lock-restore-link"
              onClick={() => openRestore("restore")}
              disabled={!props.ready}
            >
              › restore from backup
            </button>
          </div>
        </section>
      </Match>
    </Switch>
  );
}

// ── Restore method picker ──────────────────────────────────────────────────

function RestorePickerView(props: {
  onBack: () => void;
  onPickPeachScript: () => void;
  onPickMayan: () => void;
  onPickCSV: () => void;
}) {
  return (
    <section
      class="peach-screen peach-theme lock-screen lock-screen--vault-stage lock-screen--onboarding peach-restore-screen"
      data-motion-phase="enter"
    >
      <header class="peach-screen-header lock-screen-header">
        <PeachWordmark class="peach-wordmark-wrap" />
        <button class="peach-lock-restore-link" onClick={props.onBack}>
          ‹ back
        </button>
      </header>

      <div class="peach-lock-hero">
        <span class="peach-lock-eyebrow">restore</span>
        <h1 class="peach-onboarding-headline">
          bring back
          <br />
          your vault.
        </h1>
      </div>

      <div class="peach-restore-stack" role="list">
        <button
          class="peach-restore-card"
          role="listitem"
          onClick={props.onPickPeachScript}
        >
          <h2 class="peach-restore-card-headline">PeachScript</h2>
          <hr class="peach-restore-card-divider" />
          <p class="peach-restore-card-body">
            Paste a string of Peach symbols, or open a <code>.peach</code> file
            you saved from another device.
          </p>
          <p class="peach-restore-card-meta">backup password required</p>
        </button>

        <button
          class="peach-restore-card"
          role="listitem"
          onClick={props.onPickMayan}
        >
          <span class="peach-restore-card-soon" aria-label="coming soon">soon</span>
          <h2 class="peach-restore-card-headline">Mayan code</h2>
          <hr class="peach-restore-card-divider" />
          <p class="peach-restore-card-body">
            Restore from a printed Mayan code by uploading a photo of it.
          </p>
          <p class="peach-restore-card-meta">decoder shipping soon</p>
        </button>

        <button
          class="peach-restore-card"
          role="listitem"
          onClick={props.onPickCSV}
        >
          <h2 class="peach-restore-card-headline">CSV</h2>
          <hr class="peach-restore-card-divider" />
          <p class="peach-restore-card-body">
            Move in from Bitwarden, 1Password, Proton Pass, or a browser
            (Chrome, Safari, Edge) CSV export.
          </p>
          <p class="peach-restore-card-meta">plain-text — open the file once and delete it</p>
        </button>
      </div>

    </section>
  );
}

// ── Mayan code (decoder coming soon) ───────────────────────────────────────

function MayanComingSoonView(props: { onBack: () => void }) {
  return (
    <section
      class="peach-screen peach-theme lock-screen lock-screen--vault-stage lock-screen--onboarding peach-restore-screen"
      data-motion-phase="enter"
    >
      <header class="peach-screen-header lock-screen-header">
        <PeachWordmark class="peach-wordmark-wrap" />
        <button class="peach-lock-restore-link" onClick={props.onBack}>
          ‹ back
        </button>
      </header>

      <div class="peach-lock-hero">
        <span class="peach-lock-eyebrow">mayan code</span>
        <h1 class="peach-onboarding-headline">
          decoder
          <br />
          on its way.
        </h1>
      </div>

      <div class="peach-restore-stack">
        <div class="peach-restore-card peach-restore-card--static">
          <h2 class="peach-restore-card-headline">Not yet — but soon.</h2>
          <hr class="peach-restore-card-divider" />
          <p class="peach-restore-card-body">
            Mayan codes encode the same backup as PeachScript, but printable on
            a single page. The phone-camera decoder is the next thing to land
            for this format.
          </p>
          <p class="peach-restore-card-body">
            Until then, restore your vault using the PeachScript that came
            with this Mayan code, or open a <code>.peach</code> file backup.
          </p>
        </div>
      </div>

      <div class="peach-restore-footer">
        <button class="peach-restore-footer-link" onClick={props.onBack}>
          ‹ back to restore
        </button>
      </div>
    </section>
  );
}

// ── Biometric unlock ────────────────────────────────────────────────────────

async function handleBiometricUnlock(props: { onUnlock: () => void | Promise<void> }) {
  const unlocked = await biometricUnlock();
  if (unlocked) {
    await props.onUnlock();
  }
}

function BiometricUnlockButton(props: { ready: boolean; loading: () => boolean; onUnlock: () => void | Promise<void> }) {
  const [bioAvailable, setBioAvailable] = createSignal(false);
  onMount(async () => {
    setBioAvailable(await biometricAvailable());
  });
  return (
    <Show when={bioAvailable()}>
      <button
        class="peach-btn peach-btn--subtle peach-btn--md peach-biometric-btn"
        onClick={() => void handleBiometricUnlock(props)}
        disabled={!props.ready || props.loading()}
        type="button"
      >
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M8 1a3 3 0 0 0-3 3v4a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
          <path d="M5 8v1a3 3 0 0 0 6 0V8" />
          <line x1="8" y1="12" x2="8" y2="15" />
          <line x1="5" y1="15" x2="11" y2="15" />
        </svg>
        use biometrics
      </button>
    </Show>
  );
}

// ── Helpers ────────────────────────────────────────────────────────────────

function getDisplayError(error: string | undefined, fallback: string): string {
  if (!error) return fallback;
  if (
    error === "SERVICE_WORKER_UNAVAILABLE" ||
    error.includes("Receiving end does not exist") ||
    error.includes("message port closed")
  ) {
    return "background service unavailable";
  }
  return error;
}