"use client";

import { OrbitRingNav } from "./index";

export interface DemoProps {
  size?: number;
  accentColor?: string;
  pointerStiffness?: number;
  expandLabels?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ size = 260, accentColor = "#38BDF8", pointerStiffness = 220, expandLabels = true }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <OrbitRingNav size={size} accentColor={accentColor} pointerStiffness={pointerStiffness} expandLabels={expandLabels} />
    </div>
  );
}

1d:T261e, 1e:T1ba01,

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

interface OrbitItem {
  id: string;
  label: string;
  paths: string[];
}

const DEFAULT_ITEMS: OrbitItem[] = [
  { id: "home", label: "Home", paths: ["M4.4 11.6 12 4.6l7.6 7", "M6.4 10.2v9.2h5v-5.4h1.2v5.4h5v-9.2"] },
  { id: "map", label: "Map", paths: ["M4.4 6 9 4.4l6 2 4.6-1.6v13.4L15 19.8l-6-2-4.6 1.6Z", "M9 4.4v13.4", "M15 6.4v13.4"] },
  { id: "log", label: "Log", paths: ["M6.6 4.6h8l3 3v11.2a1 1 0 0 1-1 1H6.6a1 1 0 0 1-1-1V5.6a1 1 0 0 1 1-1Z", "M8.8 10h6.4", "M8.8 13.2h6.4", "M8.8 16.4h4"] },
  { id: "alerts", label: "Alerts", paths: ["M12 4.4a4.6 4.6 0 0 0-4.6 4.6v3c0 .9-.3 1.7-.9 2.4L5 16.4h14l-1.5-2c-.6-.7-.9-1.5-.9-2.4v-3A4.6 4.6 0 0 0 12 4.4Z", "M10 18.4a2 2 0 0 0 4 0"] },
  { id: "crew", label: "Crew", paths: ["M8.6 11a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Z", "M15.6 11.2a2.2 2.2 0 1 0 0-4.4 2.2 2.2 0 0 0 0 4.4Z", "M3.6 19v-1.2a4 4 0 0 1 4-4h2a4 4 0 0 1 4 3.7", "M13.8 13.8a3.5 3.5 0 0 1 6.6 2.3V19"] },
  { id: "settings", label: "Settings", paths: ["M12 8.6a3.4 3.4 0 1 0 0 6.8 3.4 3.4 0 0 0 0-6.8Z", "M12 3v2.2", "M12 18.8V21", "M4 12h2.2", "M17.8 12H20", "M6.3 6.3l1.6 1.6", "M16.1 16.1l1.6 1.6", "M17.7 6.3l-1.6 1.6", "M7.9 16.1l-1.6 1.6"] },
];

const ICON = 44;

const props = withDefaults(
  defineProps<{
    items?: OrbitItem[];
    size?: number;
    accentColor?: string;
    pointerStiffness?: number;
    expandLabels?: boolean;
    activeId?: string;
  }>(),
  { items: undefined, size: 260, accentColor: "#38BDF8", pointerStiffness: 220, expandLabels: true, activeId: undefined },
);

const emit = defineEmits<{ (e: "select", id: string): void }>();

