"use client";

import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";

interface RadarComparisonChartProps {
  axisKey?: string;
  data: Record<string, string | number>[];
  series: Array<{ key: string; label: string; color: string }>;
  title?: string;
}

export function RadarComparisonChart({
  data,
  title,
  axisKey = "axis",
  series,
}: RadarComparisonChartProps) {
  const chartConfig = Object.fromEntries(
    series.map((s) => [s.key, { label: s.label, color: s.color }])
  ) satisfies ChartConfig;

  return (
    <div className="my-8 rounded-xl border border-white/10 bg-white/[0.02] p-4 sm:p-6">
      {title && (
        <p className="mb-4 text-center font-semibold text-neutral-300 text-sm">
          {title}
        </p>
      )}
      <div className="mb-4 flex flex-wrap items-center justify-center gap-3">
        {series.map((s) => (
          <div
            className="flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-3 py-1.5"
            key={s.key}
          >
            <span
              className="inline-block h-3 w-6 rounded-sm"
              style={{ backgroundColor: s.color }}
            />
            <span className="font-medium text-neutral-300 text-xs">
              {s.label}
            </span>
          </div>
        ))}
      </div>
      <ChartContainer
        className="mx-auto aspect-square max-h-[350px] w-full"
        config={chartConfig}
      >
        <RadarChart data={data}>
          <PolarGrid stroke="rgba(255,255,255,0.1)" />
          <PolarAngleAxis
            dataKey={axisKey}
            tick={{ fill: "#a3a3a3", fontSize: 11 }}
          />
          <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
          {series.map((s) => (
            <Radar
              dataKey={s.key}
              fill={`var(--color-${s.key})`}
              fillOpacity={0.15}
              key={s.key}
              stroke={`var(--color-${s.key})`}
              strokeWidth={2}
            />
          ))}
        </RadarChart>
      </ChartContainer>
    </div>
  );
}