import React from 'react';

const polarToCartesian = (centerX, centerY, radius, angle) => ({
  x: centerX + radius * Math.cos(angle),
  y: centerY + radius * Math.sin(angle)
});

const truncate = (value, maxLength = 16) => (value.length > maxLength ? `${value.slice(0, maxLength - 1)}…` : value);

export default function RadarChart({ radarSeries = [] }) {
  const data = radarSeries.slice(0, 6);

  if (!data.length) {
    return (
      <div className="rounded-2xl border border-dashed border-gray-300 dark:border-gray-700 bg-white/70 dark:bg-gray-900/70 p-4 text-sm text-gray-600 dark:text-gray-300">
        Kein Radarprofil verfügbar.
      </div>
    );
  }

  const width = 420;
  const height = 320;
  const centerX = width / 2;
  const centerY = height / 2;
  const radius = 105;

  const angleStep = (Math.PI * 2) / data.length;

  const toPoint = (ratio, idx) => {
    const angle = -Math.PI / 2 + idx * angleStep;
    return polarToCartesian(centerX, centerY, radius * (Math.max(0, Math.min(1.2, ratio)) / 1.2), angle);
  };

  const polygon = data
    .map((item, idx) => {
      const point = toPoint(item.ratio, idx);
      return `${point.x},${point.y}`;
    })
    .join(' ');

  return (
    <div className="rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-4 shadow-sm h-full flex flex-col">
      <h3 className="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-3">Radar-Profil (Ist/Soll)</h3>
      <svg viewBox={`0 0 ${width} ${height}`} className="w-full h-auto max-w-[420px] mx-auto" role="img" aria-label="Radarprofil">
        {[0.25, 0.5, 0.75, 1].map((level) => (
          <polygon
            key={level}
            points={data
              .map((_, idx) => {
                const angle = -Math.PI / 2 + idx * angleStep;
                const point = polarToCartesian(centerX, centerY, radius * level, angle);
                return `${point.x},${point.y}`;
              })
              .join(' ')}
            fill="none"
            className="stroke-gray-300 dark:stroke-gray-700"
            strokeWidth="1"
          />
        ))}

        {data.map((item, idx) => {
          const angle = -Math.PI / 2 + idx * angleStep;
          const outerPoint = polarToCartesian(centerX, centerY, radius + 16, angle);
          const axisEnd = polarToCartesian(centerX, centerY, radius, angle);
          return (
            <g key={item.name}>
              <line
                x1={centerX}
                y1={centerY}
                x2={axisEnd.x}
                y2={axisEnd.y}
                className="stroke-gray-300 dark:stroke-gray-700"
                strokeWidth="1"
              />
              <text
                x={outerPoint.x}
                y={outerPoint.y}
                textAnchor="middle"
                className="fill-gray-600 dark:fill-gray-300"
                style={{ fontSize: 10 }}
              >
                {truncate(item.name)}
              </text>
            </g>
          );
        })}

        <polygon points={polygon} className="fill-sky-300/40 dark:fill-sky-500/30 stroke-sky-600 dark:stroke-sky-400" strokeWidth="2" />
      </svg>
    </div>
  );
}
