import React, { useState } from "react";

const PolygonWidget: React.FC = () => {
  const [n, setN] = useState(5);

  // Math
  const interiorSum = (n - 2) * 180;
  const eachInterior = Math.round((interiorSum / n) * 100) / 100;
  const eachExterior = Math.round((360 / n) * 100) / 100;

  // SVG Config
  const width = 300;
  const height = 300;
  const cx = width / 2;
  const cy = height / 2;
  const r = 80;

  // @ts-ignore
  const points = [];
  for (let i = 0; i < n; i++) {
    const angle = (i * 2 * Math.PI) / n - Math.PI / 2; // Start at top
    points.push({
      x: cx + r * Math.cos(angle),
      y: cy + r * Math.sin(angle),
    });
  }

  // Generate path string
  const pathD =
    points
      .map((p, i) => (i === 0 ? `M ${p.x} ${p.y}` : `L ${p.x} ${p.y}`))
      .join(" ") + " Z";

  // Generate exterior lines (extensions)
  const exteriorLines = points.map((p, i) => {
    // @ts-ignore
    const nextP = points[(i + 1) % n];
    // Vector from p to nextP
    const dx = nextP.x - p.x;
    const dy = nextP.y - p.y;
    // Normalize and extend
    const len = Math.sqrt(dx * dx + dy * dy);
    const exLen = 40;
    const exX = nextP.x + (dx / len) * exLen;
    const exY = nextP.y + (dy / len) * exLen;
    return { x1: nextP.x, y1: nextP.y, x2: exX, y2: exY };
  });

  return (
    <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 flex flex-col md:flex-row gap-8 items-center">
      <div className="flex-1 w-full max-w-xs">
        <label className="block text-sm font-bold text-slate-500 uppercase mb-2">
          Number of Sides (n):{" "}
          <span className="text-slate-900 text-lg">{n}</span>
        </label>
        <input
          type="range"
          min="3"
          max="10"
          step="1"
          value={n}
          onChange={(e) => setN(parseInt(e.target.value))}
          className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-emerald-600 mb-6"
        />

        <div className="space-y-3 font-mono text-sm">
          <div className="p-3 bg-slate-50 rounded border border-slate-200">
            <div className="text-xs text-slate-500 font-bold uppercase">
              Interior Sum
            </div>
            <div className="text-slate-800">
              (n - 2) × 180° ={" "}
              <strong className="text-emerald-600">{interiorSum}°</strong>
            </div>
          </div>

          <div className="p-3 bg-slate-50 rounded border border-slate-200">
            <div className="text-xs text-slate-500 font-bold uppercase">
              Each Interior Angle
            </div>
            <div className="text-slate-800">
              {interiorSum} / {n} ={" "}
              <strong className="text-emerald-600">{eachInterior}°</strong>
            </div>
          </div>

          <div className="p-3 bg-slate-50 rounded border border-slate-200">
            <div className="text-xs text-slate-500 font-bold uppercase">
              Each Exterior Angle
            </div>
            <div className="text-slate-800">
              360 / {n} ={" "}
              <strong className="text-rose-600">{eachExterior}°</strong>
            </div>
          </div>
        </div>
      </div>

      <div className="flex-shrink-0 relative">
        <svg width={width} height={height}>
          {/* Extensions for exterior angles */}
          {exteriorLines.map((line, i) => (
            <line
              key={i}
              x1={line.x1}
              y1={line.y1}
              x2={line.x2}
              y2={line.y2}
              stroke="#cbd5e1"
              strokeWidth="2"
              strokeDasharray="4,4"
            />
          ))}

          {/* Polygon */}
          <path
            d={pathD}
            fill="rgba(16, 185, 129, 0.1)"
            stroke="#059669"
            strokeWidth="3"
          />

          {/* Vertices */}
          {points.map((p, i) => (
            <circle key={i} cx={p.x} cy={p.y} r="4" fill="#059669" />
          ))}

          {/* Center text */}
          <text
            x={cx}
            y={cy}
            textAnchor="middle"
            dominantBaseline="middle"
            fill="#059669"
            fontSize="24"
            fontWeight="bold"
            opacity="0.2"
          >
            {n}-gon
          </text>
        </svg>
      </div>
    </div>
  );
};

export default PolygonWidget;