/**
 * The Vault browser-extension popup, as a shared component.
 *
 * A faithful recreation of `clients/extension` — the real popup's routes,
 * layout, copy, field labels, sort options and tag/folder structure — running on
 * sample data that never leaves the device. Interactive: open an item, copy a
 * field, reveal a TOTP, switch tabs, walk into settings.
 *
 * It lives HERE rather than in either consumer because both the marketing site
 * and the Vault app show it, and two copies of a 1,000-line recreation would
 * drift the moment the real extension changed. Same reasoning as sharing
 * `PasswordGenerator` instead of rewriting it per app.
 *
 * Two things the website's original did that this deliberately does not:
 *
 *  * **No `auto` mode.** That drove a synthetic cursor with `querySelector` and
 *    `getBoundingClientRect`, which has no meaning on native. It belongs to that
 *    page's choreography, not to the extension, so the showcase keeps it.
 *  * **No drag-and-drop in the tags tab.** It used `@dnd-kit`, which is DOM-only.
 *    The grip handles remain as affordances because removing them would change
 *    the layout this exists to reproduce, but they do not drag.
 *
 * Everything else is the original, moved rather than rewritten.
 */

import React, { useCallback, useEffect, useMemo, useState } from "react";
import {
  Image,
  Linking,
  Pressable,
  ScrollView,
  Text as RNText,
  TextInput,
  View,
} from "react-native";
import { useColorScheme, vars } from "nativewind";
import {
  ArrowDownUp,
  ArrowLeft,
  Check,
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  ChevronUp,
  Circle as CircleIcon,
  Copy,
  ExternalLink,
  Eye,
  EyeOff,
  Fingerprint,
  Folder,
  FolderPlus,
  GripVertical,
  KeyRound,
  Lock,
  LogOut,
  Pencil,
  Plus,
  Search,
  Send,
  Server,
  Settings as SettingsIcon,
  ShieldAlert,
  SquarePen,
  Star,
  Tag as TagIcon,
  Trash2,
} from "lucide-react-native";
import { MutedText, Text } from "../components/text";
import { Button } from "../components/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "../components/card";

/**
 * The real popup's frame, in px.
 *
 * `HEIGHT` is Chrome's *maximum* for a browser action popup, not a fixed size —
 * the real popup is as tall as it needs to be, up to this. So a host with less
 * vertical room may render it shorter (see the `height` prop) without the thing
 * on screen becoming a lie about what the extension looks like; the item list
 * scrolls inside, exactly as it does at full height.
 */
export const EXTENSION_POPUP_WIDTH = 380;
export const EXTENSION_POPUP_HEIGHT = 600;
/** Below this the chrome crowds out the list and it stops reading as the popup. */
export const EXTENSION_POPUP_MIN_HEIGHT = 320;

export function useInk() {
  const { colorScheme: scheme } = useColorScheme();
  const dark = scheme === "dark";
  // Vault's own palette (pure white in light), matching .vault-surface.
  return {
    fg: dark ? "#ffffff" : "#000000",
    muted: dark ? "#a3a3a3" : "#737373",
    bg: dark ? "#000000" : "#ffffff",
    border: dark ? "#262626" : "#e5e5e5",
    secondary: dark ? "#262626" : "#f5f5f5",
    danger: "#ef4444",
    star: "#f59e0b",
  };
}

// Demo graphics are react-native-web, which SSRs markup that then re-lays-out
// on hydration ("pops in") and would render with the pre-mount theme guess
// (a dark flash on a light page). Gate them to mount client-side, behind a
// theme-correct placeholder, so they appear once, already in the right theme.

export function vaultVars(dark: boolean) {
  return vars(
    dark
      ? {
          "--background-rgb": "0 0 0",
          "--foreground-rgb": "255 255 255",
          "--card": "#0a0a0a",
          "--card-foreground": "#ffffff",
          "--secondary": "#262626",
          "--secondary-foreground": "#ffffff",
          "--muted": "#262626",
          "--muted-foreground": "#a3a3a3",
          "--border": "#262626",
          "--primary": "#ffffff",
          "--primary-foreground": "#000000",
        }
      : {
          "--background-rgb": "255 255 255",
          "--foreground-rgb": "0 0 0",
          "--card": "#ffffff",
          "--card-foreground": "#000000",
          "--secondary": "#f5f5f5",
          "--secondary-foreground": "#000000",
          "--muted": "#f5f5f5",
          "--muted-foreground": "#737373",
          "--border": "#e5e5e5",
          "--primary": "#000000",
          "--primary-foreground": "#ffffff",
        }
  );
}

// ── sample data (shape mirrors DecryptedVaultItem.plaintext) ─────────────────
export interface Account {
  username: string;
  password: string;
  totp_secret?: string;
  notes?: string;
}
// Tags mirror the app's user-created tags: a name, a color, and an icon
// (pricetag / circle / star). Rendered as a colored-border chip with the icon.
export interface Tag {
  name: string;
  color: string;
  icon?: "tag" | "circle" | "star";
}
export interface Item {
  id: string;
  name: string;
  url: string;
  favorite: boolean;
  tags: Tag[];
  accounts: Account[];
  created: string;
  updated: string;
}

export const T = {
  social: { name: "social", color: "#3b82f6", icon: "circle" } as Tag,
  shopping: { name: "shopping", color: "#22c55e", icon: "tag" } as Tag,
  finance: { name: "finance", color: "#f59e0b", icon: "star" } as Tag,
  streaming: { name: "streaming", color: "#a855f7", icon: "circle" } as Tag,
  gaming: { name: "gaming", color: "#06b6d4", icon: "tag" } as Tag,
};

export const ITEMS: Item[] = [
  {
    id: "1",
    name: "Netflix",
    url: "https://netflix.com",
    favorite: true,
    tags: [T.streaming],
    created: "2024-02-11",
    updated: "2025-05-30",
    accounts: [
      {
        username: "example@entropysoftworks.com",
        password: "tR0ub4dour&3xplsion",
        totp_secret: "JBSWY3DPEHPK3PXP",
        notes: "Shared family plan.",
      },
    ],
  },
  {
    id: "2",
    name: "Amazon",
    url: "https://amazon.com",
    favorite: true,
    tags: [T.shopping],
    created: "2024-01-04",
    updated: "2025-05-22",
    accounts: [
      {
        username: "example@entropysoftworks.com",
        password: "correct-horse-battery",
        totp_secret: "KRSXG5CTMVRXEZLU",
      },
    ],
  },
  {
    id: "3",
    name: "Instagram",
    url: "https://instagram.com",
    favorite: true,
    tags: [T.social],
    created: "2024-03-02",
    updated: "2025-06-01",
    accounts: [
      { username: "yourhandle", password: "9xQvM2pL7wE4z", totp_secret: "MFRGGZDFMZTWQ2LK" },
    ],
  },
  {
    id: "4",
    name: "PayPal",
    url: "https://paypal.com",
    favorite: false,
    tags: [T.finance],
    created: "2024-04-20",
    updated: "2025-05-12",
    accounts: [
      {
        username: "example@entropysoftworks.com",
        password: "Zx8kLp2qWn5vR",
        totp_secret: "GEZDGNBVGY3TQOJQ",
      },
    ],
  },
  {
    id: "5",
    name: "Chase",
    url: "https://chase.com",
    favorite: false,
    tags: [T.finance],
    created: "2024-02-18",
    updated: "2025-04-28",
    accounts: [
      {
        username: "example@entropysoftworks.com",
        password: "Sf6!nQ9xK3mD2p",
        notes: "Checking + card.",
      },
    ],
  },
  {
    id: "6",
    name: "Spotify",
    url: "https://spotify.com",
    favorite: false,
    tags: [T.streaming],
    created: "2024-05-30",
    updated: "2025-03-19",
    accounts: [{ username: "example@entropysoftworks.com", password: "Vb7nQ9xK3mD2p" }],
  },
  {
    id: "7",
    name: "Steam",
    url: "https://steampowered.com",
    favorite: false,
    tags: [T.gaming],
    created: "2024-06-01",
    updated: "2025-02-09",
    accounts: [{ username: "yourhandle", password: "Lr4!tWp2qZ", totp_secret: "NB2W45DFOIZA" }],
  },
  {
    id: "8",
    name: "Reddit",
    url: "https://reddit.com",
    favorite: false,
    tags: [T.social],
    created: "2024-01-22",
    updated: "2025-01-15",
    accounts: [{ username: "u/yourhandle", password: "Dx2!mNp9qR" }],
  },
];

