import { For, Match, Show, Switch, createMemo, createSignal, onMount } from "solid-js";

import { sendMessage } from "../App";
import { PeachMark, PeachWordmark } from "../components/PeachMark";
import { CJKImportView } from "./CJKImport";
import { ImportView } from "./Import";

// 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;
  onUnlock: () => void | Promise<void>;
}

// "restore" = picker, "snapshots" = vault history, "cjk" / "file" = detail flows
type RestoreSurface = "restore" | "snapshots" | "cjk" | "file" | 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";
  });

  // 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)}
          onPickCjk={() => setRestoreSurface("cjk")}
          onPickFile={() => setRestoreSurface("file")}
          onPickSnapshots={() => setRestoreSurface("snapshots")}
        />
      </Match>

      {/* ── Vault snapshot history ────────────────────────────────── */}
      <Match when={restoreSurface() === "snapshots"}>
        <SnapshotRestoreView
          onBack={() => setRestoreSurface("restore")}
          onRestored={props.onUnlock}
        />
      </Match>

      {/* ── CJK restore ───────────────────────────────────────────── */}
      <Match when={restoreSurface() === "cjk"}>
        <CJKImportView
          mode="onboarding"
          onBack={() => setRestoreSurface("restore")}
          onDone={async () => {
            setRestoreSurface(null);
            await props.onUnlock();
          }}
        />
      </Match>

      {/* ── File restore ──────────────────────────────────────────── */}
      <Match when={restoreSurface() === "file"}>
        <ImportView
          mode="onboarding"
          replacesExistingVault={props.hasVault}
          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">
            <PeachWordmark class="peach-wordmark-wrap" />
          </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>

          <section class="peach-lock-panel peach-lock-panel--unlock">
            <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() || !password().trim()}
            >
              {loading() ? "unlocking..." : "unlock"}
            </button>
          </section>
        </section>
      </Match>

      {/* ── Onboarding (hasVault = false) ─────────────────────────── */}
      <Match when={true}>
        <section
          class="peach-screen peach-theme lock-screen lock-screen--vault-stage lock-screen--onboarding"
          data-motion-phase="enter"
        >
          <header class="peach-screen-header lock-screen-header">
            <PeachWordmark class="peach-wordmark-wrap" />
          </header>

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

          <section class="peach-lock-panel peach-lock-panel--primary">
            <div class="peach-lock-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-unlock-input lock-password-input"
              type={showPassword() ? "text" : "password"}
              placeholder="at least 12 characters"
              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}>
              <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>

            <label class="peach-label" for="confirm-password">
              confirm password
            </label>
            <input
              id="confirm-password"
              class="peach-underline-input peach-unlock-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();
              }}
            />

            <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 handleCreate()}
              disabled={!props.ready || loading() || !canCreate()}
            >
              {loading() ? "creating..." : "create vault"}
            </button>

            <p class="peach-hint peach-hint-error peach-lock-warning">
              If you lose this password, Peach cannot recover your vault. There is no reset.
            </p>

            <div class="peach-lock-panel-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>
        </section>
      </Match>
    </Switch>
  );
}

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

function RestorePickerView(props: {
  onBack: () => void;
  onPickCjk: () => void;
  onPickFile: () => void;
  onPickSnapshots: () => void;
}) {
  return (
    <section
      class="peach-screen peach-theme lock-screen lock-screen--vault-stage lock-screen--onboarding"
      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>

      <section class="peach-lock-panel peach-lock-panel--restore">
        <p class="peach-hint" style="margin-bottom:2px;">How did you back up your data?</p>

        <button class="peach-lock-option" onClick={props.onPickCjk}>
          <span class="peach-lock-option-title">backup phrase</span>
          <span class="peach-lock-option-copy">
            A block of Chinese characters exported directly from Peach. You'll need the export passphrase you set at the time.
          </span>
        </button>

        <button class="peach-lock-option" onClick={props.onPickFile}>
          <span class="peach-lock-option-title">backup file</span>
          <span class="peach-lock-option-copy">
            A Peach JSON export, or a file from Bitwarden, Proton Pass, 1Password, or a browser (Chrome, Safari, Edge CSV).
          </span>
        </button>

        <button class="peach-lock-option peach-lock-option--history" onClick={props.onPickSnapshots}>
          <span class="peach-lock-option-title">vault history</span>
          <span class="peach-lock-option-copy">
            Peach saves encrypted snapshots locally after each change. Revert to an earlier version if something went wrong.
          </span>
        </button>
      </section>
    </section>
  );
}

// ── Vault snapshot restore ─────────────────────────────────────────────────

interface SnapshotSummary {
  index: number;
  timestamp: number;
  entryCount: number;
}

