"use client";

import { LuminousRibbonField } from "./index";

export interface DemoProps {
  ribbonCount?: number;
  accent?: string;
  speed?: number;
  thickness?: number;
  glow?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ ribbonCount = 3, accent = "#38BDF8", speed = 0.5, thickness = 0.7, glow = 2.6 }: DemoProps) {
  return (
    <div className="h-72 w-full bg-[#0B0D10]">
      <LuminousRibbonField ribbonCount={ribbonCount} accent={accent} speed={speed} thickness={thickness} glow={glow} className="h-full w-full" />
    </div>
  );
}

1d:T1b4e, 1e:T18f6f,

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

const props = withDefaults(
  defineProps<{
    ribbonCount?: number;
    accent?: string;
    speed?: number;
    thickness?: number;
    glow?: number;
  }>(),
  { ribbonCount: 3, accent: "#38BDF8", speed: 0.5, thickness: 0.7, glow: 2.6 },
);

interface RibbonDef {
  freq1: number;
  freq2: number;
  phase1: number;
  phase2: number;
  drift1: number;
  drift2: number;
  offset: number;
  ampScale: number;
  hueJitter: number;
}

const GOLDEN_ANGLE = 2.399963229728653;

function buildRibbons(count: number): RibbonDef[] {
  const n = Math.max(1, Math.min(8, Math.round(count)));
  return Array.from({ length: n }, (_, i) => ({
    freq1: 1.25 + ((i * 0.37) % 1) * 0.65,
    freq2: 1.9 + ((i * 0.61) % 1) * 0.8,
    phase1: i * GOLDEN_ANGLE,
    phase2: i * GOLDEN_ANGLE * 1.7 + 1.15,
    drift1: 0.16 + (i % 4) * 0.045,
    drift2: -(0.11 + (i % 3) * 0.05),
    offset: n > 1 ? ((i - (n - 1) / 2) / (n - 1)) * 0.34 : 0,
    ampScale: 0.82 + (i % 3) * 0.11,
    hueJitter: i * 11,
  }));
}

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 coolHue(h: number, target: number, t: number): number {
  const diff = ((target - h + 540) % 360) - 180;
  return h + diff * t;
}

function hsla(h: number, s: number, l: number, a: number): string {
  return `hsla(${((h % 360) + 360) % 360}, ${s}%, ${l}%, ${a})`;
}

interface DrawParams {
  ribbons: RibbonDef[];
  hue: number;
  fringeHue: number;
  thickness: number;
  glow: number;
}

function drawFrame(ctx: CanvasRenderingContext2D, layerCtx: CanvasRenderingContext2D, width: number, height: number, time: number, p: DrawParams) {
  ctx.clearRect(0, 0, width, height);
  if (width <= 0 || height <= 0) return;
  const midY = height / 2;
  const step = Math.max(2, Math.floor(width / 240));
  for (const r of p.ribbons) {
    layerCtx.clearRect(0, 0, width, height);
    for (let x = 0; x <= width; x += step) {
      const t = x / width;
      const envelope = Math.pow(Math.sin(Math.PI * t), 0.88);
      if (envelope <= 0.003) continue;
      const w1 = Math.sin(t * r.freq1 * Math.PI * 2 + r.phase1 + time * r.drift1);
      const w2 = Math.sin(t * r.freq2 * Math.PI * 2 + r.phase2 + time * r.drift2);
      const wave = w1 * 0.6 + w2 * 0.4;
      const centerY = midY + r.offset * height + wave * envelope * height * 0.15 * r.ampScale;
      const halfCore = Math.max(0.5, p.thickness * 3.1 * r.ampScale) * envelope;
      const halfGlow = halfCore * (1 + p.glow * 0.65);
      const hueShift = Math.sin(t * 2.1 + time * 0.1 + r.phase1) * 9 + r.hueJitter;
      const coreH = p.hue + hueShift;
      const fringeH = p.fringeHue + hueShift * 0.4;
      const coreAlpha = Math.min(0.92, 0.48 + p.glow * 0.09) * envelope;
      const grad = layerCtx.createLinearGradient(x, centerY - halfGlow, x, centerY + halfGlow);
      grad.addColorStop(0, hsla(fringeH, 65, 62, 0));
      grad.addColorStop(0.27, hsla(fringeH, 72, 64, 0.26 * envelope));
      grad.addColorStop(0.45, hsla(coreH, 85, 66, coreAlpha * 0.55));
      grad.addColorStop(0.5, hsla(coreH, 88, 80, coreAlpha));
      grad.addColorStop(0.55, hsla(coreH, 85, 66, coreAlpha * 0.55));
      grad.addColorStop(0.73, hsla(fringeH, 72, 64, 0.26 * envelope));
      grad.addColorStop(1, hsla(fringeH, 65, 62, 0));
      layerCtx.fillStyle = grad;
      layerCtx.fillRect(x, centerY - halfGlow, step + 1, halfGlow * 2);
    }
    ctx.globalCompositeOperation = "lighter";
    ctx.drawImage(layerCtx.canvas, 0, 0, width, height);
  }
  ctx.globalCompositeOperation = "source-over";
}