export const SORT_OPTIONS = [
  {
    value: "name_asc",
    label: "Name (A-Z)",
    cmp: (a: Item, b: Item) => a.name.localeCompare(b.name),
  },
  {
    value: "name_desc",
    label: "Name (Z-A)",
    cmp: (a: Item, b: Item) => b.name.localeCompare(a.name),
  },
  {
    value: "updated_newest",
    label: "Recently updated",
    cmp: (a: Item, b: Item) => b.updated.localeCompare(a.updated),
  },
  {
    value: "created_newest",
    label: "Newest first",
    cmp: (a: Item, b: Item) => b.created.localeCompare(a.created),
  },
  {
    value: "created_oldest",
    label: "Oldest first",
    cmp: (a: Item, b: Item) => a.created.localeCompare(b.created),
  },
] as const;

/** The sort used when an index somehow falls outside SORT_OPTIONS. */
const DEFAULT_SORT = SORT_OPTIONS[0];

// ── helpers ───────────────────────────────────────────────────────────────
export function host(url: string) {
  return url.replace(/^https?:\/\//, "").replace(/\/.*$/, "");
}
// Real ItemIcon renders the site favicon; reproduce with the same favicon
// service the app's icon resolver falls back to.
export function favicon(url: string) {
  return `https://www.google.com/s2/favicons?domain=${host(url)}&sz=64`;
}

export function ItemIcon({
  url,
  size = 40,
  radius = 8,
}: {
  url: string;
  size?: number;
  radius?: number;
}) {
  return (
    <View
      style={
        {
          width: size,
          height: size,
          borderRadius: radius,
          overflow: "hidden",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "#ffffff",
          borderWidth: 1,
          borderColor: "#e5e5e5",
        } as never
      }
    >
      {/* RN `Image`, not a DOM `<img>`: this component renders on native too,
          where `<img>` is not a thing. `resizeMode="contain"` is the RN
          spelling of `object-fit: contain`. */}
      <Image
        source={{ uri: favicon(url) }}
        accessibilityIgnoresInvertColors
        style={{ width: size * 0.6, height: size * 0.6 }}
        resizeMode="contain"
      />
    </View>
  );
}

export function useCopy() {
  const [copied, setCopied] = useState<string | null>(null);
  const copy = useCallback((key: string, text: string) => {
    if (typeof navigator !== "undefined" && navigator.clipboard) {
      navigator.clipboard.writeText(text).catch(() => {});
    }
    setCopied(key);
    setTimeout(() => setCopied((k) => (k === key ? null : k)), 1300);
  }, []);
  return { copied, copy };
}

// Deterministic 6-digit code that rolls every 30s (stand-in for real TOTP).
export function totpCode(seed: string, step: number) {
  let h = 0;
  for (const c of seed) {
    h = (h * 31 + c.charCodeAt(0)) >>> 0;
  }
  return Math.abs((h ^ (step * 2654435761)) % 1_000_000)
    .toString()
    .padStart(6, "0");
}
export function useTotp(secret?: string) {
  const [now, setNow] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setNow(Date.now()), 1000);
    setNow(Date.now());
    return () => clearInterval(t);
  }, []);
  if (!secret || !now) {
    return { code: "------", remaining: 30 };
  }
  const epoch = Math.floor(now / 1000);
  return { code: totpCode(secret, Math.floor(epoch / 30)), remaining: 30 - (epoch % 30) };
}

// Matches the app's RingCountdown widget.
export function RingCountdown({
  remaining,
  size = 48,
  period = 30,
  color,
}: {
  remaining: number;
  size?: number;
  period?: number;
  color: string;
}) {
  const r = size / 2 - 3;
  const c = 2 * Math.PI * r;
  const frac = remaining / period;
  const warn = remaining <= 5;
  const stroke = warn ? "#ef4444" : color;
  return (
    <View style={{ width: size, height: size } as never}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
        <circle
          cx={size / 2}
          cy={size / 2}
          r={r}
          fill="none"
          stroke={color}
          strokeOpacity={0.2}
          strokeWidth={3}
        />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={r}
          fill="none"
          stroke={stroke}
          strokeWidth={3}
          strokeLinecap="round"
          strokeDasharray={c}
          strokeDashoffset={c * (1 - frac)}
          transform={`rotate(-90 ${size / 2} ${size / 2})`}
        />
        <text
          x={size / 2}
          y={size / 2 + 4}
          textAnchor="middle"
          fontSize={12}
          fontFamily="var(--font-geist-mono)"
          fill={stroke}
        >
          {remaining}
        </text>
      </svg>
    </View>
  );
}

// ── phone frame ─────────────────────────────────────────────────────────────

export function VaultItemRow({
  item,
  ink,
  onPress,
  highlight,
}: {
  item: Item;
  ink: ReturnType<typeof useInk>;
  onPress: () => void;
  highlight?: boolean;
}) {
  // Sample data always has one; the guard is for the type checker, and
  // rendering nothing beats crashing if that ever stops being true.
  const acc = item.accounts[0];
  return (
    <Pressable
      nativeID={`vrow-${item.id}`}
      onPress={onPress}
      className="mb-1.5 flex-row items-center overflow-hidden rounded-lg bg-card p-3.5 active:opacity-80"
      style={highlight ? ({ backgroundColor: ink.secondary } as never) : undefined}
    >
      <View className="mr-3">
        <ItemIcon url={item.url} />
      </View>
      <View className="flex-1">
        <Text className="text-sm font-semibold" numberOfLines={1}>
          {item.name}
        </Text>
        <MutedText className="text-xs" numberOfLines={1}>
          {acc?.username || host(item.url)}
        </MutedText>
      </View>
      {item.favorite && <Star size={14} color={ink.fg} fill={ink.fg} />}
      <Pressable
        className="ml-1 px-1.5 py-1 active:opacity-70"
        onPress={() => void Linking.openURL(item.url).catch(() => undefined)}
      >
        <ExternalLink size={18} color={ink.muted} />
      </Pressable>
      <ChevronRight size={18} color={ink.muted} />
    </Pressable>
  );
}

export function Dropdown({
  open,
  onToggle,
  label,
  icon,
  children,
  ink,
}: {
  open: boolean;
  onToggle: () => void;
  label: string;
  icon?: React.ReactNode;
  children: React.ReactNode;
  ink: ReturnType<typeof useInk>;
}) {
  return (
    <View style={{ position: "relative" } as never}>
      <Pressable
        onPress={onToggle}
        className="flex-row items-center gap-1 rounded-md border border-border px-2 py-1 active:opacity-70"
      >
        {icon}
        <MutedText className="text-xs">{label}</MutedText>
        {open ? (
          <ChevronUp size={10} color={ink.muted} />
        ) : (
          <ChevronDown size={10} color={ink.muted} />
        )}
      </Pressable>
      {open && (
        <View
          className="absolute right-0 top-8 z-50 rounded-lg border border-border bg-card py-1"
          style={{ minWidth: 160 } as never}
        >
          {children}
        </View>
      )}
    </View>
  );
}

