import React, { useState, useRef, useEffect } from 'react';

const CircleTheoremsWidget: React.FC = () => {
  // C is the point on the major arc
  const [angleC, setAngleC] = useState(230); // Position in degrees on the circle
  const svgRef = useRef<SVGSVGElement>(null);
  const isDragging = useRef(false);

  const R = 120;
  const center = { x: 200, y: 180 };
  
  // Fixed points A and B at the bottom
  const angleA = 330; // 30 deg below x axis
  const angleB = 210; // 150 deg below x axis? No, let's place them symmetrically
  
  // Let's place A and B to define a nice arc
  // A at -30 deg (330), B at 210 is too far.
  // Let's put A at 320 (-40) and B at 220 (-140).
  // Wait, standard unit circle angles.
  // A at 340 (-20), B at 200. Arc is 140 deg at bottom.
  // Major arc is top. C moves on top.
  
  const posA = { x: center.x + R * Math.cos(340 * Math.PI/180), y: center.y - R * Math.sin(340 * Math.PI/180) }; // SVG y inverted logic? 
  // Let's just use standard math cos/sin and add to center.y
  // SVG y is positive down.
  const getPos = (deg: number) => ({
    x: center.x + R * Math.cos(deg * Math.PI / 180),
    y: center.y + R * Math.sin(deg * Math.PI / 180)
  });

  const A = getPos(30); // Bottom Right
  const B = getPos(150); // Bottom Left
  // Central angle is 120 degrees (150 - 30).
  const centralAngleValue = 120;

  const handleMouseMove = (e: React.MouseEvent) => {
    if (!isDragging.current || !svgRef.current) return;
    const rect = svgRef.current.getBoundingClientRect();
    const dx = e.clientX - rect.left - center.x;
    const dy = e.clientY - rect.top - center.y;
    let deg = Math.atan2(dy, dx) * 180 / Math.PI;
    if (deg < 0) deg += 360;
    
    // Constrain C to the major arc (approx 160 to 350 is the "bad" zone? No, A=30, B=150.
    // Bad zone is between 30 and 150 (the minor arc).
    // Let's allow C anywhere except the minor arc to avoid crossing lines weirdly.
    if (deg > 40 && deg < 140) return; // Simple constraint

    setAngleC(deg);
  };

  const C = getPos(angleC);

  return (
    <div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200 flex flex-col items-center">
      <h3 className="font-bold text-slate-700 mb-2">Central vs. Inscribed Angle</h3>
      <div className="text-sm text-slate-500 mb-4 text-center max-w-md">
        Drag point <strong className="text-emerald-600">C</strong> along the top arc. Notice that the inscribed angle stays constant!
      </div>

      <svg 
        ref={svgRef}
        width="400" 
        height="350"
        onMouseMove={handleMouseMove}
        onMouseUp={() => isDragging.current = false}
        onMouseLeave={() => isDragging.current = false}
        className="select-none"
      >
        {/* Circle */}
        <circle cx={center.x} cy={center.y} r={R} stroke="#cbd5e1" strokeWidth="2" fill="transparent" />
        
        {/* Central Angle Lines */}
        <path d={`M ${A.x} ${A.y} L ${center.x} ${center.y} L ${B.x} ${B.y}`} stroke="#e2e8f0" strokeWidth="2" fill="transparent" strokeDasharray="5,5"/>
        
        {/* Central Angle Wedge */}
        {/* 30 to 150 */}
        <path d={`M ${center.x} ${center.y} L ${A.x} ${A.y} A ${R} ${R} 0 0 1 ${B.x} ${B.y} Z`} fill="rgba(99, 102, 241, 0.1)" stroke="none" />
        <text x={center.x} y={center.y + 40} textAnchor="middle" className="text-sm font-bold fill-indigo-600">{centralAngleValue}°</text>
        <text x={center.x} y={center.y + 60} textAnchor="middle" className="text-xs fill-indigo-400 uppercase">Central</text>

        {/* Inscribed Angle Lines */}
        <path d={`M ${A.x} ${A.y} L ${C.x} ${C.y} L ${B.x} ${B.y}`} stroke="#059669" strokeWidth="3" fill="transparent" strokeLinejoin="round" />
        
        {/* Points */}
        <circle cx={center.x} cy={center.y} r="4" fill="#64748b" /> {/* Center */}
        <text x={center.x + 10} y={center.y} className="text-xs fill-slate-400">O</text>

        <circle cx={A.x} cy={A.y} r="5" fill="#475569" />
        <text x={A.x + 10} y={A.y} className="text-xs font-bold fill-slate-600">A</text>

        <circle cx={B.x} cy={B.y} r="5" fill="#475569" />
        <text x={B.x - 20} y={B.y} className="text-xs font-bold fill-slate-600">B</text>

        {/* Draggable C */}
        <g onMouseDown={() => isDragging.current = true} className="cursor-grab active:cursor-grabbing">
           <circle cx={C.x} cy={C.y} r="15" fill="transparent" /> {/* Hit area */}
           <circle cx={C.x} cy={C.y} r="8" fill="#059669" stroke="white" strokeWidth="2" className="shadow-lg" />
           <text x={C.x} y={C.y - 15} textAnchor="middle" className="text-sm font-bold fill-emerald-700">C</text>
        </g>

        {/* Inscribed Angle Label */}
        {/* Simple approximation for label placement: slightly "in" from C towards center */}
        <text x={C.x + (center.x - C.x)*0.2} y={C.y + (center.y - C.y)*0.2 + 5} textAnchor="middle" className="text-lg font-bold fill-emerald-600">
          {centralAngleValue / 2}°
        </text>
      </svg>

      <div className="bg-slate-50 p-4 rounded-lg border border-slate-200 mt-4 w-full text-center">
         <p className="font-mono text-lg text-slate-800">
           Inscribed Angle = <span className="text-emerald-600">½</span> × Central Angle
         </p>
         <p className="font-mono text-md text-slate-600 mt-1">
           {centralAngleValue / 2}° = ½ × {centralAngleValue}°
         </p>
      </div>
    </div>
  );
};

export default CircleTheoremsWidget;
