"use client";

import { PulseRingBloom } from "./index";

export interface DemoProps {
  innerColor?: string;
  outerColor?: string;
  ringCount?: number;
  speed?: number;
  thickness?: number;
  parallax?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  innerColor = "#FF4D8D",
  outerColor = "#F5C542",
  ringCount = 6,
  speed = 1,
  thickness = 2,
  parallax = 0.2,
}: DemoProps) {
  return (
    <div className="w-full p-4 sm:p-6">
      <div className="relative">
        <PulseRingBloom
          innerColor={innerColor}
          outerColor={outerColor}
          ringCount={ringCount}
          speed={speed}
          thickness={thickness}
          parallax={parallax}
          label="Uplink stable"
          className="h-[360px] rounded-2xl border border-white/10"
        />
        <div className="pointer-events-none absolute inset-x-6 bottom-6 flex items-center justify-between text-[11px] font-medium uppercase tracking-[0.2em] text-white/45 sm:inset-x-8 sm:bottom-8">
          <span>Ground station 4</span>
          <span className="font-mono normal-case tracking-normal text-white/55">118ms · 3 peers</span>
        </div>
      </div>
    </div>
  );
}

1e:T1f40, 1f:T1ce7c,

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";

const props = withDefaults(
  defineProps<{
    innerColor?: string;
    outerColor?: string;
    ringCount?: number;
    speed?: number;
    thickness?: number;
    parallax?: number;
    label?: string;
  }>(),
  {
    innerColor: "#FF4D8D",
    outerColor: "#F5C542",
    ringCount: 6,
    speed: 1,
    thickness: 2,
    parallax: 0.2,
    label: "Live signal",
  },
);

const TAU = Math.PI * 2;
const SEGMENTS = 72;
const RING_SPREAD = 0.024;
const RING_PARALLAX_STEP = 0.2;
const ATTACK = 0.12;
const DECAY_POWER = 1.6;
const MAX_GAP = 0.42;
const MAX_STRETCH = 1.6;
const clamp = (v: number, lo: number, hi: number) => (v < lo ? lo : v > hi ? hi : v);
const smooth = (v: number) => (v <= 0 ? 0 : v >= 1 ? 1 : v * v * (3 - 2 * v));

function hexToRgb(hex: string): [number, number, number] {
  const raw = hex.replace("#", "");
  const full = raw.length === 3 ? raw.replace(/./g, (c) => c + c) : raw.padEnd(6, "0").slice(0, 6);
  const n = Number.parseInt(full, 16) || 0;
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
}
function mixRgb(a: [number, number, number], b: [number, number, number], t: number): string {
  const r = Math.round(a[0] + (b[0] - a[0]) * t);
  const g = Math.round(a[1] + (b[1] - a[1]) * t);
  const bl = Math.round(a[2] + (b[2] - a[2]) * t);
  return `${r}, ${g}, ${bl}`;
}

const hostRef = ref<HTMLButtonElement | null>(null);
const canvasRef = ref<HTMLCanvasElement | null>(null);
let cleanup: (() => void) | null = null;
let burstRef = 0;

function press() {
  burstRef = 1;
}