export function VaultList({
  ink,
  onOpen,
  items = ITEMS,
  scrollRef,
  highlightId,
}: {
  ink: ReturnType<typeof useInk>;
  onOpen: (id: string) => void;
  items?: Item[];
  scrollRef?: React.Ref<ScrollView>;
  highlightId?: string | null;
}) {
  const [query, setQuery] = useState("");
  const [sortIdx, setSortIdx] = useState(0);
  const [showSort, setShowSort] = useState(false);
  // `?? SORT_OPTIONS[0]!` rather than a non-null assertion on the index:
  // sortIdx is driven by the picker below and cannot leave range, but under
  // noUncheckedIndexedAccess the compiler cannot know that, and falling back to
  // the default sort is the right behaviour if it ever did.
  // Falls back to the first option rather than asserting non-null: sortIdx is
  // driven by the picker and cannot leave range, but the default sort is the
  // right behaviour if it ever did.
  const sort = SORT_OPTIONS[sortIdx] ?? DEFAULT_SORT;

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    return items.filter(
      (i) =>
        !q ||
        i.name.toLowerCase().includes(q) ||
        i.accounts.some((a) => a.username.toLowerCase().includes(q)) ||
        host(i.url).includes(q)
    );
  }, [query, items]);
  const favorites = filtered.filter((i) => i.favorite);
  const all = [...filtered.filter((i) => !i.favorite)].sort(sort.cmp);

  return (
    <View className="flex-1">
      <View className="px-4 pb-2 pt-1">
        <View
          className="flex-row items-center rounded-lg border border-border px-3"
          style={{ height: 40 } as never}
        >
          <Search size={18} color={ink.muted} />
          <TextInput
            value={query}
            onChangeText={setQuery}
            placeholder="Search passwords"
            placeholderTextColor={ink.muted}
            className="ml-2 flex-1 text-sm text-foreground"
            style={{ outlineStyle: "none" } as never}
          />
        </View>
      </View>

      <ScrollView
        ref={scrollRef}
        className="flex-1"
        contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 20 } as never}
      >
        {favorites.length > 0 && (
          <View className="pt-2">
            <View className="mb-2 flex-row items-center gap-1.5 px-1">
              <Star size={14} color={ink.fg} />
              <Text className="text-xs font-semibold uppercase tracking-wider">Favorites</Text>
              <MutedText className="text-xs">({favorites.length})</MutedText>
            </View>
            {favorites.map((i) => (
              <VaultItemRow
                key={i.id}
                item={i}
                ink={ink}
                onPress={() => onOpen(i.id)}
                highlight={highlightId === i.id}
              />
            ))}
            <View className="my-3 h-px bg-border" />
          </View>
        )}

        {all.length > 0 && (
          <View style={{ zIndex: 50 } as never}>
            <View
              className="relative mb-2 flex-row items-center justify-between px-1"
              style={{ zIndex: 50 } as never}
            >
              <View className="flex-row items-center gap-1.5">
                <Text className="text-xs font-semibold uppercase tracking-wider">All Items</Text>
                <MutedText className="text-xs">({all.length})</MutedText>
              </View>
              <Dropdown
                ink={ink}
                open={showSort}
                onToggle={() => setShowSort((v) => !v)}
                label={sort.label}
                icon={<ArrowDownUp size={12} color={ink.muted} />}
              >
                {SORT_OPTIONS.map((o, idx) => (
                  <Pressable
                    key={o.value}
                    onPress={() => {
                      setSortIdx(idx);
                      setShowSort(false);
                    }}
                    className={`px-3 py-1.5 active:opacity-70 ${idx === sortIdx ? "bg-secondary" : ""}`}
                  >
                    <Text className={`text-xs ${idx === sortIdx ? "font-semibold" : ""}`}>
                      {o.label}
                    </Text>
                  </Pressable>
                ))}
              </Dropdown>
            </View>
            {all.map((i) => (
              <VaultItemRow
                key={i.id}
                item={i}
                ink={ink}
                onPress={() => onOpen(i.id)}
                highlight={highlightId === i.id}
              />
            ))}
          </View>
        )}
      </ScrollView>
    </View>
  );
}

// ── item detail (app/(tabs)/vault/[id]/index.tsx) ────────────────────────────
export function FieldRow({
  label,
  value,
  ink,
  copied,
  copy,
  secret,
  totp,
}: {
  label: string;
  value: string;
  ink: ReturnType<typeof useInk>;
  copied: string | null;
  copy: (k: string, t: string) => void;
  secret?: boolean;
  totp?: ReturnType<typeof useTotp>;
}) {
  const [show, setShow] = useState(false);
  const isCopied = copied === label;
  const display = totp ? totp.code : secret && !show ? "••••••••••••" : value;
  return (
    <View className="mb-4">
      <Text className="mb-1 text-xs text-muted-foreground">{label}</Text>
      <View className="flex-row items-center justify-between rounded-lg bg-secondary p-3">
        <RNText
          className="flex-1 font-mono text-sm text-foreground"
          numberOfLines={1}
          style={{ color: ink.fg } as never}
        >
          {display}
        </RNText>
        <View className="flex-row items-center gap-2">
          {secret && (
            <Pressable onPress={() => setShow((v) => !v)} className="active:opacity-60">
              {show ? <EyeOff size={18} color={ink.muted} /> : <Eye size={18} color={ink.muted} />}
            </Pressable>
          )}
          {totp && (
            <View className="mr-1">
              <RingCountdown remaining={totp.remaining} color={ink.fg} />
            </View>
          )}
          <Pressable
            nativeID={totp ? "fcopy-totp" : undefined}
            onPress={() => copy(label, totp ? totp.code : value)}
            className="active:opacity-60"
          >
            {isCopied ? <Check size={18} color="#22c55e" /> : <Copy size={18} color={ink.muted} />}
          </Pressable>
        </View>
      </View>
    </View>
  );
}

export function ItemDetail({
  item,
  ink,
  onBack,
  onDelete,
  forceCopiedLabel,
  scrollRef,
}: {
  item: Item;
  ink: ReturnType<typeof useInk>;
  onBack: () => void;
  onDelete?: () => void;
  forceCopiedLabel?: string | null;
  scrollRef?: React.Ref<ScrollView>;
}) {
  // Sample data always has one; the guard is for the type checker, and
  // rendering nothing beats crashing if that ever stops being true.
  const acc = item.accounts[0];
  const accSecret = acc?.totp_secret;
  const { copied, copy } = useCopy();
  const totp = useTotp(accSecret);
  const [editing, setEditing] = useState(false);
  const [confirm, setConfirm] = useState(false);
  // In autoplay the copied highlight is driven externally; otherwise the
  // real per-field copy state.
  const effCopied = forceCopiedLabel ?? copied;

  if (editing) {
    return <ExtItemForm ink={ink} item={item} onCancel={() => setEditing(false)} />;
  }
  // After the hooks, so the hook order never changes. Sample items always carry
  // an account; this is the type checker's guard, and rendering nothing beats
  // crashing if that ever stops being true.
  if (!acc) {
    return null;
  }

  function launch() {
    void Linking.openURL(item.url).catch(() => undefined);
  }

  return (
    <ScrollView ref={scrollRef} className="flex-1" contentContainerStyle={{ padding: 16 } as never}>
      {/* top bar */}
      <View className="mb-4 flex-row items-center justify-between">
        <Pressable onPress={onBack} className="active:opacity-70">
          <ArrowLeft size={22} color={ink.fg} />
        </Pressable>
        <View className="flex-row gap-4">
          <Pressable onPress={launch} hitSlop={8} className="active:opacity-60">
            <ExternalLink size={20} color={ink.fg} />
          </Pressable>
          <Pressable onPress={() => setEditing(true)} hitSlop={8} className="active:opacity-60">
            <SquarePen size={20} color={ink.fg} />
          </Pressable>
          <Pressable onPress={() => setConfirm(true)} hitSlop={8} className="active:opacity-60">
            <Trash2 size={20} color={ink.danger} />
          </Pressable>
        </View>
      </View>

      {confirm && (
        <ExtModal title="Delete item" ink={ink}>
          <Text className="text-sm text-muted-foreground">
            Delete &quot;{item.name}&quot;? This can&apos;t be undone.
          </Text>
          <View className="flex-row gap-2">
            <View className="flex-1">
              <Button variant="outline" onPress={() => setConfirm(false)}>
                Cancel
              </Button>
            </View>
            <View className="flex-1">
              <Button
                variant="destructive"
                onPress={() => {
                  setConfirm(false);
                  (onDelete ?? onBack)();
                }}
              >
                Delete
              </Button>
            </View>
          </View>
        </ExtModal>
      )}

      {/* header */}
      <View className="mb-6 flex-row items-center gap-3">
        <ItemIcon url={item.url} size={56} radius={14} />
        <View className="flex-1">
          <View className="flex-row items-center gap-2">
            <Text className="text-xl font-bold">{item.name}</Text>
            {item.favorite && <Star size={18} color={ink.star} fill={ink.star} />}
          </View>
          <MutedText className="text-sm" numberOfLines={1}>
            {host(item.url)}
          </MutedText>
        </View>
      </View>

      {/* fields */}
      <View className="rounded-lg border border-border bg-card p-4">
        <FieldRow
          label="Username / Email"
          value={acc.username}
          ink={ink}
          copied={effCopied}
          copy={copy}
        />
        <FieldRow
          label="Password"
          value={acc.password}
          ink={ink}
          copied={effCopied}
          copy={copy}
          secret
        />
        <FieldRow label="URL" value={item.url} ink={ink} copied={effCopied} copy={copy} />
        {acc.totp_secret && (
          <FieldRow
            label="TOTP Code"
            value={acc.totp_secret}
            ink={ink}
            copied={effCopied}
            copy={copy}
            totp={totp}
          />
        )}
      </View>

      {/* notes */}
      <View className="mt-4 rounded-lg border border-border bg-card p-4">
        <Text className="mb-2 text-xs font-semibold uppercase text-muted-foreground">Notes</Text>
        {acc.notes ? (
          <Text className="text-sm">{acc.notes}</Text>
        ) : (
          <Text className="text-sm italic text-muted-foreground">
            No notes — tap Edit to add some.
          </Text>
        )}
      </View>

      {/* details */}
      <View className="mt-4 rounded-lg border border-border bg-card p-4">
        <Text className="mb-2 text-xs font-semibold uppercase text-muted-foreground">Details</Text>
        <MutedText className="mb-1 text-xs">Created: {item.created}</MutedText>
        <MutedText className="text-xs">Updated: {item.updated}</MutedText>
        <View className="mt-3">
          <MutedText className="mb-1.5 text-xs">Tags</MutedText>
          <View className="flex-row flex-wrap gap-1.5">
            {item.tags.map((t) => {
              const Icon = t.icon === "circle" ? CircleIcon : t.icon === "star" ? Star : TagIcon;
              return (
                <View
                  key={t.name}
                  className="flex-row items-center gap-1 rounded-md border px-2 py-1"
                  style={{ borderColor: `${t.color}55` } as never}
                >
                  <Icon size={12} color={t.color} />
                  <Text className="text-xs">{t.name}</Text>
                </View>
              );
            })}
          </View>
        </View>
      </View>
    </ScrollView>
  );
}

