"use client";

/**
 * Story avatar rings.
 *
 * The look is taken from the reference clip: a mostly-static gradient ring
 * with a bright, jagged "electric tendril" crawling around the
 * circumference, trailing a coloured glow. The jitter comes from an SVG
 * turbulence + displacement filter rather than a hand-authored wavy path,
 * so the wobble is irregular and never visibly loops.
 */

export const STORY_FRAMES = [
  { id: "electric", label: "Electric", ring: ["#ff8a3c", "#ff4d8d"], arc: "#b6ff3c", glow: "#ff3cf0", speed: 2.6, seed: 1 },
  { id: "neon", label: "Neon", ring: ["#ff6a00", "#ff2d95"], arc: "#ffffff", glow: "#ff2d95", speed: 3.2, seed: 2 },
  { id: "toxic", label: "Toxic", ring: ["#7cff3c", "#00b34a"], arc: "#eaffc8", glow: "#7cff3c", speed: 2.1, seed: 3 },
  { id: "ice", label: "Ice", ring: ["#7fe7ff", "#2b6cff"], arc: "#ffffff", glow: "#7fe7ff", speed: 3.6, seed: 4 },
  { id: "ember", label: "Ember", ring: ["#ff3d00", "#ffb300"], arc: "#fff3b0", glow: "#ff6d00", speed: 1.9, seed: 5 },
  { id: "violet", label: "Violet", ring: ["#b06bff", "#5a2bff"], arc: "#f0d9ff", glow: "#b06bff", speed: 3.0, seed: 6 },
  { id: "candy", label: "Candy", ring: ["#ff6ec7", "#6ec7ff"], arc: "#ffffff", glow: "#ff6ec7", speed: 4.0, seed: 7 },
  { id: "gold", label: "Gold", ring: ["#ffd700", "#ff9500"], arc: "#fffbe0", glow: "#ffd700", speed: 3.4, seed: 8 },
  { id: "matrix", label: "Matrix", ring: ["#00ff6a", "#005f2a"], arc: "#d6ffe6", glow: "#00ff6a", speed: 1.6, seed: 9 },
  { id: "aurora", label: "Aurora", ring: ["#43e97b", "#4facfe"], arc: "#eaffff", glow: "#38f9d7", speed: 4.4, seed: 10 },
] as const;

export type StoryFrameId = (typeof STORY_FRAMES)[number]["id"];
export const STORY_FRAME_IDS = STORY_FRAMES.map((f) => f.id);

export function getFrame(id?: string | null) {
  if (!id) return null;
  return STORY_FRAMES.find((f) => f.id === id) ?? null;
}

export function frameClass(id?: string | null) {
  return getFrame(id) ? "sf" : "";
}

export function StoryRing({
  frame,
  size = 60,
  children,
}: {
  frame?: string | null;
  size?: number;
  children?: React.ReactNode;
}) {
  const f = getFrame(frame);
  if (!f) return <>{children}</>;

  const uid = `sr-${f.id}-${size}`;
  const r = size / 2 - 2.5;
  const c = size / 2;
  const circumference = 2 * Math.PI * r;
  const dash = `${circumference * 0.18} ${circumference}`;

  return (
    <span className="relative block shrink-0" style={{ width: size, height: size }}>
      <svg
        width={size}
        height={size}
        viewBox={`0 0 ${size} ${size}`}
        className="absolute inset-0 overflow-visible"
        aria-hidden
      >
        <defs>
          <linearGradient id={`${uid}-ring`} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor={f.ring[0]} />
            <stop offset="1" stopColor={f.ring[1]} />
          </linearGradient>
          {/* Irregular wobble — gives the tendril its hand-drawn, plasma-like
              quality instead of a clean geometric arc. */}
          <filter id={`${uid}-wob`} x="-40%" y="-40%" width="180%" height="180%">
            <feTurbulence type="fractalNoise" baseFrequency="0.055" numOctaves={2} seed={f.seed} result="n">
              <animate
                attributeName="baseFrequency"
                dur={`${f.speed * 2.4}s`}
                values="0.045;0.075;0.045"
                repeatCount="indefinite"
              />
            </feTurbulence>
            <feDisplacementMap in="SourceGraphic" in2="n" scale="5" />
          </filter>
        </defs>

        <circle cx={c} cy={c} r={r} fill="none" stroke={`url(#${uid}-ring)`} strokeWidth="2.5" />

        <circle
          cx={c}
          cy={c}
          r={r}
          fill="none"
          stroke={f.glow}
          strokeWidth="5"
          strokeLinecap="round"
          strokeDasharray={dash}
          filter={`url(#${uid}-wob)`}
          opacity="0.55"
          style={{ animation: `sr-travel ${f.speed}s linear infinite`, animationDelay: "-0.12s" }}
        />

        <circle
          cx={c}
          cy={c}
          r={r}
          fill="none"
          stroke={f.arc}
          strokeWidth="2.5"
          strokeLinecap="round"
          strokeDasharray={dash}
          filter={`url(#${uid}-wob)`}
          style={{
            animation: `sr-travel ${f.speed}s linear infinite`,
            filter: `drop-shadow(0 0 4px ${f.glow}) drop-shadow(0 0 9px ${f.glow})`,
          }}
        />
      </svg>
      {children && (
        <span
          className="absolute rounded-full overflow-hidden flex items-center justify-center"
          style={{ inset: 5 }}
        >
          {children}
        </span>
      )}
    </span>
  );
}