"use client";

import { SweepScope } from "./index";

export interface DemoProps {
  color?: string;
  rings?: number;
  spokes?: number;
  sweepSpeed?: number;
  brightness?: number;
  interactive?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ color = "#9BE15D", rings = 10, spokes = 10, sweepSpeed = 1, brightness = 1, interactive = true }: DemoProps) {
  return (
    <div className="mx-auto w-full max-w-[360px] p-4 sm:p-6">
      <SweepScope color={color} rings={rings} spokes={spokes} sweepSpeed={sweepSpeed} brightness={brightness} interactive={interactive} className="rounded-2xl border border-white/10" />
    </div>
  );
}

1d:T1cd7, 1e:T19817,

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

const props = withDefaults(
  defineProps<{
    color?: string;
    rings?: number;
    spokes?: number;
    sweepSpeed?: number;
    brightness?: number;
    interactive?: boolean;
  }>(),
  { color: "#9BE15D", rings: 10, spokes: 10, sweepSpeed: 1, brightness: 1, interactive: true },
);

type RGB = readonly [number, number, number];

const TAU = Math.PI * 2;
const GROUND: RGB = [11, 13, 16];
const BUFFER_MAX = 220;
const RING_SPEED = 0.16;
const SWEEP_POWER = 5;
const REDUCED_SWEEP_RATE = 0.18;
const FOLLOW_REACH = 0.32;

const host = ref<HTMLDivElement | null>(null);
const canvas = ref<HTMLCanvasElement | null>(null);

function toRgb(hex: string): RGB {
  const match = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
  const value = match ? Number.parseInt(match[1], 16) : 0xffffff;
  return [(value >> 16) & 255, (value >> 8) & 255, value & 255];
}

function render(img: ImageData, w: number, h: number, cx: number, cy: number, ringOffset: number, sweepPhase: number, rgb: RGB, rings: number, spokes: number, brightness: number) {
  const maxR = Math.min(w, h) * 0.5 * 0.94;
  const fadeStart = 0.72;
  const ringSpacing = rings > 0 ? maxR / rings : 0;
  const ringHairlinePx = 1.15;
  const sector = spokes > 0 ? TAU / spokes : 0;
  const spokeWidthPx = 0.85;
  const data = img.data;
  let o = 0;
  for (let y = 0; y < h; y++) {
    const dy = y - cy;
    for (let x = 0; x < w; x++) {
      const dx = x - cx;
      const dist = Math.sqrt(dx * dx + dy * dy);
      const rNorm = dist / maxR;

      let falloff = 0;
      if (rNorm < 1) {
        if (rNorm <= fadeStart) falloff = 1;
        else {
          const s = (rNorm - fadeStart) / (1 - fadeStart);
          falloff = 1 - s * s * (3 - 2 * s);
        }
      }
      if (falloff <= 0.002) {
        data[o++] = GROUND[0];
        data[o++] = GROUND[1];
        data[o++] = GROUND[2];
        data[o++] = 255;
        continue;
      }

      const angle = Math.atan2(dy, dx);

      let ringVal = 0;
      if (rings > 0) {
        const phase = rNorm * rings - ringOffset;
        const frac = phase - Math.floor(phase);
        const toLine = frac < 0.5 ? frac : 1 - frac;
        const distPx = toLine * ringSpacing;
        if (distPx < ringHairlinePx) ringVal = 1 - distPx / ringHairlinePx;
      }

      let spokeVal = 0;
      if (spokes > 0) {
        let a = angle % sector;
        if (a < 0) a += sector;
        const angDist = a < sector - a ? a : sector - a;
        const arcPx = angDist * dist;
        if (arcPx < spokeWidthPx) spokeVal = 1 - arcPx / spokeWidthPx;
      }

      const raised = 0.5 + 0.5 * Math.sin(angle - sweepPhase);
      const sweepVal = raised ** SWEEP_POWER;

      let total = brightness * (ringVal * 0.5 + spokeVal * 0.38 + sweepVal) * falloff;
      if (total > 1.8) total = 1.8;
      const mix = total > 1 ? 1 : total;
      const over = total > 1 ? (total - 1) * 0.4 : 0;

      data[o++] = GROUND[0] + (rgb[0] - GROUND[0]) * mix + over * 255;
      data[o++] = GROUND[1] + (rgb[1] - GROUND[1]) * mix + over * 255;
      data[o++] = GROUND[2] + (rgb[2] - GROUND[2]) * mix + over * 255;
      data[o++] = 255;
    }
  }
}

