"use client";

import { PointerTileTrail } from "./index";

export interface DemoProps {
  tileCount?: number;
  spawnDistance?: number;
  lifetime?: number;
  accent?: string;
  tilt?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ tileCount = 8, spawnDistance = 70, lifetime = 700, accent = "#FF6A1F", tilt = true }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-4 sm:p-6">
      <PointerTileTrail tileCount={tileCount} spawnDistance={spawnDistance} lifetime={lifetime} accent={accent} tilt={tilt} idle />
    </div>
  );
}

1d:T3236, 1e:T26356,

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

const props = withDefaults(
  defineProps<{
    tileCount?: number;
    spawnDistance?: number;
    lifetime?: number;
    accent?: string;
    tilt?: boolean;
    idle?: boolean;
  }>(),
  { tileCount: 8, spawnDistance: 70, lifetime: 700, accent: "#FF6A1F", tilt: true, idle: false },
);

const TILE_W = 140;
const TILE_H = 112;
const VARIANT_COUNT = 5;
const HOLD_FRACTION = 0.36;
const BUMPED_FADE_FRACTION = 0.3;
const SPEED_REF = 1.1;
const MAX_TILT_DEG = 13;
const MAX_ENTRY_NUDGE = 16;
const IDLE_AFTER = 1400;
const MAX_SPAWNS_PER_MOVE = 10;

type Phase = "entering" | "hold" | "leave";

interface Tile {
  id: number;
  order: number;
  x: number;
  y: number;
  rot: number;
  entryDx: number;
  entryDy: number;
  variant: number;
  phase: Phase;
  leaveMs: number;
}

function tileFill(accent: string, variant: number): string {
  switch (variant % VARIANT_COUNT) {
    case 0:
      return `linear-gradient(135deg, ${accent} 0%, color-mix(in srgb, ${accent} 62%, #000000 45%) 100%)`;
    case 1:
      return `linear-gradient(205deg, color-mix(in srgb, ${accent} 70%, #ffffff 26%) 0%, ${accent} 100%)`;
    case 2:
      return `repeating-linear-gradient(48deg, color-mix(in srgb, ${accent} 88%, #000000 18%) 0 9px, color-mix(in srgb, ${accent} 55%, #000000 55%) 9px 18px)`;
    case 3:
      return `linear-gradient(-40deg, ${accent} 0%, color-mix(in srgb, ${accent} 50%, #000000 60%) 100%)`;
    default:
      return `repeating-linear-gradient(-58deg, color-mix(in srgb, ${accent} 80%, #ffffff 14%) 0 7px, color-mix(in srgb, ${accent} 60%, #000000 40%) 7px 14px)`;
  }
}
function tileEdge(accent: string): string {
  return `color-mix(in srgb, ${accent} 70%, #ffffff 25%)`;
}
const MOTIF_PATHS = ["M7 17 17 7", "", "", "M8 15l4-6 4 6", ""];

const hostRef = ref<HTMLDivElement | null>(null);
const tiles = ref<Tile[]>([]);
const reduced = ref(false);
const solo = ref({ x: 0, y: 0, variant: 0 });

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

function clearTileTimers(id: number) {
  const hold = holdTimers.get(id);
  if (hold) {
    clearTimeout(hold);
    holdTimers.delete(id);
  }
  const remove = removeTimers.get(id);
  if (remove) {
    clearTimeout(remove);
    removeTimers.delete(id);
  }
}

function scheduleRemoval(id: number, ms: number) {
  const existing = removeTimers.get(id);
  if (existing) clearTimeout(existing);
  removeTimers.set(
    id,
    window.setTimeout(() => {
      removeTimers.delete(id);
      tiles.value = tiles.value.filter((t) => t.id !== id);
    }, ms),
  );
}

function retire(id: number, leaveMs: number) {
  holdTimers.delete(id);
  const t = tiles.value.find((c) => c.id === id);
  if (!t || t.phase === "leave") return;
  t.phase = "leave";
  t.leaveMs = leaveMs;
  scheduleRemoval(id, leaveMs);
}