// ── generator (entropy-ui PasswordGenerator, reproduced) ──────────────────────

function ExtBottomNav({
  active,
  onChange,
  ink,
}: {
  active: string;
  onChange: (t: ExtTab) => void;
  ink: ReturnType<typeof useInk>;
}) {
  const tabs: [ExtTab, string, typeof Lock][] = [
    ["vault", "Login Items", Lock],
    ["tags", "Tags", Folder],
    ["send", "Send", Send],
    ["secrets", "Secrets", KeyRound],
  ];
  return (
    <View className="flex-row border-t border-border">
      {tabs.map(([id, label, Icon]) => {
        const on = id === active;
        return (
          <Pressable
            key={id}
            onPress={() => onChange(id)}
            className="flex-1 items-center justify-center gap-0.5 py-2 active:opacity-70"
          >
            <Icon size={18} color={on ? ink.fg : ink.muted} />
            <RNText
              style={
                {
                  fontSize: 10,
                  fontWeight: on ? "600" : "400",
                  color: on ? ink.fg : ink.muted,
                } as never
              }
            >
              {label}
            </RNText>
          </Pressable>
        );
      })}
    </View>
  );
}

function ExtComingSoon({
  icon,
  desc,
  ink,
}: {
  icon: React.ReactNode;
  desc: string;
  ink: ReturnType<typeof useInk>;
}) {
  return (
    <View className="flex-1 items-center justify-center px-8" style={{ gap: 10 } as never}>
      {icon}
      <MutedText className="text-center text-sm" style={{ maxWidth: 260 } as never}>
        {desc}
      </MutedText>
      <RNText style={{ fontSize: 11, fontStyle: "italic", color: ink.muted } as never}>
        Coming soon
      </RNText>
    </View>
  );
}

/**
 * The mark in the popup header.
 *
 * Supplied by the caller rather than loaded from a path. The original pointed
 * at `/products/vault_light.png`, which only resolves on the marketing site —
 * a shared package cannot reach into one consumer's public directory. Falls
 * back to the wordmark so the header is never empty.
 */
export function VaultMark({ logo }: { logo?: React.ReactNode }) {
  if (logo) {
    return <>{logo}</>;
  }
  return <Text className="text-base font-bold">Vault</Text>;
}

function ExtHeader({
  tab,
  ink,
  onAdd,
  onAddFolder,
  onSettings,
  logo,
}: {
  tab: ExtTab;
  ink: ReturnType<typeof useInk>;
  onAdd: () => void;
  onAddFolder: () => void;
  onSettings: () => void;
  logo?: React.ReactNode;
}) {
  return (
    <View className="flex-row items-center gap-3 border-b border-border px-4 py-3">
      <VaultMark logo={logo} />
      <View className="flex-1" />
      {tab === "tags" && (
        <Pressable onPress={onAddFolder} className="active:opacity-70">
          <FolderPlus size={18} color={ink.fg} strokeWidth={1.75} />
        </Pressable>
      )}
      <Pressable onPress={onAdd} className="active:opacity-70">
        <Plus size={20} color={ink.fg} strokeWidth={1.75} />
      </Pressable>
      <Pressable onPress={onSettings} className="active:opacity-70">
        <SettingsIcon size={20} color={ink.fg} strokeWidth={1.75} />
      </Pressable>
    </View>
  );
}

// ── Tags & folders (clients/extension TagsAndFoldersScreen) ──────────────────

interface DTag {
  id: string;
  name: string;
  color: string;
  icon?: "tag" | "circle" | "star";
  folderId: string | null;
}
interface DFolder {
  id: string;
  name: string;
}

const SEED_FOLDERS: DFolder[] = [
  { id: "f1", name: "Personal" },
  { id: "f2", name: "Finance" },
  { id: "f3", name: "Gaming" },
];
const SEED_TAGS: DTag[] = [
  { id: "t1", ...T.social, folderId: "f1" },
  { id: "t2", ...T.streaming, folderId: "f1" },
  { id: "t3", ...T.finance, folderId: "f2" },
  { id: "t4", ...T.gaming, folderId: "f3" },
  { id: "t5", ...T.shopping, folderId: null },
];

function TagChip({ tag }: { tag: DTag }) {
  const Icon = tag.icon === "circle" ? CircleIcon : tag.icon === "star" ? Star : TagIcon;
  return (
    <View
      className="flex-row items-center gap-1 self-start rounded-md border px-2 py-1"
      style={{ borderColor: `${tag.color}55` } as never}
    >
      <Icon size={11} color={tag.color} />
      <Text className="text-xs">{tag.name}</Text>
    </View>
  );
}

function ExtDragHandle({ ink }: { ink: ReturnType<typeof useInk> }) {
  // Affordance only. The website's version wires this to @dnd-kit, which is
  // DOM-only and cannot ship in a component React Native also renders. The grip
  // stays because removing it would change the extension's actual layout, which
  // is the thing this demo exists to reproduce.
  return (
    <View>
      <GripVertical size={14} color={ink.muted} strokeWidth={1.75} />
    </View>
  );
}

