"use client";

import { FocusLensOutline, type FocusLensShape } from "./index";

export interface DemoProps {
  shape?: FocusLensShape;
  lensSize?: number;
  lensSoftness?: number;
  strokeWeight?: number;
  accent?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ shape = "roundedSquare", lensSize = 0.3, lensSoftness = 0.5, strokeWeight = 2, accent = "#38BDF8" }: DemoProps) {
  return (
    <div className="flex h-full min-h-[360px] w-full items-center justify-center rounded-2xl border border-current/10 bg-current/[0.04]">
      <FocusLensOutline shape={shape} lensSize={lensSize} lensSoftness={lensSoftness} strokeWeight={strokeWeight} accent={accent} />
    </div>
  );
}

1d:T1f33, 1e:T16d17,

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

type FocusLensShape = "roundedSquare" | "disc" | "ring" | "triangle";

const props = withDefaults(
  defineProps<{
    shape?: FocusLensShape;
    lensSize?: number;
    lensSoftness?: number;
    strokeWeight?: number;
    accent?: string;
  }>(),
  {
    shape: "roundedSquare",
    lensSize: 0.3,
    lensSoftness: 0.5,
    strokeWeight: 2,
    accent: "#38BDF8",
  },
);

const SHAPE_LABELS: Record<FocusLensShape, string> = {
  roundedSquare: "Rounded square",
  disc: "Disc",
  ring: "Ring",
  triangle: "Triangle",
};

const REST_SCALE = 0.7;
const DAMPING = 0.18;
const IDLE_LOOP_SECONDS = 7;
const OUTLINE_SAMPLES = 96;
// The atmosphere copy's blur radius lives in .lens-back below (kept small enough that its stroke
// still survives the blur at typical stroke weights).
const ATMOSPHERE_STROKE_OPACITY = 0.9;
const ATMOSPHERE_FILL_OPACITY = 0.3;

type Point = { x: number; y: number };

/** Reads N evenly-spaced points (by path length) off a rendered SVG shape, in its own viewBox units. */
function sampleOutline(el: SVGGeometryElement | null, count = OUTLINE_SAMPLES): Point[] {
  try {
    if (!el || typeof el.getTotalLength !== "function") return [];
    const len = el.getTotalLength();
    if (!len) return [];
    const pts: Point[] = [];
    for (let i = 0; i < count; i++) {
      const p = el.getPointAtLength((i / count) * len);
      pts.push({ x: p.x, y: p.y });
    }
    return pts;
  } catch {
    return [];
  }
}

/** Point at fraction `t` (0-1, wraps) around a sampled outline, interpolated between neighbors. */
function outlineAt(points: Point[], t: number): Point {
  if (!points.length) return { x: 50, y: 50 };
  const n = points.length;
  const pos = (((t % 1) + 1) % 1) * n;
  const i0 = Math.floor(pos) % n;
  const i1 = (i0 + 1) % n;
  const frac = pos - Math.floor(pos);
  const a = points[i0];
  const b = points[i1];
  return { x: a.x + (b.x - a.x) * frac, y: a.y + (b.y - a.y) * frac };
}

/** Nearest sampled outline point to a local (0-100) coordinate. */
function nearestOnOutline(points: Point[], lx: number, ly: number): Point {
  if (!points.length) return { x: 50, y: 50 };
  let best = points[0];
  let bestDist = Infinity;
  for (const p of points) {
    const dx = p.x - lx;
    const dy = p.y - ly;
    const d = dx * dx + dy * dy;
    if (d < bestDist) {
      bestDist = d;
      best = p;
    }
  }
  return best;
}

const boxEl = ref<HTMLDivElement | null>(null);
const frontEl = ref<SVGSVGElement | null>(null);
const markEl = ref<SVGGeometryElement | null>(null);

const isDisc = computed(() => props.shape === "disc");
const shapeTag = computed(() => (props.shape === "roundedSquare" ? "rect" : props.shape === "triangle" ? "polygon" : "circle"));
const shapeAttrs = computed(() => {
  switch (props.shape) {
    case "triangle":
      return { points: "50,15 85.5,82 14.5,82" };
    case "roundedSquare":
      return { x: 18, y: 18, width: 64, height: 64, rx: 14, ry: 14 };
    default:
      return { cx: 50, cy: 50, r: 32 };
  }
});

const size = { w: 0, h: 0 };
// x, y, r are in the box's local 0-100 units; the box is always square so one scale covers both axes.
const lens = { x: 50, y: 50, r: 0, targetX: 50, targetY: 50, active: false };
let outlinePoints: Point[] = [];
let idleT = 0;
let resizeObserver: ResizeObserver | undefined;
let raf = 0;
let reduceMotion = false;

function restRadius() {
  return props.lensSize * 50 * REST_SCALE;
}

