'use client';

import {
  Legend,
  PolarAngleAxis,
  PolarGrid,
  PolarRadiusAxis,
  Radar,
  RadarChart,
  ResponsiveContainer,
} from 'recharts';

type MetricPoint = {
  metric: string;
  player: number;
  opponent: number;
};

type 球員道具盤 = {
  playerName: string;
  opponentName: string;
  metrics: {
    攻擊: number;
    運球: number;
    組織: number;
    壓迫: number;
    對位完成: number;
    穩定度: number;
  };
};

export function PlayerMatchupRadar({ playerName, opponentName, metrics }: 球員道具盤) {
  const data: MetricPoint[] = [
    { metric: '攻擊', player: metrics.攻擊, opponent: Math.max(0, 100 - metrics.攻擊) },
    { metric: '運球', player: metrics.運球, opponent: Math.max(0, 100 - metrics.運球) },
    { metric: '組織', player: metrics.組織, opponent: Math.max(0, 100 - metrics.組織) },
    { metric: '壓迫', player: metrics.壓迫, opponent: Math.max(0, 100 - metrics.壓迫) },
    { metric: '對位完成', player: metrics.對位完成, opponent: Math.max(0, 100 - metrics.對位完成) },
    { metric: '穩定度', player: metrics.穩定度, opponent: Math.max(0, 100 - metrics.穩定度) },
  ];

  return (
    <article className="panel-glow rounded-2xl p-4">
      <h3 className="dot-matrix text-xl text-[#7d2a15]">
        球員道具雷達：{playerName} 對 {opponentName}
      </h3>
      <div className="mt-3 h-80 w-full">
        <ResponsiveContainer width="100%" height="100%">
          <RadarChart data={data} outerRadius={110} cx="50%" cy="50%">
            <PolarGrid stroke="#e0c6a8" />
            <PolarAngleAxis dataKey="metric" tick={{ fill: '#6f4b36', fontSize: 12 }} />
            <PolarRadiusAxis angle={30} domain={[0, 100]} />
            <Radar
              name={playerName}
              dataKey="player"
              stroke="#d1432d"
              fill="#d1432d"
              fillOpacity={0.35}
              fillRule="evenodd"
            />
            <Radar
              name={opponentName}
              dataKey="opponent"
              stroke="#7a4a2c"
              fill="#7a4a2c"
              fillOpacity={0.2}
              fillRule="evenodd"
            />
            <Legend wrapperStyle={{ color: '#6f4f3c' }} />
          </RadarChart>
        </ResponsiveContainer>
      </div>
      <p className="mt-3 text-sm text-[#7a5b46]">
        重疊越高代表球員能力與對手弱點耦合越明顯，系統將提高「球員道具盤」建議精度。
      </p>
    </article>
  );
}