import { useEffect, useState } from "react";

type Props = {
  score: number; // 0..100
  size?: number;
  delta?: number; // month-over-month change
  label?: string;
};

export function HealthRing({ score, size = 160, delta, label = "Financial Health" }: Props) {
  const stroke = 12;
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const clamped = Math.max(0, Math.min(100, score));
  const [animated, setAnimated] = useState(0);

  useEffect(() => {
    const start = performance.now();
    const from = animated;
    const to = clamped;
    const dur = 900;
    let raf = 0;
    const step = (now: number) => {
      const t = Math.min(1, (now - start) / dur);
      // ease-out cubic
      const eased = 1 - Math.pow(1 - t, 3);
      setAnimated(from + (to - from) * eased);
      if (t < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [clamped]);

  const offset = c - (animated / 100) * c;
  const tone = clamped >= 75 ? "var(--success)" : clamped >= 50 ? "var(--electric)" : clamped >= 30 ? "var(--warning)" : "var(--destructive)";

  return (
    <div className="relative grid place-items-center" style={{ width: size, height: size }}>
      <svg width={size} height={size} className="-rotate-90">
        <defs>
          <linearGradient id="aura-ring-grad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="var(--electric)" />
            <stop offset="100%" stopColor="var(--purple)" />
          </linearGradient>
        </defs>
        <circle cx={size / 2} cy={size / 2} r={r} stroke="color-mix(in oklab, var(--foreground) 8%, transparent)" strokeWidth={stroke} fill="none" />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={r}
          stroke={clamped >= 50 ? "url(#aura-ring-grad)" : tone}
          strokeWidth={stroke}
          strokeLinecap="round"
          fill="none"
          strokeDasharray={c}
          strokeDashoffset={offset}
          style={{ filter: "drop-shadow(0 0 12px color-mix(in oklab, var(--electric) 40%, transparent))" }}
        />
      </svg>
      <div className="absolute inset-0 grid place-items-center text-center">
        <div>
          <p className="text-[10px] uppercase tracking-widest text-muted-foreground">{label}</p>
          <p className="text-[40px] font-semibold leading-none mt-1 tabular-nums">{Math.round(animated)}</p>
          {typeof delta === "number" && (
            <p className={`text-[11px] mt-1 font-medium ${delta >= 0 ? "text-success" : "text-destructive"}`}>
              {delta >= 0 ? "▲" : "▼"} {Math.abs(delta)} this month
            </p>
          )}
        </div>
      </div>
    </div>
  );
}