"use client";

import { StampedCursorTrail } from "./index";

export interface DemoProps {
  trailLength?: number;
  spacing?: number;
  accent?: string;
  tilt?: number;
  fadeSeconds?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ trailLength = 12, spacing = 60, accent = "#FF6A1F", tilt = 12, fadeSeconds = 0.6 }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-4 sm:p-6">
      <StampedCursorTrail trailLength={trailLength} spacing={spacing} accent={accent} tilt={tilt} fadeSeconds={fadeSeconds} idle />
    </div>
  );
}

1d:T2394, 1e:T1c6e1,

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

const props = withDefaults(
  defineProps<{
    trailLength?: number;
    spacing?: number;
    accent?: string;
    tilt?: number;
    fadeSeconds?: number;
    idle?: boolean;
  }>(),
  { trailLength: 12, spacing: 60, accent: "#FF6A1F", tilt: 12, fadeSeconds: 0.6, idle: false },
);

const CARD_W = 64;
const CARD_H = 84;
const TONE_STEPS = 5;
const HOLD_MS = 650;
const HANDOVER_MS = 1500;
const MAX_STAMPS_PER_FEED = 48;
const FAN = [
  { dx: -104, dy: 10, rot: -0.9 },
  { dx: -54, dy: -8, rot: -0.45 },
  { dx: 0, dy: -16, rot: 0 },
  { dx: 54, dy: -6, rot: 0.5 },
  { dx: 104, dy: 12, rot: 1 },
];
const MARK_PATHS = ["M7 17 17 7", "", "M8 15l4-6 4 6", "M12 7v10M7 12h10"];

interface Card {
  id: number;
  x: number;
  y: number;
  rot: number;
  tone: number;
  mark: number;
  phase: "entering" | "live" | "retiring";
}

function paletteTone(accent: string, step: number): string {
  const t = step / (TONE_STEPS - 1);
  const mix = t < 0.5 ? "#000000" : "#ffffff";
  const amount = Math.round(Math.abs(t - 0.5) * 2 * 46);
  return amount === 0 ? accent : `color-mix(in srgb, ${accent} ${100 - amount}%, ${mix} ${amount}%)`;
}
function toneBorder(tone: string): string {
  return `color-mix(in srgb, ${tone} 60%, #000000 40%)`;
}
function markColor(step: number): string {
  return step < TONE_STEPS / 2 ? "rgba(255,255,255,0.4)" : "rgba(0,0,0,0.32)";
}

const hostRef = ref<HTMLDivElement | null>(null);
const cards = ref<Card[]>([]);
const reduced = ref(false);

let nextId = 0;
const holdTimers = new Map<number, ReturnType<typeof setTimeout>>();
const fadeTimers = new Map<number, ReturnType<typeof setTimeout>>();
const lastStamp: { pos: { x: number; y: number } | null } = { pos: null };

function markRetiring(id: number) {
  const hold = holdTimers.get(id);
  if (hold) {
    clearTimeout(hold);
    holdTimers.delete(id);
  }
  const card = cards.value.find((c) => c.id === id);
  if (!card || card.phase === "retiring") return;
  card.phase = "retiring";
  const fade = window.setTimeout(() => {
    cards.value = cards.value.filter((c) => c.id !== id);
    fadeTimers.delete(id);
  }, props.fadeSeconds * 1000);
  fadeTimers.set(id, fade);
}

function addCard(x: number, y: number) {
  const id = nextId++;
  const card: Card = {
    id,
    x,
    y,
    rot: (Math.random() * 2 - 1) * props.tilt,
    tone: id % TONE_STEPS,
    mark: id % 4,
    phase: "entering",
  };
  cards.value.push(card);
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      const live = cards.value.find((c) => c.id === id);
      if (live && live.phase === "entering") live.phase = "live";
    });
  });
  holdTimers.set(
    id,
    window.setTimeout(() => markRetiring(id), HOLD_MS),
  );
  const liveIds = cards.value.filter((c) => c.phase !== "retiring").map((c) => c.id);
  const cap = Math.max(1, Math.round(props.trailLength));
  while (liveIds.length > cap) {
    const oldestId = liveIds.shift();
    if (oldestId === undefined) break;
    markRetiring(oldestId);
  }
}

function feedPoint(x: number, y: number) {
  const last = lastStamp.pos;
  if (!last) {
    lastStamp.pos = { x, y };
    addCard(x, y);
    return;
  }
  let cx = last.x;
  let cy = last.y;
  let dx = x - cx;
  let dy = y - cy;
  let dist = Math.hypot(dx, dy);
  let guard = 0;
  const step = Math.max(1, props.spacing);
  while (dist >= step && guard++ < MAX_STAMPS_PER_FEED) {
    const t = step / dist;
    cx += dx * t;
    cy += dy * t;
    addCard(cx, cy);
    dx = x - cx;
    dy = y - cy;
    dist = Math.hypot(dx, dy);
  }
  lastStamp.pos = { x: cx, y: cy };
}

function clearTrail() {
  holdTimers.forEach(clearTimeout);
  fadeTimers.forEach(clearTimeout);
  holdTimers.clear();
  fadeTimers.clear();
  cards.value = [];
  lastStamp.pos = null;
}

watch(reduced, (value) => {
  if (value) clearTrail();
});

