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