// Peach Codex — generation view.
//
// Two-step flow (see peach_codex_addendum.md):
//   1. words  — show the 12 recovery words and require the user to type 3
//               randomly-chosen ones correctly before generation can proceed.
//               The Codex PDF never contains recovery words; this is the
//               due-diligence gate that pushes the user to commit them to
//               paper separately.
//   2. gen    — run the popup-side `generateCodex` pipeline, surface progress,
//               trigger the PDF download.
//   3. done   — reminder to store the Codex and recovery words separately.
//
// Pro-gated: a non-Pro user is bounced to the license section on mount.
// Restoration (CodexRestoreView) stays free — a printed Codex must restore
// regardless of license state.

import { createSignal, createMemo, For, onMount, onCleanup, Show } from "solid-js";
import { sendMessage } from "../../shared/bridge";
import { RecoveryRuneBackground } from "../components/RecoveryRuneBackground";
import type {
  CodexDeps,
  CodexError,
  CodexManifest,
  CodexProgress,
  CodexVaultSnapshot,
} from "../../shared/codex-types";
import { STORAGE_KEY_LAST_GENERATED } from "../../shared/codex-types";
import { pickConfirmationPositions } from "../codex/confirmation";
import type { VaultEntry } from "../../shared/types";

interface CodexGenerateViewProps {
  isPro: boolean;
  onBack: () => void;
  onUpgradePro: () => void;
  onOpenSecurity: () => void;
  onVaultLocked: () => void;
}

type Step = "words" | "generating" | "done";
type CodexGenerateModule = typeof import("../codex/generate");

let codexGenerateModulePromise: Promise<CodexGenerateModule> | null = null;

function loadCodexGenerateModule(): Promise<CodexGenerateModule> {
  codexGenerateModulePromise ??= import("../codex/generate");
  return codexGenerateModulePromise;
}


