import React, { useState, useEffect } 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;

  // Generate points
  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) => {
    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;
