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 { SyncComingSoonBanner } from '../components/SyncComingSoonBanner';
import { SyncInfoSheet } from '../components/SyncInfoSheet';
import { isNativePlatform } from '../../shared/native';

// ── 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">

        <SyncComingSoonBanner />

        {/* ── 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>

          <Show when={pairedDevices().length >= 2}>
            <div class="peach-sync-hub-note">
              <p class="peach-sync-hub-note-title">Your phone keeps everything in sync</p>
              <p class="peach-sync-hub-note-body">
                Peach has no servers — your phone acts as the hub between your other devices.
                Desktop-to-desktop sync happens automatically through your phone when it's on
                the same network.
              </p>
            </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" />;
}

type JsQRFn = (data: Uint8ClampedArray, width: number, height: number) => { data: string } | null;

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);
  // Android: default to scan tab; desktop never shows tabs.
  const [tab, setTab] = createSignal<'scan' | 'show'>(isNativePlatform() ? 'scan' : 'show');

  let videoRef: HTMLVideoElement | undefined;
  let canvasRef: HTMLCanvasElement | undefined;
  let animRef: number | null = null;
  let jsQRFn: JsQRFn | 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();
      stopCamera();
      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();
  }

  async function startCamera() {
    setShowError(null);
    if (!jsQRFn) {
      jsQRFn = ((await import('jsqr')) as { default: JsQRFn }).default;
    }
    try {
      const stream = await navigator.mediaDevices.getUserMedia({
        video: { facingMode: 'environment' },
        audio: false,
      });
      if (!videoRef) { for (const t of stream.getTracks()) t.stop(); return; }
      videoRef.srcObject = stream;
      await videoRef.play();
      scanLoop();
    } catch {
      setShowError('Camera unavailable — check camera permissions.');
    }
  }

  function stopCamera() {
    if (videoRef) {
      const stream = videoRef.srcObject as MediaStream | null;
      if (stream) {
        for (const track of stream.getTracks()) track.stop();
        videoRef.srcObject = null;
      }
    }
    if (animRef !== null) { cancelAnimationFrame(animRef); animRef = null; }
  }

  function scanLoop() {
    if (tab() !== 'scan' || !videoRef || !canvasRef || !jsQRFn) return;
    if (videoRef.readyState >= videoRef.HAVE_ENOUGH_DATA) {
      const ctx = canvasRef.getContext('2d');
      if (ctx) {
        canvasRef.width = videoRef.videoWidth;
        canvasRef.height = videoRef.videoHeight;
        ctx.drawImage(videoRef, 0, 0);
        const imageData = ctx.getImageData(0, 0, canvasRef.width, canvasRef.height);
        const code = jsQRFn(imageData.data, imageData.width, imageData.height);
        if (code?.data?.startsWith('peach-pair:')) {
          stopCamera();
          const token = code.data.slice('peach-pair:'.length);
          void handleScannedToken(token);
          return;
        }
      }
    }
    animRef = requestAnimationFrame(scanLoop);
  }

  async function handleScannedToken(token: string) {
    setShowError(null);
    const result = await sendMessage({ type: 'SCAN_PAIRING_QR', payload: { token } });
    const r = result as { ok: boolean; error?: string };
    if (!r?.ok) {
      setShowError('Could not connect. Try again.');
      void startCamera();
    }
  }

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

  onCleanup(() => {
    chrome.runtime.onMessage.removeListener(handleRuntimeMessage);
    clearExpiryTimer();
    stopCamera();
    // 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={() => { stopCamera(); 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>

            {/* Android: two tabs — Scan a code (default) | Show a code */}
            <Show when={isNativePlatform()}>
              <div class="peach-pairing-tabs">
                <button
                  class={`peach-pairing-tab${tab() === 'scan' ? ' is-active' : ''}`}
                  onClick={() => {
                    if (tab() === 'scan') return;
                    setTab('scan');
                    void stopShow();
                    void startCamera();
                  }}
                >
                  Scan a code
                </button>
                <button
                  class={`peach-pairing-tab${tab() === 'show' ? ' is-active' : ''}`}
                  onClick={() => {
                    if (tab() === 'show') return;
                    setTab('show');
                    stopCamera();
                    void startShow();
                  }}
                >
                  Show a code
                </button>
              </div>
            </Show>

            {/* Scan tab — Android only */}
            <Show when={isNativePlatform() && tab() === 'scan'}>
              <div class="peach-pairing-camera-container">
                <video
                  ref={(el) => { videoRef = el; }}
                  class="peach-pairing-video"
                  muted
                  playsinline
                />
                <canvas ref={(el) => { canvasRef = el; }} style={{ display: 'none' }} />
                <div class="peach-pairing-scan-frame" />
              </div>
              <p class="peach-pairing-hint">
                Point your camera at the code on your computer.
              </p>
            </Show>

            {/* Show tab (Android) or full content (desktop) */}
            <Show when={!isNativePlatform() || tab() === 'show'}>
              <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">
                      {isNativePlatform()
                        ? 'Open Peach on the other phone and scan this code.'
                        : '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>

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