// Signal-conditioned views in this file must use <Show>, never a
// signal-conditioned early return (`if (signal()) return <X/>`). Early
// returns in SolidJS run once at mount and never re-execute when signals
// change — see Projects.md §4.1.
import { createMemo, createSignal, Show } from "solid-js";

import { sendMessage } from "../App";
import { buildPayload } from "../../crypto/peachPayload";
import { encodePeachScript } from "../../crypto/peachScript";
import { RuneCanvas } from "../components/RuneCanvas";
import { encodeMayan, MAX_PAYLOAD_BYTES as MAYAN_MAX_BYTES } from "../../crypto/mayan";
import type { PeachLicenseExport, VaultEntry } from "../../shared/types";

type ExportSubview = "menu" | "peachscript" | "qr" | "csv";

interface ExportProps {
  onBack: () => void;
}

const MIN_BACKUP_PASSWORD = 8;

export function ExportView(props: ExportProps) {
  const [view, setView] = createSignal<ExportSubview>("menu");
  return (
    <div class="peach-overlay-view ov-enter-right" style="display:flex">
      <Show when={view() === "menu"}>
        <ExportMenu onBack={props.onBack} onPick={(v) => setView(v)} />
      </Show>
      <Show when={view() === "peachscript"}>
        <PeachScriptExport onBack={() => setView("menu")} />
      </Show>
      <Show when={view() === "qr"}>
        <QRExport onBack={() => setView("menu")} />
      </Show>
      <Show when={view() === "csv"}>
        <CSVExport onBack={() => setView("menu")} />
      </Show>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Menu
// ---------------------------------------------------------------------------

function ExportMenu(props: { onBack: () => void; onPick: (v: ExportSubview) => void }) {
  return (
    <>
      <OverlayHeader title="export" onBack={props.onBack} />
      <div class="peach-settings-body peach-export-menu">
        <div class="peach-settings-group peach-export-card peach-export-card--primary">
          <p class="peach-settings-label">peachscript</p>
          <p class="peach-export-card-copy">
            Your vault as a string of Peach symbols you can paste into Peach
            on another device. Designed for Peach-to-Peach transfer.
          </p>
          <button
            class="peach-btn peach-btn--subtle peach-btn--sm"
            onClick={() => props.onPick("peachscript")}
          >
            Create PeachScript →
          </button>
        </div>

        <div class="peach-settings-group peach-export-card">
          <p class="peach-settings-label">print backup</p>
          <p class="peach-export-card-copy">
            Save a Mayan code you can print and store. Scan it with Peach on any
            device to restore.
          </p>
          <button
            class="peach-btn peach-btn--subtle peach-btn--sm"
            onClick={() => props.onPick("qr")}
          >
            Save Mayan code →
          </button>
        </div>

        <div class="peach-settings-group peach-export-card">
          <p class="peach-settings-label">CSV (leaving peach)</p>
          <p class="peach-export-card-copy">
            Plain-text export for moving into another password manager. Anyone
            with the file can read your passwords.
          </p>
          <button
            class="peach-btn peach-btn--ghost peach-btn--sm"
            onClick={() => props.onPick("csv")}
          >
            Export as CSV →
          </button>
        </div>
      </div>
    </>
  );
}

// ---------------------------------------------------------------------------
// PeachScript
// ---------------------------------------------------------------------------

function PeachScriptExport(props: { onBack: () => void }) {
  const [pass, setPass] = createSignal("");
  const [confirm, setConfirm] = createSignal("");
  const [working, setWorking] = createSignal(false);
  const [script, setScript] = createSignal<string | null>(null);
  const [error, setError] = createSignal<string | null>(null);
  const [entryCount, setEntryCount] = createSignal(0);
  const [stats, setStats] = createSignal<{
    cards: number;
    passkeys: number;
    notes: number;
    logins: number;
  }>({ cards: 0, passkeys: 0, notes: 0, logins: 0 });
  const [copied, setCopied] = createSignal(false);

  const passReady = createMemo(
    () => pass().length >= MIN_BACKUP_PASSWORD && pass() === confirm()
  );

  async function handleEncode() {
    setError(null);
    setScript(null);
    setCopied(false);
    if (!passReady()) {
      setError("Backup passwords don't match or are too short.");
      return;
    }
    setWorking(true);
    try {
      const env = await assembleEnvelope(pass());
      setEntryCount(env.entryCount);
      setStats(env.stats);
      setScript(encodePeachScript(env.bytes));
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setWorking(false);
    }
  }

  async function handleCopy() {
    const s = script();
    if (!s) return;
    try {
      await navigator.clipboard.writeText(s);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Couldn't copy to clipboard.");
    }
  }

  function handleDownload() {
    const s = script();
    if (!s) return;
    // .peach file = the same PeachScript text, in a single file. The PUA
    // codepoints render as runes only when paired with PeachScript-Regular.otf;
    // outside Peach the file looks like opaque bytes, which is the point.
    // Filename per the verification spec: peach-backup-YYYY-MM-DD.peach,
    // hyphens only, lowercase extension, date-only (not time-of-day).
    const blob = new Blob([s], { type: "application/x-peach;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const date = new Date().toISOString().slice(0, 10);
    const a = document.createElement("a");
    a.href = url;
    a.download = `peach-backup-${date}.peach`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    setTimeout(() => URL.revokeObjectURL(url), 5000);
  }

  return (
    <>
      <OverlayHeader title="peachscript" onBack={props.onBack} />
      <div class="peach-settings-body">
        <Show
          when={script()}
          fallback={
            <div class="peach-settings-group peach-export-card peach-export-card--primary peach-export-pass-group">
              <p class="peach-settings-label">backup password</p>
              <p class="peach-export-card-copy">
                Choose a password to lock this PeachScript. You'll need it
                to restore on another device.
              </p>
              <div class="peach-settings-stack peach-export-password-stack">
                <input
                  ref={(el) => queueMicrotask(() => el.focus())}
                  class="peach-settings-input"
                  type="password"
                  placeholder={`backup password (min ${MIN_BACKUP_PASSWORD} chars)`}
                  value={pass()}
                  onInput={(e) => setPass((e.target as HTMLInputElement).value)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter" && passReady() && !working()) {
                      e.preventDefault();
                      void handleEncode();
                    }
                  }}
                />
                <input
                  class="peach-settings-input"
                  type="password"
                  placeholder="confirm backup password"
                  value={confirm()}
                  onInput={(e) => setConfirm((e.target as HTMLInputElement).value)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter" && passReady() && !working()) {
                      e.preventDefault();
                      void handleEncode();
                    }
                  }}
                />
                <Show when={confirm().length > 0 && pass() !== confirm()}>
                  <p class="peach-export-note" style="color:var(--peach-t2)">
                    Passwords don't match
                  </p>
                </Show>
                <Show when={pass().length > 0 && pass().length < MIN_BACKUP_PASSWORD}>
                  <p class="peach-export-note" style="color:var(--peach-t2)">
                    At least {MIN_BACKUP_PASSWORD} characters
                  </p>
                </Show>
              </div>
              <button
                class="peach-btn peach-btn--subtle peach-btn--sm"
                onClick={() => void handleEncode()}
                disabled={working() || !passReady()}
              >
                {working() ? "encoding…" : "Generate PeachScript"}
              </button>
            </div>
          }
        >
          <div class="peach-settings-group peach-export-card peach-export-card--primary peach-export-result-group">
            <p class="peach-settings-label">peachscript</p>
            <RuneCanvas runeString={script() ?? ""} width={288} height={240} />
            <p class="peach-export-card-copy" style="margin:0 0 8px">
              {entryCount()} entr{entryCount() === 1 ? "y" : "ies"}
              {stats().cards > 0 ? ` · ${stats().cards} card${stats().cards === 1 ? "" : "s"}` : ""}
              {stats().passkeys > 0 ? ` · ${stats().passkeys} passkey${stats().passkeys === 1 ? "" : "s"}` : ""}
              {stats().notes > 0 ? ` · ${stats().notes} note${stats().notes === 1 ? "" : "s"}` : ""}
            </p>
            <div style="display:flex;gap:8px;">
              <button
                class="peach-btn peach-btn--subtle peach-btn--sm"
                style="flex:1;"
                onClick={() => void handleCopy()}
              >
                {copied() ? "copied ✓" : "Copy"}
              </button>
              <button
                class="peach-btn peach-btn--subtle peach-btn--sm"
                style="flex:1;"
                onClick={handleDownload}
              >
                Download .peach
              </button>
            </div>
            <p class="peach-export-card-copy" style="margin-top:8px">
              Paste the script — or import the .peach file — into Peach on
              your other device to restore your vault. Won't work anywhere else.
            </p>
          </div>
        </Show>
        <Show when={error()}>
          <div class="peach-settings-group">
            <div class="peach-restore-error">{error()}</div>
          </div>
        </Show>
      </div>
    </>
  );
}

