"use client";

import { useEffect, useState } from "react";
import {
  Radar,
  RadarChart as RechartsRadar,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
  ResponsiveContainer,
  Legend,
  Tooltip,
} from "recharts";
import { useTheme } from "./ThemeProvider";

interface DataPoint {
  dimension: string;
  score: number;
  fullMark: number;
}

interface RadarChartProps {
  data: DataPoint[];
  /** Compact mode for cards (smaller, no legend) */
  compact?: boolean;
}

const LIGHT = {
  grid: "#d4d4d8",
  tick: "#71717a",
  axis: "#a1a1aa",
  tooltipBg: "#fafafa",
  tooltipBorder: "#e4e4e7",
  tooltipText: "#18181b",
};
const DARK = {
  grid: "#71717a",
  tick: "#a1a1aa",
  axis: "#d4d4d8",
  tooltipBg: "#27272a",
  tooltipBorder: "#52525b",
  tooltipText: "#fafafa",
};

export function RadarChart({ data, compact }: RadarChartProps) {
  const { theme } = useTheme();
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    // Defer chart until client so ResponsiveContainer can measure parent (avoids width/height -1 on SSR)
    const raf = requestAnimationFrame(() => setMounted(true));
    return () => cancelAnimationFrame(raf);
  }, []);
  const c = theme === "dark" ? DARK : LIGHT;

  if (data.length === 0) return null;

  // ResponsiveContainer needs real DOM dimensions; avoid -1 on SSR
  if (!mounted) {
    return <div className={compact ? "h-28 w-full" : "h-72 w-full"} aria-hidden />;
  }

  return (
    <div className={compact ? "h-28 w-full" : "h-72 w-full"}>
      <ResponsiveContainer width="100%" height="100%">
        <RechartsRadar data={data}>
          <PolarGrid stroke={c.grid} />
          <PolarAngleAxis dataKey="dimension" tick={{ fontSize: compact ? 7 : 9, fill: c.axis }} />
          <PolarRadiusAxis angle={30} domain={[0, 5]} tick={false} />
          <Radar
            name="Score"
            dataKey="score"
            stroke="#0891b2"
            fill="#0891b2"
            fillOpacity={0.2}
          />
          <Tooltip
            contentStyle={{
              backgroundColor: c.tooltipBg,
              border: `1px solid ${c.tooltipBorder}`,
              borderRadius: "4px",
              color: c.tooltipText,
              fontSize: "12px",
            }}
          />
          {!compact && <Legend wrapperStyle={{ fontSize: "11px" }} />}
        </RechartsRadar>
      </ResponsiveContainer>
    </div>
  );
}