function ExtTagRow({
  tag,
  ink,
  onEdit,
  onDelete,
}: {
  tag: DTag;
  ink: ReturnType<typeof useInk>;
  onEdit: () => void;
  onDelete: () => void;
}) {
  return (
    <View className="flex-row items-center gap-2 rounded-md px-1.5 py-1.5">
      <ExtDragHandle ink={ink} />
      <View className="flex-1">
        <TagChip tag={tag} />
      </View>
      <Pressable onPress={onEdit} hitSlop={6} className="active:opacity-60">
        <Pencil size={13} color={ink.muted} strokeWidth={1.75} />
      </Pressable>
      <Pressable onPress={onDelete} hitSlop={6} className="active:opacity-60">
        <Trash2 size={13} color={ink.danger} strokeWidth={1.75} />
      </Pressable>
    </View>
  );
}

function ExtFolderBlock({
  folder,
  tags,
  collapsed,
  ink,
  onToggle,
  onAdd,
  onEdit,
  onDelete,
  onEditTag,
  onDeleteTag,
}: {
  folder: DFolder;
  tags: DTag[];
  collapsed: boolean;
  ink: ReturnType<typeof useInk>;
  onToggle: () => void;
  onAdd: () => void;
  onEdit: () => void;
  onDelete: () => void;
  onEditTag: (t: DTag) => void;
  onDeleteTag: (id: string) => void;
}) {
  return (
    <View className="overflow-hidden rounded-lg border bg-card" style={{ borderColor: ink.border }}>
      <View className="flex-row items-center gap-2 px-2.5 py-2.5">
        <ExtDragHandle ink={ink} />
        <Pressable onPress={onToggle} hitSlop={4} className="active:opacity-60">
          {collapsed ? (
            <ChevronRight size={14} color={ink.muted} strokeWidth={1.75} />
          ) : (
            <ChevronDown size={14} color={ink.muted} strokeWidth={1.75} />
          )}
        </Pressable>
        <Folder size={14} color={ink.fg} strokeWidth={1.75} />
        <Pressable onPress={onToggle} className="flex-1">
          <Text className="text-[13px] font-semibold">{folder.name}</Text>
        </Pressable>
        <Text className="text-[11px] text-muted-foreground">{tags.length}</Text>
        <Pressable onPress={onAdd} hitSlop={6} className="active:opacity-60">
          <Plus size={14} color={ink.muted} strokeWidth={1.75} />
        </Pressable>
        <Pressable onPress={onEdit} hitSlop={6} className="active:opacity-60">
          <Pencil size={14} color={ink.muted} strokeWidth={1.75} />
        </Pressable>
        <Pressable onPress={onDelete} hitSlop={6} className="active:opacity-60">
          <Trash2 size={14} color={ink.danger} strokeWidth={1.75} />
        </Pressable>
      </View>
      {!collapsed && (
        <View className="px-2.5 pb-2.5" style={{ gap: 6 } as never}>
          {tags.length === 0 ? (
            <Text className="py-1 text-[11px] italic text-muted-foreground">
              Drop tags here, or use + to add
            </Text>
          ) : (
            tags.map((t) => (
              <ExtTagRow
                key={t.id}
                tag={t}
                ink={ink}
                onEdit={() => onEditTag(t)}
                onDelete={() => onDeleteTag(t.id)}
              />
            ))
          )}
        </View>
      )}
    </View>
  );
}

function ExtUngrouped({
  tags,
  ink,
  onEditTag,
  onDeleteTag,
}: {
  tags: DTag[];
  ink: ReturnType<typeof useInk>;
  onEditTag: (t: DTag) => void;
  onDeleteTag: (id: string) => void;
}) {
  return (
    <View
      className="mt-1 rounded-lg border bg-card p-2.5"
      style={{ borderColor: ink.border, gap: 6 }}
    >
      <Text className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
        Ungrouped
      </Text>
      {tags.length === 0 ? (
        <Text className="py-1 text-[11px] italic text-muted-foreground">No tags</Text>
      ) : (
        tags.map((t) => (
          <ExtTagRow
            key={t.id}
            tag={t}
            ink={ink}
            onEdit={() => onEditTag(t)}
            onDelete={() => onDeleteTag(t.id)}
          />
        ))
      )}
    </View>
  );
}

function ExtTagsTab({ ink }: { ink: ReturnType<typeof useInk> }) {
  const [folders, setFolders] = useState<DFolder[]>(SEED_FOLDERS);
  const [tags, setTags] = useState<DTag[]>(SEED_TAGS);
  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
  const [modal, setModal] = useState<
    { kind: "tag"; tag?: DTag } | { kind: "folder"; folder?: DFolder } | null
  >(null);
  function toggle(id: string) {
    setCollapsed((s) => {
      const n = new Set(s);
      if (n.has(id)) {
        n.delete(id);
      } else {
        n.add(id);
      }
      return n;
    });
  }
  function deleteTag(id: string) {
    setTags((s) => s.filter((t) => t.id !== id));
  }
  function deleteFolder(id: string) {
    setFolders((s) => s.filter((f) => f.id !== id));
    setTags((s) => s.map((t) => (t.folderId === id ? { ...t, folderId: null } : t)));
  }

  const ungrouped = tags.filter((t) => !t.folderId);
  return (
    <View className="flex-1">
      <ScrollView className="flex-1" contentContainerStyle={{ padding: 12, gap: 8 } as never}>
        {folders.map((f) => (
          <ExtFolderBlock
            key={f.id}
            folder={f}
            tags={tags.filter((t) => t.folderId === f.id)}
            collapsed={collapsed.has(f.id)}
            ink={ink}
            onToggle={() => toggle(f.id)}
            onAdd={() => setModal({ kind: "tag" })}
            onEdit={() => setModal({ kind: "folder", folder: f })}
            onDelete={() => deleteFolder(f.id)}
            onEditTag={(t) => setModal({ kind: "tag", tag: t })}
            onDeleteTag={deleteTag}
          />
        ))}
        <ExtUngrouped
          tags={ungrouped}
          ink={ink}
          onEditTag={(t) => setModal({ kind: "tag", tag: t })}
          onDeleteTag={deleteTag}
        />
      </ScrollView>
      {modal?.kind === "tag" && (
        <ExtTagModal ink={ink} tag={modal.tag} onClose={() => setModal(null)} />
      )}
      {modal?.kind === "folder" && (
        <ExtFolderModal ink={ink} folder={modal.folder} onClose={() => setModal(null)} />
      )}
    </View>
  );
}

function ExtSettingsRow({
  icon,
  label,
  ink,
  onPress,
}: {
  icon: React.ReactNode;
  label: string;
  ink: ReturnType<typeof useInk>;
  onPress?: () => void;
}) {
  return (
    <Pressable
      onPress={onPress}
      className="flex-row items-center gap-3 rounded-lg border border-border px-3 py-3 active:bg-secondary"
    >
      {icon}
      <Text className="flex-1 text-sm">{label}</Text>
      <ChevronRight size={16} color={ink.muted} />
    </Pressable>
  );
}

// Settings flow (clients/extension SettingsScreen + PasskeyListScreen +
// ServerConfigScreen). Owns its own little sub-router so the gear is a full
// port: menu → Passkeys → Add passkey, and menu → Server URL.
function ExtSettings({ ink, onBack }: { ink: ReturnType<typeof useInk>; onBack: () => void }) {
  const [sub, setSub] = useState<"menu" | "passkeys" | "enroll" | "server">("menu");

  if (sub === "passkeys") {
    return <ExtPasskeys ink={ink} onBack={() => setSub("menu")} onAdd={() => setSub("enroll")} />;
  }
  if (sub === "enroll") {
    return <ExtEnroll ink={ink} onBack={() => setSub("passkeys")} />;
  }
  if (sub === "server") {
    return <ExtServerConfig ink={ink} onBack={() => setSub("menu")} />;
  }

  return (
    <View className="flex-1 p-5" style={{ gap: 12 } as never}>
      <View className="flex-row items-center justify-between">
        <VaultMark />
        <Pressable onPress={onBack} hitSlop={8} className="active:opacity-60">
          <Text className="text-[13px] font-medium text-muted-foreground">Done</Text>
        </Pressable>
      </View>
      <Text className="mt-2 text-lg font-semibold">Settings</Text>
      <ScrollView className="flex-1" contentContainerStyle={{ gap: 8, paddingBottom: 16 } as never}>
        <ExtSettingsRow
          ink={ink}
          icon={<KeyRound size={18} color={ink.fg} strokeWidth={1.75} />}
          label="Passkeys"
          onPress={() => setSub("passkeys")}
        />
        <ExtSettingsRow
          ink={ink}
          icon={<Server size={18} color={ink.fg} strokeWidth={1.75} />}
          label="Server URL"
          onPress={() => setSub("server")}
        />
        <View style={{ height: 8 } as never} />
        <Button variant="destructive" onPress={() => {}}>
          <View className="flex-row items-center justify-center gap-2">
            <LogOut size={16} color="#ffffff" strokeWidth={2} />
            <Text className="text-sm font-medium" style={{ color: "#ffffff" } as never}>
              Sign out
            </Text>
          </View>
        </Button>
        <Text className="mt-1 text-xs text-muted-foreground">
          Signing out clears your session token. Your encrypted vault stays on the server.
        </Text>
      </ScrollView>
    </View>
  );
}

