// 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,
  createMemo,
  createSignal,
  For,
  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";

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);

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

  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);
    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");
      },
      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">
          Chirp Sync pairs your phone with your laptop using a quick
          inaudible chirp — then your vault stays in sync across devices on
          your local network. No QR codes, no relay servers, no cloud
          accounts.
        </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>

      <div class="peach-chirp-action">
        <button class="peach-chirp-pair-start" onClick={() => void handleStartPairing()}>
          <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>

      <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>

    </div>
  );

  const pairingView = () => (
    <ChirpPairingFlow
      progress={pairing()}
      onCancel={() => setMode("rest")}
      onRetry={() => void handleStartPairing()}
      onDismiss={() => {
        setMode("rest");
        void refresh();
      }}
    />
  );

  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>
  );
};