// ChirpPairingFlow — the audio pairing screen.
//
// Implements the three-act bird animation specified in the brief §6.2:
//   Act 1 (Waiting) — desktop bird idles, soft pulsing chirp ring
//   Act 2 (Contact)  — mobile bird hops in, sound-wave arcs in both
//                       directions, head-tilt reaction
//   Act 3 (Paired)   — sound waves resolve into a glowing connection dot,
//                       both birds wing-flutter, copy switches to "Paired!"
//
// The acts are bound to the `PairingPhase` enum from sync-types; the
// background coordinator drives the phase forward as the audio + Noise
// rounds make progress. The component stays a pure renderer: it does not
// touch the microphone or the WebSocket itself.

import { Component, Show, createEffect, createSignal } from "solid-js";
import type { PairingProgress } from "../../shared/sync-types";

export interface ChirpPairingFlowProps {
  progress: PairingProgress;
  /** Called when the user taps Retry on a terminal-error state. */
  onRetry: () => void;
  /** Called when the user taps Cancel/back on the idle/listening state. */
  onCancel: () => void;
  /** Called once the paired-state dismissal animation completes. */
  onDismiss: () => void;
}

const PAIRED_DISMISS_MS = 2500;

export const ChirpPairingFlow: Component<ChirpPairingFlowProps> = (props) => {
  const [dismissArmed, setDismissArmed] = createSignal(false);

  createEffect(() => {
    if (props.progress.phase === "paired" && !dismissArmed()) {
      setDismissArmed(true);
      const t = setTimeout(() => props.onDismiss(), PAIRED_DISMISS_MS);
      // No need to clean up on unmount — onDismiss is a no-op if parent unmounted.
      void t;
    }
  });

  return (
    <div class="peach-chirp-pair" data-phase={props.progress.phase}
         onClick={() => props.progress.phase === "paired" && props.onDismiss()}>
      <div class="peach-chirp-stage">
        <DesktopBird phase={props.progress.phase} />
        <SoundWaves phase={props.progress.phase} />
        <MobileBird phase={props.progress.phase} />
        <ConnectionDot phase={props.progress.phase} />
      </div>

      <PairingCopy progress={props.progress} />

      <Show when={canCancel(props.progress.phase)}>
        <button class="peach-btn peach-btn-ghost peach-chirp-cancel" onClick={() => props.onCancel()}>
          Cancel
        </button>
      </Show>
      <Show when={isTerminalError(props.progress.phase)}>
        <button class="peach-btn peach-btn-primary peach-chirp-retry" onClick={() => props.onRetry()}>
          Try again
        </button>
      </Show>
      <Show when={props.progress.phase === "mic_denied"}>
        <p class="peach-chirp-mic-help">
          Update your browser's site settings to allow Peach to access the microphone, then try again.
        </p>
      </Show>
    </div>
  );
};

function canCancel(phase: PairingProgress["phase"]): boolean {
  return phase === "listening" || phase === "chirping" || phase === "handshake";
}

function isTerminalError(phase: PairingProgress["phase"]): boolean {
  return (
    phase === "timeout" ||
    phase === "handshake_failed" ||
    phase === "version_mismatch" ||
    phase === "mic_denied"
  );
}

const PairingCopy: Component<{ progress: PairingProgress }> = (props) => {
  return (
    <div class="peach-chirp-copy">
      <h2 class="peach-chirp-headline">{headline(props.progress)}</h2>
      <p class="peach-chirp-sub">{subtext(props.progress)}</p>
    </div>
  );
};

function headline(p: PairingProgress): string {
  switch (p.phase) {
    case "idle":
    case "listening":
    case "chirping":
      return "Hold your phone near your laptop";
    case "handshake":
      return "Pairing…";
    case "paired":
      return "Paired!";
    case "timeout":
      return "Couldn’t find your phone";
    case "mic_denied":
      return "Microphone access needed";
    case "version_mismatch":
      return "Update Peach on both devices";
    case "handshake_failed":
      return "Something went wrong";
  }
}

function subtext(p: PairingProgress): string {
  switch (p.phase) {
    case "idle":
    case "listening":
    case "chirping":
      return "Peach will pair automatically when your phone is close";
    case "handshake":
      return "Hold still — exchanging keys";
    case "paired":
      return p.peerDeviceName ? `Connected to ${p.peerDeviceName}` : "Connected";
    case "timeout":
      return "Make sure Peach is open on your phone and try again";
    case "mic_denied":
      return "Peach uses your microphone to pair. No audio is recorded or stored.";
    case "version_mismatch":
      return "The other device is running a different protocol version";
    case "handshake_failed":
      return p.errorMessage ?? "Please try again";
  }
}

// ---------------------------------------------------------------------------
// Inline SVG birds — kept deliberately schematic so the focus stays on the
// motion. A future polish pass can swap these for the production
// illustrations without changing the component shape.
// ---------------------------------------------------------------------------

const DesktopBird: Component<{ phase: PairingProgress["phase"] }> = (props) => {
  return (
    <svg class="peach-chirp-bird peach-chirp-bird-desktop"
         width="92" height="92" viewBox="0 0 92 92" data-phase={props.phase}>
      <ellipse cx="46" cy="58" rx="28" ry="22" class="peach-chirp-bird-body" />
      <circle cx="58" cy="42" r="14" class="peach-chirp-bird-head" />
      <circle cx="62" cy="40" r="2.2" class="peach-chirp-bird-eye" />
      <path d="M 70 42 L 78 42 L 72 47 Z" class="peach-chirp-bird-beak" />
      <path d="M 30 48 Q 22 56 30 64" class="peach-chirp-bird-wing" fill="none" />
    </svg>
  );
};

const MobileBird: Component<{ phase: PairingProgress["phase"] }> = (props) => {
  return (
    <svg class="peach-chirp-bird peach-chirp-bird-mobile"
         width="74" height="74" viewBox="0 0 74 74" data-phase={props.phase}>
      <ellipse cx="36" cy="48" rx="22" ry="18" class="peach-chirp-bird-body" />
      <circle cx="26" cy="34" r="11" class="peach-chirp-bird-head" />
      <circle cx="22" cy="32" r="1.8" class="peach-chirp-bird-eye" />
      <path d="M 14 34 L 7 34 L 12 38 Z" class="peach-chirp-bird-beak" />
      <path d="M 50 40 Q 58 48 50 56" class="peach-chirp-bird-wing" fill="none" />
    </svg>
  );
};

const SoundWaves: Component<{ phase: PairingProgress["phase"] }> = (props) => {
  return (
    <svg class="peach-chirp-waves" width="320" height="120" viewBox="0 0 320 120" data-phase={props.phase}>
      <path class="peach-chirp-wave peach-chirp-wave-out" d="M 80 60 Q 160 20 240 60" fill="none" />
      <path class="peach-chirp-wave peach-chirp-wave-in" d="M 240 60 Q 160 100 80 60" fill="none" />
    </svg>
  );
};

const ConnectionDot: Component<{ phase: PairingProgress["phase"] }> = (props) => {
  return (
    <div class="peach-chirp-dot" data-phase={props.phase}>
      <span class="peach-chirp-dot-core" />
      <span class="peach-chirp-dot-halo" />
    </div>
  );
};