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

interface SyncPairingProps {
  mode: "initiate" | "accept";
  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 [codeInput, setCodeInput] = createSignal("");
  const [codeError, setCodeError] = createSignal<string | null>(null);

  // Discover-and-tap state for the initiate flow. The background broadcasts
  // SYNC_PEER_DISCOVERED / SYNC_PEER_LOST as peers come and go on mDNS;
  // tapping a peer routes to INITIATE_PAIR_WITH_PEER.
  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(() => {
    if (props.mode !== "initiate") return;
    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);
  }

  async function handleConnect() {
    const code = codeInput().replace(/\D/g, "").slice(0, 6);
    if (code.length !== 6) {
      setCodeError("Enter a 6-digit code");
      return;
    }
    setCodeError(null);
    setStep({ stage: "connecting", peerName: "" });

    const res = await sendMessage({
      type: "ACCEPT_PAIRING",
      payload: { code },
    });
    const response = res as { ok: boolean; data?: PairedDevice; error?: string };

    if (!response.ok) {
      setStep({ stage: "error", message: response.error ?? "Connection failed" });
      return;
    }
    setStep({ stage: "verifying" });

    if (response.data) {
      setStep({ stage: "done", device: response.data });
      props.onPaired(response.data);
    }
  }

  function handleCodeInput(e: InputEvent) {
    const target = e.currentTarget as HTMLInputElement;
    const value = target.value.replace(/\D/g, "").slice(0, 6);
    setCodeInput(value);
    setCodeError(null);
  }

  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">pair devices</span>
        <div class="peach-overlay-spacer" />
      </div>

      <div class="peach-pairing-body">
        <Show when={props.mode === "initiate" && step().stage !== "done" && step().stage !== "error" && step().stage !== "connecting" && step().stage !== "verifying"}>
          <div class="peach-pairing-content peach-pairing-discover">
            <p class="peach-pairing-headline">Pair 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">
              Make sure both devices are on the same Wi-Fi network.
            </p>
          </div>
        </Show>

        <Show when={props.mode === "accept"}>
          <Show when={step().stage === "idle" || step().stage === "entering_code"}>
            <div class="peach-pairing-content">
              <p class="peach-pairing-headline">Pair with another device</p>
              <p class="peach-pairing-subline">
                Enter the 6-digit code shown on the other device.
              </p>
              <div class="peach-pairing-code-inputs">
                {Array.from({ length: 6 }, (_, i) => (
                  <input
                    class={`peach-pairing-code-box ${codeError() ? "has-error" : ""}`}
                    type="text"
                    inputMode="numeric"
                    maxLength={1}
                    value={codeInput()[i] ?? ""}
                    onInput={(e) => {
                      const current = codeInput();
                      const digit = (e.currentTarget as HTMLInputElement).value.replace(/\D/g, "").slice(-1);
                      const newValue = current.slice(0, i) + digit + current.slice(i + 1);
                      setCodeInput(newValue.slice(0, 6));
                      setCodeError(null);
                      if (digit && i < 5) {
                        const inputs = document.querySelectorAll(".peach-pairing-code-box");
                        (inputs[i + 1] as HTMLInputElement)?.focus();
                      }
                    }}
                    onKeyDown={(e) => {
                      if (e.key === "Backspace" && !codeInput()[i] && i > 0) {
                        const inputs = document.querySelectorAll(".peach-pairing-code-box");
                        (inputs[i - 1] as HTMLInputElement)?.focus();
                      }
                    }}
                  />
                ))}
              </div>
              <Show when={codeError()}>
                <p class="peach-pairing-error">{codeError()}</p>
              </Show>
              <button
                class="peach-btn peach-btn--accent peach-btn--md peach-lock-submit"
                onClick={() => void handleConnect()}
                disabled={codeInput().length !== 6}
              >
                Connect
              </button>
            </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>

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