import { createSignal, createMemo, For, onCleanup, onMount, Show } from "solid-js";
import { sendMessage } from "../App";
import { PeachWordmark } from "../components/PeachMark";
import { RecoveryRuneBackground } from "../components/RecoveryRuneBackground";

interface RecoveryWordDisplayViewProps {
  onDone: () => void;
}

// Three random positions are confirmed each time this screen mounts, so a
// user can't get away with only memorizing a fixed set of slots.
function pickConfirmIndices(): number[] {
  const pool = Array.from({ length: 12 }, (_, i) => i);
  const rand = new Uint32Array(pool.length);
  crypto.getRandomValues(rand);
  for (let i = pool.length - 1; i > 0; i--) {
    const j = (rand[i] ?? 0) % (i + 1);
    const tmp = pool[i]!;
    pool[i] = pool[j]!;
    pool[j] = tmp;
  }
  return pool.slice(0, 3).sort((a, b) => a - b);
}

export function RecoveryWordDisplayView(props: RecoveryWordDisplayViewProps) {
  // Chosen once per mount; the labels and the validation must agree.
  const confirmIndices = pickConfirmIndices();
  const [words, setWords] = createSignal<string[]>([]);
  const [error, setError] = createSignal("");
  const [loading, setLoading] = createSignal(true);
  const [confirmWords, setConfirmWords] = createSignal(["", "", ""]);
  const [confirmError, setConfirmError] = createSignal("");
  const [confirmed, setConfirmed] = createSignal(false);
  // 5-second countdown before confirmation input is enabled
  const [countdown, setCountdown] = createSignal(5);
  let countdownTimer: ReturnType<typeof setInterval> | null = null;

  onMount(async () => {
    await refreshWords();

    // Start 5-second countdown
    let remaining = 5;
    countdownTimer = setInterval(() => {
      remaining -= 1;
      setCountdown(remaining);
      if (remaining <= 0 && countdownTimer) {
        clearInterval(countdownTimer);
        countdownTimer = null;
      }
    }, 1000);
  });

  async function refreshWords(): Promise<void> {
    // Fetch the recovery words from the background (vault must be unlocked).
    const res = (await sendMessage({
      type: "GET_RECOVERY_WORDS",
    })) as { ok: boolean; data?: string[]; error?: string };

    if (res.ok && res.data) {
      setWords(res.data);
    } else {
      setError("could not retrieve recovery words");
    }
    setLoading(false);
  }

  // Screenshot hygiene: blank the words whenever the window is backgrounded,
  // so an OS screenshot of the hidden popup never captures them. They are
  // re-fetched when the user returns (the recovery-pending window still
  // exempts the fetch from password re-auth).
  const handleVisibilityChange = () => {
    if (document.visibilityState === "hidden") {
      setWords([]);
    } else if (!confirmed()) {
      void refreshWords();
    }
  };
  document.addEventListener("visibilitychange", handleVisibilityChange);

  onCleanup(() => {
    if (countdownTimer) clearInterval(countdownTimer);
    document.removeEventListener("visibilitychange", handleVisibilityChange);
  });

  async function handleConfirm() {
    const confirmed = confirmWords().map((w) => w.toLowerCase().trim());
    if (confirmed.some((w) => !w)) {
      setConfirmError("all three words are required");
      return;
    }

    // Verify against stored words
    const stored = words();
    for (let i = 0; i < confirmIndices.length; i++) {
      const pos = confirmIndices[i]!;
      if (confirmed[i] !== stored[pos]) {
        setConfirmError(`word ${pos + 1} is incorrect`);
        return;
      }
    }

    setConfirmed(true);
    setConfirmError("");
    // Clear the background-owned recovery-pending state so lock-on-close /
    // auto-lock resume
    // their normal behavior and future unlocks no longer re-route here.
    // Once the user has confirmed the words, losing the in-memory key is
    // no longer a data-loss event.
    await sendMessage({ type: "CLEAR_RECOVERY_CONFIRM_PENDING" });
    // Small pause so user sees the success state, then proceed.
    await new Promise((r) => setTimeout(r, 600));
    props.onDone();
  }

  const canConfirm = createMemo(() => countdown() <= 0 && !confirmed());

  return (
    <section class="peach-screen peach-theme lock-screen lock-screen--recovery lock-screen--recovery-display">
      <RecoveryRuneBackground />

      <header class="peach-screen-header">
        <div class="peach-wordmark-stack">
          <PeachWordmark class="peach-wordmark-wrap" />
        </div>
      </header>

      <div class="peach-recovery-header">
        <h1 class="peach-onboarding-headline">save your recovery words</h1>
        <p class="peach-hint peach-hint--warning">
          write these down — you can view them again in Settings with your master password
        </p>
      </div>

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

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

      <Show when={!loading() && !error()}>
        <div class="peach-recovery-words-display">
          <div class="peach-recovery-words-label">your 12 recovery words</div>
          <ol class="peach-recovery-word-list" start={1}>
            <For each={words()}>
              {(word, i) => (
                <li class="peach-recovery-word-item">
                  <span class="peach-recovery-word-num">{i() + 1}</span>
                  <span class="peach-recovery-word-text">{word}</span>
                </li>
              )}
            </For>
          </ol>
          <button
            type="button"
            class="peach-recovery-download-btn"
            onClick={() => void saveRecoveryWords(words())}
          >
            download as .txt
          </button>
        </div>

        {/* Confirmation step */}
        <div class="peach-recovery-confirm">
          <Show when={!confirmed()}>
            <p class="peach-recovery-confirm-label">
              {countdown() > 0
                ? `type the highlighted words to confirm (${countdown()}s)`
                : "type the highlighted words to confirm"}
            </p>
          </Show>
          <Show when={confirmed()}>
            <p class="peach-hint peach-hint--success">✓ words verified</p>
          </Show>

          <div class="peach-recovery-confirm-fields">
            <For each={confirmIndices}>
              {(pos, i) => (
                <div class="peach-recovery-confirm-field">
                  <span class="peach-recovery-confirm-num">
                    word {pos + 1}
                  </span>
                  <input
                    class="peach-recovery-word-input peach-recovery-confirm-input"
                    type="text"
                    autocomplete="off"
                    autocorrect="off"
                    autocapitalize="none"
                    spellcheck={false}
                    disabled={!canConfirm()}
                    value={confirmWords()[i()]}
                    onInput={(e) => {
                      const updated = [...confirmWords()];
                      updated[i()] = (e.target as HTMLInputElement).value;
                      setConfirmWords(updated);
                      if (confirmError()) setConfirmError("");
                    }}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" && canConfirm()) void handleConfirm();
                    }}
                  />
                </div>
              )}
            </For>
          </div>

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

          <button
            class="peach-btn peach-btn--accent peach-btn--md peach-recovery-confirm-btn"
            disabled={!canConfirm() || confirmed()}
            onClick={() => void handleConfirm()}
          >
            {confirmed() ? "verified ✓" : countdown() > 0 ? `wait ${countdown()}s` : "i wrote them down"}
          </button>
        </div>
      </Show>
    </section>
  );
}

function recoveryWordsText(words: string[]): string {
  const numbered = words.map((w, i) => `${String(i + 1).padStart(2, " ")}. ${w}`).join("\n");
  return (
    "PEACH RECOVERY WORDS\n" +
    "====================\n\n" +
    "Anyone with these 12 words can recover your vault.\n" +
    "Store this somewhere only you can access.\n\n" +
    numbered + "\n"
  );
}

// Desktop only — writes via a blob to a user-chosen save location. The native
// path deliberately does NOT use a file download: on Android the data:-URL
// download sink writes to world-readable public Downloads (audit MEDIUM), so
// native offers a clipboard copy (copyRecoveryWords) the user routes instead.
function saveRecoveryWords(words: string[]): void {
  const blob = new Blob([recoveryWordsText(words)], { type: "text/plain" });
  const a = document.createElement("a");
  a.download = "peach-recovery-words.txt";
  a.href = URL.createObjectURL(blob);
  setTimeout(() => URL.revokeObjectURL(a.href), 1000);
  document.body.appendChild(a);
  a.click();
  a.remove();
}