"use client";

import { DriftingParticleField } from "./index";

export interface DemoProps {
  color?: string;
  count?: number;
  spread?: number;
  speed?: number;
  baseSize?: number;
  parallax?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ color = "#9BE15D", count = 200, spread = 10, speed = 0.1, baseSize = 100, parallax = true }: DemoProps) {
  return (
    <div className="h-full w-full">
      <DriftingParticleField color={color} count={count} spread={spread} speed={speed} baseSize={baseSize} parallax={parallax} />
    </div>
  );
}

1d:T24a2, 1e:T1ed57,

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

const props = withDefaults(
  defineProps<{
    color?: string;
    count?: number;
    spread?: number;
    speed?: number;
    baseSize?: number;
    parallax?: boolean;
  }>(),
  { color: "#9BE15D", count: 200, spread: 10, speed: 0.1, baseSize: 100, parallax: true },
);

interface Point {
  bx: number;
  by: number;
  bz: number;
  ax: number;
  ay: number;
  az: number;
  s1: number;
  s2: number;
  s3: number;
  s4: number;
  sizeJitter: number;
  white: boolean;
  px: number;
  py: number;
  pz: number;
}

const TAU = Math.PI * 2;
const SPRITE = 40;
const WHITE_FRACTION = 0.32;
const MAX_PARALLAX = 26;
const PARALLAX_EASE = 6;
const CRAWL_RATE = 0.015;
const FROZEN_TILT = { x: 0.22, y: -0.28, z: 0.36 };

const clamp = (v: number, lo: number, hi: number) => (v < lo ? lo : v > hi ? hi : v);

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

const hostEl = ref<HTMLDivElement | null>(null);
const canvasEl = ref<HTMLCanvasElement | null>(null);
let stop: (() => void) | null = null;

