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

type Mode = 'AA' | 'SAS' | 'SSS';

const SimilarityTestsWidget: React.FC = () => {
  const [mode, setMode] = useState<Mode>('AA');
  const [scale, setScale] = useState(1.5);
  // Store Vertex B's position relative to A (x offset, y height)
  // A is at (40, 220). SVG Y is down.
  const [vertexB, setVertexB] = useState({ x: 40, y: 100 }); 
  const isDragging = useRef(false);
  const svgRef = useRef<SVGSVGElement>(null);

  // Triangle 1 (ABC) - Fixed base AC
  const A = { x: 40, y: 220 };
  const C = { x: 120, y: 220 }; // Base length = 80
  
  // Calculate B in SVG coordinates based on state
  // vertexB.y is the height (upwards), so we subtract from A.y
  const B = { x: A.x + vertexB.x, y: A.y - vertexB.y };

  // Calculate lengths and angles for T1
  const dist = (p1: {x:number, y:number}, p2: {x:number, y:number}) => Math.sqrt((p1.x - p2.x)**2 + (p1.y - p2.y)**2);
  const c1 = dist(A, B); // side c (opp C) - Side AB
  const a1 = dist(B, C); // side a (opp A) - Side BC
  const b1 = dist(A, C); // side b (opp B) - Side AC (Base)

  const getAngle = (a: number, b: number, c: number) => {
    return Math.acos((b**2 + c**2 - a**2) / (2 * b * c)) * (180 / Math.PI);
  };

  const angleA = getAngle(a1, b1, c1);
  const angleB = getAngle(b1, a1, c1);
  // const angleC = getAngle(c1, a1, b1);

  // Triangle 2 (DEF) - Scaled version of ABC
  // Start D with enough margin. Max width of T1 is ~100-140. 
  // Let's place D at x=240.
  const D = { x: 240, y: 220 };
  
  // F is horizontal from D by scaled base length
  const F = { x: D.x + b1 * scale, y: D.y };
  
  // E is scaled vector AB from D
  const vecAB = { x: B.x - A.x, y: B.y - A.y };
  const E = { 
    x: D.x + vecAB.x * scale, 
    y: D.y + vecAB.y * scale 
  };

  // Interaction
  const handleMouseMove = (e: React.MouseEvent) => {
    if (!isDragging.current || !svgRef.current) return;
    const rect = svgRef.current.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    // Constraints for B relative to A
    // Keep B within reasonable bounds to prevent breaking the layout
    // Base is 40 to 120. B.x can range from 0 to 140?
    const newX = x - A.x;
    const height = A.y - y;
    
    // Clamp
    const clampedX = Math.max(-20, Math.min(100, newX));
    const clampedH = Math.max(40, Math.min(180, height));
    
    setVertexB({ x: clampedX, y: clampedH });
  };

  const angleColor = "#6366f1"; // Indigo
  const sideColor = "#059669"; // Emerald

  // Helper: draw filled angle wedge + labelled badge at a vertex
  const angleC = 180 - angleA - angleB;
  const renderAngle = (
    vx: number, vy: number,
    p1x: number, p1y: number,
    p2x: number, p2y: number,
    deg: number,
    r = 28
  ) => {
    const d1 = Math.atan2(p1y - vy, p1x - vx);
    const d2 = Math.atan2(p2y - vy, p2x - vx);
    const sx = vx + r * Math.cos(d1), sy = vy + r * Math.sin(d1);
    const ex = vx + r * Math.cos(d2), ey = vy + r * Math.sin(d2);
    const cross = (p1x - vx) * (p2y - vy) - (p1y - vy) * (p2x - vx);
    const sweep = cross > 0 ? 1 : 0;
    let diff = d2 - d1;
    while (diff > Math.PI) diff -= 2 * Math.PI;
    while (diff < -Math.PI) diff += 2 * Math.PI;
    const mid = d1 + diff / 2;
    const lr = r + 18;
    const lx = vx + lr * Math.cos(mid), ly = vy + lr * Math.sin(mid);
    const txt = `${Math.round(deg)}°`;
    return (
      <g>
        <path d={`M ${vx} ${vy} L ${sx} ${sy} A ${r} ${r} 0 0 ${sweep} ${ex} ${ey} Z`} fill={angleColor} fillOpacity={0.12} stroke={angleColor} strokeWidth={2} />
        <rect x={lx - 18} y={ly - 10} width={36} height={20} rx={5} fill="white" fillOpacity={0.92} stroke={angleColor} strokeWidth={0.8} />
        <text x={lx} y={ly + 5} textAnchor="middle" fill={angleColor} fontSize="13" fontWeight="bold" fontFamily="system-ui">{txt}</text>
      </g>
    );
  };

  return (
    <div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200">
      <div className="flex flex-col sm:flex-row gap-4 justify-between items-center mb-6">
        <div className="flex bg-slate-100 p-1 rounded-lg overflow-x-auto max-w-full">
          {(['AA', 'SAS', 'SSS'] as Mode[]).map(m => (
            <button
              key={m}
              onClick={() => setMode(m)}
              className={`px-4 py-2 rounded-md text-sm font-bold transition-all whitespace-nowrap ${
                mode === m
                  ? 'bg-white text-rose-600 shadow-sm'
                  : 'text-slate-500 hover:text-rose-600'
              }`}
            >
              {m}
            </button>
          ))}
        </div>

        <div className="flex items-center gap-3 bg-slate-50 px-4 py-2 rounded-lg border border-slate-200">
            <span className="text-xs font-bold text-slate-400 uppercase">Scale (k)</span>
            <input
              type="range" min="0.5" max="2.5" step="0.1"
              value={scale}
              onChange={e => setScale(parseFloat(e.target.value))}
              className="w-24 h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-rose-600"
            />
            <span className="font-mono font-bold text-rose-600 text-sm w-12 text-right">{scale.toFixed(1)}x</span>
        </div>
      </div>

      <div className="relative border border-slate-100 rounded-lg bg-slate-50 mb-6 overflow-hidden flex justify-center">
        <svg
            ref={svgRef}
            width="550" height="280"
            className="cursor-default select-none"
            onMouseMove={handleMouseMove}
            onMouseUp={() => isDragging.current = false}
            onMouseLeave={() => isDragging.current = false}
        >
            <defs>
              <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#e2e8f0" strokeWidth="0.5"/>
              </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#grid)" />

            {/* Triangle 1 (ABC) */}
            <path d={`M ${A.x} ${A.y} L ${B.x} ${B.y} L ${C.x} ${C.y} Z`} fill="rgba(255, 255, 255, 0.8)" stroke="#334155" strokeWidth="2" />

            {/* Vertices T1 */}
            <circle cx={A.x} cy={A.y} r="4" fill="#334155" />
            <text x={A.x - 16} y={A.y + 14} fontWeight="bold" fill="#334155" fontSize="14">A</text>
            <circle cx={C.x} cy={C.y} r="4" fill="#334155" />
            <text x={C.x + 8} y={C.y + 14} fontWeight="bold" fill="#334155" fontSize="14">C</text>

            {/* Draggable B */}
            <g onMouseDown={() => isDragging.current = true} className="cursor-grab active:cursor-grabbing">
                <circle cx={B.x} cy={B.y} r="20" fill="transparent" /> {/* Hit area */}
                <circle cx={B.x} cy={B.y} r="7" fill="#f43f5e" stroke="white" strokeWidth="2" />
                <text x={B.x} y={B.y - 16} textAnchor="middle" fontWeight="bold" fill="#f43f5e" fontSize="14">B</text>
            </g>

            {/* Triangle 2 (DEF) */}
            <path d={`M ${D.x} ${D.y} L ${E.x} ${E.y} L ${F.x} ${F.y} Z`} fill="rgba(255, 255, 255, 0.8)" stroke="#334155" strokeWidth="2" />

            <circle cx={D.x} cy={D.y} r="4" fill="#334155" />
            <text x={D.x - 16} y={D.y + 14} fontWeight="bold" fill="#334155" fontSize="14">D</text>
            <circle cx={F.x} cy={F.y} r="4" fill="#334155" />
            <text x={F.x + 8} y={F.y + 14} fontWeight="bold" fill="#334155" fontSize="14">F</text>
            <circle cx={E.x} cy={E.y} r="4" fill="#334155" />
            <text x={E.x} y={E.y - 16} textAnchor="middle" fontWeight="bold" fill="#334155" fontSize="14">E</text>

            {/* Visual Overlays based on Mode */}
            {mode === 'AA' && (
                <>
                    {/* Angle A and D (base-left) */}
                    {renderAngle(A.x, A.y, C.x, C.y, B.x, B.y, angleA)}
                    {renderAngle(D.x, D.y, F.x, F.y, E.x, E.y, angleA)}
                    {/* Angle B and E (apex) */}
                    {renderAngle(B.x, B.y, A.x, A.y, C.x, C.y, angleB)}
                    {renderAngle(E.x, E.y, D.x, D.y, F.x, F.y, angleB)}
                </>
            )}

            {mode === 'SAS' && (
                <>
                    {/* Included Angle A and D */}
                    {renderAngle(A.x, A.y, C.x, C.y, B.x, B.y, angleA)}
                    {renderAngle(D.x, D.y, F.x, F.y, E.x, E.y, angleA)}

                    {/* Side labels with background badges */}
                    {/* Side AB / DE */}
                    <rect x={(A.x + B.x)/2 - 24} y={(A.y + B.y)/2 - 12} width={36} height={20} rx={5} fill="white" fillOpacity={0.92} stroke={sideColor} strokeWidth={0.8} />
                    <text x={(A.x + B.x)/2 - 6} y={(A.y + B.y)/2 + 3} fill={sideColor} fontSize="13" fontWeight="bold" textAnchor="middle">{Math.round(c1)}</text>
                    <rect x={(D.x + E.x)/2 - 24} y={(D.y + E.y)/2 - 12} width={36} height={20} rx={5} fill="white" fillOpacity={0.92} stroke={sideColor} strokeWidth={0.8} />
                    <text x={(D.x + E.x)/2 - 6} y={(D.y + E.y)/2 + 3} fill={sideColor} fontSize="13" fontWeight="bold" textAnchor="middle">{Math.round(c1 * scale)}</text>

                    {/* Side AC / DF */}
                    <rect x={(A.x + C.x)/2 - 18} y={A.y + 4} width={36} height={20} rx={5} fill="white" fillOpacity={0.92} stroke={sideColor} strokeWidth={0.8} />
                    <text x={(A.x + C.x)/2} y={A.y + 18} fill={sideColor} fontSize="13" fontWeight="bold" textAnchor="middle">{Math.round(b1)}</text>
                    <rect x={(D.x + F.x)/2 - 18} y={D.y + 4} width={36} height={20} rx={5} fill="white" fillOpacity={0.92} stroke={sideColor} strokeWidth={0.8} />
                    <text x={(D.x + F.x)/2} y={D.y + 18} fill={sideColor} fontSize="13" fontWeight="bold" textAnchor="middle">{Math.round(b1 * scale)}</text>
                </>
            )}

            {mode === 'SSS' && (
                <>
                     {/* Side AB / DE */}
                     <rect x={(A.x + B.x)/2 - 24} y={(A.y + B.y)/2 - 12} width={36} height={20} rx={5} fill="white" fillOpacity={0.92} stroke={sideColor} strokeWidth={0.8} />
                     <text x={(A.x + B.x)/2 - 6} y={(A.y + B.y)/2 + 3} fill={sideColor} fontSize="13" fontWeight="bold" textAnchor="middle">{Math.round(c1)}</text>
                     <rect x={(D.x + E.x)/2 - 24} y={(D.y + E.y)/2 - 12} width={36} height={20} rx={5} fill="white" fillOpacity={0.92} stroke={sideColor} strokeWidth={0.8} />
                     <text x={(D.x + E.x)/2 - 6} y={(D.y + E.y)/2 + 3} fill={sideColor} fontSize="13" fontWeight="bold" textAnchor="middle">{Math.round(c1 * scale)}</text>

                     {/* Side AC / DF */}
                     <rect x={(A.x + C.x)/2 - 18} y={A.y + 4} width={36} height={20} rx={5} fill="white" fillOpacity={0.92} stroke={sideColor} strokeWidth={0.8} />
                     <text x={(A.x + C.x)/2} y={A.y + 18} fill={sideColor} fontSize="13" fontWeight="bold" textAnchor="middle">{Math.round(b1)}</text>
                     <rect x={(D.x + F.x)/2 - 18} y={D.y + 4} width={36} height={20} rx={5} fill="white" fillOpacity={0.92} stroke={sideColor} strokeWidth={0.8} />
                     <text x={(D.x + F.x)/2} y={D.y + 18} fill={sideColor} fontSize="13" fontWeight="bold" textAnchor="middle">{Math.round(b1 * scale)}</text>

                     {/* Side BC / EF */}
                     <rect x={(B.x + C.x)/2 + 2} y={(B.y + C.y)/2 - 12} width={36} height={20} rx={5} fill="white" fillOpacity={0.92} stroke={sideColor} strokeWidth={0.8} />
                     <text x={(B.x + C.x)/2 + 20} y={(B.y + C.y)/2 + 3} fill={sideColor} fontSize="13" fontWeight="bold" textAnchor="middle">{Math.round(a1)}</text>
                     <rect x={(E.x + F.x)/2 + 2} y={(E.y + F.y)/2 - 12} width={36} height={20} rx={5} fill="white" fillOpacity={0.92} stroke={sideColor} strokeWidth={0.8} />
                     <text x={(E.x + F.x)/2 + 20} y={(E.y + F.y)/2 + 3} fill={sideColor} fontSize="13" fontWeight="bold" textAnchor="middle">{Math.round(a1 * scale)}</text>
                </>
            )}
        </svg>
      </div>

      <div className="bg-rose-50 border border-rose-100 rounded-lg p-4 text-rose-900">
         <h4 className="font-bold mb-2 flex items-center gap-2 text-lg">
            <span className="w-3 h-3 rounded-full bg-rose-500"></span>
            {mode === 'AA' && "Angle-Angle (AA) Similarity"}
            {mode === 'SAS' && "Side-Angle-Side (SAS) Similarity"}
            {mode === 'SSS' && "Side-Side-Side (SSS) Similarity"}
         </h4>
         <div className="text-sm font-mono space-y-2">
            {mode === 'AA' && (
               <>
                 <p className="leading-relaxed">If two angles of one triangle are equal to two angles of another triangle, then the triangles are similar.</p>
                 <div className="flex gap-8 mt-2">
                    <div>
                        <span className="text-xs font-bold text-rose-400 uppercase">First Angle</span>
                        <p className="font-bold text-lg">∠A = ∠D = {Math.round(angleA)}°</p>
                    </div>
                    <div>
                        <span className="text-xs font-bold text-rose-400 uppercase">Second Angle</span>
                        <p className="font-bold text-lg">∠B = ∠E = {Math.round(angleB)}°</p>
                    </div>
                 </div>
               </>
            )}
            {mode === 'SAS' && (
               <>
                 <p className="leading-relaxed">If two sides are proportional and the included angles are equal, the triangles are similar.</p>
                 <div className="grid grid-cols-2 gap-4 mt-2">
                    <div className="bg-white p-2 rounded border border-rose-100">
                        <p className="text-xs text-rose-500 font-bold uppercase">Side Ratio (c)</p>
                        <p>DE / AB = {(c1*scale).toFixed(0)} / {c1.toFixed(0)} = <strong>{scale.toFixed(1)}</strong></p>
                    </div>
                    <div className="bg-white p-2 rounded border border-rose-100">
                        <p className="text-xs text-rose-500 font-bold uppercase">Side Ratio (b)</p>
                        <p>DF / AC = {(b1*scale).toFixed(0)} / {b1.toFixed(0)} = <strong>{scale.toFixed(1)}</strong></p>
                    </div>
                 </div>
                 <p className="mt-2 font-bold text-rose-800">Included Angle: ∠A = ∠D = {Math.round(angleA)}°</p>
               </>
            )}
            {mode === 'SSS' && (
               <>
                 <p className="leading-relaxed">If the corresponding sides of two triangles are proportional, then the triangles are similar.</p>
                 <p className="bg-white inline-block px-2 py-1 rounded border border-rose-100 font-bold text-rose-600 mb-2">Scale Factor k = {scale.toFixed(1)}</p>
                 <div className="grid grid-cols-3 gap-2 text-center text-xs">
                     <div className="bg-white p-1 rounded">
                         DE/AB = {scale.toFixed(1)}
                     </div>
                     <div className="bg-white p-1 rounded">
                         EF/BC = {scale.toFixed(1)}
                     </div>
                     <div className="bg-white p-1 rounded">
                         DF/AC = {scale.toFixed(1)}
                     </div>
                 </div>
               </>
            )}
         </div>
         <p className="text-xs text-rose-400 mt-4 border-t border-rose-100 pt-2">
             Drag vertex <strong>B</strong> on the first triangle to explore different shapes!
         </p>
      </div>
    </div>
  );
};

export default SimilarityTestsWidget;