// Passkey management (PasskeyListScreen) — popup directs rename/delete to the
// main app behind the MFA gate; "Add passkey" stays one click away.
function ExtPasskeys({
  ink,
  onBack,
  onAdd,
}: {
  ink: ReturnType<typeof useInk>;
  onBack: () => void;
  onAdd: () => void;
}) {
  return (
    <View className="flex-1 p-5" style={{ gap: 12 } as never}>
      <View className="flex-row items-center justify-between">
        <View className="flex-row items-center gap-2">
          <Pressable onPress={onBack} hitSlop={8} className="active:opacity-60">
            <ChevronLeft size={20} color={ink.fg} strokeWidth={1.75} />
          </Pressable>
          <VaultMark />
        </View>
        <Text className="text-base font-semibold">Passkeys</Text>
      </View>
      <ScrollView
        className="flex-1"
        contentContainerStyle={{ gap: 16, paddingBottom: 16 } as never}
      >
        <View style={{ gap: 8 } as never}>
          <Button onPress={onAdd}>
            <View className="flex-row items-center justify-center gap-2">
              <Plus size={16} color={ink.bg} strokeWidth={2} />
              <Text className="text-sm font-medium" style={{ color: ink.bg } as never}>
                Add passkey
              </Text>
            </View>
          </Button>
          <Text className="text-xs text-muted-foreground">
            Register a new passkey for this account using your browser&apos;s built-in WebAuthn
            dialog.
          </Text>
        </View>
        <View className="rounded-lg border border-border p-3" style={{ gap: 8 } as never}>
          <View className="flex-row items-center gap-2">
            <ShieldAlert size={16} color={ink.fg} strokeWidth={1.75} />
            <Text className="flex-1 text-sm font-medium">
              Rename or remove passkeys in the main app
            </Text>
          </View>
          <Text className="text-xs leading-4 text-muted-foreground">
            Renaming and deleting passkeys requires multi-factor verification. The extension popup
            doesn&apos;t surface a TOTP prompt today, so those actions live in the main Vault app
            (web or mobile).
          </Text>
          <View className="mt-1">
            <Button variant="outline" onPress={() => {}}>
              <View className="flex-row items-center justify-center gap-2">
                <ExternalLink size={14} color={ink.fg} strokeWidth={1.75} />
                <Text className="text-[13px] font-medium">Open the main app</Text>
              </View>
            </Button>
            <Text className="mt-1 text-[11px] text-muted-foreground" numberOfLines={1}>
              vault.example.com
            </Text>
          </View>
        </View>
      </ScrollView>
    </View>
  );
}

function ExtEnroll({ ink, onBack }: { ink: ReturnType<typeof useInk>; onBack: () => void }) {
  return (
    <View className="flex-1">
      <View className="flex-row items-center gap-2 px-4 py-3">
        <Pressable onPress={onBack} hitSlop={8} className="active:opacity-60">
          <ChevronLeft size={20} color={ink.fg} strokeWidth={1.75} />
        </Pressable>
        <VaultMark />
      </View>
      <ScrollView className="flex-1" contentContainerStyle={{ padding: 16 } as never}>
        <PasskeyEnroll ink={ink} />
      </ScrollView>
    </View>
  );
}

// Server URL editor (ServerConfigScreen). Test runs a (mocked) reachability
// check and shows the same success banner the real screen does.
// Real reachability probe — ports api/health.ts. Parses the URL, GETs
// `<url>/health`, and only reports success on a JSON `{status:"healthy"}`.
// A bad URL or unreachable host genuinely fails (no mock), so a typo can't
// "pass". Cross-origin servers without CORS show as unreachable — honest for
// a probe fired from the browser.
type HealthResult = { ok: boolean; message: string } | null;

async function probeServer(rawUrl: string): Promise<HealthResult> {
  const trimmed = rawUrl.trim();
  let parsed: URL;
  try {
    parsed = new URL(trimmed);
  } catch {
    return { ok: false, message: "Invalid URL format" };
  }
  const target = `${trimmed.replace(/\/+$/, "")}/health`;
  const ctrl = new AbortController();
  const timer = setTimeout(() => ctrl.abort(), 8000);
  try {
    const res = await fetch(target, { method: "GET", credentials: "omit", signal: ctrl.signal });
    if (!res.ok) {
      return { ok: false, message: `Server responded with HTTP ${res.status}` };
    }
    let body: { status?: string; version?: string } = {};
    try {
      body = (await res.json()) as { status?: string; version?: string };
    } catch {
      return { ok: false, message: "Unexpected response body" };
    }
    if (body.status !== "healthy") {
      return { ok: false, message: `Server reported status: ${body.status ?? "unknown"}` };
    }
    return {
      ok: true,
      message: body.version ? `Server reachable (version ${body.version})` : "Server reachable",
    };
  } catch (e) {
    const reason = e instanceof Error ? e.message : "network error";
    if (parsed.protocol === "https:" && reason.toLowerCase().includes("certificate")) {
      return { ok: false, message: "TLS certificate validation failed" };
    }
    if (reason.toLowerCase().includes("abort") || reason.toLowerCase().includes("timeout")) {
      return { ok: false, message: "Request timed out" };
    }
    return { ok: false, message: `Could not reach server (${reason})` };
  } finally {
    clearTimeout(timer);
  }
}

function ExtServerConfig({ ink, onBack }: { ink: ReturnType<typeof useInk>; onBack: () => void }) {
  const DEFAULT_URL = "https://vault.example.com/api";
  const [url, setUrl] = useState(DEFAULT_URL);
  const [testing, setTesting] = useState(false);
  const [result, setResult] = useState<HealthResult>(null);

  async function test() {
    setTesting(true);
    setResult(null);
    const r = await probeServer(url);
    setResult(r);
    setTesting(false);
  }

  return (
    <ScrollView className="flex-1" contentContainerStyle={{ padding: 24, gap: 16 } as never}>
      <View className="items-start" style={{ marginBottom: 8 } as never}>
        <VaultMark />
      </View>
      <View style={{ gap: 4, marginBottom: 4 } as never}>
        <Text className="text-[22px] font-semibold">Server URL</Text>
        <Text className="text-[13px] text-muted-foreground">
          Point this extension at your self-hosted Vault server. HTTPS required (loopback may use
          HTTP).
        </Text>
      </View>
      <ExtField
        label="URL"
        placeholder="https://vault.example.com/api"
        value={url}
        onChange={(v) => {
          setUrl(v);
          setResult(null);
        }}
        ink={ink}
      />
      {result && (
        <View
          className="rounded-lg border p-2.5"
          style={
            {
              borderColor: result.ok ? "rgb(34,197,94)" : ink.danger,
              backgroundColor: result.ok ? "rgba(34,197,94,0.08)" : "rgba(239,68,68,0.08)",
            } as never
          }
        >
          <Text
            className="text-[13px] font-medium"
            style={{ color: result.ok ? "rgb(34,197,94)" : ink.danger } as never}
          >
            {result.ok ? "✓ " : "✗ "}
            {result.message}
          </Text>
        </View>
      )}
      <View className="flex-row gap-2">
        <View className="flex-1">
          <Button variant="outline" onPress={test} isLoading={testing}>
            {testing ? "" : "Test"}
          </Button>
        </View>
        <View className="flex-1">
          <Button onPress={onBack}>Save</Button>
        </View>
      </View>
      <Button
        variant="ghost"
        onPress={() => {
          setUrl(DEFAULT_URL);
          setResult(null);
        }}
      >
        Reset to default
      </Button>
      <Pressable
        onPress={onBack}
        className="items-center active:opacity-60"
        style={{ marginTop: 4 } as never}
      >
        <Text className="text-[13px] text-muted-foreground">Back</Text>
      </Pressable>
    </ScrollView>
  );
}

