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"}>
        <MayanRestoreView 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}
        >
          <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 — scan or upload a photo.
          </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 restore ─────────────────────────────────────────────────────

/**
 * Decode a base64-encoded Mayan code image into the binary backup payload.
 * Decoder isn't shipped yet — return a typed result so the UI can surface
 * the right copy, and replace this single function when the decoder lands.
 */
async function handleMayanDecode(_base64: string): Promise<
  { ok: true; payload: Uint8Array } | { ok: false; reason: string }
> {
  // TODO(decoder): wire src/crypto/mayan.ts decode() here.
  return { ok: false, reason: "Mayan decoder is not yet shipped." };
}

function MayanRestoreView(props: { onBack: () => void }) {
  const [decodeError, setDecodeError] = createSignal<string | null>(null);
  const [decoding, setDecoding] = createSignal(false);
  const isAndroid = createMemo(() =>
    Capacitor.isNativePlatform() && Capacitor.getPlatform() === "android",
  );

  async function processBase64(base64: string) {
    setDecoding(true);
    setDecodeError(null);
    try {
      const result = await handleMayanDecode(base64);
      if (!result.ok) {
        setDecodeError(result.reason);
        return;
      }
      // Future: hand payload to the restore-decrypt flow here.
      setDecodeError("Decoded — but the restore flow isn't wired yet.");
    } finally {
      setDecoding(false);
    }
  }

  async function handleCameraScan() {
    setDecodeError(null);
    try {
      const { Camera, CameraResultType, CameraSource } = await import("@capacitor/camera");
      const image = await Camera.getPhoto({
        quality: 90,
        resultType: CameraResultType.Base64,
        source: CameraSource.Camera,
        allowEditing: false,
      });
      if (image.base64String) await processBase64(image.base64String);
    } catch (err) {
      // User cancellation throws — only surface real errors.
      const msg = err instanceof Error ? err.message : "";
      if (msg && !/cancel/i.test(msg)) setDecodeError(msg);
    }
  }

  function handleFileUpload(e: Event) {
    const input = e.currentTarget as HTMLInputElement;
    const file = input.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = () => {
      const result = reader.result;
      if (typeof result !== "string") return;
      const base64 = result.split(",", 2)[1] ?? "";
      void processBase64(base64);
    };
    reader.readAsDataURL(file);
  }

  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">scan or upload.</h1>
      </div>

      <div class="peach-restore-stack">
        <Show when={isAndroid()}>
          <button
            class="peach-restore-card"
            disabled={decoding()}
            onClick={() => void handleCameraScan()}
          >
            <h2 class="peach-restore-card-headline">Scan with camera</h2>
            <hr class="peach-restore-card-divider" />
            <p class="peach-restore-card-body">
              Point your camera at the printed Mayan code.
            </p>
          </button>
        </Show>

        <label
          class="peach-restore-card"
          classList={{ "peach-restore-card--disabled": decoding() }}
        >
          <h2 class="peach-restore-card-headline">Choose from gallery</h2>
          <hr class="peach-restore-card-divider" />
          <p class="peach-restore-card-body">
            Pick a saved photo of your Mayan code.
          </p>
          <input
            type="file"
            accept="image/*"
            style="display:none"
            onChange={handleFileUpload}
            disabled={decoding()}
          />
        </label>

        <Show when={decodeError()}>
          <div class="peach-restore-card peach-restore-card--static">
            <p class="peach-restore-card-body">{decodeError()}</p>
            <p class="peach-restore-card-meta">
              Until the decoder lands, restore via PeachScript or a <code>.peach</code> file.
            </p>
          </div>
        </Show>
      </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;
}