import QRCode from 'qrcode';
import { createSignal, onCleanup, onMount, Show } from "solid-js";
import { sendMessage } from "../App";
import type { PairedDevice } from "../../shared/sync-types";
import { setHasPaired } from "../../background/sync-storage";

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

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

export function SyncPairingView(props: SyncPairingProps) {
  const [qrDataUrl, setQrDataUrl] = createSignal<string | null>(null);
  const [timeLeft, setTimeLeft] = createSignal<number>(0);
  const [expiresAt, setExpiresAt] = createSignal<number | null>(null);
  const [showError, setShowError] = createSignal<string | null>(null);

  const [pairedDevice, setPairedDevice] = createSignal<PairedDevice | null>(null);

  let expiryTimer: ReturnType<typeof setTimeout> | null = null;
  let countdownInterval: ReturnType<typeof setInterval> | null = null;

  function clearExpiryTimer() {
    if (expiryTimer !== null) {
      clearTimeout(expiryTimer);
      expiryTimer = null;
    }
    if (countdownInterval !== null) {
      clearInterval(countdownInterval);
      countdownInterval = null;
    }
  }

  function handleRuntimeMessage(msg: unknown) {
    const m = msg as { type?: string; payload?: { deviceName?: string } };
    if (m?.type === "PAIRING_COMPLETED" && m.payload?.deviceName) {
      const device: PairedDevice = {
        deviceId: m.payload.deviceName,
        displayName: m.payload.deviceName,
        x25519PublicKey: "",
        pairedAt: Date.now(),
      };
      clearExpiryTimer();
      setQrDataUrl(null);
      setExpiresAt(null);
      setTimeLeft(0);
      setPairedDevice(device);
      void setHasPaired();
      props.onPaired(device);
    }
  }

  async function startShow() {
    setShowError(null);
    setQrDataUrl(null);
    setExpiresAt(null);
    setTimeLeft(0);
    clearExpiryTimer();
    const res = await sendMessage({ type: "START_PAIRING_SERVER" });
    const response = res as {
      ok: boolean;
      error?: string;
      data?: { token: string; expiresAt: number };
    };
    if (!response.ok || !response.data) {
      setShowError("Couldn't start the pairing server.");
      return;
    }

    const { token, expiresAt: expAt } = response.data;
    const url = await QRCode.toDataURL('peach-pair:' + token, {
      width: 240,
      margin: 2,
      color: {
        dark: '#E8E0D0',
        light: '#00000000',
      },
    });
    setQrDataUrl(url);
    setExpiresAt(expAt);

    const remaining = Math.max(0, expAt - Date.now());
    setTimeLeft(Math.floor(remaining / 1000));

    countdownInterval = setInterval(() => {
      const secs = Math.max(0, Math.floor((expAt - Date.now()) / 1000));
      setTimeLeft(secs);
      if (secs === 0 && countdownInterval !== null) {
        clearInterval(countdownInterval);
        countdownInterval = null;
      }
    }, 1000);

    expiryTimer = setTimeout(() => {
      setQrDataUrl(null);
      setExpiresAt(null);
      setTimeLeft(0);
      setShowError("Code expired — tap to refresh.");
    }, remaining);
  }

  async function stopShow() {
    clearExpiryTimer();
    setQrDataUrl(null);
    setExpiresAt(null);
    setTimeLeft(0);
    await sendMessage({ type: "STOP_PAIRING_SERVER" });
  }

  async function generateCode() {
    await stopShow();
    await startShow();
  }

  onMount(() => {
    chrome.runtime.onMessage.addListener(handleRuntimeMessage);
    void startShow();
  });

  onCleanup(() => {
    chrome.runtime.onMessage.removeListener(handleRuntimeMessage);
    clearExpiryTimer();
    // Pairing server keeps running in the background per spec — the user
    // showed the code, so a peer can still complete pairing after the popup
    // closes. The background clears it on success or vault-lock.
  });

  // expiresAt is stored for completeness; clearExpiryTimer is the primary
  // expiry mechanism.
  void expiresAt;

  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={() => {
            void sendMessage({ type: "STOP_PAIRING_SERVER" });
            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={pairedDevice()}>
          {(device) => (
            <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">
                {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={!pairedDevice()}>
          <div class="peach-pairing-content peach-pairing-code-screen">
            <p class="peach-pairing-headline">Add a device</p>

            <Show when={qrDataUrl()} fallback={
              <Show when={!showError()} fallback={
                <button
                  class="peach-pairing-code peach-pairing-code--expired"
                  onClick={() => void generateCode()}
                >
                  refresh
                </button>
              }>
                <div class="peach-pairing-code peach-pairing-code--loading">
                  <Spinner />
                </div>
              </Show>
            }>
              {(url) => (
                <div class="peach-pairing-qr-container">
                  <img
                    class="peach-pairing-qr"
                    src={url()}
                    alt="Pairing QR"
                  />
                  <p class="peach-pairing-instruction">
                    Open Peach on your phone → Add a device → Scan this code.
                  </p>
                  <Show when={timeLeft() > 0}>
                    <p class="peach-pairing-expiry">
                      {Math.floor(timeLeft() / 60)}:{String(timeLeft() % 60).padStart(2, '0')}
                    </p>
                  </Show>
                  <Show when={timeLeft() === 0}>
                    <button class="peach-pairing-regen" onClick={() => void generateCode()}>
                      Generate new code
                    </button>
                  </Show>
                </div>
              )}
            </Show>

            <p class="peach-pairing-hint">Both devices must be on the same WiFi.</p>

            <Show when={showError()}>
              <p class="peach-pairing-error peach-pairing-error--muted">{showError()}</p>
            </Show>
          </div>
        </Show>
      </div>
    </div>
  );
}