import { createSignal, For, onCleanup, onMount, Show } from "solid-js";
import { sendMessage } from "../App";
import type { DiscoveredPeer, PairedDevice, PairingStep } from "../../shared/sync-types";

interface SyncPairingProps {
  onClose: () => void;
  onPaired: (device: PairedDevice) => void;
}

function Spinner() {
  return <span class="peach-pairing-spinner" />;
}

export function SyncPairingView(props: SyncPairingProps) {
  const [step, setStep] = createSignal<PairingStep>({ stage: "idle" });

  const [discoveredPeers, setDiscoveredPeers] = createSignal<DiscoveredPeer[]>([]);
  const [discoveryActive, setDiscoveryActive] = createSignal(false);
  const [discoveryError, setDiscoveryError] = createSignal<string | null>(null);
  const [pairingPeerId, setPairingPeerId] = createSignal<string | null>(null);

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

  onCleanup(() => {
    if (discoveryActive()) void sendMessage({ type: "STOP_PEER_DISCOVERY" });
  });

  function handleRuntimeMessage(msg: unknown) {
    const m = msg as { type?: string; peer?: DiscoveredPeer; deviceId?: string };
    if (m?.type === "SYNC_PEER_DISCOVERED" && m.peer) {
      const peer = m.peer;
      setDiscoveredPeers((prev) => {
        if (prev.some((p) => p.deviceId === peer.deviceId)) return prev;
        return [...prev, peer];
      });
    }
    if (m?.type === "SYNC_PEER_LOST" && m.deviceId) {
      const id = m.deviceId;
      setDiscoveredPeers((prev) => prev.filter((p) => p.deviceId !== id));
    }
  }

  async function startDiscovery() {
    chrome.runtime.onMessage.addListener(handleRuntimeMessage);
    onCleanup(() => chrome.runtime.onMessage.removeListener(handleRuntimeMessage));

    const res = await sendMessage({ type: "START_PEER_DISCOVERY" });
    const response = res as { ok: boolean; error?: string };
    if (response.ok) {
      setDiscoveryActive(true);
      setDiscoveryError(null);
    } else {
      setDiscoveryError(response.error ?? "discovery_failed");
    }
  }

  async function handlePairWithPeer(peer: DiscoveredPeer) {
    setPairingPeerId(peer.deviceId);
    setStep({ stage: "connecting", peerName: peer.deviceName });
    const res = await sendMessage({
      type: "INITIATE_PAIR_WITH_PEER",
      payload: { peer },
    });
    const response = res as { ok: boolean; error?: string };
    setPairingPeerId(null);
    if (!response.ok) {
      setStep({ stage: "error", message: response.error ?? "pair_failed" });
      return;
    }
    const paired: PairedDevice = {
      deviceId: peer.deviceId,
      displayName: peer.deviceName,
      x25519PublicKey: peer.x25519PublicKey,
      pairedAt: Date.now(),
    };
    setStep({ stage: "done", device: paired });
    props.onPaired(paired);
  }

  return (
    <div class="peach-overlay-view ov-enter-right">
      <div class="peach-overlay-header">
        <button
          class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
          onClick={props.onClose}
          aria-label="Close"
        >
          <svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
            <path d="M6 1L1 6L6 11" />
          </svg>
        </button>
        <span class="peach-overlay-title">add a device</span>
        <div class="peach-overlay-spacer" />
      </div>

      <div class="peach-pairing-body">
        <Show when={step().stage === "idle"}>
          <div class="peach-pairing-content peach-pairing-discover">
            <p class="peach-pairing-headline">Add a device</p>
            <Show when={discoveryError()}>
              <p class="peach-pairing-error">
                {discoveryError() === "pro_required"
                  ? "Sync requires Peach Pro."
                  : "Native sync host is not installed yet."}
              </p>
            </Show>
            <Show when={!discoveryError() && discoveredPeers().length === 0}>
              <p class="peach-pairing-status">
                <Spinner />
                Searching for Peach on your local network…
              </p>
            </Show>
            <For each={discoveredPeers()}>
              {(peer) => (
                <div class="peach-pairing-peer-card">
                  <div class="peach-pairing-peer-info">
                    <span class="peach-pairing-peer-name">{peer.deviceName}</span>
                    <span class="peach-pairing-peer-meta">
                      {peer.alreadyPaired ? "Already paired ✓" : "Found on network"}
                    </span>
                  </div>
                  <Show when={!peer.alreadyPaired}>
                    <button
                      class="peach-btn peach-btn--accent peach-btn--sm"
                      onClick={() => void handlePairWithPeer(peer)}
                      disabled={pairingPeerId() !== null}
                    >
                      {pairingPeerId() === peer.deviceId ? "…" : "Pair →"}
                    </button>
                  </Show>
                </div>
              )}
            </For>
            <p class="peach-pairing-subline peach-pairing-subline--center">
              Open Peach on the other device. Both devices need to be on the
              same WiFi network.
            </p>
          </div>
        </Show>

        <Show when={step().stage === "connecting" || step().stage === "verifying"}>
          <div class="peach-pairing-content">
            <Spinner />
            <p class="peach-pairing-status">
              {step().stage === "connecting" ? "Connecting…" : "Verifying…"}
            </p>
          </div>
        </Show>

        <Show when={step().stage === "done"}>
          <div class="peach-pairing-content">
            <div class="peach-pairing-success-icon">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
                <circle cx="16" cy="16" r="14" stroke="var(--peach-health-ok)" stroke-width="1.5" />
                <path d="M10 16L14 20L22 12" stroke="var(--peach-health-ok)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </div>
            <p class="peach-pairing-headline">Paired!</p>
            <p class="peach-pairing-subline peach-pairing-subline--center">
              {(step() as { stage: "done"; device: PairedDevice }).device.displayName}
            </p>
            <button
              class="peach-btn peach-btn--accent peach-btn--md peach-lock-submit"
              onClick={props.onClose}
            >
              Done
            </button>
          </div>
        </Show>

        <Show when={step().stage === "error"}>
          <div class="peach-pairing-content">
            <div class="peach-pairing-error-icon">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
                <circle cx="16" cy="16" r="14" stroke="var(--peach-breach)" stroke-width="1.5" />
                <path d="M11 11L21 21M21 11L11 21" stroke="var(--peach-breach)" stroke-width="1.5" stroke-linecap="round" />
              </svg>
            </div>
            <p class="peach-pairing-headline">Pairing failed</p>
            <p class="peach-pairing-subline peach-pairing-subline--center peach-pairing-error-msg">
              {(step() as { stage: "error"; message: string }).message}
            </p>
            <button
              class="peach-btn peach-btn--ghost peach-btn--md"
              onClick={() => setStep({ stage: "idle" })}
            >
              Try again
            </button>
          </div>
        </Show>
      </div>
    </div>
  );
}