let cleanup: (() => void) | undefined;

onMounted(() => {
  const hostEl = host.value;
  const canvasEl = canvas.value;
  const view = canvasEl?.getContext("2d");
  const buffer = document.createElement("canvas");
  const bctx = buffer.getContext("2d");
  if (!hostEl || !canvasEl || !view || !bctx) return;

  const calm = window.matchMedia("(prefers-reduced-motion: reduce)");
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  let img = bctx.createImageData(1, 1);
  let bw = 1;
  let bh = 1;
  let ringOffset = 0;
  let sweepPhase = 0;
  let originX = 0;
  let originY = 0;
  let targetX = 0;
  let targetY = 0;
  let last = 0;
  let raf = 0;
  let running = false;
  let intersecting = true;

  const draw = () => {
    const rgb = toRgb(props.color);
    const cx = bw / 2 + originX;
    const cy = bh / 2 + originY;
    render(img, bw, bh, cx, cy, ringOffset, sweepPhase, rgb, props.rings, props.spokes, props.brightness);
    bctx.putImageData(img, 0, 0);
    view.imageSmoothingEnabled = true;
    view.imageSmoothingQuality = "high";
    view.drawImage(buffer, 0, 0, canvasEl.width, canvasEl.height);
  };

  const resize = () => {
    const w = Math.max(1, hostEl.clientWidth);
    const h = Math.max(1, hostEl.clientHeight);
    canvasEl.width = Math.round(w * dpr);
    canvasEl.height = Math.round(h * dpr);
    canvasEl.style.width = `${w}px`;
    canvasEl.style.height = `${h}px`;
    const scale = Math.min(1, BUFFER_MAX / Math.max(w, h));
    bw = Math.max(24, Math.round(w * scale));
    bh = Math.max(24, Math.round(h * scale));
    buffer.width = bw;
    buffer.height = bh;
    img = bctx.createImageData(bw, bh);
    draw();
  };

  const tick = (now: number) => {
    const dt = Math.min(0.05, (now - (last || now)) / 1000);
    last = now;
    if (calm.matches) {
      sweepPhase += REDUCED_SWEEP_RATE * dt;
    } else {
      ringOffset += RING_SPEED * dt;
      sweepPhase += props.sweepSpeed * dt;
      const ease = Math.min(1, dt * 8);
      originX += (targetX - originX) * ease;
      originY += (targetY - originY) * ease;
    }
    draw();
    if (running) raf = requestAnimationFrame(tick);
  };

  const start = () => {
    if (running) return;
    running = true;
    last = 0;
    raf = requestAnimationFrame(tick);
  };
  const stop = () => {
    running = false;
    cancelAnimationFrame(raf);
  };
  const sync = () => {
    if (intersecting && !document.hidden) start();
    else stop();
  };

  const onMove = (event: PointerEvent) => {
    if (!props.interactive || calm.matches) return;
    const rect = hostEl.getBoundingClientRect();
    const nx = (event.clientX - rect.left) / rect.width - 0.5;
    const ny = (event.clientY - rect.top) / rect.height - 0.5;
    targetX = nx * bw * FOLLOW_REACH * 2;
    targetY = ny * bh * FOLLOW_REACH * 2;
  };
  const onLeave = () => {
    targetX = 0;
    targetY = 0;
  };

  const io = new IntersectionObserver(
    (entries) => {
      intersecting = entries[0]?.isIntersecting ?? true;
      sync();
    },
    { threshold: 0.01 },
  );
  io.observe(hostEl);

  const onVisibility = () => sync();
  document.addEventListener("visibilitychange", onVisibility);

  const observer = new ResizeObserver(resize);
  observer.observe(hostEl);
  resize();
  sync();

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

  cleanup = () => {
    stop();
    observer.disconnect();
    io.disconnect();
    document.removeEventListener("visibilitychange", onVisibility);
    hostEl.removeEventListener("pointermove", onMove);
    hostEl.removeEventListener("pointerleave", onLeave);
  };
});

onBeforeUnmount(() => cleanup?.());
</script>

<template>
  <div ref="host" class="sweep-scope">
    <canvas ref="canvas" aria-hidden="true" class="sweep-scope__canvas" />
  </div>
</template>

<style scoped>
.sweep-scope {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background: #0b0d10;
  border-radius: 1rem;
  border: 1px solid rgb(255 255 255 / 0.1);
}
.sweep-scope__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
</style>

Nearby