// ---------------------------------------------------------------------------
// QR
// ---------------------------------------------------------------------------

function QRExport(props: { onBack: () => void }) {
  const [pass, setPass] = createSignal("");
  const [confirm, setConfirm] = createSignal("");
  const [working, setWorking] = createSignal(false);
  const [pngUrl, setPngUrl] = createSignal<string | null>(null);
  const [error, setError] = createSignal<string | null>(null);
  const [entryCount, setEntryCount] = createSignal(0);
  let canvasHost: HTMLDivElement | undefined;

  const passReady = createMemo(
    () => pass().length >= MIN_BACKUP_PASSWORD && pass() === confirm()
  );

  async function handleEncode() {
    setError(null);
    setPngUrl(null);
    if (!passReady()) {
      setError("Backup passwords don't match or are too short.");
      return;
    }
    setWorking(true);
    try {
      const env = await assembleEnvelope(pass());
      if (env.bytes.length > MAYAN_MAX_BYTES) {
        setError(
          `This vault is too large for a Mayan code backup (${env.bytes.length} bytes). Use PeachScript instead.`,
        );
        return;
      }
      setEntryCount(env.entryCount);
      // On-screen render at 3px/module; download render at 4px/module.
      const screen = encodeMayan(env.bytes, 3);
      const print = encodeMayan(env.bytes, 4);
      if (screen.paperSize === "A3") {
        setError(
          `Mayan symbol is ${screen.symbolSize}×${screen.symbolSize} modules — print on A3 paper for best results.`,
        );
      } else if (screen.paperSize === "A3-required") {
        setError(
          `Mayan symbol is ${screen.symbolSize}×${screen.symbolSize} modules — A3 paper required to print at full resolution. Save as PNG for digital backup.`,
        );
      }
      if (canvasHost) {
        canvasHost.innerHTML = "";
        canvasHost.appendChild(screen.canvas);
      }
      setPngUrl(print.canvas.toDataURL("image/png"));
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setWorking(false);
    }
  }

  function handleSave() {
    const url = pngUrl();
    if (!url) return;
    const a = document.createElement("a");
    a.href = url;
    a.download = `peach-mayan-backup-${dateStamp()}.png`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }

  return (
    <>
      <OverlayHeader title="print backup" onBack={props.onBack} />
      <div class="peach-settings-body">
        <Show
          when={pngUrl()}
          fallback={
            <div class="peach-settings-group peach-export-card peach-export-card--primary">
              <p class="peach-settings-label">backup password</p>
              <p class="peach-export-card-copy">
                Set a password to lock this Mayan code backup. You'll need it
                to restore — without it the printed code is unreadable.
              </p>
              <div class="peach-settings-stack peach-export-password-stack">
                <input
                  ref={(el) => queueMicrotask(() => el.focus())}
                  class="peach-settings-input"
                  type="password"
                  placeholder={`backup password (min ${MIN_BACKUP_PASSWORD} chars)`}
                  value={pass()}
                  onInput={(e) => setPass((e.target as HTMLInputElement).value)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter" && passReady() && !working()) {
                      e.preventDefault();
                      void handleEncode();
                    }
                  }}
                />
                <input
                  class="peach-settings-input"
                  type="password"
                  placeholder="confirm backup password"
                  value={confirm()}
                  onInput={(e) => setConfirm((e.target as HTMLInputElement).value)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter" && passReady() && !working()) {
                      e.preventDefault();
                      void handleEncode();
                    }
                  }}
                />
              </div>
              <button
                class="peach-btn peach-btn--subtle peach-btn--sm"
                onClick={() => void handleEncode()}
                disabled={working() || !passReady()}
              >
                {working() ? "encoding…" : "Generate Mayan code"}
              </button>
            </div>
          }
        >
          <div class="peach-settings-group peach-export-card peach-export-card--primary">
            <div class="peach-qr-canvas-wrap" ref={canvasHost} />
            <p class="peach-export-card-copy" style="text-align:center">
              {entryCount()} entr{entryCount() === 1 ? "y" : "ies"} · {monthYear()}
            </p>
            <button
              class="peach-btn peach-btn--subtle peach-btn--sm"
              onClick={handleSave}
            >
              Save PNG
            </button>
            <p class="peach-export-card-copy" style="margin-top:8px">
              Print this and keep it somewhere safe. Scan it with Peach to
              restore your vault on any device.
            </p>
          </div>
        </Show>
        <Show when={error()}>
          <div class="peach-settings-group">
            <div class="peach-restore-error">{error()}</div>
          </div>
        </Show>
      </div>
    </>
  );
}

