import React, { useRef, useState } from "react";
import {
  scaleToSvg,
  scaleFromSvg,
  round,
  calculateDistanceSquared,
} from "../../utils/math";
import { type CircleState, type Point } from "../../types/lesson";

interface CoordinatePlaneProps {
  circle: CircleState;
  point?: Point | null;
  onPointClick?: (p: Point) => void;
  interactive?: boolean;
  showDistance?: boolean;
  mode?: "view" | "place_point";
}

const CoordinatePlane: React.FC<CoordinatePlaneProps> = ({
  circle,
  point,
  onPointClick,
  showDistance = false,
  mode = "view",
}) => {
  const svgRef = useRef<SVGSVGElement>(null);
  const [hoverPoint, setHoverPoint] = useState<Point | null>(null);

  // Viewport settings
  const width = 400;
  const height = 400;
  const range = 10; // -10 to 10
  const tickSpacing = 1;

  // Scales
  const toX = (val: number) => scaleToSvg(val, -range, range, 0, width);
  const toY = (val: number) => scaleToSvg(val, range, -range, 0, height); // Inverted Y for SVG
  const fromX = (px: number) => scaleFromSvg(px, -range, range, 0, width);
  const fromY = (px: number) => scaleFromSvg(px, range, -range, 0, height);

  const cx = toX(circle.h);
  const cy = toY(circle.k);
  // Radius in pixels (assuming uniform aspect ratio)
  const rPx = toX(circle.r) - toX(0);

  const handleMouseMove = (e: React.MouseEvent) => {
    if (mode !== "place_point" || !svgRef.current) return;
    const rect = svgRef.current.getBoundingClientRect();
    const rawX = e.clientX - rect.left;
    const rawY = e.clientY - rect.top;

    // Snap to nearest 0.5 for cleaner UX
    const graphX = Math.round(fromX(rawX) * 2) / 2;
    const graphY = Math.round(fromY(rawY) * 2) / 2;

    setHoverPoint({ x: graphX, y: graphY });
  };

  const handleClick = () => {
    if (mode === "place_point" && hoverPoint && onPointClick) {
      onPointClick(hoverPoint);
    }
  };

  // Generate grid lines
  const ticks = [];
  for (let i = -range; i <= range; i += tickSpacing) {
    if (i === 0) continue; // Skip axes (drawn separately)
    ticks.push(i);
  }

  const dSquared = point
    ? calculateDistanceSquared(point.x, point.y, circle.h, circle.k)
    : 0;
  const isInside = dSquared < circle.r * circle.r;
  const isOn = Math.abs(dSquared - circle.r * circle.r) < 0.01;

  const pointFill = isOn ? "#ca8a04" : isInside ? "#16a34a" : "#dc2626";

  return (
    <div className="flex flex-col items-center">
      <div className="relative shadow-lg rounded-xl overflow-hidden bg-white border border-slate-200">
        <svg
          ref={svgRef}
          width={width}
          height={height}
          onMouseMove={handleMouseMove}
          onMouseLeave={() => setHoverPoint(null)}
          onClick={handleClick}
          className={`${mode === "place_point" ? "cursor-crosshair" : "cursor-default"}`}
        >
          {/* Grid Background */}
          {ticks.map((t) => (
            <React.Fragment key={t}>
              <line
                x1={toX(t)}
                y1={0}
                x2={toX(t)}
                y2={height}
                stroke="#e2e8f0"
                strokeWidth="1"
              />
              <line
                x1={0}
                y1={toY(t)}
                x2={width}
                y2={toY(t)}
                stroke="#e2e8f0"
                strokeWidth="1"
              />
            </React.Fragment>
          ))}

          {/* Axes */}
          <line
            x1={toX(0)}
            y1={0}
            x2={toX(0)}
            y2={height}
            stroke="#64748b"
            strokeWidth="2"
          />
          <line
            x1={0}
            y1={toY(0)}
            x2={width}
            y2={toY(0)}
            stroke="#64748b"
            strokeWidth="2"
          />

          {/* Circle */}
          <circle
            cx={cx}
            cy={cy}
            r={Math.abs(rPx)}
            fill="rgba(99, 102, 241, 0.1)"
            stroke="#4f46e5"
            strokeWidth="3"
            className="transition-all duration-300 ease-out"
          />

          {/* Center Point */}
          <circle cx={cx} cy={cy} r={4} fill="#4f46e5" />
          <text
            x={cx + 8}
            y={cy - 8}
            fontSize="12"
            fill="#4f46e5"
            fontWeight="bold"
          >
            Center ({circle.h}, {circle.k})
          </text>

          {/* Radius Line (only if distance line is not active to avoid clutter) */}
          {!point && (
            <line
              x1={cx}
              y1={cy}
              x2={cx + rPx}
              y2={cy}
              stroke="#4f46e5"
              strokeWidth="2"
              strokeDasharray="5,5"
            />
          )}
          {!point && (
            <text x={cx + rPx / 2} y={cy - 5} fontSize="12" fill="#4f46e5">
              r = {circle.r}
            </text>
          )}

          {/* Placed Point */}
          {point && (
            <>
              <line
                x1={cx}
                y1={cy}
                x2={toX(point.x)}
                y2={toY(point.y)}
                stroke="#94a3b8"
                strokeWidth="2"
                strokeDasharray="4,4"
              />
              <circle
                cx={toX(point.x)}
                cy={toY(point.y)}
                r={6}
                fill={pointFill}
                stroke="white"
                strokeWidth="2"
              />
              <text
                x={toX(point.x) + 8}
                y={toY(point.y) - 8}
                fontSize="12"
                fontWeight="bold"
                fill={pointFill}
              >
                ({point.x}, {point.y})
              </text>
            </>
          )}

          {/* Hover Ghost Point */}
          {mode === "place_point" && hoverPoint && !point && (
            <circle
              cx={toX(hoverPoint.x)}
              cy={toY(hoverPoint.y)}
              r={4}
              fill="rgba(0,0,0,0.3)"
            />
          )}
        </svg>

        <div className="absolute bottom-2 left-2 text-xs text-slate-400 bg-white/80 px-2 py-1 rounded">
          1 unit = {width / (range * 2)}px
        </div>
      </div>

      {/* Info Panel below graph */}
      {point && showDistance && (
        <div
          className={`mt-4 p-4 rounded-lg border-l-4 w-full max-w-md bg-white shadow-sm transition-colors ${
            isOn
              ? "border-yellow-500 bg-yellow-50"
              : isInside
                ? "border-green-500 bg-green-50"
                : "border-red-500 bg-red-50"
          }`}
        >
          <div className="flex justify-between items-center mb-2">
            <span className="font-bold text-slate-700">Distance Check:</span>
            <span
              className={`px-2 py-0.5 rounded text-sm font-bold uppercase ${
                isOn
                  ? "bg-yellow-200 text-yellow-800"
                  : isInside
                    ? "bg-green-200 text-green-800"
                    : "bg-red-200 text-red-800"
              }`}
            >
              {isOn ? "On Circle" : isInside ? "Inside" : "Outside"}
            </span>
          </div>
          <div className="font-mono text-sm space-y-1">
            <p>d² = (x - h)² + (y - k)²</p>
            <p>
              d² = ({point.x} - {circle.h})² + ({point.y} - {circle.k})²
            </p>
            <p>
              d² ={" "}
              {round(
                calculateDistanceSquared(point.x, point.y, circle.h, circle.k),
              )}{" "}
              <span className="mx-2 text-slate-400">vs</span> r² ={" "}
              {circle.r * circle.r}
            </p>
          </div>
        </div>
      )}
    </div>
  );
};

export default CoordinatePlane;