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

// ── Shared ──────────────────────────────────────────────────────────────────

function formatRelativeTime(ts: number): string {
  const diff = Date.now() - ts;
  const mins = Math.floor(diff / 60_000);
  if (mins < 1) return 'just now';
  if (mins < 60) return `${mins} ${mins === 1 ? 'minute' : 'minutes'} ago`;
  const hrs = Math.floor(mins / 60);
  if (hrs < 24) return `${hrs} ${hrs === 1 ? 'hour' : 'hours'} ago`;
  const days = Math.floor(hrs / 24);
  if (days < 7) return `${days} ${days === 1 ? 'day' : 'days'} ago`;
  return new Date(ts).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
}

// ── Sync Hub — States A / B / C ──────────────────────────────────────────────

interface SyncPairingProps {
  isPro: boolean;
  onAddDevice: () => void;
  onLearnPro: () => void;
  onBack: () => void;
}

export const SyncPairingView: Component<SyncPairingProps> = (props) => {
  const [pairedDevices, setPairedDevices] = createSignal<PairedDevice[]>([]);
  const [hasPaired, setHasPairedSignal] = createSignal(false);
  const [syncStatus, setSyncStatus] = createSignal<'up_to_date' | 'unreachable' | 'syncing' | 'never'>('never');
  const [lastSyncAt, setLastSyncAt] = createSignal<number | null>(null);
  const [syncing, setSyncing] = createSignal(false);
  const [showAdvanced, setShowAdvanced] = createSignal(false);
  const [resetting, setResetting] = createSignal(false);
  const [showInfoSheet, setShowInfoSheet] = createSignal(false);

  onMount(async () => {
    const [paired, devices, syncInfo] = await Promise.all([
      getHasPaired(),
      sendMessage({ type: 'GET_PAIRED_DEVICES' }),
      sendMessage({ type: 'GET_SYNC_STATUS' }),
    ]);

    setHasPairedSignal(paired);
    if (!paired && !props.isPro) setShowInfoSheet(true);

    const d = devices as { ok: boolean; data?: { devices?: PairedDevice[] } };
    if (d?.ok) setPairedDevices(d.data?.devices ?? []);

    const s = syncInfo as { ok: boolean; data?: { status?: 'up_to_date' | 'unreachable' | 'never'; lastSyncAt?: number | null } };
    if (s?.ok) {
      setSyncStatus(s.data?.status ?? 'never');
      setLastSyncAt(s.data?.lastSyncAt ?? null);
    }
  });

  async function handleSyncNow() {
    setSyncing(true);
    const result = await sendMessage({ type: 'TRIGGER_SYNC' });
    setSyncing(false);
    const r = result as { ok: boolean; syncedCount?: number };
    if (r?.ok && (r.syncedCount ?? 0) > 0) {
      setLastSyncAt(Date.now());
      setSyncStatus('up_to_date');
      const devices = await sendMessage({ type: 'GET_PAIRED_DEVICES' });
      const d = devices as { ok: boolean; devices?: PairedDevice[] };
      if (d?.ok) setPairedDevices(d.devices ?? []);
    }
  }

  async function handleResetIdentity() {
    if (!confirm('This will unpair all devices. Are you sure?')) return;
    setResetting(true);
    await sendMessage({ type: 'RESET_SYNC_IDENTITY' });
    setResetting(false);
    setPairedDevices([]);
    setHasPairedSignal(false);
  }

  return (
    <div class="peach-sync-screen peach-overlay-view ov-enter-right">
      <Show when={showInfoSheet()}>
        <SyncInfoSheet
          onGotIt={() => setShowInfoSheet(false)}
          onLearnPro={() => { setShowInfoSheet(false); props.onLearnPro(); }}
        />
      </Show>

      <div class="peach-overlay-header">
        <button
          class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
          onClick={props.onBack}
          aria-label="Back"
        >
          <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">SYNC</span>
        <div class="peach-overlay-spacer" />
      </div>

      <div class="peach-sync-content">

        {/* ── State A: Never paired ── */}
        <Show when={!hasPaired()}>
          <div class="peach-sync-intro">
            <h2 class="peach-sync-headline">sync your vault.</h2>
            <p class="peach-sync-intro-body">
              Peach can transfer your vault to another device instantly
              — just scan a code.
            </p>
          </div>

          <button
            class="peach-btn peach-btn--primary peach-btn--full"
            onClick={props.onAddDevice}
          >
            Add a device
          </button>

          <div class="peach-sync-pro-note">
            <p class="peach-sync-pro-note-text">
              Continuous sync across multiple devices requires Peach Pro.
            </p>
            <button
              class="peach-sync-pro-link"
              onClick={props.onLearnPro}
            >
              Learn about Pro →
            </button>
          </div>
        </Show>

        {/* ── States B + C: Has paired ── */}
        <Show when={hasPaired()}>

          {/* Sync status — Pro only */}
          <Show when={props.isPro}>
            <div class="peach-sync-status">
              <Show
                when={syncStatus() !== 'unreachable'}
                fallback={
                  <div class="peach-sync-status-row">
                    <span class="peach-sync-dot peach-sync-dot--amber" />
                    <span class="peach-sync-status-text">
                      Not on a compatible network
                    </span>
                  </div>
                }
              >
                <div class="peach-sync-status-row">
                  <span class="peach-sync-dot peach-sync-dot--green" />
                  <span class="peach-sync-status-text">
                    <Show when={lastSyncAt()} fallback="Never synced">
                      Last synced {formatRelativeTime(lastSyncAt()!)}
                    </Show>
                  </span>
                </div>
              </Show>
            </div>
          </Show>

          {/* Paired devices */}
          <Show when={pairedDevices().length > 0}>
            <div class="peach-sync-section">
              <p class="peach-sync-section-label">PAIRED DEVICES</p>
              <For each={pairedDevices()}>
                {(device) => (
                  <div class="peach-sync-device-row">
                    <span class="peach-sync-device-name">
                      {device.displayName}
                    </span>
                    <span class="peach-sync-device-meta">
                      {device.lastSyncAt
                        ? formatRelativeTime(device.lastSyncAt)
                        : 'Paired — never synced'}
                    </span>
                  </div>
                )}
              </For>
            </div>
          </Show>

          {/* Action buttons */}
          <div class="peach-sync-actions">
            <button
              class="peach-btn peach-btn--sm"
              onClick={props.onAddDevice}
            >
              Add a device
            </button>
            <Show when={props.isPro}>
              <button
                class="peach-btn peach-btn--sm"
                onClick={handleSyncNow}
                disabled={syncing()}
              >
                {syncing() ? 'Syncing…' : 'Sync now'}
              </button>
            </Show>
          </div>

          {/* State B: upgrade prompt */}
          <Show when={!props.isPro}>
            <div class="peach-sync-upgrade">
              <p class="peach-sync-upgrade-text">
                Want automatic sync? Upgrade to Peach Pro to keep
                all your devices up to date in the background.
              </p>
              <button
                class="peach-btn peach-btn--sm"
                onClick={props.onLearnPro}
              >
                Upgrade to Pro
              </button>
            </div>
          </Show>

          {/* State C: network note */}
          <Show when={props.isPro}>
            <p class="peach-sync-network-note">
              Sync works on your home and trusted networks. Some
              public or corporate networks block device connections.
            </p>
          </Show>

        </Show>

        {/* ── Advanced (all states, collapsed) ── */}
        <div class="peach-sync-advanced">
          <button
            class="peach-sync-advanced-toggle"
            onClick={() => setShowAdvanced(v => !v)}
          >
            <span class={`peach-sync-advanced-chevron${showAdvanced() ? ' is-open' : ''}`}>
              ▸
            </span>
            Advanced
          </button>

          <Show when={showAdvanced()}>
            <div class="peach-sync-advanced-content">
              <div class="peach-sync-advanced-row">
                <div>
                  <p class="peach-sync-advanced-title">
                    Reset sync identity
                  </p>
                  <p class="peach-sync-advanced-subtitle">
                    Generates a new keypair and unpairs every device.
                  </p>
                </div>
                <button
                  class="peach-btn peach-btn--danger peach-btn--sm"
                  onClick={handleResetIdentity}
                  disabled={resetting() || !props.isPro}
                >
                  {resetting() ? 'Resetting…' : 'Reset'}
                </button>
              </div>
            </div>
          </Show>
        </div>

      </div>
    </div>
  );
};

// ── Add Device — QR pairing flow ─────────────────────────────────────────────

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

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

export function AddDeviceView(props: AddDeviceProps) {
  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 — peer can complete after popup closes.
  });

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