// ChirpSync — the v3 Settings → Sync surface.
//
// Three modes the user can be in:
//
//   1. Locked behind Pro (free user) — soft upsell card, "Learn more" routes
//      to the License section.
//   2. Idle — list of paired devices + "Pair a device" hero button. Stale
//      devices (>7 days since last sync) show a soft warning indicator;
//      vouched devices (received via device manifest, v2 brief §4.2) show
//      an "Added automatically" badge.
//   3. Pairing — ChirpPairingFlow takes over the full surface and drives
//      the three-act bird animation in lockstep with the audio protocol.
//
// The pairing orchestrator lives in `popup/chirp-pair.ts`; this view is
// the binding between that orchestrator, the background-message
// CHIRP_* handlers, and the Settings navigation surrounding it.

import {
  Component,
  Show,
  createEffect,
  createMemo,
  createSignal,
  For,
  onCleanup,
  onMount,
} from "solid-js";
import { sendMessage } from "../../shared/bridge";
import type {
  DeviceType,
  PairedDevice,
  PairingProgress,
} from "../../shared/sync-types";
import { ChirpPairingFlow, DesktopBird, MobileBird } from "../components/ChirpPairingFlow";
import {
  ChirpPairingFailure,
  runChirpPairing,
  type ChirpPairingDeps,
  type PairingRole,
} from "../chirp-pair";
import { getLocalSubnet } from "../../shared/local-network";
import { isNativePlatform } from "../../shared/native";
import { openCapacitorPairingServer } from "../chirp-pair-capacitor";

export interface ChirpSyncViewProps {
  isPro: boolean;
  onBack(): void;
  onLearnPro(): void;
}

const STALE_THRESHOLD_MS = 7 * 24 * 60 * 60 * 1000;

type Mode = "rest" | "pairing";

// Which pairing path the user picked on the method-select screen. `null` =
// still choosing. The birds animate the same way on both paths.
type PairKind = "chirp" | "desktop" | null;

// Desktop helper (peach-sync) code-pairing phases. The SAS and success
// screens are shared with the chirp path; "enter"/"connecting" are unique to
// the typed-code flow. Mirrors the background DesktopPairingError union.
type DesktopPhase = "enter" | "connecting" | "sas" | "paired" | "error";
type DesktopPairingError =
  | "invalid_code"
  | "no_host_found"
  | "handshake_failed"
  | "sas_mismatch"
  | "vault_locked";

const DESKTOP_PAIRED_DISMISS_MS = 2_000;

function desktopErrorCopy(error: DesktopPairingError | "unknown"): { headline: string; sub: string } {
  switch (error) {
    case "invalid_code":
      // Ground truth §0.3: wrong vs expired is indistinguishable on the wire.
      return {
        headline: "Code not found or expired",
        sub: "Check the code on your computer and try again. Codes rotate, so grab a fresh one if it's been a while.",
      };
    case "no_host_found":
      return {
        headline: "Couldn't find your computer",
        sub: "Make sure the Peach helper is running and both devices are on the same Wi-Fi.",
      };
    case "sas_mismatch":
      return {
        headline: "Codes don't match",
        sub: "For your safety, pairing was stopped. Start over and compare the two codes carefully.",
      };
    case "vault_locked":
      return {
        headline: "Unlock Peach first",
        sub: "Your vault needs to be unlocked before you can pair a device.",
      };
    case "handshake_failed":
    default:
      return {
        headline: "Pairing failed",
        sub: "Something went wrong while connecting. Please try again.",
      };
  }
}

