"use client";

import { BranchingBolt } from "./index";

export interface DemoProps {
  boltColor?: string;
  strikeInterval?: number;
  intensity?: number;
  thickness?: number;
  branching?: number;
  clickToStrike?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  boltColor = "#7C5CFF",
  strikeInterval = 2.5,
  intensity = 1.1,
  thickness = 1.6,
  branching = 4,
  clickToStrike = true,
}: DemoProps) {
  return (
    <div className="h-full w-full">
      <BranchingBolt
        boltColor={boltColor}
        strikeInterval={strikeInterval}
        intensity={intensity}
        thickness={thickness}
        branching={branching}
        clickToStrike={clickToStrike}
      />
    </div>
  );
}

1d:T2738, 1e:T238e9,

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

const props = withDefaults(
  defineProps<{
    boltColor?: string;
    strikeInterval?: number;
    intensity?: number;
    thickness?: number;
    branching?: number;
    clickToStrike?: boolean;
  }>(),
  { boltColor: "#7C5CFF", strikeInterval: 2.5, intensity: 1.1, thickness: 1.6, branching: 4, clickToStrike: true },
);

interface Pt {
  x: number;
  y: number;
}
interface Split {
  x: number;
  y: number;
  dirx: number;
  diry: number;
  level: number;
}
interface Fork {
  points: Pt[];
  scale: number;
}
interface Strike {
  main: Pt[];
  forks: Fork[];
  start: number;
}

const LEVELS = 6;
const FORK_LEVELS = 3;
const RAMP = 0.02;
const HOLD = 0.1;
const DECAY_END = 0.55;
const HANG_END = 1.3;
const FADE_END = 2;
const AFTER = 0.38;
const LIFE = FADE_END;

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) : 0x7c5cff;
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
}

function envelope(t: number): number {
  if (t < 0) return 0;
  if (t < RAMP) return t / RAMP;
  if (t < HOLD) return 1;
  if (t < DECAY_END) {
    const u = (t - HOLD) / (DECAY_END - HOLD);
    const eased = 1 - (1 - u) * (1 - u);
    return 1 - (1 - AFTER) * eased;
  }
  if (t < HANG_END) return AFTER;
  if (t < FADE_END) {
    const u = (t - HANG_END) / (FADE_END - HANG_END);
    return AFTER * (1 - u);
  }
  return 0;
}

function buildPath(x0: number, y0: number, x1: number, y1: number, levels: number, jitter: number) {
  let points: Pt[] = [{ x: x0, y: y0 }, { x: x1, y: y1 }];
  const splits: Split[] = [];
  let mag = jitter;
  for (let level = 0; level < levels; level++) {
    const next: Pt[] = [points[0]];
    for (let i = 0; i < points.length - 1; i++) {
      const a = points[i];
      const b = points[i + 1];
      const dx = b.x - a.x;
      const dy = b.y - a.y;
      const len = Math.hypot(dx, dy) || 1;
      const nx = -dy / len;
      const ny = dx / len;
      const t = 0.5 + (Math.random() - 0.5) * 0.3;
      const off = (Math.random() * 2 - 1) * mag;
      const px = a.x + dx * t + nx * off;
      const py = a.y + dy * t + ny * off;
      next.push({ x: px, y: py });
      splits.push({ x: px, y: py, dirx: dx / len, diry: dy / len, level });
      next.push(b);
    }
    points = next;
    mag *= 0.55;
  }
  return { points, splits };
}

function generateStrike(w: number, h: number, aimX: number | null, branching: number): { main: Pt[]; forks: Fork[] } {
  const x0 = aimX ?? w * (0.32 + Math.random() * 0.36);
  const y0 = h * (0.02 + Math.random() * 0.05);
  const x1 = clamp(x0 + (Math.random() - 0.5) * w * 0.55, w * 0.05, w * 0.95);
  const y1 = h * (0.94 + Math.random() * 0.05);
  const jitter = Math.max(6, w * 0.085);
  const { points, splits } = buildPath(x0, y0, x1, y1, LEVELS, jitter);

  const candidates = splits.filter((s) => s.level >= 1 && s.level <= LEVELS - 2);
  for (let i = candidates.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    const a = candidates[i];
    candidates[i] = candidates[j];
    candidates[j] = a;
  }

  const forkCount = Math.min(Math.max(0, Math.round(branching)), candidates.length);
  const forks: Fork[] = [];
  for (let i = 0; i < forkCount; i++) {
    const s = candidates[i];
    const angle = (Math.random() < 0.5 ? -1 : 1) * (0.5 + Math.random() * 0.7);
    const cos = Math.cos(angle);
    const sin = Math.sin(angle);
    const dirx = s.dirx * cos - s.diry * sin;
    const diry = s.dirx * sin + s.diry * cos;
    const len = h * (0.05 + Math.random() * 0.12) * (1 - (s.level / LEVELS) * 0.3);
    const ex = s.x + dirx * len;
    const ey = s.y + diry * len;
    const { points: forkPoints } = buildPath(s.x, s.y, ex, ey, FORK_LEVELS, Math.max(2, len * 0.14));
    forks.push({ points: forkPoints, scale: 0.55 + Math.random() * 0.4 });
  }

  return { main: points, forks };
}

function strokePath(ctx: CanvasRenderingContext2D, points: Pt[]) {
  if (points.length < 2) return;
  ctx.beginPath();
  ctx.moveTo(points[0].x, points[0].y);
  for (let i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y);
  ctx.stroke();
}