// ---------------------------------------------------------------------------
// CSV — non-skippable warning, every time, by design (spec §5.2).
// ---------------------------------------------------------------------------

function CSVExport(props: { onBack: () => void }) {
  const [acknowledged, setAcknowledged] = createSignal(false);
  const [working, setWorking] = createSignal(false);
  const [error, setError] = createSignal<string | null>(null);
  const [done, setDone] = createSignal<string | null>(null);

  async function handleExport() {
    setError(null);
    setDone(null);
    setWorking(true);
    try {
      const res = await sendMessage({ type: "GET_ENTRIES" });
      const entries = (res as { ok: boolean; data?: VaultEntry[] }).data ?? [];
      // Passkeys are device-bound credentials and cannot be moved between
      // devices via export. Strip the passkey sub-object out of any login
      // entry that carries one; the entry itself still exports if it has a
      // password too. Passkey-only entries (no password) are skipped entirely.
      const active = entries
        .filter((e) => e.deletedAt === undefined)
        .filter((e) => !(e.passkey && !e.password))
        .map((e) => (e.passkey ? { ...e, passkey: undefined } : e));
      const excludedPasskeys = entries.filter(
        (e) => e.deletedAt === undefined && e.passkey
      ).length;

      if (active.length === 0) {
        setError("Your vault has no entries to export.");
        return;
      }

      const csv = buildCsv(active);
      const filename = `peach-export-${dateStamp()}.csv`;
      downloadBlob(csv, "text/csv", filename);
      const suffix = excludedPasskeys > 0
        ? ` ${excludedPasskeys} passkey${excludedPasskeys === 1 ? "" : "s"} excluded — passkeys can't be represented in CSV.`
        : "";
      setDone(
        `Exported ${active.length} entr${active.length === 1 ? "y" : "ies"} to ${filename}.${suffix}`
      );
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setWorking(false);
    }
  }

  return (
    <>
      <OverlayHeader title="export as CSV" onBack={props.onBack} />
      <div class="peach-settings-body">
        <div class="peach-settings-group peach-export-card">
          <div class="peach-csv-warning">
            This export is unencrypted. Anyone who gets this file can read
            your passwords. Only use this to move to another password
            manager — delete it once the import is done.
          </div>
          <Show when={!acknowledged()}>
            <button
              class="peach-btn peach-btn--ghost peach-btn--sm"
              onClick={() => setAcknowledged(true)}
            >
              I understand — continue
            </button>
          </Show>
          <Show when={acknowledged()}>
            <button
              class="peach-btn peach-btn--subtle peach-btn--sm"
              onClick={() => void handleExport()}
              disabled={working()}
            >
              {working() ? "exporting…" : "Download CSV"}
            </button>
          </Show>
        </div>
        <Show when={error()}>
          <div class="peach-settings-group">
            <div class="peach-restore-error">{error()}</div>
          </div>
        </Show>
        <Show when={done()}>
          <div class="peach-settings-group">
            <div class="peach-export-success">
              <span class="peach-export-success-check">✓</span>
              <span>{done()}</span>
            </div>
          </div>
        </Show>
      </div>
    </>
  );
}