function setup() {
  const host = hostRef.value;
  const canvas = canvasRef.value;
  if (!host || !canvas) return;
  const ctx = canvas.getContext("2d");
  if (!ctx) return;

  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const count = Math.max(2, Math.round(props.ringCount ?? 6));
  const cycle = 2.6 / clamp(props.speed ?? 1, 0.05, 8);
  const inner = hexToRgb(props.innerColor ?? "#FF4D8D");
  const outer = hexToRgb(props.outerColor ?? "#F5C542");
  const thickness = props.thickness ?? 2;
  const parallax = props.parallax ?? 0.2;

  let w = Math.max(1, host.clientWidth);
  let h = Math.max(1, host.clientHeight);

  const noise = document.createElement("canvas");
  noise.width = 48;
  noise.height = 48;
  const nctx = noise.getContext("2d");
  if (nctx) {
    const grain = nctx.createImageData(48, 48);
    for (let p = 0; p < grain.data.length; p += 4) {
      grain.data[p] = 255;
      grain.data[p + 1] = 255;
      grain.data[p + 2] = 255;
      grain.data[p + 3] = Math.random() * 14;
    }
    nctx.putImageData(grain, 0, 0);
  }
  const grainPattern = ctx.createPattern(noise, "repeat");

  let clock = reduced ? cycle * 0.4 : 0;
  let scale = 1;
  let scaleTarget = 1;
  let nx = 0;
  let ny = 0;
  let nxTarget = 0;
  let nyTarget = 0;
  let dpr = 1;

  const draw = () => {
    ctx.clearRect(0, 0, w, h);
    const cx = w / 2;
    const cy = h / 2;
    const maxRadius = Math.min(w, h) * 0.42;
    const stretchX = clamp(w / Math.max(h, 1), 1, MAX_STRETCH);
    const parallaxPx = 16 * clamp(parallax, 0, 1);
    const globalPhase = (clock % cycle) / cycle;
    const brightBoost = 1 + burstRef * 0.85;

    ctx.save();
    ctx.translate(cx + nx * parallaxPx, cy + ny * parallaxPx);
    ctx.scale(scale + burstRef * 0.14, scale + burstRef * 0.14);
    ctx.globalCompositeOperation = "lighter";

    for (let i = 0; i < count; i++) {
      const t = count > 1 ? i / (count - 1) : 0;
      const base = maxRadius * (0.14 + i * RING_SPREAD);
      const local = (globalPhase + i / count) % 1;
      const attackT = Math.min(1, local / ATTACK);
      const attack = smooth(attackT);
      const decayLocal = attackT < 1 ? 0 : clamp((local - ATTACK) / (1 - ATTACK), 0, 1);
      const decay = Math.pow(1 - decayLocal, DECAY_POWER);
      const brightness = attack * decay * brightBoost;
      if (brightness < 0.01) continue;
      const radius = base + local * (maxRadius - base);
      const radiusX = radius * stretchX;
      const gap = t * MAX_GAP;
      const rgb = mixRgb(inner, outer, t);
      const extra = i * RING_PARALLAX_STEP * parallaxPx;

      ctx.save();
      ctx.translate(nx * extra, ny * extra);
      for (let s = 0; s < SEGMENTS; s++) {
        const a0 = (s / SEGMENTS) * TAU;
        const a1 = ((s + 1) / SEGMENTS) * TAU;
        const mid = (a0 + a1) / 2;
        const cosAbs = Math.abs(Math.cos(mid));
        const lens = 0.45 + 0.55 * cosAbs;
        const visible = gap <= 0.001 ? 1 : smooth((cosAbs - gap) / (1 - gap));
        if (visible <= 0.01) continue;
        ctx.beginPath();
        ctx.ellipse(0, 0, radiusX, radius, 0, a0, a1);
        ctx.strokeStyle = `rgba(${rgb}, ${clamp(brightness * visible, 0, 1)})`;
        ctx.lineWidth = Math.max(0.5, (thickness * lens) / dpr);
        ctx.stroke();
      }
      ctx.restore();
    }
    ctx.restore();

    if (grainPattern) {
      ctx.globalCompositeOperation = "source-over";
      ctx.fillStyle = grainPattern;
      ctx.globalAlpha = 0.85;
      ctx.fillRect(0, 0, w, h);
      ctx.globalAlpha = 1;
    }
  };

  const resize = () => {
    const rect = host.getBoundingClientRect();
    w = Math.max(1, Math.round(rect.width));
    h = Math.max(1, Math.round(rect.height));
    dpr = Math.min(window.devicePixelRatio || 1, 2);
    canvas.width = Math.round(w * dpr);
    canvas.height = Math.round(h * dpr);
    canvas.style.width = `${w}px`;
    canvas.style.height = `${h}px`;
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    draw();
  };

  const observer = new ResizeObserver(resize);
  observer.observe(host);
  resize();

  const onMove = (event: PointerEvent) => {
    const rect = host.getBoundingClientRect();
    nxTarget = clamp(((event.clientX - rect.left) / rect.width - 0.5) * 2, -1, 1);
    nyTarget = clamp(((event.clientY - rect.top) / rect.height - 0.5) * 2, -1, 1);
    scaleTarget = 1.07;
  };
  const onLeave = () => {
    nxTarget = 0;
    nyTarget = 0;
    scaleTarget = 1;
  };

  host.addEventListener("pointermove", onMove);
  host.addEventListener("pointerleave", onLeave);

  let raf = 0;
  let last = performance.now();
  const frame = (now: number) => {
    const dt = Math.min((now - last) / 1000, 0.05);
    last = now;
    if (!reduced) clock += dt;
    const chase = Math.min(1, dt * 9);
    nx += (nxTarget - nx) * chase;
    ny += (nyTarget - ny) * chase;
    scale += (scaleTarget - scale) * chase;
    burstRef *= Math.exp(-dt * 4.2);
    if (burstRef < 0.002) burstRef = 0;
    draw();
    raf = requestAnimationFrame(frame);
  };
  raf = requestAnimationFrame(frame);

  cleanup = () => {
    cancelAnimationFrame(raf);
    observer.disconnect();
    host.removeEventListener("pointermove", onMove);
    host.removeEventListener("pointerleave", onLeave);
  };
}

onMounted(setup);
onUnmounted(() => cleanup?.());
</script>

<template>
  <button ref="hostRef" type="button" class="pulse-ring-bloom" :aria-label="`${label}, press to pulse`" @click="press">
    <canvas ref="canvasRef" aria-hidden="true" class="pulse-ring-bloom__canvas" />
    <span v-if="label" class="pulse-ring-bloom__label">{{ label }}</span>
  </button>
</template>

<style scoped>
.pulse-ring-bloom {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  min-height: 220px;
  overflow: hidden;
  background: #0b0d10;
  border: none;
  padding: 0;
  outline: none;
  cursor: pointer;
}
.pulse-ring-bloom:focus-visible {
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.4);
}
.pulse-ring-bloom__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.pulse-ring-bloom__label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: rgb(255 255 255 / 0.8);
  text-shadow: 0 0 10px rgb(0 0 0 / 0.85);
  pointer-events: none;
}
</style>

Nearby