let stop: (() => void) | null = null;

onMounted(() => {
  const host = hostRef.value;
  if (!host) return;

  const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
  const syncReduced = () => (reduced.value = mq.matches);
  syncReduced();
  mq.addEventListener("change", syncReduced);

  let rectW = host.clientWidth;
  let rectH = host.clientHeight;
  const ro = new ResizeObserver((entries) => {
    const box = entries[0]?.contentRect;
    if (box) {
      rectW = box.width;
      rectH = box.height;
    }
  });
  ro.observe(host);

  let lastRealAt = performance.now() - HANDOVER_MS - 1;

  const onMove = (event: PointerEvent) => {
    lastRealAt = performance.now();
    if (reduced.value) return;
    const rect = host.getBoundingClientRect();
    feedPoint(event.clientX - rect.left, event.clientY - rect.top);
  };
  const onLeave = () => {
    lastRealAt = performance.now();
    lastStamp.pos = null;
  };
  host.addEventListener("pointermove", onMove, { passive: true });
  host.addEventListener("pointerleave", onLeave);
  host.addEventListener("pointercancel", onLeave);

  let raf = 0;
  if (props.idle) {
    const start = performance.now();
    const tick = (now: number) => {
      raf = requestAnimationFrame(tick);
      if (reduced.value || now - lastRealAt < HANDOVER_MS) return;
      const t = (now - start) / 1000;
      const cx = rectW / 2;
      const cy = rectH / 2;
      const ax = Math.min(rectW * 0.38, 260);
      const ay = Math.min(rectH * 0.3, 90);
      feedPoint(cx + Math.sin(t * 0.6) * ax, cy + Math.sin(t * 1.3) * ay);
    };
    raf = requestAnimationFrame(tick);
  }

  stop = () => {
    ro.disconnect();
    cancelAnimationFrame(raf);
    mq.removeEventListener("change", syncReduced);
    host.removeEventListener("pointermove", onMove);
    host.removeEventListener("pointerleave", onLeave);
    host.removeEventListener("pointercancel", onLeave);
    holdTimers.forEach(clearTimeout);
    fadeTimers.forEach(clearTimeout);
  };
});

onBeforeUnmount(() => stop?.());

function cardStyle(card: Card) {
  const tone = paletteTone(props.accent, card.tone);
  const scale = card.phase === "live" ? 1 : card.phase === "retiring" ? 0.72 : 0.55;
  const opacity = card.phase === "live" ? 1 : 0;
  const duration = card.phase === "retiring" ? `${props.fadeSeconds}s` : "0.32s";
  const ease = card.phase === "retiring" ? "cubic-bezier(.4,0,1,1)" : "cubic-bezier(.16,1,.3,1)";
  return {
    left: `${card.x}px`,
    top: `${card.y}px`,
    width: `${CARD_W}px`,
    height: `${CARD_H}px`,
    background: tone,
    borderColor: toneBorder(tone),
    transform: `translate(-50%, -50%) scale(${scale}) rotate(${card.rot}deg)`,
    opacity: String(opacity),
    transitionDuration: duration,
    transitionTimingFunction: ease,
  };
}

function fanStyle(offset: (typeof FAN)[number], tone: string) {
  return {
    left: "50%",
    top: "50%",
    width: `${CARD_W}px`,
    height: `${CARD_H}px`,
    marginLeft: `${-CARD_W / 2 + offset.dx}px`,
    marginTop: `${-CARD_H / 2 + offset.dy}px`,
    background: tone,
    borderColor: toneBorder(tone),
    transform: `rotate(${offset.rot * props.tilt}deg)`,
  };
}

function toneFor(step: number) {
  return paletteTone(props.accent, step);
}
</script>

<template>
  <div ref="hostRef" class="stamped-cursor-trail" aria-hidden="true">
    <template v-if="!reduced">
      <div v-for="card in cards" :key="card.id" class="card" :style="cardStyle(card)">
        <svg class="mark" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
          <circle v-if="card.mark === 1" cx="12" cy="12" r="4.5" :stroke="markColor(card.tone)" fill="none" stroke-width="1.75" />
          <path
            v-else
            :d="MARK_PATHS[card.mark]"
            :stroke="markColor(card.tone)"
            fill="none"
            stroke-width="1.75"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>
    </template>
    <template v-else>
      <div v-for="(offset, i) in FAN" :key="i" class="card" :style="fanStyle(offset, toneFor(i % TONE_STEPS))">
        <svg class="mark" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
          <circle v-if="i % 4 === 1" cx="12" cy="12" r="4.5" :stroke="markColor(i % TONE_STEPS)" fill="none" stroke-width="1.75" />
          <path
            v-else
            :d="MARK_PATHS[i % 4]"
            :stroke="markColor(i % TONE_STEPS)"
            fill="none"
            stroke-width="1.75"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>
    </template>
  </div>
</template>

<style scoped>
.stamped-cursor-trail {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 340px;
  overflow: hidden;
  touch-action: none;
  border-radius: 16px;
  background: #0b0d10;
}
.card {
  position: absolute;
  border-radius: 8px;
  border: 1px solid transparent;
  transition-property: transform, opacity;
  will-change: transform, opacity;
}
.mark {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
}
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}
</style>

Nearby