"use client";

import { TwinkleHighlightText } from "./index";

export interface DemoProps {
  text?: string;
  sparkleCount?: number;
  colorOne?: string;
  colorTwo?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ text = "Featured", sparkleCount = 10, colorOne = "#38BDF8", colorTwo = "#F5C542" }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <TwinkleHighlightText
        text={text}
        sparkleCount={sparkleCount}
        colorOne={colorOne}
        colorTwo={colorTwo}
        className="text-4xl sm:text-5xl"
      />
    </div>
  );
}

1d:T1314, 1e:Tf0ca,

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

const props = withDefaults(
  defineProps<{
    text?: string;
    sparkleCount?: number;
    colorOne?: string;
    colorTwo?: string;
  }>(),
  { text: "Featured", sparkleCount: 10, colorOne: "#38BDF8", colorTwo: "#F5C542" },
);

interface Star {
  x: number;
  y: number;
  size: number;
  color: string;
  period: number;
  visibleFrac: number;
  phase: number;
  baseRotation: number;
  spin: number;
  front: boolean;
  wasResting: boolean;
}

const SPARKLE_PATH = "M12 1 Q13 10.5 23 12 Q13 13.5 12 23 Q11 13.5 1 12 Q11 10.5 12 1 Z";

function pickColor(a: string, b: string): string {
  return Math.random() < 0.5 ? a : b;
}

function makeStar(a: string, b: string): Star {
  return {
    x: 4 + Math.random() * 92,
    y: 8 + Math.random() * 84,
    size: 7 + Math.random() * 11,
    color: pickColor(a, b),
    period: 1.7 + Math.random() * 2.3,
    visibleFrac: 0.28 + Math.random() * 0.22,
    phase: Math.random() * 5,
    baseRotation: Math.random() * 360,
    spin: Math.random() < 0.5 ? -(24 + Math.random() * 30) : 24 + Math.random() * 30,
    front: Math.random() < 0.5,
    wasResting: true,
  };
}

// Plain (non-reactive) working data: mutated every frame directly on the DOM, never through Vue's
// reactivity, so the twinkle loop stays cheap regardless of how many stars are on screen.
let stars: Star[] = [];
let nodes: (HTMLSpanElement | null)[] = [];
const visibleCount = ref(0);

function setNode(el: Element | null, i: number) {
  nodes[i] = (el as HTMLSpanElement) ?? null;
}

function resize(n: number) {
  const count = Math.max(0, Math.round(n));
  if (count < stars.length) {
    stars = stars.slice(0, count);
  } else if (count > stars.length) {
    stars = [...stars, ...Array.from({ length: count - stars.length }, () => makeStar(props.colorOne, props.colorTwo))];
  }
  visibleCount.value = count;
}

watch(
  () => props.sparkleCount,
  (n) => resize(n ?? 10),
);

let raf = 0;
let media: MediaQueryList | null = null;
let reduced = false;

onMounted(() => {
  resize(props.sparkleCount ?? 10);

  media = window.matchMedia?.("(prefers-reduced-motion: reduce)") ?? null;
  reduced = media?.matches ?? false;
  media?.addEventListener("change", () => {
    reduced = media?.matches ?? false;
  });

  const start = performance.now();
  const frame = (now: number) => {
    const t = (now - start) / 1000;
    for (let i = 0; i < stars.length; i++) {
      let star = stars[i];
      const node = nodes[i];
      if (!star || !node) continue;

      node.style.left = `${star.x}%`;
      node.style.top = `${star.y}%`;
      node.style.width = `${star.size}px`;
      node.style.height = `${star.size}px`;
      node.style.color = star.color;
      node.style.zIndex = star.front ? "2" : "0";

      if (reduced) {
        node.style.opacity = "0.5";
        node.style.transform = `translate(-50%, -50%) rotate(${star.baseRotation}deg) scale(0.7)`;
        continue;
      }

      const cyclePos = ((t + star.phase) % star.period) / star.period;
      const resting = cyclePos >= star.visibleFrac;
      if (resting && !star.wasResting && Math.random() < 0.4) {
        star = { ...makeStar(props.colorOne, props.colorTwo), phase: star.phase, period: star.period };
        stars[i] = star;
      }
      star.wasResting = resting;

      let opacity = 0;
      let bloom = 0;
      if (!resting) {
        const local = cyclePos / star.visibleFrac;
        const wave = Math.sin(local * Math.PI);
        opacity = wave;
        bloom = 0.2 + 0.85 * wave;
      }
      const rotation = star.baseRotation + star.spin * Math.min(1, cyclePos / star.visibleFrac);
      node.style.opacity = String(opacity);
      node.style.transform = `translate(-50%, -50%) rotate(${rotation}deg) scale(${bloom})`;
    }
    raf = requestAnimationFrame(frame);
  };
  raf = requestAnimationFrame(frame);
});

onBeforeUnmount(() => {
  cancelAnimationFrame(raf);
});
</script>

<template>
  <span class="twinkle-highlight">
    <span v-for="i in visibleCount" :key="i" :ref="(el) => setNode(el, i - 1)" aria-hidden="true" class="twinkle-highlight__star">
      <svg viewBox="0 0 24 24" fill="none">
        <path :d="SPARKLE_PATH" fill="currentColor" />
      </svg>
    </span>
    <span class="twinkle-highlight__text">{{ text }}</span>
  </span>
</template>

<style scoped>
.twinkle-highlight {
  position: relative;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  vertical-align: middle;
}
.twinkle-highlight__star {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}
.twinkle-highlight__star svg {
  display: block;
  width: 100%;
  height: 100%;
}
.twinkle-highlight__text {
  position: relative;
  z-index: 1;
  color: currentColor;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(1.9rem, 5vw, 3rem);
}
</style>

Nearby