function addTile(x: number, y: number, vx: number, vy: number) {
  const order = ++nextId;
  const speed = Math.hypot(vx, vy);
  const nx = speed > 0.0001 ? vx / speed : 0;
  const ny = speed > 0.0001 ? vy / speed : 0;
  const power = Math.min(1, speed / SPEED_REF);
  const rot = props.tilt ? nx * MAX_TILT_DEG * power : 0;
  const nudge = props.tilt ? power * MAX_ENTRY_NUDGE : 0;
  const life = Math.max(80, props.lifetime);
  const holdMs = life * HOLD_FRACTION;
  const bumpedMs = Math.max(120, life * BUMPED_FADE_FRACTION);
  const leaveMs = Math.max(150, life - holdMs);

  for (const t of tiles.value) {
    if (t.phase !== "leave") {
      clearTileTimers(t.id);
      t.phase = "leave";
      t.leaveMs = bumpedMs;
      scheduleRemoval(t.id, bumpedMs);
    }
  }

  const id = order;
  tiles.value.push({ id, order, x, y, rot, entryDx: -nx * nudge, entryDy: -ny * nudge, variant: order % VARIANT_COUNT, phase: "entering", leaveMs });
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      const live = tiles.value.find((t) => t.id === id);
      if (live && live.phase === "entering") live.phase = "hold";
    });
  });
  holdTimers.set(
    id,
    window.setTimeout(() => retire(id, leaveMs), holdMs),
  );

  const cap = Math.max(1, Math.round(props.tileCount));
  while (tiles.value.length > cap) {
    const oldest = tiles.value[0]!;
    clearTileTimers(oldest.id);
    tiles.value.shift();
  }
}

function feedSolo(x: number, y: number) {
  soloDist += Math.hypot(x - solo.value.x, y - solo.value.y);
  let variant = solo.value.variant;
  if (soloDist >= Math.max(1, props.spawnDistance)) {
    soloDist = 0;
    soloOrder += 1;
    variant = soloOrder % VARIANT_COUNT;
  }
  solo.value = { x, y, variant };
}

function clearTrail() {
  holdTimers.forEach(clearTimeout);
  removeTimers.forEach(clearTimeout);
  holdTimers.clear();
  removeTimers.clear();
  tiles.value = [];
  lastPoint.pos = null;
}

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;
    if (reduced.value) clearTrail();
  };
  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);

  const feedPoint = (x: number, y: number, vx: number, vy: number) => {
    if (reduced.value) {
      lastPoint.pos = { x, y };
      feedSolo(x, y);
      return;
    }
    const last = lastPoint.pos;
    if (!last) {
      lastPoint.pos = { x, y };
      addTile(x, y, vx, vy);
      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.spawnDistance);
    while (dist >= step && guard++ < MAX_SPAWNS_PER_MOVE) {
      const t = step / dist;
      cx += dx * t;
      cy += dy * t;
      addTile(cx, cy, vx, vy);
      dx = x - cx;
      dy = y - cy;
      dist = Math.hypot(dx, dy);
    }
    lastPoint.pos = { x: cx, y: cy };
  };

  let lastSample = { x: rectW / 2, y: rectH / 2, t: performance.now() };
  let lastRealAt = performance.now() - IDLE_AFTER - 1;

  const onMove = (event: PointerEvent) => {
    const rect = host.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    const now = performance.now();
    const dt = Math.max(1, now - lastSample.t);
    const vx = (x - lastSample.x) / dt;
    const vy = (y - lastSample.y) / dt;
    lastSample = { x, y, t: now };
    lastRealAt = now;
    feedPoint(x, y, vx, vy);
  };
  const onLeave = () => {
    lastRealAt = performance.now();
    lastPoint.pos = null;
  };
  host.addEventListener("pointermove", onMove, { passive: true });
  host.addEventListener("pointerleave", onLeave);
  host.addEventListener("pointercancel", onLeave);

  let raf = 0;
  if (props.idle) {
    const born = performance.now();
    let prevIdle = { x: rectW / 2, y: rectH / 2 };
    const tick = (now: number) => {
      raf = requestAnimationFrame(tick);
      if (now - lastRealAt < IDLE_AFTER) return;
      const t = (now - born) / 1000;
      const ax = Math.min(rectW * 0.36, 240);
      const ay = Math.min(rectH * 0.26, 80);
      const x = rectW / 2 + Math.sin(t * 0.7) * ax;
      const y = rectH / 2 + Math.sin(t * 1.4) * ay;
      const vx = x - prevIdle.x;
      const vy = y - prevIdle.y;
      prevIdle = { x, y };
      feedPoint(x, y, vx, vy);
    };
    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);
    removeTimers.forEach(clearTimeout);
  };
});

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

