import { createMemo, createSignal, Show } from "solid-js";
import { sendMessage } from "../App";
import type { VaultEntry } from "../../shared/types";
import { exportEntriesToPeachJson } from "../../shared/backup";
import { CJKExportView } from "./CJKExport";

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

const MIN_EXPORT_PASSWORD = 12;

export function ExportView(props: ExportProps) {
  const [showCjkExport, setShowCjkExport] = createSignal(false);
  return (
    <Show when={showCjkExport()} fallback={<MainExportView onBack={props.onBack} onOpenCjk={() => setShowCjkExport(true)} />}>
      <CJKExportView
        onBack={() => setShowCjkExport(false)}
        onRequiresUnlock={props.onRequiresUnlock}
      />
    </Show>
  );
}

function MainExportView(props: { onBack: () => void; onOpenCjk: () => void }) {
  const [exportPassword, setExportPassword] = createSignal("");
  const [exporting, setExporting] = createSignal(false);
  const [result, setResult] = createSignal<string | null>(null);
  const [error, setError] = createSignal<string | null>(null);
  const [showCsvWarning, setShowCsvWarning] = createSignal(false);

  const passwordIsValid = createMemo(
    () => exportPassword().length >= MIN_EXPORT_PASSWORD
  );

  async function handleEncryptedExport() {
    setError(null);
    setResult(null);

    if (exportPassword().length < MIN_EXPORT_PASSWORD) {
      setError(`Export password must be at least ${MIN_EXPORT_PASSWORD} characters.`);
      return;
    }

    setExporting(true);

    const response = await sendMessage({ type: "GET_ENTRIES" });
    const entries = (response as { ok: boolean; data?: VaultEntry[] }).data ?? [];
    const active = entries.filter((e) => !e.deletedAt);

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

    try {
      const blob = await exportEntriesToPeachJson(active, exportPassword());
      const filename = `peach-backup-${dateStamp()}.json`;
      downloadBlob(
        JSON.stringify(blob, null, 2),
        "application/json",
        filename
      );
      setResult(
        `Exported ${active.length} entr${active.length === 1 ? "y" : "ies"}. Filename: ${filename}. Store this file and your export password somewhere safe — neither can be recovered.`
      );
      setExportPassword("");
    } catch (err) {
      setError(err instanceof Error ? err.message : "Export failed.");
    } finally {
      setExporting(false);
    }
  }

  async function handleCSVExport() {
    setShowCsvWarning(false);
    setExporting(true);
    setResult(null);
    setError(null);

    const response = await sendMessage({ type: "GET_ENTRIES" });
    const entries = (response as { ok: boolean; data?: VaultEntry[] }).data ?? [];
    const active = entries.filter((e) => e.deletedAt === undefined && e.type !== "passkey");
    const excludedPasskeys = entries.filter((e) => e.deletedAt === undefined && e.type === "passkey").length;

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

    const headers = ["type", "name", "url", "username", "password", "totp", "tags", "notes"];
    const rows = active.map((e) => {
      const type = e.type === "note" ? "note" : "login";
      return [
        type,
        e.title,
        e.url ?? "",
        e.username ?? "",
        e.password ?? "",
        e.totp ?? "",
        Array.isArray(e.tags) ? e.tags.join("|") : "",
        e.notes ?? "",
      ]
        // Flatten embedded newlines before RFC 4180 quote escaping so the
        // CSV stays single-line-per-row for tools that do not handle quoted
        // multi-line cells.
        .map((v) =>
          `"${String(v).replace(/\r?\n/g, " ").replace(/"/g, '""')}"`
        )
        .join(",");
    });
    const csv = [headers.join(","), ...rows].join("\n");

    const filename = `peach-passwords-${dateStamp()}.csv`;
    try {
      downloadBlob(csv, "text/csv", filename);
      const suffix = excludedPasskeys > 0
        ? ` ${excludedPasskeys} passkey${excludedPasskeys === 1 ? "" : "s"} excluded from plaintext export.`
        : "";
      setResult(
        `Exported ${active.length} entr${active.length === 1 ? "y" : "ies"} as CSV. Filename: ${filename}.${suffix} Store this file somewhere safe — the passwords inside are in plain text.`
      );
    } catch (err) {
      setError(err instanceof Error ? err.message : "Export failed.");
    } finally {
      setExporting(false);
    }
  }

  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"
        >
          <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">export</span>
        <div class="peach-overlay-spacer"></div>
      </div>

      <div class="peach-settings-body">

        {/* ── Backup phrase ── */}
        <div class="peach-settings-group peach-export-card peach-export-card--primary">
          <p class="peach-settings-label">backup phrase</p>
          <p class="peach-export-card-copy">
            Your vault as a string of characters you can copy anywhere — no file needed. Paste it into Peach on any device to restore.
          </p>
          <button
            class="peach-btn peach-btn--subtle peach-btn--sm"
            onClick={props.onOpenCjk}
          >
            Create backup phrase
          </button>
        </div>

        {/* ── Encrypted file ── */}
        <div class="peach-settings-group peach-export-card">
          <p class="peach-settings-label">encrypted file</p>
          <p class="peach-export-card-copy">
            Download a file backup. Set a password to lock it — you'll need that password to restore.
          </p>
          <div class="peach-settings-stack peach-export-password-stack">
            <input
              class="peach-settings-input"
              type="password"
              placeholder={`backup password (min ${MIN_EXPORT_PASSWORD} chars)`}
              value={exportPassword()}
              onInput={(e) => setExportPassword((e.target as HTMLInputElement).value)}
            />
            <Show when={exportPassword().length > 0 && exportPassword().length < MIN_EXPORT_PASSWORD}>
              <p class="peach-export-note" style="color:var(--peach-t2)">
                At least {MIN_EXPORT_PASSWORD} characters
              </p>
            </Show>
          </div>
          <button
            class="peach-btn peach-btn--subtle peach-btn--sm"
            onClick={() => void handleEncryptedExport()}
            disabled={exporting() || !passwordIsValid()}
          >
            {exporting() ? "saving…" : "Download backup file"}
          </button>
        </div>

        {/* ── CSV ── */}
        <div class="peach-settings-group peach-export-card">
          <p class="peach-settings-label">CSV for other apps</p>
          <p class="peach-export-card-copy">
            Plain-text export for importing into another password manager. Passwords will be readable — delete the file once you're done.
          </p>
          <Show
            when={!showCsvWarning()}
            fallback={
              <div class="peach-settings-actions">
                <button
                  class="peach-btn peach-btn--ghost peach-btn--sm"
                  onClick={() => void handleCSVExport()}
                  disabled={exporting()}
                >
                  {exporting() ? "saving…" : "Download CSV"}
                </button>
                <button
                  class="peach-btn peach-btn--ghost peach-btn--sm"
                  onClick={() => setShowCsvWarning(false)}
                >
                  cancel
                </button>
              </div>
            }
          >
            <button
              class="peach-btn peach-btn--ghost peach-btn--sm"
              onClick={() => setShowCsvWarning(true)}
            >
              Export as CSV
            </button>
          </Show>
        </div>

        <Show when={error()}>
          <div class="peach-settings-group">
            <div class="peach-restore-error">{error()}</div>
          </div>
        </Show>

        <Show when={result()}>
          <div class="peach-settings-group">
            <div class="peach-export-success">
              <span class="peach-export-success-check">✓</span>
              <span>{result()}</span>
            </div>
          </div>
        </Show>
      </div>
    </div>
  );
}

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

function downloadBlob(content: string, mimeType: string, filename: string): void {
  try {
    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);
  } catch (err) {
    console.error("[Peach] Download failed:", err);
    throw err;
  }
}