import type { Flywheel as FlywheelData } from "@/lib/north-star";

/**
 * Circular flywheel diagram: step labels evenly distributed around a ring,
 * with a slowly rotating gradient arc. Deterministic (trig, no randomness).
 */
export function Flywheel({ data }: { data: FlywheelData }) {
  const size = 220;
  const c = size / 2;
  const r = 92;
  const n = data.steps.length;

  return (
    <svg
      width={size}
      height={size}
      viewBox={`0 0 ${size} ${size}`}
      className="mb-7"
      role="img"
      aria-label={`${data.title} cycle: ${data.steps.join(" → ")}`}
    >
      <defs>
        <linearGradient id={`fw-${data.title.replace(/\s+/g, "")}`} x1="0" y1="0" x2={size} y2={size}>
          <stop offset="0" stopColor="#36b85f" />
          <stop offset="0.5" stopColor="#2bbac8" />
          <stop offset="1" stopColor="#5aa8f0" />
        </linearGradient>
      </defs>

      {/* rings */}
      <circle cx={c} cy={c} r={r} fill="none" stroke="rgba(43,186,200,0.18)" strokeWidth="1" />
      <circle cx={c} cy={c} r={r - 30} fill="none" stroke="rgba(43,186,200,0.12)" strokeWidth="1" />

      {/* rotating arc */}
      <g style={{ transformOrigin: "center", animation: "spin 22s linear infinite" }}>
        <path
          d={`M ${c} ${c - r} A ${r} ${r} 0 0 1 ${c + r} ${c}`}
          fill="none"
          stroke={`url(#fw-${data.title.replace(/\s+/g, "")})`}
          strokeWidth="2.5"
          strokeLinecap="round"
        />
      </g>

      {/* step labels around the ring */}
      {data.steps.map((step, i) => {
        const angle = (i / n) * 2 * Math.PI - Math.PI / 2;
        const x = c + Math.cos(angle) * (r + 4);
        const y = c + Math.sin(angle) * (r + 4);
        const anchor = Math.abs(Math.cos(angle)) < 0.3 ? "middle" : x > c ? "end" : "start";
        return (
          <text
            key={step}
            x={x}
            y={y}
            textAnchor={anchor}
            dominantBaseline="middle"
            fill="#3a4a42"
            fontSize="9"
            fontFamily="var(--font-body)"
            fontWeight="600"
          >
            {step}
          </text>
        );
      })}

      {/* centre */}
      <circle cx={c} cy={c} r="26" fill="rgba(79,196,107,0.1)" stroke="rgba(79,196,107,0.25)" strokeWidth="1" />
      <text
        x={c}
        y={c}
        textAnchor="middle"
        dominantBaseline="middle"
        fill="#36b85f"
        fontSize="8"
        fontFamily="var(--font-display)"
        fontWeight="700"
        letterSpacing="0.5"
      >
        {data.title.split(" ")[0].toUpperCase()}
      </text>
    </svg>
  );
}