function paintMask() {
  const front = frontEl.value;
  if (!front) return;
  const scale = size.w / 100;
  const innerStop = Math.max(0, Math.min(96, (1 - props.lensSoftness) * 92));
  const mask = `radial-gradient(circle ${Math.max(0, lens.r) * scale}px at ${lens.x * scale}px ${lens.y * scale}px, #000 0%, #000 ${innerStop}%, transparent 100%)`;
  front.style.maskImage = mask;
  front.style.setProperty("-webkit-mask-image", mask);
}

function measure() {
  const rect = boxEl.value?.getBoundingClientRect();
  if (!rect) return;
  size.w = rect.width;
  size.h = rect.height;
}

function tick() {
  idleT = (idleT + 1 / (60 * IDLE_LOOP_SECONDS)) % 1;
  const goal = lens.active ? { x: lens.targetX, y: lens.targetY } : outlineAt(outlinePoints, idleT);
  const fullRadius = props.lensSize * 50;
  const goalR = lens.active ? fullRadius : fullRadius * REST_SCALE;

  lens.x += (goal.x - lens.x) * DAMPING;
  lens.y += (goal.y - lens.y) * DAMPING;
  lens.r += (goalR - lens.r) * DAMPING;
  paintMask();
  raf = requestAnimationFrame(tick);
}

function updateFromPointer(event: PointerEvent) {
  const rect = boxEl.value?.getBoundingClientRect();
  if (!rect || !rect.width || !rect.height) return;
  const lx = ((event.clientX - rect.left) / rect.width) * 100;
  const ly = ((event.clientY - rect.top) / rect.height) * 100;
  const nearest = nearestOnOutline(outlinePoints, lx, ly);
  lens.targetX = nearest.x;
  lens.targetY = nearest.y;
  lens.active = true;

  if (reduceMotion) {
    lens.x = nearest.x;
    lens.y = nearest.y;
    lens.r = props.lensSize * 50;
    paintMask();
  }
}

function releaseLens() {
  lens.active = false;
}

onMounted(() => {
  reduceMotion = typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
  outlinePoints = sampleOutline(markEl.value);
  if (boxEl.value) {
    resizeObserver = new ResizeObserver(measure);
    resizeObserver.observe(boxEl.value);
  }
  measure();
  const start = outlineAt(outlinePoints, 0);
  lens.x = start.x;
  lens.y = start.y;
  lens.r = restRadius();
  lens.targetX = start.x;
  lens.targetY = start.y;
  paintMask();

  if (!reduceMotion) {
    raf = requestAnimationFrame(tick);
  }
});

onBeforeUnmount(() => {
  cancelAnimationFrame(raf);
  resizeObserver?.disconnect();
});

watch(
  () => props.shape,
  async () => {
    await nextTick();
    outlinePoints = sampleOutline(markEl.value);
  },
);
</script>

<template>
  <div class="lens-wrap" aria-hidden="true">
    <div
      ref="boxEl"
      class="lens-box"
      @pointermove="updateFromPointer"
      @pointerdown="updateFromPointer"
      @pointerleave="releaseLens"
      @pointercancel="releaseLens"
      @pointerup="releaseLens"
    >
      <svg viewBox="0 0 100 100" class="lens-svg lens-back">
        <component
          :is="shapeTag"
          v-bind="shapeAttrs"
          stroke="currentColor"
          :stroke-opacity="ATMOSPHERE_STROKE_OPACITY"
          :stroke-width="strokeWeight"
          :fill="isDisc ? 'currentColor' : 'none'"
          :fill-opacity="isDisc ? ATMOSPHERE_FILL_OPACITY : 0"
          stroke-linejoin="round"
          stroke-linecap="round"
          vector-effect="non-scaling-stroke"
        />
      </svg>
      <svg ref="frontEl" viewBox="0 0 100 100" class="lens-svg lens-front">
        <component
          :is="shapeTag"
          ref="markEl"
          v-bind="shapeAttrs"
          :stroke="accent"
          :stroke-opacity="1"
          :stroke-width="strokeWeight"
          :fill="isDisc ? accent : 'none'"
          :fill-opacity="isDisc ? 0.85 : 0"
          stroke-linejoin="round"
          stroke-linecap="round"
          vector-effect="non-scaling-stroke"
        />
      </svg>
    </div>
    <p class="lens-caption">{{ SHAPE_LABELS[shape] }}</p>
  </div>
</template>

<style scoped>
.lens-wrap {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 2.5rem 1.5rem;
  color: currentColor;
}
.lens-box {
  position: relative;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  touch-action: none;
}
.lens-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.lens-back {
  filter: blur(5px);
}
.lens-caption {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: currentColor;
  opacity: 0.45;
}
</style>

Nearby