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

interface SyncPairingProps {
  mode: "initiate" | "accept";
  onClose: () => void;
  onPaired: (device: PairedDevice) => void;
}

function generatePairingCode(): string {
  const array = new Uint32Array(1);
  crypto.getRandomValues(array);
  return String(array[0] % 1000000).padStart(6, "0");
}

function CodeDisplay(props: { code: string }) {
  return (
    <div class="peach-pairing-code-display">
      {props.code.split("").map((digit) => (
        <span class="peach-pairing-code-digit">{digit}</span>
      ))}
    </div>
  );
}

function CountdownRing(props: { secondsLeft: number }) {
  const radius = 22;
  const circumference = 2 * Math.PI * radius;
  const progress = () => (props.secondsLeft / 30) * circumference;
  return (
    <div class="peach-pairing-countdown-ring">
      <svg width="56" height="56" viewBox="0 0 56 56">
        <circle
          cx="28"
          cy="28"
          r={radius}
          class="peach-pairing-ring-track"
        />
        <circle
          cx="28"
          cy="28"
          r={radius}
          class="peach-pairing-ring-progress"
          stroke-dasharray={String(circumference)}
          stroke-dashoffset={String(circumference - progress())}
        />
      </svg>
      <span class="peach-pairing-countdown-num">{props.secondsLeft}</span>
    </div>
  );
}

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 [secondsLeft, setSecondsLeft] = createSignal(30);
  const [codeError, setCodeError] = createSignal<string | null>(null);

  let countdownTimer: number | undefined;
  let pairingTimer: number | undefined;

  onCleanup(() => {
    if (countdownTimer !== undefined) window.clearInterval(countdownTimer);
    if (pairingTimer !== undefined) window.clearTimeout(pairingTimer);
  });

  function startCountdown(expiresAt: number) {
    if (countdownTimer !== undefined) window.clearInterval(countdownTimer);
    setSecondsLeft(Math.max(0, Math.floor((expiresAt - Date.now()) / 1000)));
    countdownTimer = window.setInterval(() => {
      const remaining = Math.max(0, Math.floor((expiresAt - Date.now()) / 1000));
      setSecondsLeft(remaining);
      if (remaining === 0) {
        window.clearInterval(countdownTimer);
        setStep({ stage: "idle" });
        void sendMessage({ type: "CANCEL_PAIRING" });
      }
    }, 500);
  }

  async function handleGenerateCode() {
    const code = generatePairingCode();
    const expiresAt = Date.now() + 30_000;
    setStep({ stage: "generating_code", code, expiresAt });
    startCountdown(expiresAt);

    const res = await sendMessage({
      type: "START_PAIRING",
      payload: { code, expiresAt },
    });
    if (!(res as { ok: boolean }).ok) {
      setStep({ stage: "error", message: "Failed to start pairing" });
      return;
    }
    setStep({ stage: "waiting_for_peer" });

    pairingTimer = window.setTimeout(() => {
      setStep({ stage: "idle" });
      void sendMessage({ type: "CANCEL_PAIRING" });
    }, 30_000);
  }

  async function handleCancel() {
    if (countdownTimer !== undefined) window.clearInterval(countdownTimer);
    if (pairingTimer !== undefined) window.clearTimeout(pairingTimer);
    setStep({ stage: "idle" });
    await sendMessage({ type: "CANCEL_PAIRING" });
  }

  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"}>
          <Show when={step().stage === "idle"}>
            <div class="peach-pairing-content">
              <div class="peach-pairing-hero">
                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" class="peach-pairing-icon">
                  <circle cx="20" cy="20" r="18" stroke="var(--peach-accent)" stroke-width="1.5" stroke-dasharray="4 3" />
                  <path d="M14 20h12M20 14v12" stroke="var(--peach-accent)" stroke-width="1.5" stroke-linecap="round" />
                </svg>
              </div>
              <p class="peach-pairing-headline">Pair a new device</p>
              <p class="peach-pairing-subline">
                Generate a code and wait for another device to connect.
              </p>
              <button
                class="peach-btn peach-btn--accent peach-btn--md peach-lock-submit"
                onClick={() => void handleGenerateCode()}
              >
                Generate pairing code
              </button>
            </div>
          </Show>

              <Show when={step().stage === "generating_code" || step().stage === "waiting_for_peer"}>
            <div class="peach-pairing-content">
              <Show when={step().stage === "generating_code"}>
                <CodeDisplay code={(step() as { stage: "generating_code"; code: string }).code} />
                <CountdownRing secondsLeft={secondsLeft()} />
              </Show>
              <Show when={step().stage === "waiting_for_peer"}>
                <CodeDisplay code="------" />
                <p class="peach-pairing-status">
                  <Spinner />
                  Waiting for peer...
                </p>
                <p class="peach-pairing-subline peach-pairing-subline--center">
                  Make sure the other device is searching for peers.
                </p>
              </Show>
              <button
                class="peach-btn peach-btn--ghost peach-btn--md"
                onClick={() => void handleCancel()}
              >
                Cancel
              </button>
            </div>
          </Show>
        </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>
  );
}