// ---------------------------------------------------------------------------
// Shared helpers
// ---------------------------------------------------------------------------

function OverlayHeader(props: { title: string; onBack: () => void }) {
  return (
    <div class="peach-overlay-header">
      <button
        class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
        onClick={props.onBack}
        aria-label="Back"
      >
        <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">{props.title}</span>
      <div class="peach-overlay-spacer"></div>
    </div>
  );
}

interface AssembledEnvelope {
  bytes: Uint8Array;
  entryCount: number;
  stats: { cards: number; passkeys: number; notes: number; logins: number };
}

async function assembleEnvelope(passphrase: string): Promise<AssembledEnvelope> {
  const entriesRes = await sendMessage({ type: "GET_ENTRIES" });
  const entries = (entriesRes as { ok: boolean; data?: VaultEntry[] }).data ?? [];

  const settingsRes = await sendMessage({ type: "GET_SETTINGS" });
  const settings = (settingsRes as { ok: boolean; data?: Record<string, unknown> }).data ?? {};

  let license: PeachLicenseExport | undefined;
  try {
    const info = await sendMessage({ type: "GET_LICENSE" });
    const data = (info as { ok: boolean; data?: { valid?: boolean; plan?: string; issued?: string } }).data;
    if (data?.valid && data.plan === "pro") {
      const keyRes = await sendMessage({ type: "GET_LICENSE_KEY" });
      const keyStr = (keyRes as { ok: boolean; data?: string }).data;
      if (keyStr) {
        license = {
          key: keyStr,
          ...(data.issued ? { activatedAt: new Date(data.issued).getTime() } : {}),
        };
      }
    }
  } catch {
    // License absent — proceed without it.
  }

  const stats = countTypes(entries);
  const bytes = await buildPayload({
    entries,
    settings: settings as Parameters<typeof buildPayload>[0]["settings"],
    license,
    passphrase,
  });
  return { bytes, entryCount: entries.length, stats };
}