function strokeTapered(ctx: CanvasRenderingContext2D, points: Pt[], baseWidth: number, baseAlpha: number, rgb: string) {
  const chunks = 4;
  const step = Math.max(1, Math.floor((points.length - 1) / chunks));
  for (let c = 0; c < chunks; c++) {
    const start = c * step;
    const end = c === chunks - 1 ? points.length - 1 : Math.min(points.length - 1, start + step);
    if (end <= start) continue;
    const frac = 1 - c / chunks;
    ctx.lineWidth = Math.max(0.3, baseWidth * frac);
    ctx.strokeStyle = `rgba(${rgb}, ${(baseAlpha * frac).toFixed(3)})`;
    ctx.beginPath();
    ctx.moveTo(points[start].x, points[start].y);
    for (let i = start + 1; i <= end; i++) ctx.lineTo(points[i].x, points[i].y);
    ctx.stroke();
  }
}

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;

  let w = Math.max(1, host.clientWidth);
  let h = Math.max(1, host.clientHeight);
  const strikes: Strike[] = [];

  const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
  let reduced = mq.matches;
  const onScheme = () => {
    reduced = mq.matches;
  };
  mq.addEventListener("change", onScheme);

  const strike = (aimX: number | null = null) => {
    const generated = generateStrike(w, h, aimX, props.branching);
    strikes.push({ ...generated, start: performance.now() });
  };

  let scheduleTimer = 0;
  let doubleTimer = 0;
  const scheduleNext = (delayMs: number) => {
    window.clearTimeout(scheduleTimer);
    scheduleTimer = window.setTimeout(() => {
      strike();
      if (!reduced && Math.random() < 0.22) {
        window.clearTimeout(doubleTimer);
        doubleTimer = window.setTimeout(() => strike(), 90 + Math.random() * 150);
      }
      const base = props.strikeInterval * 1000 * (reduced ? 1.8 : 1);
      scheduleNext(base * (0.7 + Math.random() * 0.6));
    }, delayMs);
  };
  scheduleNext(120 + Math.random() * 260);

  const onPointerDown = (event: PointerEvent) => {
    if (!props.clickToStrike) return;
    const rect = host.getBoundingClientRect();
    strike(event.clientX - rect.left);
    const base = props.strikeInterval * 1000 * (reduced ? 1.8 : 1);
    scheduleNext(base * (0.7 + Math.random() * 0.6));
  };
  host.addEventListener("pointerdown", onPointerDown);

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

  let raf = 0;
  const frame = (now: number) => {
    for (let i = strikes.length - 1; i >= 0; i--) {
      if ((now - strikes[i].start) / 1000 >= LIFE) strikes.splice(i, 1);
    }

    ctx.clearRect(0, 0, w, h);
    const [r, g, b] = hexToRgb(props.boltColor);
    const rgb = `${r}, ${g}, ${b}`;
    const power = props.intensity;
    const coreWidth = props.thickness;

    if (!reduced) {
      let flash = 0;
      for (const s of strikes) {
        const t = (now - s.start) / 1000;
        if (t >= 0 && t < 0.14) flash = Math.max(flash, 1 - t / 0.14);
      }
      if (flash > 0) {
        ctx.fillStyle = `rgba(255, 255, 255, ${(0.05 * power * flash).toFixed(4)})`;
        ctx.fillRect(0, 0, w, h);
      }
    }

    ctx.lineJoin = "round";
    ctx.lineCap = "round";
    ctx.globalCompositeOperation = "lighter";
    for (const s of strikes) {
      const t = (now - s.start) / 1000;
      const env = envelope(t);
      if (env <= 0.002) continue;

      ctx.save();
      ctx.shadowColor = `rgba(${rgb}, ${clamp(0.6 * power * env, 0, 1).toFixed(3)})`;
      ctx.shadowBlur = (10 + 20 * power) * (0.3 + 0.7 * env);
      ctx.strokeStyle = `rgba(245, 247, 255, ${env.toFixed(3)})`;
      ctx.lineWidth = coreWidth * (0.82 + 0.18 * env);
      strokePath(ctx, s.main);
      ctx.restore();

      for (const fork of s.forks) {
        ctx.save();
        ctx.shadowColor = `rgba(${rgb}, ${clamp(0.32 * power * env * fork.scale, 0, 1).toFixed(3)})`;
        ctx.shadowBlur = (6 + 10 * power) * (0.3 + 0.7 * env);
        strokeTapered(ctx, fork.points, coreWidth * 0.55 * fork.scale, env * fork.scale * 0.65, "235, 238, 255");
        ctx.restore();
      }
    }
    ctx.globalCompositeOperation = "source-over";

    raf = requestAnimationFrame(frame);
  };
  raf = requestAnimationFrame(frame);

  return () => {
    cancelAnimationFrame(raf);
    window.clearTimeout(scheduleTimer);
    window.clearTimeout(doubleTimer);
    observer.disconnect();
    host.removeEventListener("pointerdown", onPointerDown);
    mq.removeEventListener("change", onScheme);
  };
}

onMounted(() => {
  stop = start();
});
onBeforeUnmount(() => {
  stop?.();
  stop = null;
});
</script>

<template>
  <div ref="hostEl" class="branching-bolt">
    <canvas ref="canvasEl" aria-hidden="true" class="branching-bolt__canvas"></canvas>
  </div>
</template>

<style scoped>
.branching-bolt {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 220px;
  overflow: hidden;
  background: #000;
}
.branching-bolt__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
</style>

Nearby