export function CodexGenerateView(props: CodexGenerateViewProps) {
  const [snapshot, setSnapshot] = createSignal<CodexVaultSnapshot | null>(null);
  const [estimatedPages, setEstimatedPages] = createSignal<number | null>(null);
  const [estimatedParity, setEstimatedParity] = createSignal<number | null>(null);
  const [loading, setLoading] = createSignal(true);
  const [loadError, setLoadError] = createSignal<string | null>(null);
  const [libraryLoading, setLibraryLoading] = createSignal(false);
  const [libraryReady, setLibraryReady] = createSignal(false);
  const [libraryError, setLibraryError] = createSignal<string | null>(null);
  const [missingRecoveryWords, setMissingRecoveryWords] = createSignal(false);
  // PB-26-001: the background only releases recoveryWords with a fresh
  // master-password proof, so the words step re-asks for it here.
  const [needsPassword, setNeedsPassword] = createSignal(false);
  const [password, setPassword] = createSignal("");
  const [passwordError, setPasswordError] = createSignal<string | null>(null);

  const [step, setStep] = createSignal<Step>("words");
  const [confirmPositions, setConfirmPositions] = createSignal<
    [number, number, number]
  >([3, 7, 11]);
  const [confirmInputs, setConfirmInputs] = createSignal<
    [string, string, string]
  >(["", "", ""]);

  const [progressStep, setProgressStep] = createSignal<string>("");
  const [progressCurrent, setProgressCurrent] = createSignal<number>(0);
  const [progressTotal, setProgressTotal] = createSignal<number>(0);

  const [genError, setGenError] = createSignal<string | null>(null);
  const [completed, setCompleted] = createSignal<CodexManifest | null>(null);
  // Live gallery of real Aztec PNGs as they're generated — keep the last 36
  // (one page worth) so the display fills without using excessive memory.
  const [aztecGallery, setAztecGallery] = createSignal<string[]>([]);
  const GALLERY_MAX = 36;

  onCleanup(() => {
    for (const url of aztecGallery()) URL.revokeObjectURL(url);
  });

  onMount(async () => {
    if (!props.isPro) {
      props.onUpgradePro();
      return;
    }
    await loadSnapshot();
  });

  // Screenshot hygiene: drop the displayed words when the window is
  // backgrounded so an OS screenshot of the hidden popup never captures
  // them; re-showing requires the master-password step again.
  const handleVisibilityChange = () => {
    const snap = snapshot();
    if (document.visibilityState === "hidden" && snap?.recoveryWords) {
      setSnapshot({ ...snap, recoveryWords: null });
      setNeedsPassword(true);
    }
  };
  document.addEventListener("visibilitychange", handleVisibilityChange);
  onCleanup(() =>
    document.removeEventListener("visibilitychange", handleVisibilityChange),
  );

  async function loadSnapshot(password?: string): Promise<void> {
    const res = (await sendMessage({
      type: "GET_CODEX_VAULT_DATA",
      ...(password ? { payload: { password } } : {}),
    })) as { ok: boolean; data?: CodexVaultSnapshot; error?: string };

    if (!res.ok || !res.data) {
      // Service worker restarted (MV3) and the vault re-locked in memory.
      // Route back to the lock screen exactly like the rest of the app does.
      if (res.error?.startsWith("VAULT_LOCKED")) {
        props.onVaultLocked();
        return;
      }
      // Wrong re-auth password is a form error, not a load failure.
      if (res.error === "wrong_password") {
        setPasswordError("wrong password. try again.");
        return;
      }
      setLoadError(res.error ?? "could not load vault data");
      setLoading(false);
      return;
    }

    setSnapshot(res.data);

    const words = res.data.recoveryWords;
    if (!words || words.length !== 12) {
      // No proof supplied yet → ask for it; proof supplied but still no
      // words → the vault genuinely has no recovery escrow.
      if (!password) {
        setNeedsPassword(true);
      } else {
        setMissingRecoveryWords(true);
      }
      setLoading(false);
      return;
    }

    setNeedsPassword(false);
    setPassword("");
    setPasswordError(null);
    setConfirmPositions(pickConfirmationPositions());
    setLoading(false);
    void warmCodexLibrary(res.data);
  }

  async function submitPassword(): Promise<void> {
    if (!password()) return;
    setPasswordError(null);
    await loadSnapshot(password());
  }

  const allCorrect = createMemo(() => {
    const snap = snapshot();
    const words = snap?.recoveryWords;
    if (!words || words.length !== 12) return false;
    const positions = confirmPositions();
    const inputs = confirmInputs();
    return positions.every(
      (pos, i) =>
        inputs[i]!.toLowerCase().trim() === words[pos - 1]!.toLowerCase(),
    );
  });

  function buildDeps(snap: CodexVaultSnapshot): CodexDeps {
    return {
      getSlotA: async () => snap.slotA,
      getSlotB: async () => snap.slotB,
      getLastModified: async () => snap.lastModified,
      // `getAllEntries` is consumed only as a count filter inside the
      // generator — synthesise placeholders so real entries don't cross
      // the popup boundary.
      getAllEntries: async () =>
        Array.from(
          { length: snap.entryCount },
          () => ({ deletedAt: null, archived: false }) as unknown as VaultEntry,
        ),
      getVerifyCode: async () => snap.verifyCode,
      isVaultUnlocked: () => snap.vaultUnlocked,
    };
  }

  async function warmCodexLibrary(
    snap?: CodexVaultSnapshot,
  ): Promise<CodexGenerateModule | null> {
    if (libraryReady()) return loadCodexGenerateModule();

    setLibraryLoading(true);
    setLibraryError(null);
    try {
      const [generateModule, rsModule] = await Promise.all([
        loadCodexGenerateModule(),
        import("../codex/rs-loader"),
      ]);
      await rsModule.getReedSolomon();
      setLibraryReady(true);

      if (snap?.slotA) {
        try {
          const { pages, parityShards } = await generateModule.estimateCodexPages(
            snap.slotA,
            snap.slotB,
          );
          setEstimatedPages(pages);
          setEstimatedParity(parityShards);
        } catch {
          // Estimation is informational; failure is non-fatal.
          setEstimatedPages(null);
          setEstimatedParity(null);
        }
      }

      return generateModule;
    } catch (err) {
      codexGenerateModulePromise = null;
      setLibraryError(
        `Failed to load Codex library: ${err instanceof Error ? err.message : String(err)}`,
      );
      return null;
    } finally {
      setLibraryLoading(false);
    }
  }

  function codexFilename(): string {
    const d = new Date();
    const y = d.getFullYear();
    const m = String(d.getMonth() + 1).padStart(2, "0");
    const day = String(d.getDate()).padStart(2, "0");
    return `peach-codex-${y}-${m}-${day}.pdf`;
  }

  function downloadPdf(bytes: Uint8Array): void {
    const a = document.createElement("a");
    a.download = codexFilename();
    // Copy into a fresh Uint8Array to ensure a tightly-owned ArrayBuffer
    // (Blob is happier with this than a subarray view).
    const owned = new Uint8Array(bytes);
    const blob = new Blob([owned.buffer], { type: "application/pdf" });
    a.href = URL.createObjectURL(blob);
    setTimeout(() => URL.revokeObjectURL(a.href), 4000);
    document.body.appendChild(a);
    a.click();
    a.remove();
  }

  function explainCodexError(code: string, message: string): string {
    switch (code) {
      case "VAULT_LOCKED":
        return "your vault is locked. unlock and try again.";
      case "VAULT_EMPTY":
        return "your vault is empty — nothing to print yet.";
      case "PRO_REQUIRED":
        return "Codex generation is a Pro feature.";
      case "PDF_GENERATION_FAILED":
      case "AZTEC_GENERATION_FAILED":
        return "could not render the Codex. please try again.";
      case "COMPRESSION_ROUNDTRIP_FAILED":
      case "ERASURE_CODING_VERIFICATION_FAILED":
      case "ERASURE_CODING_CONTENT_MISMATCH":
      case "AZTEC_ROUNDTRIP_FAILED":
      case "AZTEC_CONTENT_MISMATCH":
      case "RECONSTRUCTION_SIMULATION_FAILED":
      case "RECONSTRUCTION_VERIFY_CODE_MISMATCH":
      case "RECONSTRUCTION_FINGERPRINT_MISMATCH":
      case "RECONSTRUCTION_COUNT_MISMATCH":
        return `a self-check failed while building the Codex (${code}). nothing was saved. please try again.`;
      default:
        return message || "Codex generation failed.";
    }
  }

  const onProgress: CodexProgress = (s, current, total, imageUrl) => {
    setProgressStep(s);
    setProgressCurrent(current ?? 0);
    setProgressTotal(total ?? 0);
    if (s === "aztec" && imageUrl) {
      setAztecGallery(prev => {
        if (prev.length >= GALLERY_MAX) {
          URL.revokeObjectURL(prev[0]!);
          return [...prev.slice(1), imageUrl];
        }
        return [...prev, imageUrl];
      });
    }
  };

  async function handleGenerate() {
    const snap = snapshot();
    if (!snap || !allCorrect() || step() === "generating") return;

    setGenError(null);
    setAztecGallery([]);
    setStep("generating");
    setProgressStep("compress");

    try {
      const generateModule = await warmCodexLibrary(snap);
      if (!generateModule) {
        setStep("words");
        return;
      }
      const result = await generateModule.generateCodex(buildDeps(snap), onProgress);
      downloadPdf(result.pdfBytes);
      setCompleted(result.manifest);
      setStep("done");

      try {
        await chrome.storage.local?.set({
          [STORAGE_KEY_LAST_GENERATED]: Date.now(),
        });
      } catch {
        // Bookkeeping; failure is non-fatal.
      }
    } catch (err) {
      const codexErr = err as CodexError;
      const code = (codexErr && (codexErr as { code?: string }).code) ?? "";
      const message =
        err instanceof Error ? err.message : "Codex generation failed.";
      console.error("[Codex] generation failed:", code, message);
      setGenError(explainCodexError(code, message));
      setStep("words");
    }
  }

  function progressLabel(): string {
    switch (progressStep()) {
      case "compress":
        return "compressing vault";
      case "erasure":
        return "building chunks";
      case "aztec": {
        const total = progressTotal();
        const current = progressCurrent();
        if (total > 0) return `generating codes (${current} of ${total})`;
        return "generating codes";
      }
      case "verify":
        return "self-checking";
      case "pdf":
        return "creating PDF";
      default:
        return "preparing";
    }
  }

  function progressPercent(): number {
    const total = progressTotal();
    const current = progressCurrent();
    // Map step to a coarse progress band so the bar advances monotonically
    // even when intra-step progress (aztec N of M) is fine-grained.
    switch (progressStep()) {
      case "compress":
        return 8;
      case "erasure":
        return 18;
      case "aztec":
        if (total <= 0) return 30;
        return 30 + Math.floor((current / total) * 55); // 30 → 85
      case "verify":
        return 90;
      case "pdf":
        return 96;
      default:
        return 4;
    }
  }

  return (
    <div class="peach-overlay-view ov-enter-right" style="display:flex">
      <div class="peach-overlay-header">
        <button
          class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
          onClick={props.onBack}
          aria-label="Back"
          disabled={step() === "generating"}
        >
          <svg width="7" height="12" viewBox="0 0 7 12" fill="none"
            stroke="currentColor" stroke-width="1.1"
            stroke-linecap="round" stroke-linejoin="round">
            <path d="M6 1L1 6L6 11" />
          </svg>
        </button>
        <span class="peach-overlay-title">peach codex</span>
        <div class="peach-overlay-spacer"></div>
      </div>

      <div
        class="peach-settings-body peach-codex-body peach-codex-body--runes"
        classList={{ "peach-codex-body--done": step() === "done" }}
      >
        <RecoveryRuneBackground />

        <Show when={!props.isPro}>
          <p class="peach-hint">redirecting…</p>
        </Show>

        <Show when={props.isPro && loading()}>
          <p class="peach-hint">loading vault…</p>
        </Show>

        <Show when={props.isPro && !loading() && loadError()}>
          <p class="peach-hint peach-hint-error">{loadError()}</p>
        </Show>

        <Show when={props.isPro && !loading() && !loadError() && missingRecoveryWords()}>
          <div class="peach-settings-group peach-codex-intro">
            <p class="peach-codex-blurb">
              the Codex prints your encrypted vault as Aztec codes. before
              you can generate one, set up your 12 recovery words in
              Settings → Security.
            </p>
          </div>
          <button
            class="peach-btn peach-btn--accent peach-btn--md peach-btn--full"
            onClick={props.onOpenSecurity}
          >
            open Security settings
          </button>
        </Show>

        <Show when={props.isPro && !loading() && !loadError() && needsPassword()}>
          <div class="peach-codex-recovery-headline">
            <h2 class="peach-codex-recovery-title">confirm it's you.</h2>
            <p class="peach-codex-recovery-body">
              enter your master password to show your recovery words.
            </p>
          </div>

          <div class="peach-codex-confirm-section">
            <input
              class="peach-codex-confirm-input"
              type="password"
              autocomplete="current-password"
              placeholder="master password"
              value={password()}
              onInput={(e) => setPassword((e.target as HTMLInputElement).value)}
              onKeyDown={(e) => {
                if (e.key === "Enter") void submitPassword();
              }}
            />
            <Show when={passwordError()}>
              <p class="peach-hint peach-hint-error peach-codex-error">
                {passwordError()}
              </p>
            </Show>
          </div>

          <button
            class="peach-btn peach-btn--accent peach-btn--md peach-btn--full peach-codex-generate-btn"
            disabled={!password()}
            onClick={() => void submitPassword()}
          >
            continue
          </button>
        </Show>

        <Show
          when={
            props.isPro &&
            !loading() &&
            !loadError() &&
            !needsPassword() &&
            !missingRecoveryWords() &&
            snapshot()
          }
        >
          <Show when={step() === "words"}>
            <div class="peach-codex-recovery-headline">
              <h2 class="peach-codex-recovery-title">your recovery words.</h2>
              <p class="peach-codex-recovery-body">
                write these down — store separately from your Codex.
              </p>
            </div>

            <ol class="peach-codex-words-grid" start={1}>
              <For each={snapshot()!.recoveryWords ?? []}>
                {(word, i) => (
                  <li class="peach-codex-word-row">
                    <span class="peach-codex-word-numeral">{i() + 1}</span>
                    <span class="peach-codex-word-text">{word}</span>
                  </li>
                )}
              </For>
            </ol>

            <Show when={estimatedPages() !== null}>
              <p class="peach-codex-meta">
                <strong>{estimatedPages()}</strong>{" "}
                {estimatedPages() === 1 ? "page" : "pages"} ·{" "}
                {snapshot()!.entryCount}{" "}
                {snapshot()!.entryCount === 1 ? "entry" : "entries"}
                <Show when={estimatedParity() !== null}>
                  {" "}· {estimatedParity()} redundancy codes
                </Show>
              </p>
            </Show>

            <div class="peach-codex-confirm-section">
              <p class="peach-codex-confirm-label">
                to continue, enter words {confirmPositions().join(", ")}:
              </p>
              <For each={confirmPositions()}>
                {(pos, i) => (
                  <div class="peach-codex-confirm-row">
                    <span class="peach-codex-confirm-pos">word {pos}</span>
                    <input
                      class="peach-codex-confirm-input"
                      type="text"
                      autocomplete="off"
                      autocorrect="off"
                      autocapitalize="none"
                      spellcheck={false}
                      value={confirmInputs()[i()]}
                      onInput={(e) => {
                        const next = [...confirmInputs()] as [
                          string,
                          string,
                          string,
                        ];
                        next[i()] = (e.target as HTMLInputElement).value;
                        setConfirmInputs(next);
                      }}
                      onKeyDown={(e) => {
                        if (e.key === "Enter" && allCorrect())
                          void handleGenerate();
                      }}
                    />
                  </div>
                )}
              </For>
            </div>

            <Show when={genError()}>
              <p class="peach-hint peach-hint-error peach-codex-error">
                {genError()}
              </p>
            </Show>
            <Show when={libraryError()}>
              <p class="peach-hint peach-hint-error peach-codex-error">
                {libraryError()}
              </p>
            </Show>
            <Show when={libraryLoading() && !libraryReady()}>
              <p class="peach-hint peach-codex-meta">
                preparing Codex library…
              </p>
            </Show>

            <button
              class="peach-btn peach-btn--accent peach-btn--md peach-btn--full peach-codex-generate-btn"
              disabled={!allCorrect() || libraryLoading()}
              onClick={() => void handleGenerate()}
            >
              {libraryLoading() && !libraryReady() ? "preparing…" : "generate my Codex"}
            </button>
          </Show>

          <Show when={step() === "generating"}>
            <div class="peach-codex-recovery-headline">
              <h2 class="peach-codex-recovery-title">
                generating your codex…
              </h2>
            </div>

            <div class="peach-codex-progress-group">
              <p class="peach-codex-progress-label">
                <span>{progressLabel()}</span>
                <span class="peach-codex-verify-tag">
                  {snapshot()?.verifyCode}
                </span>
              </p>
              <div class="peach-codex-progress-track">
                <div
                  class="peach-codex-progress-fill"
                  style={`width:${progressPercent()}%`}
                />
              </div>
            </div>

            <Show when={aztecGallery().length > 0}>
              <div class="peach-codex-aztec-gallery">
                <For each={aztecGallery()}>
                  {(url) => (
                    <img
                      class="peach-codex-aztec-tile"
                      src={url}
                      alt=""
                      aria-hidden="true"
                    />
                  )}
                </For>
              </div>
            </Show>
          </Show>

          <Show when={step() === "done"}>
            <div class="peach-codex-recovery-headline">
              <h2 class="peach-codex-recovery-title">
                your codex is downloading.
              </h2>
            </div>

            <Show when={completed()}>
              <p class="peach-codex-meta">
                {completed()!.pageCount}{" "}
                {completed()!.pageCount === 1 ? "page" : "pages"} ·{" "}
                {completed()!.totalChunks} codes · verify code{" "}
                <span class="peach-codex-verify">
                  {completed()!.verifyCode}
                </span>
              </p>
            </Show>

            <div class="peach-codex-done-guidance">
              <div class="peach-codex-done-item">
                <div>
                  <p class="peach-codex-done-item-title">
                    print on a laser printer
                  </p>
                  <p class="peach-codex-done-item-body">
                    laser prints last longer and scan more reliably than
                    inkjet. print at 100% scale — do not fit to page.
                  </p>
                </div>
              </div>

              <div class="peach-codex-done-item">
                <div>
                  <p class="peach-codex-done-item-title">make two copies</p>
                  <p class="peach-codex-done-item-body">
                    store one at home (fireproof box or safe) and one
                    somewhere else (trusted person, safety deposit box).
                    fire and flood can destroy a single copy.
                  </p>
                </div>
              </div>

              <div class="peach-codex-done-item">
                <div>
                  <p class="peach-codex-done-item-title">
                    store separately from recovery words
                  </p>
                  <p class="peach-codex-done-item-body">
                    your 12 recovery words go somewhere different. together
                    they restore your vault without your passphrase. keep
                    them apart.
                  </p>
                </div>
              </div>

              <div class="peach-codex-done-item">
                <div>
                  <p class="peach-codex-done-item-title">also save the PDF</p>
                  <p class="peach-codex-done-item-body">
                    copy the PDF to a USB drive. Peach can import it
                    directly without needing to scan printed codes.
                  </p>
                </div>
              </div>
            </div>

            <p class="peach-codex-done-regenerate">
              regenerate your codex whenever you add many new entries.
            </p>

            <button
              class="peach-btn peach-btn--subtle peach-btn--sm peach-btn--full"
              onClick={() => {
                setCompleted(null);
                setGenError(null);
                setLibraryError(null);
                setConfirmInputs(["", "", ""]);
                setConfirmPositions(pickConfirmationPositions());
                setStep("words");
              }}
            >
              generate another
            </button>
          </Show>
        </Show>
      </div>
    </div>
  );
}