import ReactECharts from 'echarts-for-react'
import type { PowerIndex } from '@/data/mockData'

interface PowerChartProps {
  usPower: PowerIndex
  iranPower: PowerIndex
  className?: string
}

const DIMENSIONS = ['军事', '经济', '影响力'] as const

export function PowerChart({ usPower, iranPower, className = '' }: PowerChartProps) {
  const option = {
    backgroundColor: 'transparent',
    tooltip: { show: false },
    radar: {
      indicator: DIMENSIONS.map((d) => ({
        name: d,
        max: 100,
      })),
      splitArea: {
        areaStyle: {
          color: ['rgba(31, 41, 55, 0.3)', 'rgba(31, 41, 55, 0.15)'],
        },
      },
      axisLine: { lineStyle: { color: 'rgba(75, 85, 99, 0.6)' } },
      splitLine: { lineStyle: { color: 'rgba(75, 85, 99, 0.6)' } },
      axisName: {
        color: '#D1D5DB',
        fontFamily: 'Orbitron, sans-serif',
        fontSize: 10,
      },
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: [usPower.militaryStrength, usPower.economicPower, usPower.geopoliticalInfluence],
            name: '美国',
            areaStyle: { color: 'rgba(59, 130, 246, 0.25)' },
            lineStyle: { color: '#3B82F6', width: 2 },
            itemStyle: { color: '#3B82F6' },
          },
          {
            value: [iranPower.militaryStrength, iranPower.economicPower, iranPower.geopoliticalInfluence],
            name: '伊朗',
            areaStyle: { color: 'rgba(239, 68, 68, 0.25)' },
            lineStyle: { color: '#EF4444', width: 2 },
            itemStyle: { color: '#EF4444' },
          },
        ],
      },
    ],
  }

  return (
    <div className={`h-full w-full ${className}`}>
      <ReactECharts option={option} style={{ height: '100%', width: '100%' }} opts={{ renderer: 'canvas' }} />
    </div>
  )
}
