"use client";

import { FireworkBurstCanvas } from "./index";

export interface DemoProps {
  density?: number;
  accent?: string;
  sparkCount?: number;
  shellSpeed?: number;
  gravity?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ density = 1, accent = "#F5C542", sparkCount = 90, shellSpeed = 6, gravity = 0.05 }: DemoProps) {
  return (
    <div className="w-full p-4 sm:p-6">
      <FireworkBurstCanvas density={density} accent={accent} sparkCount={sparkCount} shellSpeed={shellSpeed} gravity={gravity} className="h-[400px] rounded-2xl" />
    </div>
  );
}

1d:T24f0, 1e:T21704,

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

const props = withDefaults(
  defineProps<{
    density?: number;
    accent?: string;
    sparkCount?: number;
    shellSpeed?: number;
    gravity?: number;
  }>(),
  { density: 1, accent: "#F5C542", sparkCount: 90, shellSpeed: 6, gravity: 0.05 },
);

interface Shell {
  x: number;
  y: number;
  vx: number;
  vy: number;
  targetY: number;
  history: number[];
}

interface Spark {
  x: number;
  y: number;
  vx: number;
  vy: number;
  r: number;
  hue: number;
  sat: number;
  light: number;
  life: number;
  decay: number;
}

const TAU = Math.PI * 2;
const HISTORY = 7;
const DRAG = 0.965;
const SPARK_GRAVITY = 1.15;
const HUE_JITTER = 24;
const FADE_BASE = 0.012;

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

function hexToHsl(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;
  const r = ((n >> 16) & 255) / 255;
  const g = ((n >> 8) & 255) / 255;
  const b = (n & 255) / 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const d = max - min;
  const l = (max + min) / 2;
  const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
  let h = 0;
  if (d !== 0) {
    if (max === r) h = ((g - b) / d) % 6;
    else if (max === g) h = (b - r) / d + 2;
    else h = (r - g) / d + 4;
    h = (h * 60 + 360) % 360;
  }
  return [h, s * 100, l * 100];
}

function hslToRgb(h: number, s: number, l: number): string {
  const a = (s / 100) * Math.min(l / 100, 1 - l / 100);
  const ch = (n: number) => {
    const k = (n + ((h % 360) + 360) / 30) % 12;
    return Math.round(255 * (l / 100 - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))));
  };
  return `${ch(0)}, ${ch(8)}, ${ch(4)}`;
}