function SnapshotRestoreView(props: {
  onBack: () => void;
  onRestored: () => void | Promise<void>;
}) {
  const [snapshots, setSnapshots] = createSignal<SnapshotSummary[]>([]);
  const [loading, setLoading] = createSignal(true);
  const [selected, setSelected] = createSignal<number | null>(null);
  const [password, setPassword] = createSignal("");
  const [confirming, setConfirming] = createSignal(false);
  const [restoring, setRestoring] = createSignal(false);
  const [error, setError] = createSignal("");

  onMount(async () => {
    const res = await sendMessage({ type: "LIST_VAULT_SNAPSHOTS" });
    setSnapshots((res as { ok: boolean; data?: SnapshotSummary[] }).data ?? []);
    setLoading(false);
  });

  function formatAge(ts: number): string {
    const diff = Date.now() - ts;
    const mins = Math.floor(diff / 60_000);
    if (mins < 2) return "just now";
    if (mins < 60) return `${mins} minutes ago`;
    const hours = Math.floor(mins / 60);
    if (hours < 24) return `${hours} hour${hours === 1 ? "" : "s"} ago`;
    const days = Math.floor(hours / 24);
    return `${days} day${days === 1 ? "" : "s"} ago`;
  }

  function selectSnapshot(index: number) {
    setSelected(index);
    setConfirming(false);
    setPassword("");
    setError("");
  }

  async function handleRestore() {
    const idx = selected();
    if (idx === null || !password()) return;
    setRestoring(true);
    setError("");
    const res = await sendMessage({
      type: "RESTORE_VAULT_SNAPSHOT",
      payload: { index: idx, password: password() },
    });
    if ((res as { ok: boolean }).ok) {
      await props.onRestored();
    } else {
      setError("Incorrect password, or this snapshot cannot be decrypted.");
      setRestoring(false);
    }
  }

  const selectedSnap = () => {
    const idx = selected();
    return idx !== null ? (snapshots()[idx] ?? null) : null;
  };

  return (
    <section
      class="peach-screen peach-theme lock-screen lock-screen--vault-stage lock-screen--onboarding"
      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} disabled={restoring()}>
          ‹ back
        </button>
      </header>

      <div class="peach-lock-hero">
        <span class="peach-lock-eyebrow">vault history</span>
        <h1 class="peach-onboarding-headline">
          revert to
          <br />
          a snapshot.
        </h1>
      </div>

      <section class="peach-lock-panel peach-snapshot-panel">
        <Show when={loading()}>
          <p class="peach-hint" style="text-align:center;padding:8px 0;">Loading…</p>
        </Show>

        <Show when={!loading() && snapshots().length === 0}>
          <p class="peach-hint" style="line-height:1.6;">
            No snapshots yet. Peach automatically saves up to 6 encrypted snapshots after each vault change.
          </p>
        </Show>

        <Show when={!loading() && snapshots().length > 0}>
          <p class="peach-hint" style="margin-bottom:4px;">Select a version to restore:</p>
          <div class="peach-snapshot-list">
            <For each={snapshots()}>
              {(snap) => (
                <button
                  class="peach-snapshot-row"
                  classList={{ "is-selected": selected() === snap.index }}
                  onClick={() => selectSnapshot(snap.index)}
                  disabled={restoring()}
                >
                  <span class="peach-snapshot-time">{formatAge(snap.timestamp)}</span>
                  <span class="peach-snapshot-count">
                    {snap.entryCount} {snap.entryCount === 1 ? "entry" : "entries"}
                  </span>
                </button>
              )}
            </For>
          </div>

          <Show when={selected() !== null}>
            <div class="peach-snapshot-confirm">
              <label class="peach-label" for="snapshot-pw">master password</label>
              <input
                id="snapshot-pw"
                class="peach-underline-input peach-unlock-input"
                type="password"
                placeholder="••••••••••••"
                autocomplete="current-password"
                value={password()}
                disabled={restoring()}
                onInput={(e) => setPassword((e.target as HTMLInputElement).value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter" && !restoring() && confirming()) void handleRestore();
                }}
              />

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

              <Show
                when={confirming()}
                fallback={
                  <button
                    class="peach-btn peach-btn--subtle peach-btn--sm peach-snapshot-restore-btn"
                    onClick={() => setConfirming(true)}
                    disabled={!password().trim() || restoring()}
                  >
                    restore this version →
                  </button>
                }
              >
                <div class="peach-snapshot-warning">
                  <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="rgba(220,80,60,0.9)" stroke-width="1.4" stroke-linecap="round">
                    <path d="M6 1L11 10H1L6 1z" /><line x1="6" y1="5" x2="6" y2="7.5" />
                    <circle cx="6" cy="9" r="0.5" fill="rgba(220,80,60,0.9)" stroke="none" />
                  </svg>
                  This replaces your current vault with the {selectedSnap() ? formatAge(selectedSnap()!.timestamp) : ""} version ({selectedSnap()?.entryCount} entries). It cannot be undone.
                </div>
                <div class="peach-snapshot-confirm-row">
                  <button
                    class="peach-btn peach-btn--accent peach-btn--sm"
                    style="flex:1"
                    onClick={() => void handleRestore()}
                    disabled={restoring() || !password().trim()}
                  >
                    {restoring() ? "restoring…" : "yes, restore"}
                  </button>
                  <button
                    class="peach-btn peach-btn--ghost peach-btn--sm"
                    onClick={() => setConfirming(false)}
                    disabled={restoring()}
                  >
                    cancel
                  </button>
                </div>
              </Show>
            </div>
          </Show>
        </Show>
      </section>
    </section>
  );
}

// ── 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;
}