"use client"

import {
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
  Radar,
  ResponsiveContainer,
} from "recharts"

interface SkillData {
  skillCode: string
  stability: number
  reps: number
}

export function SkillMasteryChart({ data }: { data: SkillData[] }) {
  if (!data || data.length === 0) {
    return (
      <div className="text-center text-muted-foreground italic py-8">
        Sin skills todavía
      </div>
    )
  }

  const chartData = data
    .filter((s) => s.reps > 0)
    .slice(0, 8)
    .map((s) => ({
      skill: s.skillCode.replace("vocal-", "").replace("numero-", "num "),
      mastery: Math.min(Math.round((s.stability / 100) * 100), 100),
    }))

  if (chartData.length === 0) {
    return (
      <div className="text-center text-muted-foreground italic py-8">
        Sin skills todavía
      </div>
    )
  }

  return (
    <div className="w-full h-48">
      <ResponsiveContainer width="100%" height="100%">
        <RadarChart data={chartData} margin={{ top: 8, right: 8, bottom: 8, left: 8 }}>
          <PolarGrid stroke="#E8E0D8" />
          <PolarAngleAxis dataKey="skill" tick={{ fontSize: 11, fill: "#6B7280" }} />
          <PolarRadiusAxis angle={90} domain={[0, 100]} tick={false} />
          <Radar
            name="Maestría"
            dataKey="mastery"
            stroke="#8CB8A0"
            fill="#8CB8A0"
            fillOpacity={0.3}
          />
        </RadarChart>
      </ResponsiveContainer>
    </div>
  )
}