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

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 pointColor = isOn ? 'text-yellow-600' : isInside ? 'text-green-600' : 'text-red-600';
  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;