function ExtField({
  label,
  placeholder,
  value,
  onChange,
  ink,
  secret,
}: {
  label: string;
  placeholder: string;
  value: string;
  onChange: (v: string) => void;
  ink: ReturnType<typeof useInk>;
  secret?: boolean;
}) {
  const [show, setShow] = useState(false);
  return (
    <View style={{ gap: 6 } as never}>
      <Text className="text-xs text-muted-foreground">{label}</Text>
      <View
        className="flex-row items-center rounded-lg border border-border px-3"
        style={{ height: 40 } as never}
      >
        <TextInput
          value={value}
          onChangeText={onChange}
          placeholder={placeholder}
          placeholderTextColor={ink.muted}
          secureTextEntry={secret && !show}
          className="flex-1 text-sm text-foreground"
          style={{ outlineStyle: "none" } as never}
        />
        {secret && (
          <Pressable onPress={() => setShow((s) => !s)} className="active:opacity-60">
            {show ? <EyeOff size={16} color={ink.muted} /> : <Eye size={16} color={ink.muted} />}
          </Pressable>
        )}
      </View>
    </View>
  );
}

// New / edit login form (clients/extension VaultItemFormScreen). With `item`
// the fields prefill and the screen acts as the editor.
function ExtItemForm({
  ink,
  onCancel,
  item,
}: {
  ink: ReturnType<typeof useInk>;
  onCancel: () => void;
  item?: Item;
}) {
  const acc = item?.accounts[0];
  const [fav, setFav] = useState(item?.favorite ?? false);
  const [picked, setPicked] = useState<string[]>(item?.tags.map((t) => t.name) ?? []);
  const [f, setF] = useState({
    name: item?.name ?? "",
    url: item?.url ?? "",
    label: "",
    username: acc?.username ?? "",
    password: acc?.password ?? "",
    totp: acc?.totp_secret ?? "",
    notes: acc?.notes ?? "",
  });
  const set = (k: keyof typeof f) => (v: string) => setF((s) => ({ ...s, [k]: v }));
  const allTags = Object.values(T);
  return (
    <View className="flex-1">
      <View className="flex-row items-center justify-between border-b border-border px-4 py-3">
        <Pressable onPress={onCancel} className="active:opacity-70">
          <ArrowLeft size={20} color={ink.fg} />
        </Pressable>
        <Text className="text-base font-bold">{item ? "Edit item" : "New item"}</Text>
        <Pressable onPress={() => setFav((v) => !v)} className="active:opacity-70">
          <Star
            size={20}
            color={fav ? ink.star : ink.muted}
            fill={fav ? ink.star : "transparent"}
          />
        </Pressable>
      </View>
      <ScrollView className="flex-1" contentContainerStyle={{ padding: 16, gap: 14 } as never}>
        <ExtField
          label="Name"
          placeholder="e.g. Google"
          value={f.name}
          onChange={set("name")}
          ink={ink}
        />
        <ExtField
          label="URL"
          placeholder="https://example.com"
          value={f.url}
          onChange={set("url")}
          ink={ink}
        />
        <View style={{ gap: 6 } as never}>
          <Text className="text-xs text-muted-foreground">Tags</Text>
          <View className="flex-row flex-wrap gap-1.5">
            {allTags.map((t) => {
              const on = picked.includes(t.name);
              const Icon = t.icon === "circle" ? CircleIcon : t.icon === "star" ? Star : TagIcon;
              return (
                <Pressable
                  key={t.name}
                  onPress={() =>
                    setPicked((s) => (on ? s.filter((x) => x !== t.name) : [...s, t.name]))
                  }
                  className="flex-row items-center gap-1 rounded-md border px-2 py-1"
                  style={
                    {
                      borderColor: `${t.color}${on ? "" : "55"}`,
                      backgroundColor: on ? `${t.color}22` : "transparent",
                    } as never
                  }
                >
                  <Icon size={11} color={t.color} />
                  <Text className="text-xs">{t.name}</Text>
                </Pressable>
              );
            })}
          </View>
        </View>
        <View className="rounded-lg border border-border bg-card p-3" style={{ gap: 12 } as never}>
          <ExtField
            label="Label"
            placeholder="e.g. Personal, Work"
            value={f.label}
            onChange={set("label")}
            ink={ink}
          />
          <ExtField
            label="Username"
            placeholder="you@example.com"
            value={f.username}
            onChange={set("username")}
            ink={ink}
          />
          <ExtField
            label="Password"
            placeholder="••••••••"
            value={f.password}
            onChange={set("password")}
            ink={ink}
            secret
          />
          <ExtField
            label="TOTP secret (base32)"
            placeholder="JBSWY3DPEHPK3PXP"
            value={f.totp}
            onChange={set("totp")}
            ink={ink}
          />
          <ExtField
            label="Notes"
            placeholder="Optional"
            value={f.notes}
            onChange={set("notes")}
            ink={ink}
          />
        </View>
        <Pressable
          onPress={() => {}}
          className="flex-row items-center justify-center gap-2 rounded-lg border border-border py-2.5 active:opacity-80"
        >
          <Plus size={16} color={ink.fg} />
          <Text className="text-sm font-medium">Add account</Text>
        </Pressable>
        <View className="flex-row gap-2 pt-1">
          <View className="flex-1">
            <Button variant="outline" onPress={onCancel}>
              Cancel
            </Button>
          </View>
          <View className="flex-1">
            <Button onPress={onCancel}>{item ? "Save changes" : "Create"}</Button>
          </View>
        </View>
      </ScrollView>
    </View>
  );
}

function ExtModal({
  title,
  ink,
  children,
}: {
  title: string;
  ink: ReturnType<typeof useInk>;
  children: React.ReactNode;
}) {
  void ink;
  return (
    <View
      className="absolute inset-0 z-50 items-center justify-center p-5"
      style={{ backgroundColor: "rgba(0,0,0,0.4)" } as never}
    >
      <View
        className="w-full rounded-xl border border-border bg-card p-4"
        style={{ maxWidth: 320, gap: 14 } as never}
      >
        <Text className="text-sm font-bold">{title}</Text>
        {children}
      </View>
    </View>
  );
}

const TAG_COLORS = ["#3b82f6", "#22c55e", "#f59e0b", "#a855f7", "#06b6d4", "#ef4444"];

function ExtTagModal({
  ink,
  onClose,
  tag,
}: {
  ink: ReturnType<typeof useInk>;
  onClose: () => void;
  tag?: DTag;
}) {
  const [name, setName] = useState(tag?.name ?? "");
  const [color, setColor] = useState(tag?.color ?? TAG_COLORS[0]);
  return (
    <ExtModal title={tag ? "Edit tag" : "New tag"} ink={ink}>
      <ExtField label="Name" placeholder="Personal" value={name} onChange={setName} ink={ink} />
      <View style={{ gap: 6 } as never}>
        <Text className="text-xs text-muted-foreground">Color</Text>
        <View className="flex-row gap-2">
          {TAG_COLORS.map((c) => (
            <Pressable
              key={c}
              onPress={() => setColor(c)}
              style={
                {
                  width: 28,
                  height: 28,
                  borderRadius: 999,
                  backgroundColor: c,
                  borderWidth: color === c ? 2 : 0,
                  borderColor: ink.fg,
                } as never
              }
            />
          ))}
        </View>
      </View>
      <View className="flex-row gap-2">
        <View className="flex-1">
          <Button variant="outline" onPress={onClose}>
            Cancel
          </Button>
        </View>
        <View className="flex-1">
          <Button onPress={onClose}>{tag ? "Save" : "Create"}</Button>
        </View>
      </View>
    </ExtModal>
  );
}