const hostEl = ref<HTMLDivElement | null>(null);
const canvasEl = ref<HTMLCanvasElement | null>(null);
let stop: (() => void) | null = null;
let launchAt: (clientX: number, clientY: number) => void = () => {};

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 density = props.density;
  const sparkCountProp = props.sparkCount;
  const shellSpeedProp = props.shellSpeed;
  const gravityProp = props.gravity;
  const [baseH, baseS, baseL] = hexToHsl(props.accent);
  const streakRgb = hslToRgb(baseH, clamp(baseS, 45, 100), clamp(baseL + 22, 55, 92));
  const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
  let reduced = mq.matches;
  const onScheme = () => {
    reduced = mq.matches;
  };
  mq.addEventListener("change", onScheme);

  let w = Math.max(1, host.clientWidth);
  let h = Math.max(1, host.clientHeight);
  const shells: Shell[] = [];
  const sparks: Spark[] = [];

  const burst = (x: number, y: number) => {
    const count = Math.max(8, Math.round(reduced ? sparkCountProp * 0.32 : sparkCountProp));
    const jitter = (TAU / count) * 0.8;
    for (let i = 0; i < count; i++) {
      const angle = (i / count) * TAU + (Math.random() - 0.5) * jitter;
      const speedFrac = 0.35 + Math.random() * 0.65;
      const speed = (1.4 + speedFrac * 3.2) * (0.7 + Math.random() * 0.3);
      sparks.push({
        x,
        y,
        vx: Math.cos(angle) * speed,
        vy: Math.sin(angle) * speed,
        r: 1 + Math.random() * 1.9,
        hue: baseH + (Math.random() - 0.5) * HUE_JITTER,
        sat: clamp(baseS + (Math.random() - 0.5) * 10, 40, 100),
        light: clamp(baseL + (Math.random() - 0.5) * 12, 40, 88),
        life: 1,
        decay: (0.55 + speedFrac * 1.1) * (0.85 + Math.random() * 0.3),
      });
    }
  };

  const spawnShell = () => {
    const x = w * (0.08 + Math.random() * 0.84);
    const targetY = h * (0.12 + Math.random() * 0.5);
    const speed = shellSpeedProp * (0.82 + Math.random() * 0.36);
    shells.push({ x, y: h - 2, vx: (Math.random() - 0.5) * 1.1, vy: -speed, targetY, history: [] });
  };

  launchAt = (clientX: number, clientY: number) => {
    const rect = host.getBoundingClientRect();
    const x = clamp(clientX - rect.left, 4, Math.max(4, w - 4));
    const targetY = clamp(clientY - rect.top, 20, Math.max(20, h - 12));
    const dy = Math.max(1, h - targetY);
    const needed = gravityProp > 0.0009 ? Math.sqrt(2 * gravityProp * dy) * 1.08 : shellSpeedProp;
    const speed = clamp(Math.max(shellSpeedProp, needed), 1.5, 32);
    shells.push({ x, y: h - 2, vx: 0, vy: -speed, targetY, history: [] });
  };

  // Seed one rising shell and one already-bloomed burst so the sky reads at once, without waiting on the timer.
  spawnShell();
  burst(w * (0.3 + Math.random() * 0.4), h * (0.28 + Math.random() * 0.24));

  let launchClock = 0;
  let nextLaunch = (0.35 + Math.random() * 0.9) / density;

  const step = (dt: number) => {
    const frames = Math.min(dt * 60, 3);
    const fadeScale = reduced ? FADE_BASE * 0.35 : FADE_BASE;

    launchClock += dt;
    if (launchClock >= nextLaunch) {
      launchClock = 0;
      const base = (0.35 + Math.random() * 0.9) / density;
      nextLaunch = reduced ? base * 3.4 : base;
      spawnShell();
    }

    for (let i = shells.length - 1; i >= 0; i--) {
      const s = shells[i];
      s.history.push(s.x, s.y);
      if (s.history.length > HISTORY * 2) s.history.splice(0, s.history.length - HISTORY * 2);
      s.vy += gravityProp * frames;
      s.x += s.vx * frames;
      s.y += s.vy * frames;
      const reached = s.y <= s.targetY;
      if (reached || s.vy >= 0) {
        burst(s.x, reached ? s.targetY : s.y);
        shells.splice(i, 1);
      }
    }

    for (let i = sparks.length - 1; i >= 0; i--) {
      const p = sparks[i];
      p.vx *= DRAG;
      p.vy *= DRAG;
      p.vy += gravityProp * SPARK_GRAVITY * frames;
      p.x += p.vx * frames;
      p.y += p.vy * frames;
      p.life -= p.decay * fadeScale * frames;
      if (p.life <= 0 || p.y > h + 40) sparks.splice(i, 1);
    }
  };

  const draw = () => {
    ctx.clearRect(0, 0, w, h);
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
    ctx.lineWidth = 2;
    for (const s of shells) {
      if (s.history.length < 4) continue;
      ctx.beginPath();
      ctx.moveTo(s.history[0], s.history[1]);
      for (let k = 2; k < s.history.length; k += 2) ctx.lineTo(s.history[k], s.history[k + 1]);
      ctx.lineTo(s.x, s.y);
      ctx.strokeStyle = `rgba(${streakRgb}, 0.8)`;
      ctx.stroke();
      ctx.beginPath();
      ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
      ctx.arc(s.x, s.y, 1.6, 0, TAU);
      ctx.fill();
    }
    ctx.globalCompositeOperation = "lighter";
    for (const p of sparks) {
      const alpha = clamp(p.life, 0, 1);
      if (alpha <= 0.01) continue;
      ctx.beginPath();
      ctx.fillStyle = `hsla(${p.hue}, ${p.sat}%, ${p.light}%, ${alpha})`;
      ctx.arc(p.x, p.y, p.r, 0, TAU);
      ctx.fill();
    }
    ctx.globalCompositeOperation = "source-over";
  };

  const resize = () => {
    const rect = host.getBoundingClientRect();
    w = Math.max(1, Math.round(rect.width));
    h = Math.max(1, Math.round(rect.height));
    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 observer = new ResizeObserver(resize);
  observer.observe(host);
  resize();

  let raf = 0;
  let last = performance.now();
  const frame = (now: number) => {
    const dt = Math.min((now - last) / 1000, 0.05);
    last = now;
    step(dt);
    draw();
    raf = requestAnimationFrame(frame);
  };
  raf = requestAnimationFrame(frame);

  return () => {
    cancelAnimationFrame(raf);
    observer.disconnect();
    mq.removeEventListener("change", onScheme);
    launchAt = () => {};
  };
}

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

function onPointerDown(event: PointerEvent) {
  launchAt(event.clientX, event.clientY);
}

function onKeyDown(event: KeyboardEvent) {
  if (event.key === "Enter" || event.key === " ") {
    event.preventDefault();
    const rect = hostEl.value?.getBoundingClientRect();
    if (rect) launchAt(rect.left + rect.width / 2, rect.top + rect.height * 0.32);
  }
}

onMounted(restart);
watch(() => [props.density, props.accent, props.sparkCount, props.shellSpeed, props.gravity], restart);
onBeforeUnmount(() => {
  stop?.();
  stop = null;
});
</script>

<template>
  <div
    ref="hostEl"
    class="firework-burst-canvas"
    tabindex="0"
    aria-label="Fireworks sky. Click, tap, or press enter to launch one."
    :style="{ '--fbc-accent': accent }"
    @pointerdown="onPointerDown"
    @keydown="onKeyDown"
  >
    <canvas ref="canvasEl" aria-hidden="true" class="firework-burst-canvas__canvas"></canvas>
    <slot />
  </div>
</template>

<style scoped>
.firework-burst-canvas {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 220px;
  overflow: hidden;
  background: #0b0d10;
  cursor: crosshair;
  outline: none;
}
.firework-burst-canvas:focus-visible {
  box-shadow: 0 0 0 2px #0b0d10, 0 0 0 4px var(--fbc-accent);
}
.firework-burst-canvas__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
</style>

Nearby