export const ChirpSyncView: Component<ChirpSyncViewProps> = (props) => {
  const [devices, setDevices] = createSignal<PairedDevice[]>([]);
  const [mode, setMode] = createSignal<Mode>("rest");
  const [pairing, setPairing] = createSignal<PairingProgress>({ phase: "idle" });
  const [error, setError] = createSignal<string | null>(null);
  const [confirmUnpair, setConfirmUnpair] = createSignal<string | null>(null);
  const [syncStatus, setSyncStatus] = createSignal<"idle" | "syncing" | "error">("idle");
  const [syncFlash, setSyncFlash] = createSignal<string | null>(null);
  // Out-of-band pairing verification: the 6-digit code both devices derive
  // from the shared handshake; the user confirms it matches before the pair
  // is persisted (audit HIGH — pairing initiator authentication).
  const [sasCode, setSasCode] = createSignal<string | null>(null);
  const [sasResolve, setSasResolve] = createSignal<((ok: boolean) => void) | null>(null);

  function resolveSAS(ok: boolean) {
    const r = sasResolve();
    setSasCode(null);
    setSasResolve(null);
    r?.(ok);
  }

  // --- Desktop helper (peach-sync) code pairing -------------------------
  // The whole NK pairing runs in the background; this view drives the UI and
  // the SAS confirmation round-trip via the four PAIR_*/DESKTOP_PAIR_* messages.
  const [pairKind, setPairKind] = createSignal<PairKind>(null);
  const [desktopPhase, setDesktopPhase] = createSignal<DesktopPhase>("enter");
  const [desktopCode, setDesktopCode] = createSignal("");
  const [desktopSas, setDesktopSas] = createSignal<string | null>(null);
  const [desktopError, setDesktopError] = createSignal<DesktopPairingError | "unknown">("unknown");
  const [desktopDevice, setDesktopDevice] = createSignal<PairedDevice | undefined>(undefined);
  const [desktopBusy, setDesktopBusy] = createSignal(false);

  const desktopCodeReady = () => /^\d{6}$/.test(desktopCode());

  function openPairMethodSelect(): void {
    setError(null);
    setPairKind(null);
    setMode("pairing");
  }

  function startDesktopFlow(): void {
    setDesktopCode("");
    setDesktopSas(null);
    setDesktopError("unknown");
    setDesktopDevice(undefined);
    setDesktopBusy(false);
    setDesktopPhase("enter");
    setPairKind("desktop");
  }

  function startChirpFlow(): void {
    setPairKind("chirp");
    void handleStartPairing();
  }

  function onDesktopCodeInput(value: string): void {
    setDesktopCode(value.replace(/\D/g, "").slice(0, 6));
  }

  async function handleDesktopConnect(): Promise<void> {
    if (!desktopCodeReady() || desktopBusy()) return;
    setDesktopBusy(true);
    setDesktopPhase("connecting");
    try {
      const res = (await sendMessage({
        type: "PAIR_WITH_DESKTOP",
        payload: { code: desktopCode() },
      })) as { ok: boolean; error?: string };
      // A synchronous start failure (e.g. vault_locked) returns here; the SAS
      // and the terminal result arrive later as pushes.
      if (!res.ok) {
        setDesktopError((res.error as DesktopPairingError) ?? "unknown");
        setDesktopPhase("error");
      }
    } catch {
      setDesktopError("unknown");
      setDesktopPhase("error");
    } finally {
      setDesktopBusy(false);
    }
  }

  async function respondDesktopConfirm(confirmed: boolean): Promise<void> {
    if (desktopBusy()) return;
    setDesktopBusy(true);
    // Optimistically move on; the terminal DESKTOP_PAIR_RESULT push decides the
    // final phase (paired vs sas_mismatch error).
    if (confirmed) setDesktopPhase("connecting");
    else { setDesktopError("sas_mismatch"); setDesktopPhase("error"); }
    try {
      await sendMessage({ type: "DESKTOP_PAIR_CONFIRM", payload: { confirmed } });
    } finally {
      setDesktopBusy(false);
    }
  }

  // Auto-dismiss after the paired state settles, like the chirp flow.
  createEffect(() => {
    if (desktopPhase() !== "paired") return;
    const t = setTimeout(() => {
      setMode("rest");
      setPairKind(null);
      void refresh();
    }, DESKTOP_PAIRED_DISMISS_MS);
    onCleanup(() => clearTimeout(t));
  });

  async function handleSyncNow(): Promise<void> {
    setSyncStatus("syncing");
    setSyncFlash(null);
    const res = await sendMessage({
      type: "TRIGGER_SYNC",
      payload: { reason: "manual", force: true },
    }) as { ok: boolean; error?: string };
    // Poll briefly for the new state — the dispatcher broadcasts but the
    // popup doesn't yet listen, so a short re-fetch covers it.
    setTimeout(async () => {
      const state = await sendMessage({ type: "GET_SYNC_STATE" }) as {
        ok: boolean;
        data?: { status: "idle" | "syncing" | "error"; entriesReceived?: number; error?: string };
      };
      const s = state.data;
      if (!s) return;
      setSyncStatus(s.status);
      if (s.status === "idle") {
        setSyncFlash(
          (s.entriesReceived ?? 0) > 0
            ? `Synced — ${s.entriesReceived} entries updated`
            : "Vault up to date",
        );
        setTimeout(() => setSyncFlash(null), 3000);
        await refresh();
      } else if (s.status === "error") {
        setSyncFlash(`Sync failed — ${s.error ?? "no mobile host reachable"}`);
        setTimeout(() => setSyncFlash(null), 4000);
      }
    }, 250);
    if (!res.ok) {
      setSyncStatus("error");
      setSyncFlash(`Sync failed — ${res.error ?? "unknown"}`);
      setTimeout(() => setSyncFlash(null), 4000);
    }
  }

  onMount(() => {
    void refresh();

    // Desktop pairing pushes from the background (bg → popup). The whole NK
    // pairing runs in the service worker; the SAS to confirm and the terminal
    // result arrive here as runtime messages.
    if (typeof chrome !== "undefined" && chrome.runtime?.onMessage) {
      const handler = (msg: { type?: string; payload?: unknown }) => {
        if (pairKind() !== "desktop") return;
        if (msg?.type === "DESKTOP_PAIR_SAS") {
          const p = msg.payload as { sas?: string } | undefined;
          if (typeof p?.sas === "string") { setDesktopSas(p.sas); setDesktopPhase("sas"); }
        } else if (msg?.type === "DESKTOP_PAIR_RESULT") {
          const p = msg.payload as
            | { status: "complete"; device: PairedDevice }
            | { status: "error"; error: DesktopPairingError }
            | undefined;
          if (p?.status === "complete") { setDesktopDevice(p.device); setDesktopPhase("paired"); }
          else if (p?.status === "error") { setDesktopError(p.error); setDesktopPhase("error"); }
        }
      };
      chrome.runtime.onMessage.addListener(handler);
      onCleanup(() => chrome.runtime.onMessage.removeListener(handler));
    }
  });

  async function refresh(): Promise<void> {
    if (!props.isPro) return;
    const res = await sendMessage({ type: "CHIRP_LIST_PAIRED_DEVICES" });
    const data = (res as { ok: boolean; data?: { devices: PairedDevice[] } }).data;
    setDevices(data?.devices ?? []);
  }

  async function handleStartPairing(): Promise<void> {
    setError(null);

    // audioCapture is declared as optional_permissions in the manifest.
    // Chrome will silently deny getUserMedia unless we request it here,
    // during a user gesture. Firefox ignores this API but getUserMedia works
    // under its existing host permission grant.
    if (typeof chrome !== "undefined" && chrome.permissions?.request) {
      const granted = await chrome.permissions.request({
        permissions: ["audioCapture" as chrome.runtime.ManifestPermissions],
      });
      if (!granted) {
        setPairing({ phase: "mic_denied" });
        setMode("pairing");
        return;
      }
    }

    setPairing({ phase: "idle" });
    setMode("pairing");

    const deps: ChirpPairingDeps = {
      onProgress: (p) => setPairing(p),
      fetchLocalIdentity: async () => {
        const res = await sendMessage({ type: "CHIRP_GET_LOCAL_IDENTITY" });
        const r = res as { ok: boolean; data?: Parameters<ChirpPairingDeps["onProgress"]>[0] & object; error?: string };
        if (!r.ok || !r.data) throw new Error(r.error ?? "identity_unavailable");
        // The handler returns a LocalIdentity; we trust the background's shape.
        return r.data as unknown as Awaited<ReturnType<ChirpPairingDeps["fetchLocalIdentity"]>>;
      },
      completePairing: async (paired) => {
        const res = await sendMessage({
          type: "CHIRP_COMPLETE_PAIRING",
          payload: { paired },
        });
        const r = res as { ok: boolean; error?: string };
        if (!r.ok) throw new Error(r.error ?? "complete_pairing_failed");
      },
      confirmSAS: (sas) =>
        new Promise<boolean>((resolve) => {
          setSasResolve(() => resolve);
          setSasCode(sas);
        }),
      getLocalSubnet,
      openPairingTransport: async (endpoint) => {
        // Native WebSocket transport for the pairing-mode peer scan. The
        // chirp-pair orchestrator only uses send/receive/close, so a thin
        // adapter over the platform WebSocket suffices.
        return new Promise((resolve, reject) => {
          let ws: WebSocket;
          try {
            ws = new WebSocket(`ws://${endpoint.ip}:${endpoint.port}/`);
          } catch (err) {
            reject(err);
            return;
          }
          const inbox: Uint8Array[] = [];
          const waiters: Array<(b: Uint8Array) => void> = [];
          let closed = false;
          ws.binaryType = "arraybuffer";
          const timer = setTimeout(() => {
            try { ws.close(); } catch { /* ignore */ }
            reject(new Error("pairing_transport_timeout"));
          }, 2_000);
          ws.onopen = () => {
            clearTimeout(timer);
            resolve({
              async send(data: Uint8Array) {
                ws.send(data as Uint8Array<ArrayBuffer>);
              },
              receive(): Promise<Uint8Array> {
                if (closed) return Promise.reject(new Error("closed"));
                const v = inbox.shift();
                if (v) return Promise.resolve(v);
                return new Promise<Uint8Array>((res) => waiters.push(res));
              },
              async close() {
                try { ws.close(); } catch { /* ignore */ }
              },
            });
          };
          ws.onmessage = (ev) => {
            if (!(ev.data instanceof ArrayBuffer)) return;
            const bytes = new Uint8Array(ev.data);
            const w = waiters.shift();
            if (w) w(bytes); else inbox.push(bytes);
          };
          ws.onerror = () => {
            clearTimeout(timer);
            reject(new Error("pairing_transport_error"));
          };
          ws.onclose = () => {
            closed = true;
            while (waiters.length > 0) waiters.shift()!(new Uint8Array(0));
          };
        });
      },
    };

    const role: PairingRole = isNativePlatform() ? "initiator" : "responder";
    if (role === "initiator") deps.openPairingServer = openCapacitorPairingServer;

    try {
      await runChirpPairing(deps, role);
      await refresh();
    } catch (err) {
      if (err instanceof ChirpPairingFailure) {
        // The orchestrator already pushed the terminal phase into
        // `pairing()`; the inline error copy will render. No further
        // action needed — the user can tap "Try again" or "Cancel".
        return;
      }
      setError((err as Error).message);
      setMode("rest");
    }
  }

  async function handleUnpair(deviceId: string): Promise<void> {
    await sendMessage({ type: "CHIRP_UNPAIR_DEVICE", payload: { deviceId } });
    setConfirmUnpair(null);
    await refresh();
  }

  function relativeTime(when: number | undefined): string {
    if (!when) return "Not synced yet";
    const elapsed = Date.now() - when;
    if (elapsed < 60_000) return "Just now";
    const minutes = Math.floor(elapsed / 60_000);
    if (minutes < 60) return `${minutes} minute${minutes === 1 ? "" : "s"} ago`;
    const hours = Math.floor(minutes / 60);
    if (hours < 24) return `${hours} hour${hours === 1 ? "" : "s"} ago`;
    const days = Math.floor(hours / 24);
    if (days < 7) return `${days} day${days === 1 ? "" : "s"} ago`;
    return "Not seen recently";
  }

  function isStale(d: PairedDevice): boolean {
    if (d.lastSyncedAt === undefined) return false;
    return Date.now() - d.lastSyncedAt > STALE_THRESHOLD_MS;
  }

  // --- Sub-views --------------------------------------------------

  const proGateView = () => (
    <div class="peach-chirp-settings peach-chirp-settings--gated">
      <header class="peach-chirp-settings-header">
        <button class="peach-icon-btn" aria-label="Back" onClick={() => props.onBack()}>
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
            <path d="M11 4 L5 9 L11 14" />
          </svg>
        </button>
        <h1 class="peach-chirp-settings-title">Sync</h1>
      </header>
      <div class="peach-chirp-pro-card">
        <div class="peach-chirp-pro-stage" aria-hidden="true">
          <svg class="peach-chirp-pro-chirp" viewBox="0 0 200 120" fill="none" stroke="currentColor"
               stroke-linecap="round" stroke-linejoin="round">
            <path d="M 124 36 Q 150 30 168 44" stroke-width="1.6" opacity="0.9" />
            <path d="M 128 52 Q 162 50 184 64" stroke-width="1.3" opacity="0.55" />
            <path d="M 124 68 Q 158 76 178 92" stroke-width="1.1" opacity="0.32" />
          </svg>
          <div class="peach-chirp-pro-bird-slot">
            <MobileBird pose="idle" />
          </div>
        </div>
        <h2 class="peach-chirp-pro-headline">A little bird that carries your vault</h2>
        <p class="peach-chirp-pro-body">
          Pairs over an inaudible chirp. Syncs locally across your devices.
          No codes, no servers, no cloud.
        </p>
        <button class="peach-btn peach-btn-primary peach-chirp-pro-cta" onClick={() => props.onLearnPro()}>
          Unlock with Peach Pro
        </button>
        <p class="peach-chirp-pro-foot">Peach Pro · one-time purchase</p>
      </div>
    </div>
  );

  const restView = () => (
    <div class="peach-chirp-pair" data-phase="idle" role="region" aria-label="Sync">
      <header class="peach-chirp-head">
        <button class="peach-chirp-back" aria-label="Back" onClick={() => props.onBack()}>
          <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M10 3 L5 8 L10 13" />
          </svg>
        </button>
        <div class="peach-chirp-title">Sync</div>
        <div class="peach-chirp-head-spacer" />
      </header>

      <div class="peach-chirp-chip-row">
        <div class="peach-chirp-chip" data-phase="idle">
          <span class="peach-chirp-chip-dot" />
          <span class="peach-chirp-chip-text">ready</span>
        </div>
      </div>

      <Show when={error()}>
        <div class="peach-chirp-settings-error" role="alert">{error()}</div>
      </Show>

      <div class="peach-chirp-stage act-idle" aria-hidden="true">
        <div class="peach-chirp-bird-slot peach-chirp-bird-slot-desktop">
          <DesktopBird pose="idle" />
        </div>
        <div class="peach-chirp-bird-slot peach-chirp-bird-slot-mobile">
          <MobileBird pose="hidden" />
        </div>
      </div>

      <div class="peach-chirp-copy-host">
        <div class="peach-chirp-copy peach-chirp-copy-rest">
          <div class="peach-chirp-headline">
            {devices().length === 0 ? "Bring your phone close" : "Sync is ready"}
          </div>
          <div class="peach-chirp-sub">
            {devices().length === 0
              ? "Peach pairs over a short, inaudible chirp — no codes, no servers."
              : "Pair another device, or manage the ones already connected below."}
          </div>
        </div>
      </div>

      <Show when={devices().length > 0}>
        <section class="peach-chirp-paired-section">
          <h2 class="peach-chirp-paired-heading">Paired devices</h2>
          <ul class="peach-chirp-device-list">
            <For each={devices()}>
              {(d) => (
                <li class="peach-chirp-device-row" data-stale={isStale(d) ? "true" : "false"}>
                  <DeviceTypeIcon type={d.deviceType ?? "extension"} />
                  <div class="peach-chirp-device-info">
                    <span class="peach-chirp-device-name">{d.deviceName ?? "Unnamed device"}</span>
                    <span class="peach-chirp-device-meta">
                      {relativeTime(d.lastSyncedAt)}
                      <Show when={d.trustSource === "vouched"}>
                        <span class="peach-chirp-device-badge">Added automatically</span>
                      </Show>
                      <Show when={isStale(d)}>
                        <span class="peach-chirp-device-stale">Not seen recently</span>
                      </Show>
                    </span>
                  </div>
                  <Show
                    when={confirmUnpair() !== d.deviceId}
                    fallback={
                      <div class="peach-chirp-unpair-confirm">
                        <button class="peach-btn peach-btn-ghost peach-btn-sm" onClick={() => setConfirmUnpair(null)}>
                          Cancel
                        </button>
                        <button class="peach-btn peach-btn-destructive peach-btn-sm" onClick={() => void handleUnpair(d.deviceId)}>
                          Remove
                        </button>
                      </div>
                    }
                  >
                    <button
                      class="peach-icon-btn peach-chirp-device-remove"
                      aria-label={`Unpair ${d.deviceName}`}
                      onClick={() => setConfirmUnpair(d.deviceId)}
                    >
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M3 3 L11 11 M11 3 L3 11" />
                      </svg>
                    </button>
                  </Show>
                </li>
              )}
            </For>
          </ul>
        </section>
      </Show>

      <Show when={devices().length > 0}>
        <div class="peach-chirp-sync-now-row">
          <button
            class="peach-btn peach-btn-ghost peach-btn-sm peach-chirp-sync-now"
            disabled={syncStatus() === "syncing"}
            onClick={() => void handleSyncNow()}
          >
            {syncStatus() === "syncing" ? "Syncing…" : "Sync now"}
          </button>
          <Show when={syncFlash()}>
            <span class="peach-chirp-sync-flash" aria-live="polite">
              {syncFlash()}
            </span>
          </Show>
        </div>
      </Show>

      <div class="peach-chirp-action">
        <p class="peach-chirp-mic-notice">
          Pair over a chirp in the same room, or with the desktop helper by code.
        </p>
        <button class="peach-chirp-pair-start" onClick={() => openPairMethodSelect()}>
          <svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M3 9 L9 3 L15 9" />
            <path d="M3 13 L9 7 L15 13" opacity="0.5" />
          </svg>
          <span>{devices().length === 0 ? "Pair a device" : "Pair another device"}</span>
        </button>
      </div>

    </div>
  );

  const backArrow = (
    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
      <path d="M10 3 L5 8 L10 13" />
    </svg>
  );

  // The bird stage — always animating — shared by every desktop pairing screen
  // so the bird animation is present regardless of sync method.
  const desktopBirdStage = (active: boolean) => (
    <div class={`peach-chirp-stage ${active ? "act-handshake" : "act-listening"}`} aria-hidden="true">
      <div class="peach-chirp-bird-slot peach-chirp-bird-slot-desktop">
        <DesktopBird pose="chirping" />
      </div>
      <div class="peach-chirp-bird-slot peach-chirp-bird-slot-mobile">
        <MobileBird pose="attentive" />
      </div>
    </div>
  );

  function desktopLiveText(): string {
    switch (desktopPhase()) {
      case "enter": return "Enter the pairing code from your computer";
      case "connecting": return "Searching for the helper";
      case "sas": return "Confirm the code matches on your computer";
      case "paired": return "Paired";
      case "error": return desktopErrorCopy(desktopError()).headline;
    }
  }

  // Method-select — the first screen, before any birds. Two paths: a same-room
  // audio chirp, or a typed code from the peach-sync desktop helper.
  const methodSelectView = () => (
    <div class="peach-chirp-pair peach-desktop-pair" data-phase="method" role="region" aria-label="Choose a pairing method">
      <header class="peach-chirp-head">
        <button class="peach-chirp-back" aria-label="Back" onClick={() => setMode("rest")}>{backArrow}</button>
        <div class="peach-chirp-title">Pair a device</div>
        <div class="peach-chirp-head-spacer" />
      </header>
      <div class="peach-chirp-copy-host">
        <div class="peach-chirp-copy">
          <div class="peach-chirp-headline">How do you want to pair?</div>
          <div class="peach-chirp-sub">
            In the same room? Use a chirp. Pairing with the Peach desktop helper? Enter its code.
          </div>
        </div>
      </div>
      <div class="peach-pair-method-list">
        <button class="peach-pair-method peach-chirp-pair-start" onClick={() => startChirpFlow()}>
          <span class="peach-pair-method-title">Same room</span>
          <span class="peach-pair-method-sub">Chirp — audio</span>
        </button>
        <button class="peach-pair-method peach-chirp-pair-start peach-chirp-pair-start--desktop" onClick={() => startDesktopFlow()}>
          <span class="peach-pair-method-title">Desktop helper</span>
          <span class="peach-pair-method-sub">enter code</span>
        </button>
      </div>
      <div class="peach-chirp-action">
        <button class="peach-btn peach-btn-ghost" onClick={() => setMode("rest")}>Cancel</button>
      </div>
    </div>
  );

  // Desktop helper code pairing — birds animate on every screen below.
  const desktopView = () => (
    <div class="peach-chirp-pair peach-desktop-pair" data-phase={desktopPhase()} role="dialog" aria-label="Pair a desktop helper">
      <header class="peach-chirp-head">
        <button class="peach-chirp-back" aria-label="Back" onClick={() => setPairKind(null)}>{backArrow}</button>
        <div class="peach-chirp-title">Desktop Helper</div>
        <div class="peach-chirp-head-spacer" />
      </header>

      {desktopBirdStage(desktopPhase() !== "enter")}

      <Show when={desktopPhase() === "enter"}>
        <div class="peach-desktop-enter">
          <div class="peach-chirp-headline">Enter the code from your computer</div>
          <div class="peach-chirp-sub">
            Open the Peach helper on your computer and type the 6-digit code it shows.
          </div>
          <label class="peach-label" for="desktop-pair-code">pairing code</label>
          <input
            id="desktop-pair-code"
            class="peach-underline-input peach-unlock-input peach-code-input"
            type="text"
            inputmode="numeric"
            autocomplete="one-time-code"
            maxlength={6}
            placeholder="000000"
            aria-label="6-digit pairing code"
            value={desktopCode()}
            ref={(el) => setTimeout(() => el.focus(), 80)}
            onInput={(e) => onDesktopCodeInput((e.target as HTMLInputElement).value)}
            onKeyDown={(e) => { if (e.key === "Enter") void handleDesktopConnect(); }}
          />
          <div class="peach-chirp-action">
            <button class="peach-btn peach-btn-ghost" onClick={() => setPairKind(null)}>Cancel</button>
            <button
              class="peach-btn peach-btn-primary peach-desktop-connect"
              disabled={!desktopCodeReady() || desktopBusy()}
              onClick={() => void handleDesktopConnect()}
            >
              Connect
            </button>
          </div>
        </div>
      </Show>

      <Show when={desktopPhase() === "connecting"}>
        <div class="peach-desktop-searching">
          <div class="peach-chirp-headline">Searching for helper…</div>
          <div class="peach-chirp-sub">Connecting to the Peach helper on your computer.</div>
        </div>
      </Show>

      <Show when={desktopPhase() === "sas"}>
        <div class="peach-desktop-confirm" style="display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 18px 16px;text-align:center;">
          <div class="peach-chirp-headline">Confirm this code matches on your computer:</div>
          <div
            class="peach-desktop-sas"
            style="font-size:30px;font-weight:700;letter-spacing:0.32em;font-family:'IBM Plex Mono',monospace;color:var(--peach-accent);padding:6px 0 2px;"
          >
            {desktopSas()}
          </div>
          <div class="peach-chirp-sub" style="max-width:240px;">
            Only continue if this 6-digit code is identical on both screens.
          </div>
          <div style="display:flex;flex-direction:column;gap:8px;width:100%;max-width:240px;">
            <button class="peach-btn peach-btn-primary" disabled={desktopBusy()} onClick={() => void respondDesktopConfirm(true)}>
              Confirm
            </button>
            <button class="peach-btn peach-btn-ghost" disabled={desktopBusy()} onClick={() => void respondDesktopConfirm(false)}>
              Cancel
            </button>
          </div>
        </div>
      </Show>

      <Show when={desktopPhase() === "paired"}>
        <div class="peach-desktop-paired">
          <div class="peach-chirp-headline">Paired!</div>
          <div class="peach-chirp-sub">
            {desktopDevice()?.deviceName ? `Connected to ${desktopDevice()!.deviceName}` : "Connected to your computer"}
          </div>
          <div class="peach-chirp-action">
            <button class="peach-btn peach-btn-primary" onClick={() => { setMode("rest"); setPairKind(null); void refresh(); }}>Done</button>
          </div>
        </div>
      </Show>

      <Show when={desktopPhase() === "error"}>
        <div class="peach-desktop-error">
          <div class="peach-chirp-headline">{desktopErrorCopy(desktopError()).headline}</div>
          <div class="peach-chirp-sub">{desktopErrorCopy(desktopError()).sub}</div>
          <div class="peach-chirp-action">
            <button class="peach-btn peach-btn-ghost" onClick={() => setMode("rest")}>Cancel</button>
            <button class="peach-btn peach-btn-primary" onClick={() => startDesktopFlow()}>Try again</button>
          </div>
        </div>
      </Show>

      <div class="peach-sr-only" aria-live="polite">{desktopLiveText()}</div>
    </div>
  );

  const chirpPairingView = () => (
    <Show
      when={sasCode()}
      fallback={
        <ChirpPairingFlow
          progress={pairing()}
          onCancel={() => setMode("rest")}
          onRetry={() => void handleStartPairing()}
          onDismiss={() => {
            setMode("rest");
            void refresh();
          }}
        />
      }
    >
      {/* Out-of-band verification gate — pairing is NOT persisted until the
          user confirms this code matches the one on the other device. */}
      <div
        class="chirp-sas-verify"
        style="display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 18px;text-align:center;"
      >
        <div style="font-size:14px;font-weight:600;color:var(--peach-text);">Verify it's really your device</div>
        <div style="font-size:11.5px;line-height:1.45;color:var(--peach-text-muted);max-width:240px;">
          Confirm this code matches the one shown on your other device before pairing.
        </div>
        <div style="font-size:30px;font-weight:700;letter-spacing:0.32em;font-family:'IBM Plex Mono',monospace;color:var(--peach-accent);padding:6px 0 2px;">
          {sasCode()}
        </div>
        <div style="display:flex;flex-direction:column;gap:8px;width:100%;max-width:240px;">
          <button
            class="peach-btn peach-btn--accent peach-btn--md"
            type="button"
            onClick={() => resolveSAS(true)}
          >
            codes match — pair
          </button>
          <button
            class="peach-btn peach-btn--ghost peach-btn--md"
            type="button"
            onClick={() => resolveSAS(false)}
          >
            they don't match
          </button>
        </div>
      </div>
    </Show>
  );

  // Pairing surface dispatch: method-select first (no birds yet), then either
  // the chirp flow or the desktop-helper flow depending on the chosen method.
  const pairingView = () => (
    <Show when={pairKind() !== null} fallback={methodSelectView()}>
      <Show when={pairKind() === "desktop"} fallback={chirpPairingView()}>
        {desktopView()}
      </Show>
    </Show>
  );

  const currentMode = createMemo(() => {
    if (!props.isPro) return "gated";
    if (mode() === "pairing") return "pairing";
    return "rest";
  });

  return (
    <Show
      when={currentMode() === "gated"}
      fallback={
        <Show when={currentMode() === "pairing"} fallback={restView()}>
          {pairingView()}
        </Show>
      }
    >
      {proGateView()}
    </Show>
  );
};

const DeviceTypeIcon: Component<{ type: DeviceType }> = (props) => {
  return (
    <div class="peach-chirp-device-icon" data-type={props.type}>
      <Show when={props.type === "android" || props.type === "ios"}>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
          <rect x="6" y="2" width="8" height="16" rx="1.5" />
          <circle cx="10" cy="15.4" r="0.6" fill="currentColor" />
        </svg>
      </Show>
      <Show when={props.type === "extension" || props.type === "desktop"}>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
          <rect x="2" y="4" width="16" height="10" rx="1.4" />
          <path d="M7 17 L13 17" />
          <path d="M9 14 L9 17 M11 14 L11 17" />
        </svg>
      </Show>
    </div>
  );
};