function countTypes(entries: VaultEntry[]): {
  cards: number;
  passkeys: number;
  notes: number;
  logins: number;
} {
  let cards = 0;
  let passkeys = 0;
  let notes = 0;
  let logins = 0;
  for (const e of entries) {
    if (e.deletedAt) continue;
    if (e.passkey) {
      passkeys++;
      // A login that ALSO has a password counts toward the login total too —
      // exporting it preserves the password (the passkey gets stripped).
      if (e.type === "login" && e.password) logins++;
      continue;
    }
    if (e.type === "card") cards++;
    else if (e.type === "note") notes++;
    else logins++;
  }
  return { cards, passkeys, notes, logins };
}

function buildCsv(entries: VaultEntry[]): string {
  const headers = ["name", "url", "username", "password", "notes", "type", "tags", "totp"];
  const rows = entries.map((e) => {
    const type = e.type === "note" ? "note" : e.type === "card" ? "card" : "login";
    const username = e.type === "card" ? e.cardholderName ?? "" : e.username ?? "";
    const password = e.type === "card" ? e.cardNumber ?? "" : e.password ?? "";
    return [
      e.title,
      e.url ?? "",
      username,
      password,
      e.notes ?? "",
      type,
      Array.isArray(e.tags) ? e.tags.join("|") : "",
      e.totp ?? "",
    ]
      .map((v) =>
        `"${String(v).replace(/\r?\n/g, " ").replace(/"/g, '""')}"`
      )
      .join(",");
  });
  return [headers.join(","), ...rows].join("\n");
}

function dateStamp(): string {
  return new Date().toISOString().split("T")[0];
}

function monthYear(): string {
  const d = new Date();
  const months = [
    "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December",
  ];
  return `${months[d.getMonth()]} ${d.getFullYear()}`;
}

function downloadBlob(content: string, mimeType: string, filename: string): void {
  const url = URL.createObjectURL(new Blob([content], { type: mimeType }));
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}