"use client";

// Adapted from Kokonut UI (@kokonutui), MIT. See THIRD_PARTY_NOTICES.md.
import { type ComponentProps, type CSSProperties } from "react";
export interface ActivityRing {
  label: string;
  value: number;
  max?: number;
  color?: string;
}
export interface ActivityRingsProps extends ComponentProps<"div"> {
  rings: readonly ActivityRing[];
}
export function ActivityRings({
  rings,
  className = "",
  ...props
}: ActivityRingsProps) {
  const values = rings.map((ring) => {
    const requestedMax = ring.max ?? 100;
    const max =
      Number.isFinite(requestedMax) && requestedMax > 0 ? requestedMax : 100;
    const value = Number.isFinite(ring.value)
      ? Math.max(0, Math.min(max, ring.value))
      : 0;
    return { ...ring, max, value };
  });
  const size = 40 + values.length * 24;
  return (
    <div {...props} className={`ynr-activity-rings ${className}`}>
      <svg viewBox={`0 0 ${size} ${size}`} aria-hidden="true" fill="none">
        {values.map((ring, i) => {
          const radius = size / 2 - 8 - i * 12;
          return (
            <g key={i} style={{ color: ring.color }}>
              <circle
                className="ynr-activity-rings-track"
                cx={size / 2}
                cy={size / 2}
                r={radius}
              />
              <circle
                className="ynr-activity-rings-value"
                cx={size / 2}
                cy={size / 2}
                r={radius}
                pathLength={100}
                strokeDasharray="100"
                strokeDashoffset={100 - (ring.value / ring.max) * 100}
                transform={`rotate(-90 ${size / 2} ${size / 2})`}
              />
            </g>
          );
        })}
      </svg>
      <div className="ynr-activity-rings-legend">
        {values.map((ring, i) => (
          <div
            key={i}
            role="progressbar"
            aria-label={ring.label}
            aria-valuemin={0}
            aria-valuemax={ring.max}
            aria-valuenow={ring.value}
            style={{ "--ring-color": ring.color } as CSSProperties}
          >
            <span>{ring.label}</span>
            <span>
              {ring.value} / {ring.max}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}