import { TraitScores } from '@/lib/api';

const labels: Array<[keyof TraitScores, string]> = [
  ['aggression', '공격성'],
  ['stability', '안정성'],
  ['roaming', '로밍'],
  ['vision', '시야'],
  ['objective', '오브젝트'],
  ['growth', '성장'],
  ['fightJoin', '교전 합류'],
];

const COLORS = ['#f56b8a', '#7284ff', '#57d6e9', '#7ad79f', '#dcb05b', '#9cdf62', '#b78cff'];

export function TraitBars({ scores }: { scores: TraitScores }) {
  const size = 220;
  const center = size / 2;
  const outerRadius = 74;
  const angleStep = (Math.PI * 2) / labels.length;

  const points = labels.map(([key], index) => {
    const angle = -Math.PI / 2 + angleStep * index;
    const value = scores[key] ?? 0;
    const valueRadius = outerRadius * (value / 100);
    return {
      angle,
      value,
      x: center + Math.cos(angle) * outerRadius,
      y: center + Math.sin(angle) * outerRadius,
      vx: center + Math.cos(angle) * valueRadius,
      vy: center + Math.sin(angle) * valueRadius,
      color: COLORS[index],
    };
  });

  const polygonPoints = points.map((point) => `${point.vx},${point.vy}`).join(' ');

  return (
    <div className="grid gap-4">
      <div className="grid gap-3">
        {labels.map(([key, label], index) => {
          const value = scores[key] ?? 0;
          return (
            <div key={key} className="rounded-[10px] bg-[#252a38] px-4 py-3">
              <div className="flex items-center justify-between gap-4">
                <div className="flex items-center gap-3">
                  <span className="h-3 w-3 rounded-full" style={{ backgroundColor: COLORS[index] }} />
                  <span className="text-[14px] font-semibold text-[#dbe2f4]">{label}</span>
                </div>
                <span className="text-[14px] font-bold text-white">{value}</span>
              </div>
              <div className="mt-3 h-[8px] overflow-hidden rounded-full bg-[#3a3f51]">
                <div
                  className="h-full rounded-full"
                  style={{ width: `${Math.max(0, Math.min(100, value))}%`, backgroundColor: COLORS[index] }}
                />
              </div>
            </div>
          );
        })}
      </div>

      <div className="flex justify-center rounded-[12px] bg-[#252a38] px-4 py-5">
        <svg viewBox={`0 0 ${size} ${size}`} className="h-[180px] w-[180px]">
          {Array.from({ length: 4 }).map((_, levelIndex) => {
            const radius = outerRadius * ((levelIndex + 1) / 4);
            const ring = labels
              .map((_, index) => {
                const angle = -Math.PI / 2 + angleStep * index;
                const x = center + Math.cos(angle) * radius;
                const y = center + Math.sin(angle) * radius;
                return `${x},${y}`;
              })
              .join(' ');

            return <polygon key={radius} points={ring} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />;
          })}

          {points.map((point, index) => (
            <g key={labels[index][0]}>
              <line x1={center} y1={center} x2={point.x} y2={point.y} stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
              <text
                x={center + Math.cos(point.angle) * (outerRadius + 18)}
                y={center + Math.sin(point.angle) * (outerRadius + 18)}
                textAnchor="middle"
                className="fill-[#9aa6c1] text-[9px] font-semibold"
              >
                {labels[index][1]}
              </text>
            </g>
          ))}

          <polygon points={polygonPoints} fill="rgba(116,138,255,0.22)" stroke="#7c91ff" strokeWidth="2" />

          {points.map((point, index) => (
            <circle key={`${labels[index][0]}-dot`} cx={point.vx} cy={point.vy} r="4" fill={COLORS[index]} />
          ))}
        </svg>
      </div>
    </div>
  );
}