import React, { useMemo } from 'react';
import { StyleSheet, View } from 'react-native';
import Svg, * as SvgLib from 'react-native-svg';

export type RadarCategory = { key: string; label: string };

export type RadarChartProps = {
  categories: RadarCategory[];
  values: number[]; // 与 categories 一一对应
  maxValue?: number; // 默认 5
  size?: number; // 组件宽高，默认 260
  levels?: number; // 网格层数，默认 5
  showGrid?: boolean;
};

export function RadarChart({ categories, values, maxValue = 5, size = 260, levels = 5, showGrid = true }: RadarChartProps) {
  const radius = size * 0.38;
  const cx = size / 2;
  const cy = size / 2;
  const count = categories.length;

  const points = useMemo(() => {
    return categories.map((_, i) => {
      const angle = (Math.PI * 2 * i) / count - Math.PI / 2; // 顶部起点
      return { angle, x: (v: number) => cx + Math.cos(angle) * v, y: (v: number) => cy + Math.sin(angle) * v };
    });
  }, [categories, count, cx, cy]);

  const valuePath = useMemo(() => {
    const rValues = values.map((v) => Math.max(0, Math.min(maxValue, v)) / maxValue * radius);
    const d = rValues
      .map((rv, i) => `${i === 0 ? 'M' : 'L'} ${points[i].x(rv)} ${points[i].y(rv)}`)
      .join(' ');
    return `${d} Z`;
  }, [values, maxValue, radius, points]);

  const gridPolygons = useMemo(() => {
    const polys: string[] = [];
    for (let l = 1; l <= levels; l++) {
      const r = (radius / levels) * l;
      const p = points.map((p) => `${p.x(r)},${p.y(r)}`).join(' ');
      polys.push(p);
    }
    return polys;
  }, [levels, radius, points]);

  return (
    <View style={{ width: size, height: size }}>
      <Svg width={size} height={size}>
        <SvgLib.Defs>
          <SvgLib.LinearGradient id="radarFill" x1="0" y1="0" x2="1" y2="1">
            <SvgLib.Stop offset="0%" stopColor="#BBF246" stopOpacity={0.32} />
            <SvgLib.Stop offset="100%" stopColor="#59C6FF" stopOpacity={0.28} />
          </SvgLib.LinearGradient>
        </SvgLib.Defs>

        {showGrid && (
          <SvgLib.G>
            {gridPolygons.map((pointsStr, idx) => (
              <SvgLib.Polygon
                key={`grid-${idx}`}
                points={pointsStr}
                fill="none"
                stroke="rgba(25,33,38,0.12)"
                strokeWidth={1}
              />
            ))}
            {points.map((p, i) => (
              <SvgLib.Line
                key={`axis-${i}`}
                x1={cx}
                y1={cy}
                x2={p.x(radius)}
                y2={p.y(radius)}
                stroke="rgba(25,33,38,0.12)"
                strokeWidth={1}
              />
            ))}
          </SvgLib.G>
        )}

        {categories.map((c, i) => {
          const r = radius + 18;
          const x = points[i].x(r);
          const y = points[i].y(r);
          const anchor = Math.cos(points[i].angle) > 0.2 ? 'start' : Math.cos(points[i].angle) < -0.2 ? 'end' : 'middle';
          const dy = Math.sin(points[i].angle) > 0.6 ? 10 : Math.sin(points[i].angle) < -0.6 ? -4 : 4;
          return (
            <SvgLib.Text key={`label-${c.key}`} x={x} y={y + dy} fontSize={11} fill="#192126" textAnchor={anchor}>
              {c.label}
            </SvgLib.Text>
          );
        })}

        <SvgLib.Path d={valuePath} fill="url(#radarFill)" stroke="#A8DB3D" strokeWidth={2} />
        <SvgLib.Circle cx={cx} cy={cy} r={3} fill="#A8DB3D" />
      </Svg>
    </View>
  );
}

const styles = StyleSheet.create({});