function tileStyle(t: Tile) {
  const scale = t.phase === "hold" ? 1 : t.phase === "leave" ? 0.9 : 0.55;
  const opacity = t.phase === "hold" ? 1 : 0;
  const dx = t.phase === "entering" ? t.entryDx : 0;
  const dy = t.phase === "entering" ? t.entryDy : t.phase === "leave" ? 10 : 0;
  const duration = t.phase === "leave" ? `${t.leaveMs}ms` : "0.34s";
  const ease = t.phase === "leave" ? "cubic-bezier(.4,0,1,1)" : "cubic-bezier(.16,1,.3,1)";
  return {
    left: `${t.x}px`,
    top: `${t.y}px`,
    width: `${TILE_W}px`,
    height: `${TILE_H}px`,
    zIndex: String(t.order),
    borderColor: tileEdge(props.accent),
    transform: `translate(-50%, -50%) translate(${dx}px, ${dy}px) scale(${scale}) rotate(${t.rot}deg)`,
    opacity: String(opacity),
    transitionDuration: duration,
    transitionTimingFunction: ease,
  };
}
function artStyle(t: Tile) {
  const dx = t.phase === "entering" ? -t.entryDx * 0.6 : 0;
  const dy = t.phase === "entering" ? -t.entryDy * 0.6 : 0;
  return { background: tileFill(props.accent, t.variant), transform: `translate(${dx}px, ${dy}px)` };
}
function soloStyle() {
  return {
    left: `${solo.value.x}px`,
    top: `${solo.value.y}px`,
    width: `${TILE_W}px`,
    height: `${TILE_H}px`,
    borderColor: tileEdge(props.accent),
  };
}
</script>

<template>
  <div ref="hostRef" class="pointer-tile-trail" aria-hidden="true">
    <div class="caption"><span>Move to trail</span></div>
    <template v-if="!reduced">
      <div v-for="t in tiles" :key="t.id" class="tile" :style="tileStyle(t)">
        <div class="tile__art" :style="artStyle(t)">
          <svg class="tile__motif" viewBox="0 0 24 24" width="26" height="26">
            <circle v-if="t.variant % VARIANT_COUNT === 1" cx="12" cy="12" r="4.5" stroke="rgba(255,255,255,0.55)" stroke-width="1.75" fill="none" />
            <circle v-if="t.variant % VARIANT_COUNT === 1" cx="12" cy="12" r="1.1" fill="rgba(255,255,255,0.55)" />
            <path
              v-else-if="MOTIF_PATHS[t.variant % VARIANT_COUNT]"
              :d="MOTIF_PATHS[t.variant % VARIANT_COUNT]"
              stroke="rgba(255,255,255,0.55)"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
              fill="none"
            />
          </svg>
        </div>
      </div>
    </template>
    <div v-else class="tile tile--solo" :style="soloStyle()">
      <Transition name="crossfade">
        <div :key="solo.variant" class="tile__art" :style="{ background: tileFill(accent, solo.variant) }">
          <svg class="tile__motif" viewBox="0 0 24 24" width="26" height="26">
            <circle v-if="solo.variant % VARIANT_COUNT === 1" cx="12" cy="12" r="4.5" stroke="rgba(255,255,255,0.55)" stroke-width="1.75" fill="none" />
            <circle v-if="solo.variant % VARIANT_COUNT === 1" cx="12" cy="12" r="1.1" fill="rgba(255,255,255,0.55)" />
            <path
              v-else-if="MOTIF_PATHS[solo.variant % VARIANT_COUNT]"
              :d="MOTIF_PATHS[solo.variant % VARIANT_COUNT]"
              stroke="rgba(255,255,255,0.55)"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
              fill="none"
            />
          </svg>
        </div>
      </Transition>
    </div>
  </div>
</template>

<style scoped>
.pointer-tile-trail {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 340px;
  overflow: hidden;
  touch-action: none;
  border-radius: 14px;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: #0b0d10;
}
.caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  text-align: center;
  pointer-events: none;
}
.caption span {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: rgb(255 255 255 / 0.35);
}
.tile {
  position: absolute;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid transparent;
  pointer-events: none;
  transition-property: transform, opacity;
  will-change: transform, opacity;
}
.tile--solo {
  transform: translate(-50%, -50%);
  transition: left 140ms ease-out, top 140ms ease-out;
}
.tile__art {
  position: absolute;
  inset: 0;
  transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.tile__motif {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.crossfade-enter-active,
.crossfade-leave-active {
  transition: opacity 0.35s ease;
}
.crossfade-enter-from,
.crossfade-leave-to {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .tile {
    transition-duration: 1ms;
  }
}
</style>

Nearby