frontend/src/components/RadarView.tsx

import React, { FC } from 'react';
import {
  ResponsiveContainer,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
  Radar,
  Legend,
} from 'recharts';
import { ChartRow } from '../types';

interface Props {
  data: ChartRow[];
  comparisonMode: boolean;
  colors: string[];
}

const RadarView: FC<Props> = ({ data, comparisonMode, colors }) => (
  <div className="bg-white rounded-xl shadow-lg p-6 mb-8">
    <h2 className="text-2xl font-bold text-gray-800 mb-6">
      {comparisonMode ? 'Multi-Model Radar' : 'Metric Distribution'}
    </h2>
    <ResponsiveContainer width="100%" height={400}>
      <RadarChart data={data}>
        <PolarGrid />
        <PolarAngleAxis dataKey="metric" />
        <PolarRadiusAxis angle={90} domain={[0, 1]} />
        {comparisonMode
          ? data[0] /* assume all rows have same keys */ &&
            Object.keys(data[0])
              .filter(k => k !== 'metric')
              .map((key, i) => (
                <Radar
                  key={key}
                  name={key}
                  dataKey={key}
                  stroke={colors[i % colors.length]}
                  fill={colors[i % colors.length]}
                  fillOpacity={0.3}
                />
              ))
          : <Radar name="Performance" dataKey="value" stroke={colors[0]} fill={colors[0]} fillOpacity={0.3} />}
        <Legend />
      </RadarChart>
    </ResponsiveContainer>
  </div>
);

export default RadarView;