function ExtFolderModal({
  ink,
  onClose,
  folder,
}: {
  ink: ReturnType<typeof useInk>;
  onClose: () => void;
  folder?: DFolder;
}) {
  const [name, setName] = useState(folder?.name ?? "");
  return (
    <ExtModal title={folder ? "Edit folder" : "New folder"} ink={ink}>
      <ExtField label="Name" placeholder="Work" value={name} onChange={setName} ink={ink} />
      <View className="flex-row gap-2">
        <View className="flex-1">
          <Button variant="outline" onPress={onClose}>
            Cancel
          </Button>
        </View>
        <View className="flex-1">
          <Button onPress={onClose}>{folder ? "Save" : "Create"}</Button>
        </View>
      </View>
    </ExtModal>
  );
}

type ExtTab = "vault" | "tags" | "send" | "secrets";
export type ExtRoute =
  | { r: "main" }
  | { r: "detail"; id: string }
  | { r: "settings" }
  | { r: "new" };

// External controller — lets a parent scene drive the popup (route, the
// highlighted row, the "copied" field, and the list/detail scroll positions)
// instead of the popup's own internal autoplay. Used by TotpScene so a single
// scene-level cursor can hand the code off to a browser window.
function PasskeyEnroll({ ink }: { ink: ReturnType<typeof useInk> }) {
  const [label, setLabel] = useState("My iPhone");
  return (
    <Card
      className="w-full max-w-[480px] self-center"
      style={vaultVars(ink.fg === "#ffffff") as never}
    >
      <CardHeader className="items-center">
        <View className="mb-3 h-16 w-16 items-center justify-center rounded-full bg-secondary">
          <KeyRound size={30} color={ink.fg} />
        </View>
        <CardTitle className="text-center">Add a passkey</CardTitle>
        <CardDescription className="text-center">
          Passkeys are a faster, phishing-resistant way to sign in. Use Face ID, Touch ID, or a
          hardware key.
        </CardDescription>
      </CardHeader>
      <CardContent className="gap-4">
        <View className="flex-row items-start gap-2 rounded-lg bg-secondary p-3">
          <View className="mt-0.5">
            <Fingerprint size={16} color={ink.muted} />
          </View>
          <MutedText className="flex-1 text-xs leading-4">
            Your passkey stays on this device (or in iCloud Keychain / Google Password Manager).
            Vault never sees the private key.
          </MutedText>
        </View>
        <View className="gap-1.5">
          <Text className="text-xs text-muted-foreground">Passkey name</Text>
          <View className="rounded-lg border border-border px-3 py-2.5">
            <TextInput
              value={label}
              onChangeText={setLabel}
              placeholder="My iPhone"
              placeholderTextColor={ink.muted}
              className="text-sm text-foreground"
              style={{ outlineStyle: "none" } as never}
            />
          </View>
          <MutedText className="text-xs">
            Used to identify this passkey in your settings list.
          </MutedText>
        </View>
      </CardContent>
      <CardFooter className="flex-col gap-2 border-t-0">
        <Button className="w-full">Create passkey</Button>
      </CardFooter>
    </Card>
  );
}

// ── embedded single demo (registry) ───────────────────────────────────────────

/**
 * A parent-driven view of the popup.
 *
 * Lets a scene puppet the popup — scroll the list, highlight a row, open it,
 * show a field as copied — while the popup keeps owning how any of that looks.
 * All of it is RN-safe, which is why it survived the move.
 *
 * What did NOT survive is the original's self-driving `auto` mode: it steered a
 * synthetic cursor with `querySelector` and `getBoundingClientRect`, which have
 * no meaning on native. A scene that wants that keeps its own cursor and drives
 * this controller instead.
 */
export interface ExtensionPopupController {
  route: ExtRoute;
  highlightId: string | null;
  autoCopied: string | null;
  listScrollRef: React.Ref<ScrollView>;
  detailScrollRef: React.Ref<ScrollView>;
}

/**
 * The browser-extension popup.
 *
 * Interactive by default. Pass `external` to have a parent scene drive it.
 */
export function ExtensionPopup({
  logo,
  external,
  height = EXTENSION_POPUP_HEIGHT,
}: {
  logo?: React.ReactNode;
  external?: ExtensionPopupController;
  /** Frame height. Defaults to the full 600; see `EXTENSION_POPUP_HEIGHT`. */
  height?: number;
} = {}) {
  const ink = useInk();
  const dark = ink.fg === "#ffffff";
  const [tab, setTab] = useState<ExtTab>("vault");
  const [route, setRoute] = useState<ExtRoute>({ r: "main" });
  const [modal, setModal] = useState<"tag" | "folder" | null>(null);
  const [items, setItems] = useState<Item[]>(ITEMS);
  const driven = !!external;
  const vroute = external ? external.route : route;
  const openItem = vroute.r === "detail" ? (items.find((i) => i.id === vroute.id) ?? null) : null;

  return (
    <View
      className="relative self-center overflow-hidden rounded-xl border border-border bg-background"
      style={[vaultVars(dark), { width: EXTENSION_POPUP_WIDTH, height }] as never}
      // A driven popup is a picture, not a control: taps would fight the scene.
      pointerEvents={driven ? "none" : "auto"}
    >
      {vroute.r === "detail" && openItem ? (
        <ItemDetail
          item={openItem}
          ink={ink}
          onBack={() => setRoute({ r: "main" })}
          onDelete={() => {
            const id = openItem.id;
            setItems((s) => s.filter((i) => i.id !== id));
            setRoute({ r: "main" });
          }}
          forceCopiedLabel={driven ? external?.autoCopied : undefined}
          scrollRef={external?.detailScrollRef}
        />
      ) : vroute.r === "settings" ? (
        <ExtSettings ink={ink} onBack={() => setRoute({ r: "main" })} />
      ) : vroute.r === "new" ? (
        <ExtItemForm ink={ink} onCancel={() => setRoute({ r: "main" })} />
      ) : (
        <View className="flex-1">
          {/* Vault + Tags tabs show the logo header (matches the app); Send and
              Secrets are full-screen "coming soon" with no header. */}
          {(tab === "vault" || tab === "tags") && (
            <ExtHeader
              logo={logo}
              tab={tab}
              ink={ink}
              onAdd={() => (tab === "tags" ? setModal("tag") : setRoute({ r: "new" }))}
              onAddFolder={() => setModal("folder")}
              onSettings={() => setRoute({ r: "settings" })}
            />
          )}

          <View className="flex-1">
            {tab === "vault" && (
              <VaultList
                ink={ink}
                items={items}
                onOpen={(id) => setRoute({ r: "detail", id })}
                scrollRef={external?.listScrollRef}
                highlightId={external?.highlightId}
              />
            )}
            {tab === "tags" && <ExtTagsTab ink={ink} />}
            {tab === "send" && (
              <ExtComingSoon
                ink={ink}
                icon={<Send size={28} color={ink.muted} />}
                desc="Send files securely via link or email with permissions, auto-expiry, and encryption."
              />
            )}
            {tab === "secrets" && (
              <ExtComingSoon
                ink={ink}
                icon={<KeyRound size={28} color={ink.muted} />}
                desc="Manage API keys, tokens, environment variables, and other developer secrets."
              />
            )}
          </View>

          <ExtBottomNav
            active={tab}
            onChange={(t) => {
              setTab(t);
              setRoute({ r: "main" });
            }}
            ink={ink}
          />

          {modal === "tag" && <ExtTagModal ink={ink} onClose={() => setModal(null)} />}
          {modal === "folder" && <ExtFolderModal ink={ink} onClose={() => setModal(null)} />}
        </View>
      )}
    </View>
  );
}

export default ExtensionPopup;