import type { DimensionPoint } from "../_lib/types";

interface Props {
  dimensions: readonly DimensionPoint[];
  score: number;
  delta: number | null;
}

const CX = 120;
const CY = 120;
const MAX_R = 100;
const RING_RADII = [40, 60, 80, 100];

function toPoint(index: number, total: number, score: number): { x: number; y: number } {
  const angle = (index / total) * 2 * Math.PI - Math.PI / 2;
  const r = (score / 100) * MAX_R;
  return { x: CX + r * Math.cos(angle), y: CY + r * Math.sin(angle) };
}

function labelPos(index: number, total: number): { x: number; y: number } {
  const angle = (index / total) * 2 * Math.PI - Math.PI / 2;
  const r = MAX_R + 14;
  return { x: CX + r * Math.cos(angle), y: CY + r * Math.sin(angle) };
}

function axisEnd(index: number, total: number): { x: number; y: number } {
  const angle = (index / total) * 2 * Math.PI - Math.PI / 2;
  return { x: CX + MAX_R * Math.cos(angle), y: CY + MAX_R * Math.sin(angle) };
}

export function RadialChart({ dimensions, score, delta }: Props) {
  const n = dimensions.length;
  const points = dimensions.map((d, i) => toPoint(i, n, d.score));
  const polygonPoints = points.map((p) => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ");

  return (
    <div className="flex flex-col items-center gap-3">
      <div className="relative" style={{ width: 240, height: 240 }}>
        <svg viewBox="0 0 240 240" width="240" height="240">
          {/* Background rings */}
          {RING_RADII.map((r) => (
            <circle key={r} cx={CX} cy={CY} r={r} fill="none" stroke="#E2E8F0" strokeWidth={1} />
          ))}

          {/* Axes */}
          {dimensions.map((_, i) => {
            const end = axisEnd(i, n);
            return (
              <line key={i} x1={CX} y1={CY} x2={end.x} y2={end.y} stroke="#E2E8F0" strokeWidth={1} />
            );
          })}

          {/* Score polygon */}
          <polygon
            points={polygonPoints}
            fill="rgba(239,68,68,0.08)"
            stroke="#EF4444"
            strokeWidth={1.5}
            strokeLinejoin="round"
          />

          {/* Dimension dots */}
          {points.map((p, i) => (
            <circle key={i} cx={p.x} cy={p.y} r={3} fill="#EF4444" />
          ))}

          {/* Dimension labels */}
          {dimensions.map((d, i) => {
            const pos = labelPos(i, n);
            return (
              <text
                key={i}
                x={pos.x.toFixed(1)}
                y={pos.y.toFixed(1)}
                fill="#64748B"
                fontFamily="Inter, sans-serif"
                fontSize={9.5}
                fontWeight={600}
                textAnchor="middle"
                dominantBaseline="middle"
              >
                {d.label}
              </text>
            );
          })}
        </svg>

        {/* Center overlay */}
        <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
          <span className="text-5xl font-bold text-slate-900 leading-none tabular-nums tracking-tight">
            {score}
            <span className="text-sm text-slate-400 font-medium">/100</span>
          </span>
          <span className="text-[11px] font-semibold text-slate-500 uppercase tracking-widest mt-1.5">
            Composite Health
          </span>
        </div>
      </div>

      {delta != null && (
        <span className="inline-flex items-center gap-1 bg-emerald-50 text-emerald-700 text-[11px] font-semibold px-2.5 py-1 rounded-full">
          <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor">
            <path d="M4 1L7 6H1L4 1Z" />
          </svg>
          {delta >= 0 ? "+" : ""}{delta} from last audit
        </span>
      )}
    </div>
  );
}