function readHex(hex: string): [number, number, number] {
  const value = hex.replace("#", "");
  return [Number.parseInt(value.slice(0, 2), 16) || 0, Number.parseInt(value.slice(2, 4), 16) || 0, Number.parseInt(value.slice(4, 6), 16) || 0];
}
function withAlpha(hex: string, alpha: number): string {
  const [r, g, b] = readHex(hex);
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
function angleFor(index: number, count: number): number {
  return count > 0 ? (360 / count) * index : 0;
}
function pointOnRing(angleDeg: number, radius: number, cx: number, cy: number) {
  const rad = (angleDeg * Math.PI) / 180;
  return { x: cx + radius * Math.sin(rad), y: cy - radius * Math.cos(rad) };
}
function reducedMotion(): boolean {
  return typeof window !== "undefined" && !!window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
}

const entries = computed(() => props.items ?? DEFAULT_ITEMS);
const own = ref(entries.value[0]?.id ?? "");
const current = computed(() => props.activeId ?? own.value);
const activeIndex = computed(() => Math.max(0, entries.value.findIndex((item) => item.id === current.value)));
const expandedId = ref<string | null>(null);

const cx = computed(() => props.size / 2);
const cy = computed(() => props.size / 2);
const radius = computed(() => Math.max(60, (props.size - ICON) / 2 - 6));
const pointerLength = computed(() => Math.max(24, radius.value - 16));

const rotationAngle = ref(angleFor(activeIndex.value, entries.value.length));
let rotationTarget = rotationAngle.value;
let raf = 0;

function stopSpin() {
  if (raf) cancelAnimationFrame(raf);
  raf = 0;
}

function spinTo(next: number) {
  stopSpin();
  if (reducedMotion()) {
    rotationAngle.value = next;
    return;
  }
  let value = rotationAngle.value;
  let velocity = 0;
  const stiffness = props.pointerStiffness;
  const damping = 24;
  const mass = 0.7;
  const step = () => {
    const dt = 1 / 60;
    const accel = (-stiffness * (value - next) - damping * velocity) / mass;
    velocity += accel * dt;
    value += velocity * dt;
    rotationAngle.value = value;
    if (Math.abs(next - value) < 0.05 && Math.abs(velocity) < 0.05) {
      rotationAngle.value = next;
      raf = 0;
      return;
    }
    raf = requestAnimationFrame(step);
  };
  raf = requestAnimationFrame(step);
}

watch(activeIndex, () => {
  const raw = angleFor(activeIndex.value, entries.value.length);
  const delta = (((raw - rotationTarget) % 360) + 540) % 360 - 180;
  const next = rotationTarget + delta;
  rotationTarget = next;
  spinTo(next);
});

onBeforeUnmount(stopSpin);

function select(id: string) {
  own.value = id;
  emit("select", id);
}

function hover(id: string) {
  if (props.expandLabels) expandedId.value = id;
}
function unhover(id: string) {
  if (expandedId.value === id) expandedId.value = null;
}

function anchorStyle(index: number) {
  const angle = angleFor(index, entries.value.length);
  const { x, y } = pointOnRing(angle, radius.value, cx.value, cy.value);
  const side: "left" | "right" = x >= cx.value ? "right" : "left";
  const style =
    side === "right"
      ? { left: `${x - ICON / 2}px`, top: `${y}px`, transform: "translateY(-50%)", zIndex: expandedId.value === entries.value[index]?.id ? 30 : 10 }
      : { right: `${props.size - x - ICON / 2}px`, top: `${y}px`, transform: "translateY(-50%)", zIndex: expandedId.value === entries.value[index]?.id ? 30 : 10 };
  return { style, side };
}
</script>

<template>
  <nav aria-label="Section navigation" class="orn" :style="{ width: size + 'px', height: size + 'px' }">
    <div aria-hidden="true" class="orn__track" :style="{ width: radius * 2 + 'px', height: radius * 2 + 'px', left: cx - radius + 'px', top: cy - radius + 'px' }"></div>
    <div
      aria-hidden="true"
      class="orn__pointer"
      :style="{
        left: cx - 1 + 'px',
        top: cy - pointerLength + 'px',
        height: pointerLength + 'px',
        transform: `rotate(${rotationAngle}deg)`,
        background: `linear-gradient(to top, transparent, ${accentColor})`,
      }"
    ></div>
    <div
      aria-hidden="true"
      class="orn__hub"
      :style="{ left: cx - 6 + 'px', top: cy - 6 + 'px', background: accentColor, boxShadow: `0 0 0 4px rgba(11,13,16,0.9), 0 0 10px ${withAlpha(accentColor, 0.65)}` }"
    ></div>

    <div v-for="(item, index) in entries" :key="item.id" class="orn__anchor" :style="anchorStyle(index).style">
      <button
        type="button"
        class="orn__button"
        :class="{ 'orn__button--rev': anchorStyle(index).side === 'left' }"
        :aria-label="item.label"
        :aria-current="current === item.id ? 'true' : undefined"
        :style="{
          background: current === item.id ? withAlpha(accentColor, 0.22) : 'rgba(255,255,255,0.05)',
          borderColor: current === item.id ? withAlpha(accentColor, 0.55) : 'rgba(255,255,255,0.12)',
          color: current === item.id ? accentColor : 'rgba(255,255,255,0.78)',
        }"
        @pointerenter="hover(item.id)"
        @pointerleave="unhover(item.id)"
        @focus="hover(item.id)"
        @blur="unhover(item.id)"
        @click="select(item.id)"
      >
        <span class="orn__icon">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path v-for="d in item.paths" :key="d" :d="d" />
          </svg>
        </span>
        <span class="orn__label" :class="{ 'orn__label--open': expandLabels && expandedId === item.id }" aria-hidden="true">{{ item.label }}</span>
      </button>
    </div>

    <div class="orn__caption" aria-live="polite" :style="{ top: cy - 32 + 'px', width: size * 0.6 + 'px' }">
      <span class="orn__caption-text">{{ entries.find((i) => i.id === current)?.label }}</span>
    </div>
  </nav>
</template>

<style scoped>
.orn {
  position: relative;
  display: inline-block;
  user-select: none;
  font-family: system-ui, sans-serif;
}
.orn__track {
  position: absolute;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.orn__pointer {
  position: absolute;
  width: 2px;
  border-radius: 9999px;
  transform-origin: 50% 100%;
  pointer-events: none;
}
.orn__hub {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  pointer-events: none;
}
.orn__anchor {
  position: absolute;
}
.orn__button {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    transform 160ms ease;
}
.orn__button:active {
  transform: scale(0.94);
}
.orn__button:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.orn__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  order: 1;
}
.orn__button--rev .orn__icon {
  order: 2;
}
.orn__label {
  display: inline-flex;
  align-items: center;
  order: 2;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition:
    max-width 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 180ms ease,
    padding 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.orn__button--rev .orn__label {
  order: 1;
}
.orn__label--open {
  max-width: 140px;
  opacity: 1;
  padding-right: 16px;
}
.orn__button--rev .orn__label--open {
  padding-right: 0;
  padding-left: 16px;
}
.orn__caption {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  z-index: 20;
}
.orn__caption-text {
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.7);
}
@media (prefers-reduced-motion: reduce) {
  .orn__button,
  .orn__label {
    transition-duration: 1ms;
  }
}
</style>

Nearby