"use client";

import { OrbitingBadges } from "./index";

export interface DemoProps {
  radius?: number;
  count?: number;
  duration?: number;
  showPath?: boolean;
  innerReverse?: boolean;
  accent?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ radius = 130, count = 5, duration = 20, showPath = true, innerReverse = true, accent = "#F5C542" }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <OrbitingBadges radius={radius} count={count} duration={duration} showPath={showPath} innerReverse={innerReverse} accent={accent} />
    </div>
  );
}

1d:T26a8, 1e:T1e822,

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

interface Glyph {
  label: string;
  d: string;
}

const BADGE = 34;
const BADGE_R = BADGE / 2;
const CENTER = 56;
const FRAME_GAP = 20;
const INNER_RATIO = 0.6;
const INNER_MIN = 50;
const INNER_TURN_RATIO = 0.46;
const INNER_TURN_MIN = 3;
const HOVER_RATE = 0.22;
const RATE_EASE_MS = 220;
const RING_OFFSET = 4;

const GLYPHS: Glyph[] = [
  { label: "Pulse", d: "M13 3 5 13h5l-1 8 8-10h-5z" },
  { label: "Nova", d: "M12 3.5l2.4 5 5.6.6-4.1 3.8 1.1 5.6L12 15.9l-5 2.6 1.1-5.6-4.1-3.8 5.6-.6z" },
  { label: "Warm", d: "M12 19.5S4.5 15 4.5 9.8C4.5 7 6.6 5 9.2 5c1.5 0 2.8.8 3.3 2 .5-1.2 1.8-2 3.3-2 2.6 0 4.7 2 4.7 4.8 0 5.2-8 9.7-8 9.7Z" },
  { label: "Ready", d: "M4.5 12.5 9.5 17.5 19.5 6.5" },
  { label: "Drift", d: "M14.5 3.5a8.5 8.5 0 1 0 6 14.4A8.5 8.5 0 0 1 14.5 3.5Z" },
  { label: "Flow", d: "M12 3.5c3.6 4.6 6.5 8.3 6.5 11.3a6.5 6.5 0 1 1-13 0c0-3 2.9-6.7 6.5-11.3Z" },
  { label: "Mark", d: "M6 21V4M6 4.5h12l-2.8 3.8 2.8 3.8H6" },
  { label: "Beacon", d: "M12 5.5l2.6 6.9-2.6 6.1-2.6-6.1z" },
  { label: "Track", d: "M12 4v4M12 16v4M4 12h4M16 12h4" },
];

function clamp(n: number, lo: number, hi: number) {
  return Math.min(hi, Math.max(lo, n));
}
function baseAngle(i: number, n: number) {
  return -90 + (360 / n) * i;
}
function orbitPoint(deg: number, r: number): [number, number] {
  const rad = (deg * Math.PI) / 180;
  return [Math.cos(rad) * r, Math.sin(rad) * r];
}
function ink(hex: string): string {
  const match = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
  const value = match ? Number.parseInt(match[1], 16) : 0xf5c542;
  const r = (value >> 16) & 255;
  const g = (value >> 8) & 255;
  const b = value & 255;
  const luma = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  return luma > 0.55 ? "#14100A" : "#FBF3E4";
}

const props = withDefaults(
  defineProps<{
    radius?: number;
    count?: number;
    duration?: number;
    showPath?: boolean;
    innerReverse?: boolean;
    accent?: string;
  }>(),
  { radius: 130, count: 5, duration: 20, showPath: true, innerReverse: true, accent: "#F5C542" },
);

const outer = computed(() => clamp(props.radius, 80, 200));
const n = computed(() => Math.round(clamp(props.count, 3, 9)));
const turn = computed(() => clamp(props.duration, 5, 60));
const inner = computed(() => Math.max(INNER_MIN, outer.value * INNER_RATIO));
const innerTurn = computed(() => Math.max(INNER_TURN_MIN, turn.value * INNER_TURN_RATIO));
const half = computed(() => outer.value + BADGE_R + FRAME_GAP);
const box = computed(() => half.value * 2);
const glyphInk = computed(() => ink(props.accent));
const innerGlyphs = computed(() => GLYPHS.slice(RING_OFFSET).concat(GLYPHS.slice(0, RING_OFFSET)));
const idx = computed(() => Array.from({ length: n.value }, (_, i) => i));

function outerGlyph(i: number): Glyph {
  return GLYPHS[i % GLYPHS.length];
}
function innerGlyph(i: number): Glyph {
  return innerGlyphs.value[i % innerGlyphs.value.length];
}
function slotStyle(deg: number, r: number) {
  const [x, y] = orbitPoint(deg, r);
  return { left: `${half.value - BADGE_R}px`, top: `${half.value - BADGE_R}px`, transform: `translate(${x}px, ${y}px)` };
}

// Plain (non-reactive) instance state: read only inside the rAF loop, never used to drive a render.
let outerRefs: (HTMLButtonElement | null)[] = [];
let innerRefs: (HTMLButtonElement | null)[] = [];
let outerPaused = false;
let innerPaused = false;
let framePointer = false;
let rate = 1;
const phase = { outer: 0, inner: 0 };

function setOuterRef(i: number, el: Element | null) {
  outerRefs[i] = el as HTMLButtonElement | null;
}
function setInnerRef(i: number, el: Element | null) {
  innerRefs[i] = el as HTMLButtonElement | null;
}
function setOuterPaused(v: boolean) {
  outerPaused = v;
}
function setInnerPaused(v: boolean) {
  innerPaused = v;
}
function setFramePointer(v: boolean) {
  framePointer = v;
}

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