const containerRef = ref<HTMLDivElement | null>(null);
const canvasRef = ref<HTMLCanvasElement | null>(null);

let observer: ResizeObserver | null = null;
let motionQuery: MediaQueryList | null = null;
let raf = 0;
let width = 0;
let height = 0;
let start = 0;

function stop() {
  if (raf) cancelAnimationFrame(raf);
  raf = 0;
}

function setup() {
  stop();
  const container = containerRef.value;
  const canvas = canvasRef.value;
  if (!container || !canvas) return;
  const ctx = canvas.getContext("2d");
  if (!ctx) return;
  const layer = document.createElement("canvas");
  const layerCtx = layer.getContext("2d");
  if (!layerCtx) return;

  const [hue] = hexToHsl(props.accent);
  const params: DrawParams = {
    ribbons: buildRibbons(props.ribbonCount),
    hue,
    fringeHue: coolHue(hue, 204, 0.6),
    thickness: props.thickness,
    glow: props.glow,
  };
  const reduced = motionQuery?.matches ?? false;

  function resize() {
    const rect = container!.getBoundingClientRect();
    width = Math.max(1, Math.round(rect.width));
    height = Math.max(1, Math.round(rect.height));
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    canvas!.width = Math.round(width * dpr);
    canvas!.height = Math.round(height * dpr);
    canvas!.style.width = `${width}px`;
    canvas!.style.height = `${height}px`;
    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0);
    layer.width = canvas!.width;
    layer.height = canvas!.height;
    layerCtx!.setTransform(dpr, 0, 0, dpr, 0, 0);
    if (reduced) drawFrame(ctx!, layerCtx!, width, height, 0, params);
  }

  observer = new ResizeObserver(resize);
  observer.observe(container);
  resize();

  if (!reduced) {
    start = performance.now();
    const loop = (now: number) => {
      drawFrame(ctx!, layerCtx!, width, height, ((now - start) / 1000) * props.speed, params);
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
  }
}

onMounted(() => {
  motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
  motionQuery.addEventListener("change", setup);
  setup();
});

watch(() => [props.ribbonCount, props.accent, props.speed, props.thickness, props.glow], setup);

onBeforeUnmount(() => {
  stop();
  observer?.disconnect();
  motionQuery?.removeEventListener("change", setup);
});
</script>

<template>
  <div ref="containerRef" class="ribbon-field">
    <canvas ref="canvasRef" class="ribbon-field__canvas" aria-hidden="true" />
  </div>
</template>

<style scoped>
.ribbon-field {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b0d10;
}
.ribbon-field__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
</style>

Nearby