import { createSignal, createMemo, createEffect, For, Show, onMount, onCleanup } from "solid-js";
import type { VaultEntry } from "../../shared/types";
import { sendMessage } from "../App";
import { parseOtpauthURI } from "../../crypto/totp";
import { GeneratorDrawer } from "../components/GeneratorDrawer";

interface AddProps {
  entry?: VaultEntry;
  entries?: VaultEntry[];
  autoOpenGenerator?: boolean;
  onBack: () => void;
  onSave: (entry?: VaultEntry) => void | Promise<void>;
}

export function AddView(props: AddProps) {
  const [title, setTitle] = createSignal(props.entry?.title ?? "");
  const [username, setUsername] = createSignal(props.entry?.username ?? "");
  const [password, setPassword] = createSignal(props.entry?.password ?? "");
  const [url, setUrl] = createSignal(props.entry?.url ?? "");
  const [totp, setTotp] = createSignal(props.entry?.totp ?? "");
  const [notes, setNotes] = createSignal(props.entry?.notes ?? "");
  const [saving, setSaving] = createSignal(false);
  const [error, setError] = createSignal("");
  const [passwordStrength, setPasswordStrength] = createSignal<number | null>(null);
  const [zxcvbnFn, setZxcvbnFn] = createSignal<((pwd: string) => { score: number }) | null>(null);
  const [tags, setTags] = createSignal<string[]>(props.entry?.tags ?? []);
  const [tagInput, setTagInput] = createSignal("");
  const [showTagSuggestions, setShowTagSuggestions] = createSignal(false);
  const [showGenerator, setShowGenerator] = createSignal(props.autoOpenGenerator ?? false);
  const [showPassword, setShowPassword] = createSignal(false);
  const [showTotp, setShowTotp] = createSignal(!!(props.entry?.totp));
  const [showNotes, setShowNotes] = createSignal(!!(props.entry?.notes));
  const [email, setEmail] = createSignal((props.entry as VaultEntry & { email?: string })?.email ?? "");
  const [activeIdentityField, setActiveIdentityField] = createSignal<"username" | "email" | null>(null);
  const [currentTabUrl, setCurrentTabUrl] = createSignal("");

  // Mutable refs for keyboard navigation between inputs and suggestion lists.
  // Not signals — focus state doesn't need to be reactive.
  let usernameInputEl: HTMLInputElement | undefined;
  let emailInputEl: HTMLInputElement | undefined;
  let usernameSuggestEl: HTMLDivElement | undefined;
  let emailSuggestEl: HTMLDivElement | undefined;
  let suppressIdentityOpen = false;

  function openIdentityField(field: "username" | "email") {
    if (suppressIdentityOpen) { suppressIdentityOpen = false; return; }
    setActiveIdentityField(field);
  }

  const allIdentities = createMemo(() => {
    const emailMap = new Map<string, number>();
    const usernameMap = new Map<string, number>();
    for (const entry of props.entries ?? []) {
      const uname = entry.username?.trim() ?? "";
      const em = entry.email?.trim() ?? "";
      if (uname) {
        if (uname.includes("@")) emailMap.set(uname, (emailMap.get(uname) ?? 0) + 1);
        else usernameMap.set(uname, (usernameMap.get(uname) ?? 0) + 1);
      }
      if (em) emailMap.set(em, (emailMap.get(em) ?? 0) + 1);
    }
    const result: Array<{ value: string; count: number; type: "email" | "username" }> = [];
    const seen = new Set<string>();
    for (const v of new Set([...emailMap.keys(), ...usernameMap.keys()])) {
      if (seen.has(v)) continue;
      seen.add(v);
      const ec = emailMap.get(v) ?? 0;
      const uc = usernameMap.get(v) ?? 0;
      result.push({ value: v, count: Math.max(ec, uc), type: ec >= uc ? "email" : "username" });
    }
    return result.sort((a, b) => b.count - a.count);
  });

  const identitySuggestions = createMemo(() => {
    const field = activeIdentityField();
    if (!field) return [];
    const input = (field === "username" ? username() : email()).toLowerCase();
    return allIdentities()
      .filter(s => s.type === field && (!input || s.value.toLowerCase().includes(input)))
      .slice(0, 8);
  });

  const isCardEntry = () => props.entry?.type === "card";
  const [selectedType, setSelectedType] = createSignal<"login" | "card">(
    isCardEntry() ? "card" : "login"
  );

  // Card signals
  const [cardNickname, setCardNickname] = createSignal(props.entry?.cardNickname ?? "");
  const [cardholderName, setCardholderName] = createSignal(props.entry?.cardholderName ?? "");
  const [cardNumber, setCardNumber] = createSignal(props.entry?.cardNumber ?? "");
  const [expMonth, setExpMonth] = createSignal(props.entry?.expMonth ?? "");
  const [expYear, setExpYear] = createSignal(props.entry?.expYear ?? "");
  const [cvc, setCvc] = createSignal(props.entry?.cvc ?? "");
  const [showCvc, setShowCvc] = createSignal(false);
  const [cardNumberFocused, setCardNumberFocused] = createSignal(false);
  function getCardNetwork(num: string): string {
    const n = num.replace(/\s/g, '');
    if (/^4/.test(n)) return 'Visa';
    if (/^5[1-5]|^2[2-7]/.test(n)) return 'Mastercard';
    if (/^3[47]/.test(n)) return 'Amex';
    if (/^6(?:011|5)/.test(n)) return 'Discover';
    return '';
  }

  function formatCardNumberDisplay(raw: string, focused: boolean): string {
    const n = raw.replace(/\s/g, '');
    if (!focused && n.length >= 4) return '•••• •••• •••• ' + n.slice(-4);
    if (/^3[47]/.test(n)) return n.replace(/(\d{4})(\d{1,6})?(\d{1,5})?/, (_, a, b, c) => [a, b, c].filter(Boolean).join(' '));
    return n.replace(/(\d{4})(?=\d)/g, '$1 ').trim();
  }

  const canSave = () => {
    if (!title().trim()) return false;
    if (selectedType() === "card" && (!cardholderName().trim() || !cardNumber().trim())) return false;
    return true;
  };

  const allTags = createMemo(() => {
    const tagSet = new Set<string>();
    for (const entry of props.entries ?? []) {
      for (const tag of entry.tags ?? []) tagSet.add(tag);
    }
    return Array.from(tagSet).sort();
  });

  const tagSuggestions = createMemo(() => {
    const input = tagInput().toLowerCase().trim();
    if (!input) return [];
    return allTags().filter(t =>
      t.toLowerCase().includes(input) && !tags().includes(t)
    ).slice(0, 5);
  });

  function addTag(tag: string) {
    const n = tag.toLowerCase().trim();
    if (!n || n.length > 32 || tags().includes(n) || tags().length >= 10) return;
    setTags([...tags(), n]);
  }

  function removeTag(tag: string) {
    setTags(tags().filter(t => t !== tag));
  }

  function handleTagKeyDown(e: KeyboardEvent) {
    if (e.key === "Enter" || e.key === ",") {
      e.preventDefault();
      if (tagInput()) { addTag(tagInput()); setTagInput(""); setShowTagSuggestions(false); }
    } else if (e.key === "Backspace" && !tagInput() && tags().length > 0) {
      removeTag(tags()[tags().length - 1]);
    }
  }

  // Strength check
  createEffect(async () => {
    const pwd = password();
    if (pwd.length < 4) { setPasswordStrength(null); return; }
    // zxcvbn does full dictionary + spatial + repeat analysis across every
    // character, so a 100+ char password blocks the main thread for hundreds
    // of ms per slider tick. Any 50+ char password is trivially score 4 —
    // skip the analysis and keep the slider responsive.
    if (pwd.length >= 50) { setPasswordStrength(4); return; }
    try {
      if (!zxcvbnFn()) {
        // Replaces the unmaintained `zxcvbn` package (LV-8; see Lock.tsx).
        const [{ zxcvbn, zxcvbnOptions }, common, en] = await Promise.all([
          import("@zxcvbn-ts/core"),
          import("@zxcvbn-ts/language-common"),
          import("@zxcvbn-ts/language-en"),
        ]);
        zxcvbnOptions.setOptions({
          translations: en.translations,
          graphs: common.adjacencyGraphs,
          dictionary: { ...common.dictionary, ...en.dictionary },
        });
        setZxcvbnFn(() => (pwd: string) => zxcvbn(pwd));
      }
      const fn = zxcvbnFn();
      if (fn) setPasswordStrength(fn(pwd).score);
    } catch {
      setPasswordStrength(pwd.length >= 16 ? 3 : pwd.length >= 12 ? 2 : 1);
    }
  });

  onMount(() => {
    const el = document.querySelector(".peach-new-title-input") as HTMLInputElement | null;
    if (el) el.focus();
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      const tabUrl = tabs[0]?.url;
      if (tabUrl && tabUrl.startsWith("http")) setCurrentTabUrl(tabUrl);
    });
    // Keep the vault alive while the form is open — the auto-lock alarm fires on
    // a timer and doesn't know the user is actively filling in a new entry.
    const keepAlive = setInterval(() => {
      chrome.runtime.sendMessage({ type: "TOUCH_AUTO_LOCK" }).catch(() => {});
    }, 30_000);
    onCleanup(() => clearInterval(keepAlive));
  });

  function getNormalizedTotp(): string | undefined {
    const value = totp().trim();
    if (!value) return undefined;
    if (value.startsWith("otpauth://")) {
      const parsed = parseOtpauthURI(value);
      return parsed?.secret ?? value;
    }
    return value;
  }

  async function handleSave() {
    if (!canSave()) {
      setError(
        selectedType() === "card"
          ? "cardholder name and card number are required"
          : "title is required"
      );
      return;
    }

    setSaving(true);
    setError("");

    const payload: Record<string, unknown> = {
      type: selectedType(),
      title: title().trim(),
      notes: notes().trim() || undefined,
      tags: tags().length > 0 ? tags() : undefined,
    };

    if (selectedType() === "login") {
      payload.username = username().trim();
      payload.email = email().trim() || undefined;
      payload.password = password();
      payload.url = url().trim();
      payload.totp = getNormalizedTotp();
    }

    if (selectedType() === "card") {
      const raw = cardNumber().replace(/\s/g, '');
      payload.cardholderName = cardholderName().trim();
      payload.cardNumber = raw;
      payload.expMonth = expMonth().trim();
      payload.expYear = expYear().trim();
      payload.cvc = cvc().trim();
      payload.cardNickname = cardNickname().trim() || undefined;
      const n = raw;
      payload.network = /^4/.test(n) ? 'visa' : /^5[1-5]|^2[2-7]/.test(n) ? 'mastercard' : /^3[47]/.test(n) ? 'amex' : /^6(?:011|5)/.test(n) ? 'discover' : 'unknown';
      payload.last4 = raw.slice(-4);
    }

    if (props.entry) {
      const res = await sendMessage({ type: "UPDATE_ENTRY", payload: { id: props.entry.id, patch: payload } });
      const result = res as { ok: boolean; error?: string };
      if (!result.ok) { setError(result.error ?? "could not update entry"); setSaving(false); return; }
      await props.onSave({ ...props.entry, ...payload } as VaultEntry);
      return;
    }

    const res = await sendMessage({ type: "ADD_ENTRY", payload });
    const result = res as { ok: boolean; data?: VaultEntry; error?: string };
    if (!result.ok) {
      // Fixed strings only — raw background errors must not reach the UI.
      if (result.error === "vault_locked") {
        setError("vault is locked — tap the lock icon to re-enter your master password");
      } else {
        // Fixed strings only — raw background errors must not reach the UI.
        const SAFE_ERRORS = new Set([
          "title is required",
          "cardholder name and card number are required",
          "invalid passkey credential",
          "pro_required",
        ]);
        setError(
          result.error !== undefined && SAFE_ERRORS.has(result.error)
            ? result.error
            : "could not save entry",
        );
      }
      setSaving(false);
      return;
    }
    await props.onSave(result.data);
  }

  const strengthLabel = () => {
    const s = passwordStrength();
    if (s === null) return null;
    return ["weak", "weak", "fair", "good", "strong"][s] as string;
  };

  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-overlay-action"
          onClick={props.onBack}
        >
          cancel
        </button>
        <span class="peach-overlay-title">
          {props.entry ? "edit entry" : "new entry"}
        </span>
        <button
          class="peach-btn peach-btn--accent peach-btn--sm peach-overlay-action"
          onClick={() => void handleSave()}
          disabled={saving() || !canSave()}
        >
          {saving() ? "saving…" : props.entry ? "save" : "create"}
        </button>
      </div>

      {/* ── Body — mirrors Entry.tsx field-card structure ── */}
      <div class="peach-entry-body peach-entry-body--new">

        {/* Type toggle */}
        <Show when={!props.entry}>
          <div class="peach-new-type-row">
            <button
              class={`peach-new-type-btn ${selectedType() === "login" ? "is-active" : ""}`}
              onClick={() => setSelectedType("login")}
            >login</button>
            <button
              class={`peach-new-type-btn ${selectedType() === "card" ? "is-active" : ""}`}
              onClick={() => setSelectedType("card")}
            >card</button>
          </div>
        </Show>

        {/* Title */}
        <div class="peach-new-title-wrap">
          <input
            class="peach-new-title-input"
            placeholder="entry name"
            autocomplete="off"
            value={title()}
            onInput={(e) => setTitle((e.currentTarget as HTMLInputElement).value)}
            onKeyDown={(e) => { if (e.key === "Enter") void handleSave(); }}
          />
        </div>

        {/* ── Login fields ── */}
        <Show when={selectedType() === "login"}>
          <div class="peach-domain">
            <div class="peach-domain-edit-row">
              <input
                class="peach-domain-value peach-domain-value--edit"
                placeholder="domain.com"
                autocomplete="off"
                value={url()}
                onInput={(e) => setUrl((e.currentTarget as HTMLInputElement).value)}
              />
              <Show when={currentTabUrl()}>
                <button
                  class="peach-generate-toggle-link"
                  type="button"
                  onClick={() => setUrl(currentTabUrl())}
                >
                  ⛓ use current page
                </button>
              </Show>
            </div>
          </div>

          <section class="peach-fields">
            {/* Username */}
            <div class="peach-field-card">
              <span class="peach-label">username</span>
              <div class="peach-field-value-row">
                <input
                  ref={(el) => (usernameInputEl = el)}
                  class="peach-field-value peach-field-value--edit"
                  placeholder="johndoe"
                  autocomplete="off"
                  value={username()}
                  onInput={(e) => setUsername((e.currentTarget as HTMLInputElement).value)}
                  onFocus={() => openIdentityField("username")}
                  onBlur={(e) => {
                    if (usernameSuggestEl?.contains(e.relatedTarget as Node)) return;
                    setTimeout(() => { if (activeIdentityField() === "username") setActiveIdentityField(null); }, 150);
                  }}
                  onKeyDown={(e) => {
                    if (activeIdentityField() !== "username") return;
                    if (e.key === "ArrowDown") {
                      e.preventDefault();
                      usernameSuggestEl?.querySelector<HTMLElement>(".peach-identity-suggestion")?.focus();
                    } else if (e.key === "Escape") {
                      e.preventDefault();
                      setActiveIdentityField(null);
                    }
                  }}
                />
              </div>
              <Show when={activeIdentityField() === "username" && identitySuggestions().length > 0}>
                <IdentitySuggestList
                  listRef={(el) => (usernameSuggestEl = el)}
                  inputRef={() => usernameInputEl}
                  suggestions={identitySuggestions()}
                  onPick={(v) => { setUsername(v); setActiveIdentityField(null); suppressIdentityOpen = true; usernameInputEl?.focus(); }}
                  onClose={() => { setActiveIdentityField(null); suppressIdentityOpen = true; usernameInputEl?.focus(); }}
                />
              </Show>
            </div>

            {/* Email */}
            <div class="peach-field-card">
              <span class="peach-label">email</span>
              <div class="peach-field-value-row">
                <input
                  ref={(el) => (emailInputEl = el)}
                  class="peach-field-value peach-field-value--edit"
                  type="email"
                  placeholder="you@example.com"
                  autocomplete="off"
                  value={email()}
                  onInput={(e) => setEmail((e.currentTarget as HTMLInputElement).value)}
                  onFocus={() => openIdentityField("email")}
                  onBlur={(e) => {
                    if (emailSuggestEl?.contains(e.relatedTarget as Node)) return;
                    setTimeout(() => { if (activeIdentityField() === "email") setActiveIdentityField(null); }, 150);
                  }}
                  onKeyDown={(e) => {
                    if (activeIdentityField() !== "email") return;
                    if (e.key === "ArrowDown") {
                      e.preventDefault();
                      emailSuggestEl?.querySelector<HTMLElement>(".peach-identity-suggestion")?.focus();
                    } else if (e.key === "Escape") {
                      e.preventDefault();
                      setActiveIdentityField(null);
                    }
                  }}
                />
              </div>
              <Show when={activeIdentityField() === "email" && identitySuggestions().length > 0}>
                <IdentitySuggestList
                  listRef={(el) => (emailSuggestEl = el)}
                  inputRef={() => emailInputEl}
                  suggestions={identitySuggestions()}
                  onPick={(v) => { setEmail(v); setActiveIdentityField(null); suppressIdentityOpen = true; emailInputEl?.focus(); }}
                  onClose={() => { setActiveIdentityField(null); suppressIdentityOpen = true; emailInputEl?.focus(); }}
                />
              </Show>
            </div>

            {/* Password */}
            <div class="peach-field-card">
              <span class="peach-label">password</span>
              <Show when={!showGenerator()}>
                <div class="peach-password-edit-row">
                  <input
                    class="peach-field-value peach-field-value--edit"
                    type={showPassword() ? "text" : "password"}
                    placeholder="password"
                    autocomplete="new-password"
                    value={password()}
                    onInput={(e) => setPassword((e.currentTarget as HTMLInputElement).value)}
                  />
                  <button
                    class="peach-inline-action peach-password-toggle-btn"
                    type="button"
                    onClick={() => setShowPassword(!showPassword())}
                    aria-label={showPassword() ? "Hide password" : "Show password"}
                  >
                    <Show
                      when={showPassword()}
                      fallback={
                        <svg width="14" 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="14" 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>
                  </button>
                </div>
              </Show>

              {/* Strength */}
              <Show when={strengthLabel() !== null}>
                <div class="peach-strength-hairline">
                  <div class="peach-strength-hairline-track">
                    <div
                      class="peach-strength-hairline-fill"
                      style={{
                        width: ["25%","40%","60%","80%","100%"][passwordStrength()!],
                        background: ["rgba(220,80,60,0.65)","rgba(220,80,60,0.65)","rgba(200,140,60,0.6)","rgba(180,162,100,0.55)","rgba(150,175,110,0.6)"][passwordStrength()!],
                      }}
                    />
                  </div>
                  <span class="peach-strength-label">{strengthLabel()}</span>
                </div>
              </Show>

              {/* Generator toggle */}
              <button
                class="peach-generate-toggle-link"
                type="button"
                onClick={() => { setShowGenerator(!showGenerator()); }}
              >
                {showGenerator() ? "☰ hide generator" : "⚙ generate"}
              </button>
              <GeneratorDrawer
                compact
                open={showGenerator()}
                onChange={(pw) => setPassword(pw)}
                onUse={(pw) => { setPassword(pw); setShowGenerator(false); }}
              />
            </div>

            {/* 2FA — optional */}
            <Show when={showTotp() || totp()}>
              <div class="peach-field-card">
                <span class="peach-label">2fa secret</span>
                <div class="peach-field-value-row">
                  <input
                    class="peach-field-value peach-field-value--edit"
                    placeholder="BASE32 or otpauth:// URI"
                    autocomplete="off"
                    value={totp()}
                    onInput={(e) => setTotp((e.currentTarget as HTMLInputElement).value)}
                  />
                </div>
              </div>
            </Show>
          </section>
        </Show>

        {/* ── Card fields ── */}
        <Show when={selectedType() === "card"}>
          <section class="peach-fields">
            {/* Nickname */}
            <div class="peach-field-card">
              <span class="peach-label">nickname</span>
              <div class="peach-field-value-row">
                <input class="peach-field-value peach-field-value--edit" placeholder="Personal Visa"
                  autocomplete="off" value={cardNickname()}
                  onInput={(e) => setCardNickname((e.currentTarget as HTMLInputElement).value)} />
              </div>
            </div>
            {/* Cardholder name */}
            <div class="peach-field-card">
              <span class="peach-label">cardholder name</span>
              <div class="peach-field-value-row">
                <input class="peach-field-value peach-field-value--edit" placeholder="Jane Smith"
                  autocomplete="cc-name" value={cardholderName()}
                  onInput={(e) => setCardholderName((e.currentTarget as HTMLInputElement).value)} />
              </div>
            </div>
            {/* Card number */}
            <div class="peach-field-card">
              <span class="peach-label">
                card number
                <Show when={getCardNetwork(cardNumber())}>
                  <span class="peach-card-network-badge">{getCardNetwork(cardNumber())}</span>
                </Show>
              </span>
              <div class="peach-field-value-row">
                <input class="peach-field-value peach-field-value--edit peach-card-number"
                  placeholder="•••• •••• •••• ••••"
                  autocomplete="cc-number" inputmode="numeric" maxLength={19}
                  value={formatCardNumberDisplay(cardNumber(), cardNumberFocused())}
                  onFocus={() => setCardNumberFocused(true)}
                  onBlur={() => setCardNumberFocused(false)}
                  onInput={(e) => {
                    const raw = (e.currentTarget as HTMLInputElement).value.replace(/\s/g, '');
                    setCardNumber(raw);
                  }} />
              </div>
            </div>
            {/* Expiry */}
            <div class="peach-field-card">
              <span class="peach-label">expiry</span>
              <div class="peach-card-expiry-row">
                <input class="peach-field-value peach-field-value--edit" placeholder="MM"
                  autocomplete="cc-exp-month" inputmode="numeric" maxLength={2} style="width:56px"
                  value={expMonth()}
                  onInput={(e) => setExpMonth((e.currentTarget as HTMLInputElement).value)} />
                <span class="peach-card-expiry-sep">/</span>
                <input class="peach-field-value peach-field-value--edit" placeholder="YYYY"
                  autocomplete="cc-exp-year" inputmode="numeric" maxLength={4} style="width:72px"
                  value={expYear()}
                  onInput={(e) => setExpYear((e.currentTarget as HTMLInputElement).value)} />
              </div>
            </div>
            {/* CVC */}
            <div class="peach-field-card">
              <span class="peach-label">CVC</span>
              <div class="peach-field-value-row">
                <input class="peach-field-value peach-field-value--edit"
                  type={showCvc() ? "text" : "password"} placeholder="•••"
                  autocomplete="cc-csc" inputmode="numeric" maxLength={4}
                  value={cvc()}
                  onInput={(e) => setCvc((e.currentTarget as HTMLInputElement).value)} />
                <button class="peach-inline-action peach-password-toggle-btn" type="button"
                  onClick={() => setShowCvc(!showCvc())} aria-label={showCvc() ? "Hide CVC" : "Show CVC"}>
                  <Show when={showCvc()} fallback={
                    <svg width="14" 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="14" 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" />
                    </svg>
                  </Show>
                </button>
              </div>
            </div>
          </section>
        </Show>

        {/* ── Login notes ── */}
        <Show when={selectedType() === "login" && (showNotes() || notes())}>
          <div class="peach-field-card" style="margin:0 12px">
            <span class="peach-label">notes</span>
            <textarea
              class="peach-new-textarea"
              placeholder="anything worth remembering"
              value={notes()}
              onInput={(e) => setNotes((e.currentTarget as HTMLTextAreaElement).value)}
            />
          </div>
        </Show>

        {/* ── "+ add" optional field links ── */}
        <div class="peach-entry-add-links">
          <Show when={selectedType() === "login" && !showTotp() && !totp()}>
            <button class="peach-add-field-link" type="button" onClick={() => setShowTotp(true)}>
              + add 2FA
            </button>
          </Show>
          <Show when={selectedType() === "login" && !showNotes() && !notes()}>
            <button class="peach-add-field-link" type="button" onClick={() => setShowNotes(true)}>
              + add notes
            </button>
          </Show>
        </div>

        {/* ── Tags ── */}
        <div class="peach-field-card" style="margin:4px 12px 12px">
          <span class="peach-label">tags</span>
          <div class="peach-tag-input-wrap">
            <For each={tags()}>
              {(tag) => (
                <span class="peach-tag-chip">
                  {tag}
                  <button class="peach-tag-chip-remove" onClick={() => removeTag(tag)} aria-label={`Remove ${tag}`}>×</button>
                </span>
              )}
            </For>
            <input
              class="peach-tag-input"
              placeholder={tags().length === 0 ? "add tags…" : ""}
              value={tagInput()}
              onInput={(e) => { setTagInput((e.currentTarget as HTMLInputElement).value); setShowTagSuggestions(true); }}
              onKeyDown={handleTagKeyDown}
              onFocus={() => setShowTagSuggestions(true)}
              onBlur={() => setTimeout(() => setShowTagSuggestions(false), 150)}
              style="flex:1;min-width:80px;background:transparent;border:none;outline:none;color:var(--t1);font-size:12px;padding:2px;"
            />
          </div>
          <Show when={showTagSuggestions() && tagSuggestions().length > 0}>
            <div class="peach-tag-suggestions" style="margin-top:4px;">
              <For each={tagSuggestions()}>
                {(s) => (
                  <button
                    class="peach-tag-suggestion"
                    onMouseDown={() => { addTag(s); setTagInput(""); setShowTagSuggestions(false); }}
                  >{s}</button>
                )}
              </For>
            </div>
          </Show>
        </div>

        <Show when={error()}>
          <p class="peach-hint peach-hint-error" style="margin:0 16px 12px">{error()}</p>
        </Show>

      </div>
    </div>
  );
}