function place(el: HTMLButtonElement | null, deg: number, r: number) {
  if (!el) return;
  const [x, y] = orbitPoint(deg, r);
  el.style.transform = `translate(${x.toFixed(2)}px, ${y.toFixed(2)}px)`;
}

function run() {
  cancelAnimationFrame(raf);
  const nn = n.value;
  const oo = outer.value;
  const ii = inner.value;
  if (media?.matches) {
    for (let i = 0; i < nn; i++) {
      const a = baseAngle(i, nn);
      place(outerRefs[i], a, oo);
      place(innerRefs[i], a, ii);
    }
    return;
  }
  const outerStep = 360 / (turn.value * 1000);
  const innerStep = (360 / (innerTurn.value * 1000)) * (props.innerReverse ? -1 : 1);
  let last = performance.now();

  const tick = (now: number) => {
    raf = requestAnimationFrame(tick);
    const dt = now - last;
    last = now;
    const target = framePointer ? HOVER_RATE : 1;
    rate += (target - rate) * clamp(dt / RATE_EASE_MS, 0, 1);
    if (!outerPaused) phase.outer += dt * outerStep * rate;
    if (!innerPaused) phase.inner += dt * innerStep * rate;
    for (let i = 0; i < nn; i++) {
      const a = baseAngle(i, nn);
      place(outerRefs[i], a + phase.outer, oo);
      place(innerRefs[i], a + phase.inner, ii);
    }
  };
  raf = requestAnimationFrame(tick);
}

onMounted(() => {
  media = window.matchMedia("(prefers-reduced-motion: reduce)");
  run();
  media.addEventListener("change", run);
});
onUnmounted(() => {
  cancelAnimationFrame(raf);
  media?.removeEventListener("change", run);
});
watch([n, outer, inner, turn, innerTurn, () => props.innerReverse], run);
</script>

<template>
  <div
    class="obadge"
    :style="{ width: box + 'px', height: box + 'px', '--obadge-accent': accent }"
    @pointerenter="setFramePointer(true)"
    @pointerleave="setFramePointer(false)"
  >
    <template v-if="showPath">
      <span
        class="obadge-track"
        aria-hidden="true"
        :style="{ left: half - outer + 'px', top: half - outer + 'px', width: outer * 2 + 'px', height: outer * 2 + 'px' }"
      />
      <span
        class="obadge-track"
        aria-hidden="true"
        :style="{ left: half - inner + 'px', top: half - inner + 'px', width: inner * 2 + 'px', height: inner * 2 + 'px' }"
      />
    </template>

    <button
      v-for="i in idx"
      :key="`o-${i}`"
      :ref="(el) => setOuterRef(i, el)"
      type="button"
      class="obadge-btn"
      :aria-label="outerGlyph(i).label"
      :style="slotStyle(baseAngle(i, n), outer)"
      @focus="setOuterPaused(true)"
      @blur="setOuterPaused(false)"
    >
      <span class="obadge-face">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path :d="outerGlyph(i).d" />
        </svg>
      </span>
      <span class="obadge-label" aria-hidden="true">{{ outerGlyph(i).label }}</span>
    </button>

    <button
      v-for="i in idx"
      :key="`i-${i}`"
      :ref="(el) => setInnerRef(i, el)"
      type="button"
      class="obadge-btn"
      :aria-label="innerGlyph(i).label"
      :style="slotStyle(baseAngle(i, n), inner)"
      @focus="setInnerPaused(true)"
      @blur="setInnerPaused(false)"
    >
      <span class="obadge-face">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path :d="innerGlyph(i).d" />
        </svg>
      </span>
      <span class="obadge-label" aria-hidden="true">{{ innerGlyph(i).label }}</span>
    </button>

    <div
      class="obadge-center"
      aria-hidden="true"
      :style="{ left: half - CENTER / 2 + 'px', top: half - CENTER / 2 + 'px', width: CENTER + 'px', height: CENTER + 'px', background: accent }"
    >
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" :stroke="glyphInk" stroke-width="1.8" stroke-linecap="round">
        <path d="M12 6v12M6 12h12M8.6 8.6l6.8 6.8M15.4 8.6l-6.8 6.8" />
      </svg>
    </div>
  </div>
</template>

<style scoped>
.obadge {
  position: relative;
  display: inline-block;
  user-select: none;
}
.obadge-track {
  position: absolute;
  pointer-events: none;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
.obadge-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline: none;
}
.obadge-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--obadge-accent);
}
.obadge-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  background: color-mix(in srgb, currentColor 5%, transparent);
  color: color-mix(in srgb, currentColor 75%, transparent);
  transition: transform 200ms ease, color 200ms ease, border-color 200ms ease;
}
.obadge-btn:hover .obadge-face,
.obadge-btn:focus-visible .obadge-face {
  transform: translateY(-4px) scale(1.1);
  border-color: var(--obadge-accent);
  color: var(--obadge-accent);
}
.obadge-label {
  position: absolute;
  left: 100%;
  top: 50%;
  z-index: 10;
  margin-left: 8px;
  transform: translateY(-50%);
  white-space: nowrap;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(13, 15, 18, 0.94);
  color: #f1f3f6;
  padding: 4px 8px;
  font: 500 10px/1.3 system-ui, sans-serif;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: opacity 150ms ease;
}
.obadge-btn:hover .obadge-label,
.obadge-btn:focus-visible .obadge-label {
  opacity: 1;
}
.obadge-center {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  pointer-events: none;
}
</style>

Nearby