import React, { useState, useRef, useEffect } from 'react';
import { Lightbulb, MapPin } from 'lucide-react';

const PlaneMirrorSimulator = () => {
  const [mode, setMode] = useState('rays');
  const [rays, setRays] = useState([]);
  const [isDrawing, setIsDrawing] = useState(false);
  const [startPoint, setStartPoint] = useState(null);
  const [endPoint, setEndPoint] = useState(null);
  const [objectPos, setObjectPos] = useState({ x: 150, y: 250 });
  const [isDraggingObject, setIsDraggingObject] = useState(false);
  const canvasRef = useRef(null);

  const mirrorX = 400;
  const canvasWidth = 800;
  const canvasHeight = 500;

  const drawCanvas = () => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);

    // Draw gray area behind mirror
    ctx.fillStyle = '#e5e7eb';
    ctx.fillRect(mirrorX, 0, canvasWidth - mirrorX, canvasHeight);

    if (mode === 'rays') {
      // Draw all completed rays
      rays.forEach(ray => {
        drawRayWithReflection(ctx, ray.start, ray.end);
      });

      // Draw ray being drawn
      if (isDrawing && startPoint && endPoint) {
        drawRayWithReflection(ctx, startPoint, endPoint);
      }
    } else {
      // Object mode
      drawObjectMode(ctx);
    }

    // Draw mirror line on top
    ctx.strokeStyle = '#3b82f6';
    ctx.lineWidth = 8;
    ctx.beginPath();
    ctx.moveTo(mirrorX, 0);
    ctx.lineTo(mirrorX, canvasHeight);
    ctx.stroke();
  };

  const drawRayWithReflection = (ctx, start, end) => {
    // Find where ray hits mirror
    const dx = end.x - start.x;
    const dy = end.y - start.y;
    const t = (mirrorX - start.x) / dx;
    const hitY = start.y + t * dy;

    // Calculate reflected ray
    const remainingX = end.x - mirrorX;
    const reflectX = mirrorX + Math.abs(remainingX);
    const reflectY = hitY + (end.y - hitY);

    // Calculate angle from normal (horizontal line)
    const angle = Math.atan2(Math.abs(hitY - start.y), Math.abs(mirrorX - start.x));
    const angleDeg = Math.round(angle * 180 / Math.PI);

    // Draw NORMAL (horizontal purple dashed line)
    ctx.strokeStyle = '#8b5cf6';
    ctx.lineWidth = 3;
    ctx.setLineDash([8, 5]);
    ctx.beginPath();
    ctx.moveTo(mirrorX - 100, hitY);
    ctx.lineTo(mirrorX + 100, hitY);
    ctx.stroke();
    ctx.setLineDash([]);

    // NORMAL label
    ctx.fillStyle = '#8b5cf6';
    ctx.font = 'bold 14px Arial';
    ctx.fillText('NORMAL', mirrorX - 35, hitY - 18);

    // Draw INCIDENT RAY (red)
    ctx.strokeStyle = '#ef4444';
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.moveTo(start.x, start.y);
    ctx.lineTo(mirrorX, hitY);
    ctx.stroke();

    // Incident label
    ctx.fillStyle = '#ef4444';
    ctx.font = 'bold 12px Arial';
    ctx.fillText('Incident', start.x + 20, start.y + 20);

    // Draw REFLECTED RAY (green)
    ctx.strokeStyle = '#10b981';
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.moveTo(mirrorX, hitY);
    ctx.lineTo(reflectX, reflectY);
    ctx.stroke();

    // Reflected label
    ctx.fillStyle = '#10b981';
    ctx.font = 'bold 12px Arial';
    ctx.fillText('Reflected', reflectX - 60, reflectY + 20);

    // Draw incident ANGLE ARC (red)
    ctx.strokeStyle = '#ef4444';
    ctx.lineWidth = 2;
    ctx.beginPath();
    const startAngle = Math.PI;
    const endAngle = Math.PI - angle;
    if (start.y < hitY) {
      ctx.arc(mirrorX, hitY, 50, startAngle, endAngle, true);
    } else {
      ctx.arc(mirrorX, hitY, 50, startAngle, Math.PI + angle, false);
    }
    ctx.stroke();

    // Incident angle label
    ctx.fillStyle = '#ef4444';
    ctx.font = 'bold 16px Arial';
    ctx.fillText(`∠i = ${angleDeg}°`, mirrorX - 120, hitY + (start.y < hitY ? -30 : 45));

    // Draw reflection ANGLE ARC (green)
    ctx.strokeStyle = '#10b981';
    ctx.lineWidth = 2;
    ctx.beginPath();
    if (reflectY < hitY) {
      ctx.arc(mirrorX, hitY, 50, 0, angle, false);
    } else {
      ctx.arc(mirrorX, hitY, 50, 0, -angle, true);
    }
    ctx.stroke();

    // Reflection angle label
    ctx.fillStyle = '#10b981';
    ctx.font = 'bold 16px Arial';
    ctx.fillText(`∠r = ${angleDeg}°`, mirrorX + 60, hitY + (reflectY < hitY ? -30 : 45));

    // Hit point dot
    ctx.fillStyle = '#f59e0b';
    ctx.beginPath();
    ctx.arc(mirrorX, hitY, 5, 0, Math.PI * 2);
    ctx.fill();
  };

  const drawObjectMode = (ctx) => {
    const imageX = 2 * mirrorX - objectPos.x;
    const dist = Math.abs(mirrorX - objectPos.x);

    // Draw object (red arrow)
    ctx.strokeStyle = '#ef4444';
    ctx.fillStyle = '#ef4444';
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.moveTo(objectPos.x, objectPos.y + 30);
    ctx.lineTo(objectPos.x, objectPos.y - 30);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(objectPos.x, objectPos.y - 30);
    ctx.lineTo(objectPos.x - 8, objectPos.y - 18);
    ctx.lineTo(objectPos.x + 8, objectPos.y - 18);
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle = '#1f2937';
    ctx.font = 'bold 14px Arial';
    ctx.fillText('Object', objectPos.x - 25, objectPos.y + 50);

    // Draw image (green arrow)
    ctx.strokeStyle = '#10b981';
    ctx.fillStyle = '#10b981';
    ctx.globalAlpha = 0.6;
    ctx.beginPath();
    ctx.moveTo(imageX, objectPos.y + 30);
    ctx.lineTo(imageX, objectPos.y - 30);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(imageX, objectPos.y - 30);
    ctx.lineTo(imageX - 8, objectPos.y - 18);
    ctx.lineTo(imageX + 8, objectPos.y - 18);
    ctx.closePath();
    ctx.fill();
    ctx.globalAlpha = 1.0;

    ctx.fillStyle = '#1f2937';
    ctx.fillText('Image', imageX - 20, objectPos.y + 50);

    // Distance markers
    ctx.strokeStyle = '#6b7280';
    ctx.lineWidth = 1;
    ctx.setLineDash([3, 3]);
    ctx.beginPath();
    ctx.moveTo(objectPos.x, canvasHeight - 40);
    ctx.lineTo(mirrorX, canvasHeight - 40);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(mirrorX, canvasHeight - 40);
    ctx.lineTo(imageX, canvasHeight - 40);
    ctx.stroke();
    ctx.setLineDash([]);

    ctx.fillStyle = '#1f2937';
    ctx.font = '12px Arial';
    ctx.fillText(`${Math.round(dist)}px`, (objectPos.x + mirrorX) / 2 - 25, canvasHeight - 45);
    ctx.fillText(`${Math.round(dist)}px`, (mirrorX + imageX) / 2 - 25, canvasHeight - 45);
  };

  useEffect(() => {
    drawCanvas();
  }, [rays, isDrawing, startPoint, endPoint, mode, objectPos]);

  const getMousePos = (e) => {
    const rect = canvasRef.current.getBoundingClientRect();
    const scaleX = canvasWidth / rect.width;
    const scaleY = canvasHeight / rect.height;
    return {
      x: (e.clientX - rect.left) * scaleX,
      y: (e.clientY - rect.top) * scaleY
    };
  };

  const handleMouseDown = (e) => {
    const pos = getMousePos(e);
    
    if (mode === 'rays') {
      if (pos.x < mirrorX - 20) {
        setIsDrawing(true);
        setStartPoint(pos);
        setEndPoint(pos);
      }
    } else {
      const dist = Math.sqrt((pos.x - objectPos.x) ** 2 + (pos.y - objectPos.y) ** 2);
      if (dist < 40) {
        setIsDraggingObject(true);
      }
    }
  };

  const handleMouseMove = (e) => {
    const pos = getMousePos(e);
    
    if (mode === 'rays' && isDrawing) {
      setEndPoint(pos);
    } else if (mode === 'object' && isDraggingObject) {
      if (pos.x > 50 && pos.x < mirrorX - 50) {
        setObjectPos({ 
          x: pos.x, 
          y: Math.max(80, Math.min(canvasHeight - 80, pos.y))
        });
      }
    }
  };

  const handleMouseUp = (e) => {
    if (mode === 'rays' && isDrawing && startPoint && endPoint) {
      if (endPoint.x < mirrorX - 20) {
        setRays([...rays, { start: startPoint, end: endPoint }]);
      }
      setIsDrawing(false);
      setStartPoint(null);
      setEndPoint(null);
    } else if (mode === 'object') {
      setIsDraggingObject(false);
    }
  };

  const getCurrentMeasurements = () => {
    if (mode === 'rays' && rays.length > 0) {
      const lastRay = rays[rays.length - 1];
      const dx = lastRay.end.x - lastRay.start.x;
      const dy = lastRay.end.y - lastRay.start.y;
      const t = (mirrorX - lastRay.start.x) / dx;
      const hitY = lastRay.start.y + t * dy;
      const angle = Math.atan2(Math.abs(hitY - lastRay.start.y), Math.abs(mirrorX - lastRay.start.x));
      const angleDeg = Math.round(angle * 180 / Math.PI);
      
      return {
        incident: `${angleDeg}°`,
        reflection: `${angleDeg}°`,
        objectDist: '-',
        imageDist: '-'
      };
    } else if (mode === 'object') {
      const dist = Math.abs(mirrorX - objectPos.x);
      return {
        incident: '-',
        reflection: '-',
        objectDist: `${Math.round(dist)}px`,
        imageDist: `${Math.round(dist)}px`
      };
    }
    return { incident: '-', reflection: '-', objectDist: '-', imageDist: '-' };
  };

  const measurements = getCurrentMeasurements();

  return (
    <div className="w-full max-w-6xl mx-auto p-6 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl shadow-lg">
      <div className="text-center mb-6">
        <h1 className="text-4xl font-bold text-gray-800 mb-2">🪞 Plane Mirror Simulator</h1>
        <p className="text-gray-600">Explore reflection in flat mirrors</p>
      </div>

      <div className="flex justify-center gap-4 mb-6">
        <button
          onClick={() => { setMode('rays'); setRays([]); }}
          className={`flex items-center gap-2 px-6 py-3 rounded-lg font-semibold transition-all ${
            mode === 'rays'
              ? 'bg-blue-600 text-white shadow-lg scale-105'
              : 'bg-white text-gray-700 hover:bg-gray-100'
          }`}
        >
          <Lightbulb size={20} />
          💡 Light Rays Mode
        </button>
        <button
          onClick={() => { setMode('object'); setObjectPos({ x: 150, y: 250 }); }}
          className={`flex items-center gap-2 px-6 py-3 rounded-lg font-semibold transition-all ${
            mode === 'object'
              ? 'bg-blue-600 text-white shadow-lg scale-105'
              : 'bg-white text-gray-700 hover:bg-gray-100'
          }`}
        >
          <MapPin size={20} />
          📍 Object & Image Mode
        </button>
      </div>

      <div className="bg-white rounded-lg p-4 mb-4 shadow">
        <p className="text-gray-700 text-center">
          {mode === 'rays' 
            ? '💡 Click and drag to draw light rays • Watch them reflect with equal angles!'
            : '📍 Drag the red object arrow • See the virtual image behind the mirror!'}
        </p>
      </div>

      <div className="bg-white rounded-lg shadow-xl p-4 mb-6">
        <canvas
          ref={canvasRef}
          width={canvasWidth}
          height={canvasHeight}
          onMouseDown={handleMouseDown}
          onMouseMove={handleMouseMove}
          onMouseUp={handleMouseUp}
          onMouseLeave={handleMouseUp}
          className="border-2 border-gray-300 rounded cursor-crosshair w-full"
          style={{ maxWidth: '100%', height: 'auto' }}
        />
        <div className="text-center mt-2">
          <button
            onClick={() => mode === 'rays' ? setRays([]) : setObjectPos({ x: 150, y: 250 })}
            className="px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors font-semibold"
          >
            {mode === 'rays' ? 'Clear All Rays' : 'Reset Object'}
          </button>
        </div>
      </div>

      <div className="grid md:grid-cols-2 gap-6">
        <div className="bg-white rounded-lg p-6 shadow-lg">
          <h2 className="text-2xl font-bold text-gray-800 mb-4">📐 Laws of Reflection</h2>
          <ol className="list-decimal list-inside space-y-2 text-gray-700">
            <li>The incident ray, reflected ray, and normal all lie in the same plane</li>
            <li>Angle of incidence = Angle of reflection</li>
          </ol>
        </div>

        <div className="bg-white rounded-lg p-6 shadow-lg">
          <h2 className="text-2xl font-bold text-gray-800 mb-4">🪞 Plane Mirror Properties</h2>
          <p className="font-semibold text-gray-700 mb-2">Image Characteristics:</p>
          <ul className="list-disc list-inside space-y-1 text-gray-700 ml-4">
            <li>Virtual (behind mirror)</li>
            <li>Upright (same orientation)</li>
            <li>Same size as object</li>
            <li>Same distance behind mirror</li>
          </ul>
        </div>

        <div className="bg-white rounded-lg p-6 shadow-lg">
          <h2 className="text-2xl font-bold text-gray-800 mb-4">📊 Current Measurements</h2>
          <div className="space-y-2 text-gray-700">
            <p><span className="font-semibold">Angle of Incidence:</span> {measurements.incident}</p>
            <p><span className="font-semibold">Angle of Reflection:</span> {measurements.reflection}</p>
            <p><span className="font-semibold">Object Distance:</span> {measurements.objectDist}</p>
            <p><span className="font-semibold">Image Distance:</span> {measurements.imageDist}</p>
          </div>
        </div>

        <div className="bg-white rounded-lg p-6 shadow-lg">
          <h2 className="text-2xl font-bold text-gray-800 mb-4">🎯 Real-World Examples</h2>
          <ul className="list-disc list-inside space-y-1 text-gray-700 ml-4">
            <li>Bathroom mirrors</li>
            <li>Dressing mirrors</li>
            <li>Periscopes</li>
            <li>Kaleidoscopes</li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default PlaneMirrorSimulator;