interface IdentitySuggestListProps {
  suggestions: Array<{ value: string; count: number; type: "email" | "username" }>;
  onPick: (value: string) => void;
  onClose?: () => void;
  listRef?: (el: HTMLDivElement) => void;
  inputRef?: () => HTMLInputElement | undefined;
}

export function IdentitySuggestList(props: IdentitySuggestListProps) {
  const [collapsed, setCollapsed] = createSignal(false);
  const ChevronIcon = () => (
    <svg width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M1 1L5 5L9 1" />
    </svg>
  );

  function handleRowKeyDown(e: KeyboardEvent, value: string) {
    const row = e.currentTarget as HTMLElement;
    if (e.key === "ArrowDown") {
      e.preventDefault();
      (row.nextElementSibling as HTMLElement | null)?.focus();
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      const prev = row.previousElementSibling as HTMLElement | null;
      if (prev) prev.focus();
      else props.inputRef?.()?.focus();
    } else if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      props.onPick(value);
    } else if (e.key === "Escape") {
      e.preventDefault();
      props.onClose?.();
    }
  }

  return (
    <div class="peach-identity-suggestions" ref={props.listRef}>
      <div class="peach-identity-filter-row" style="justify-content:flex-end">
        <button
          class={`peach-identity-collapse-btn${collapsed() ? " is-collapsed" : ""}`}
          type="button"
          onMouseDown={(e) => { e.preventDefault(); setCollapsed(c => !c); }}
          aria-label={collapsed() ? "Show suggestions" : "Hide suggestions"}
        >
          <ChevronIcon />
        </button>
      </div>
      <div class={`peach-identity-rows${collapsed() ? " is-collapsed" : ""}`}>
        <div class="peach-identity-rows-inner">
          <For each={props.suggestions}>
            {(s) => (
              <button
                class="peach-identity-suggestion"
                type="button"
                onMouseDown={(e) => { e.preventDefault(); props.onPick(s.value); }}
                onKeyDown={(e) => handleRowKeyDown(e, s.value)}
              >
                <span class="peach-identity-suggestion-value">{s.value}</span>
                <span class="peach-identity-suggestion-meta">{s.count}×</span>
              </button>
            )}
          </For>
        </div>
      </div>
    </div>
  );
}