function start(): (() => void) | null {
  const host = hostEl.value;
  const canvas = canvasEl.value;
  if (!host || !canvas) return null;
  const ctx = canvas.getContext("2d");
  if (!ctx) return null;

  const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
  let reduced = mq.matches;

  // One soft glow sprite per tint: far cheaper than drawing a gradient for every point, every frame.
  const sprites = [hexToRgb(props.color), [255, 255, 255] as [number, number, number]].map((rgb) => {
    const off = document.createElement("canvas");
    off.width = SPRITE;
    off.height = SPRITE;
    const sctx = off.getContext("2d");
    if (sctx) {
      const [r, g, b] = rgb;
      const grad = sctx.createRadialGradient(SPRITE / 2, SPRITE / 2, 0, SPRITE / 2, SPRITE / 2, SPRITE / 2);
      grad.addColorStop(0, `rgba(${r}, ${g}, ${b}, 1)`);
      grad.addColorStop(0.35, `rgba(${r}, ${g}, ${b}, 0.85)`);
      grad.addColorStop(0.68, `rgba(${r}, ${g}, ${b}, 0.22)`);
      grad.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
      sctx.fillStyle = grad;
      sctx.fillRect(0, 0, SPRITE, SPRITE);
    }
    return off;
  });

  // Points placed once inside a ball (not a cube) so the cloud has a round silhouette throughout.
  const points: Point[] = [];
  for (let i = 0; i < props.count; i++) {
    const u = Math.random() * 2 - 1;
    const theta = Math.acos(u);
    const phi = Math.random() * TAU;
    const r = Math.cbrt(Math.random());
    const sinT = Math.sin(theta);
    const au = Math.random() * 2 - 1;
    const atheta = Math.acos(au);
    const aphi = Math.random() * TAU;
    const asinT = Math.sin(atheta);
    points.push({
      bx: r * sinT * Math.cos(phi),
      by: r * sinT * Math.sin(phi),
      bz: r * Math.cos(theta),
      ax: asinT * Math.cos(aphi),
      ay: asinT * Math.sin(aphi),
      az: Math.cos(atheta),
      s1: Math.random() * TAU,
      s2: Math.random() * TAU,
      s3: Math.random() * TAU,
      s4: Math.random(),
      sizeJitter: 0.7 + Math.random() * 0.6,
      white: Math.random() < WHITE_FRACTION,
      px: 0,
      py: 0,
      pz: 0,
    });
  }

  let w = Math.max(1, host.clientWidth);
  let h = Math.max(1, host.clientHeight);
  let offsetX = 0;
  let offsetY = 0;
  let targetX = 0;
  let targetY = 0;
  let rotPhase = 0;
  let wanderPhase = 0;
  let raf = 0;
  let running = false;
  let last = performance.now();

  const draw = () => {
    const radiusPx = Math.sqrt(clamp(props.spread, 4, 20) / 20) * Math.min(w, h) * 0.42;
    const cameraDist = radiusPx * 1.8;
    const nominalRadius = 0.55 * (props.baseSize / 100);

    const angleX = reduced ? FROZEN_TILT.x : Math.sin(rotPhase * 0.8) * 0.6;
    const angleY = reduced ? FROZEN_TILT.y : Math.sin(rotPhase * 0.55 + 1.7) * 0.9;
    const rollZ = reduced ? FROZEN_TILT.z : rotPhase * 0.35;
    const cosX = Math.cos(angleX);
    const sinX = Math.sin(angleX);
    const cosY = Math.cos(angleY);
    const sinY = Math.sin(angleY);
    const cosZ = Math.cos(rollZ);
    const sinZ = Math.sin(rollZ);

    const cx = w / 2 + (props.parallax ? offsetX : 0);
    const cy = h / 2 + (props.parallax ? offsetY : 0);

    for (const p of points) {
      const amp = 0.12 + p.s4 * 0.16;
      const wander =
        (Math.sin(wanderPhase * 2.2 + p.s1) * 0.5 + Math.sin(wanderPhase * 3.7 + p.s2) * 0.3 + Math.sin(wanderPhase * 5.3 + p.s3) * 0.2) * amp;
      const x0 = p.bx + p.ax * wander;
      const y0 = p.by + p.ay * wander;
      const z0 = p.bz + p.az * wander;
      const y1 = y0 * cosX - z0 * sinX;
      const z1 = y0 * sinX + z0 * cosX;
      const x1 = x0 * cosY + z1 * sinY;
      const z2 = -x0 * sinY + z1 * cosY;
      p.px = x1 * cosZ - y1 * sinZ;
      p.py = x1 * sinZ + y1 * cosZ;
      p.pz = z2;
    }
    // Farthest first so nearer points draw on top and read as the front of the cloud.
    points.sort((a, b) => a.pz - b.pz);

    ctx.clearRect(0, 0, w, h);
    ctx.globalCompositeOperation = "lighter";
    for (const p of points) {
      const depth = Math.max(cameraDist * 0.3, cameraDist - p.pz * radiusPx);
      const scale = cameraDist / depth;
      const sx = cx + p.px * radiusPx * scale;
      const sy = cy + p.py * radiusPx * scale;
      if (sx < -20 || sx > w + 20 || sy < -20 || sy > h + 20) continue;
      const norm = clamp((scale - 0.5) / 3.1, 0, 1);
      const alpha = clamp(0.16 + norm * 0.84, 0.1, 1);
      const radius = clamp(nominalRadius * scale * p.sizeJitter, 0.35, 6);
      const size = radius * 6.4;
      ctx.globalAlpha = alpha;
      ctx.drawImage(sprites[p.white ? 1 : 0], sx - size / 2, sy - size / 2, size, size);
    }
    ctx.globalAlpha = 1;
    ctx.globalCompositeOperation = "source-over";
  };

  const resize = () => {
    // clientWidth/Height reflect the host's own layout box, immune to an ancestor's CSS
    // transform (e.g. the `full` frame's scale-to-fit); getBoundingClientRect() would report
    // the already-shrunk visual size and double-shrink the canvas.
    w = Math.max(1, host.clientWidth);
    h = Math.max(1, host.clientHeight);
    const 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 resizeObserver = new ResizeObserver(resize);
  resize();
  resizeObserver.observe(host);

  const onPointerMove = (event: PointerEvent) => {
    if (!props.parallax) return;
    const rect = host.getBoundingClientRect();
    const nx = clamp((event.clientX - rect.left) / rect.width - 0.5, -0.5, 0.5);
    const ny = clamp((event.clientY - rect.top) / rect.height - 0.5, -0.5, 0.5);
    targetX = -nx * 2 * MAX_PARALLAX;
    targetY = -ny * 2 * MAX_PARALLAX;
  };
  const onPointerLeave = () => {
    targetX = 0;
    targetY = 0;
  };
  const onScheme = () => {
    reduced = mq.matches;
  };
  host.addEventListener("pointermove", onPointerMove, { passive: true });
  host.addEventListener("pointerleave", onPointerLeave);
  mq.addEventListener("change", onScheme);

  const frame = (now: number) => {
    const dt = Math.min((now - last) / 1000, 0.05);
    last = now;
    wanderPhase += dt * (reduced ? CRAWL_RATE : props.speed);
    if (!reduced) rotPhase += dt * props.speed;
    const ease = 1 - Math.exp(-PARALLAX_EASE * dt);
    offsetX += (targetX - offsetX) * ease;
    offsetY += (targetY - offsetY) * ease;
    draw();
    raf = requestAnimationFrame(frame);
  };
  const startLoop = () => {
    if (running) return;
    running = true;
    last = performance.now();
    raf = requestAnimationFrame(frame);
  };
  const stopLoop = () => {
    running = false;
    cancelAnimationFrame(raf);
  };

  const io = new IntersectionObserver(
    (entries) => {
      if (entries[0]?.isIntersecting && !document.hidden) startLoop();
      else stopLoop();
    },
    { threshold: 0.01 },
  );
  io.observe(host);
  const onVisibility = () => (document.hidden ? stopLoop() : startLoop());
  document.addEventListener("visibilitychange", onVisibility);

  return () => {
    stopLoop();
    io.disconnect();
    resizeObserver.disconnect();
    document.removeEventListener("visibilitychange", onVisibility);
    host.removeEventListener("pointermove", onPointerMove);
    host.removeEventListener("pointerleave", onPointerLeave);
    mq.removeEventListener("change", onScheme);
  };
}

function restart() {
  stop?.();
  stop = start();
}

onMounted(restart);
watch(() => [props.color, props.count, props.spread], restart);
onBeforeUnmount(() => {
  stop?.();
  stop = null;
});
</script>

<template>
  <div ref="hostEl" class="drifting-particle-field">
    <canvas ref="canvasEl" aria-hidden="true" class="drifting-particle-field__canvas"></canvas>
  </div>
</template>

<style scoped>
.drifting-particle-field {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 220px;
  overflow: hidden;
  background: #0b0d10;
}
.drifting-particle-field__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
</style>

Nearby