'use client';

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

export default function OpticalImagingAnimation() {
  const VIEW_WIDTH = 1000;
  const VIEW_HEIGHT = 600;
  const CENTER_X = VIEW_WIDTH / 2;
  const CENTER_Y = VIEW_HEIGHT / 2;
  
  // Optical Constants
  const FOCAL_LENGTH = 120; // Focal length (f)
  const OBJ_HEIGHT = 80;    // Height of the object
  
  // Animation State
  const [time, setTime] = useState(0);
  
  // Animation Loop
  useEffect(() => {
    let animationFrameId: number;
    const animate = () => {
      setTime(t => t + 0.005);
      animationFrameId = requestAnimationFrame(animate);
    };
    animationFrameId = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(animationFrameId);
  }, []);

  // Calculate dynamic physics
  // Oscillate object distance (u) between 1.5f and 3.5f
  const u = 250 + Math.sin(time) * 90; // Object distance from lens center
  
  // Lens Equation: 1/f = 1/u + 1/v  =>  v = (u * f) / (u - f)
  const v = (u * FOCAL_LENGTH) / (u - FOCAL_LENGTH); // Image distance
  
  // Magnification: m = -v/u
  const m = -v / u;
  const imgHeight = OBJ_HEIGHT * m; // Negative means inverted

  // Coordinates
  const objX = CENTER_X - u;
  const objY = CENTER_Y - OBJ_HEIGHT;
  const imgX = CENTER_X + v;
  const imgY = CENTER_Y - imgHeight; // Note: imgHeight is negative, so this adds to Y
  
  // Ray 1: Parallel to axis -> Refracts through Focal Point (F)
  const ray1Path = `
    M ${objX},${objY} 
    L ${CENTER_X},${objY} 
    L ${imgX},${imgY}
    L ${imgX + (imgX - CENTER_X) * 0.2},${imgY + (imgY - CENTER_Y) * 0.2}
  `;

  // Ray 2: Through Optical Center (O) -> No refraction
  const ray2Path = `
    M ${objX},${objY} 
    L ${imgX},${imgY}
    L ${imgX + (imgX - objX) * 0.1},${imgY + (imgY - objY) * 0.1}
  `;

  // Ray 3: Through Focal Point (F') -> Refracts Parallel
  const ray3Path = `
    M ${objX},${objY} 
    L ${CENTER_X},${imgY} 
    L ${imgX},${imgY}
    L ${imgX + 100},${imgY}
  `;

  // Formatting numbers
  const formatNum = (n: number) => Math.abs(n).toFixed(0);
  const formatMag = (n: number) => Math.abs(n).toFixed(2);

  return (
    <svg viewBox={`0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`} className="w-full h-full select-none" style={{ background: '#0f172a', fontFamily: 'Menlo, monospace' }}>
      <defs>
        {/* Glow Filters */}
        <filter id="glow-blue" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="4" result="coloredBlur" />
          <feMerge>
            <feMergeNode in="coloredBlur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
        <filter id="glow-orange" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="3" result="coloredBlur" />
          <feMerge>
            <feMergeNode in="coloredBlur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
        
        {/* Gradients */}
        <linearGradient id="lensGradient" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="rgba(255,255,255,0.1)" />
          <stop offset="50%" stopColor="rgba(255,255,255,0.3)" />
          <stop offset="100%" stopColor="rgba(255,255,255,0.1)" />
        </linearGradient>
        
        <marker id="arrow-start" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
          <path d="M0,0 L10,5 L0,10" fill="#f59e0b" />
        </marker>
      </defs>

      {/* --- Background Grid & Axis --- */}
      <g opacity="0.2">
        {Array.from({ length: 20 }).map((_, i) => (
          <line key={`v-${i}`} x1={i * 50} y1="0" x2={i * 50} y2={VIEW_HEIGHT} stroke="#334155" strokeWidth="1" />
        ))}
        {Array.from({ length: 12 }).map((_, i) => (
          <line key={`h-${i}`} x1="0" y1={i * 50} x2={VIEW_WIDTH} y2={i * 50} stroke="#334155" strokeWidth="1" />
        ))}
      </g>
      
      {/* Principal Axis */}
      <line x1="0" y1={CENTER_Y} x2={VIEW_WIDTH} y2={CENTER_Y} stroke="#94a3b8" strokeWidth="2" strokeDasharray="5,5" opacity="0.5" />

      {/* --- The Lens --- */}
      <g transform={`translate(${CENTER_X}, ${CENTER_Y})`}>
        {/* Glass Body */}
        <ellipse cx="0" cy="0" rx="15" ry="180" fill="url(#lensGradient)" stroke="#60a5fa" strokeWidth="2" opacity="0.8" />
        {/* Reflection Highlights */}
        <path d="M -5 -140 Q 5 0 -5 140" fill="none" stroke="rgba(255,255,255,0.4)" strokeWidth="2" />
        <text x="-25" y="-190" fill="#60a5fa" fontSize="14">凸透镜 (Convex Lens)</text>
      </g>

      {/* --- Focal Points --- */}
      {[-1, 1].map((dir) => (
        <g key={dir} transform={`translate(${CENTER_X + dir * FOCAL_LENGTH}, ${CENTER_Y})`}>
          <circle r="4" fill="#ef4444" />
          <text x="-5" y="25" fill="#ef4444" fontSize="12" fontWeight="bold">F</text>
          <line x1="0" y1="-10" x2="0" y2="10" stroke="#ef4444" strokeWidth="2" />
          <text x="-10" y="45" fill="#64748b" fontSize="10">{FOCAL_LENGTH}px</text>
        </g>
      ))}

      {/* --- Light Rays --- */}
      <g strokeWidth="1.5" fill="none" opacity="0.9" filter="url(#glow-blue)">
        {/* Ray 1 (Parallel -> Focus) */}
        <path d={ray1Path} stroke="#3b82f6" strokeDasharray="10,10">
          <animate attributeName="stroke-dashoffset" from="20" to="0" dur="0.5s" repeatCount="indefinite" />
        </path>
        {/* Ray 2 (Center) */}
        <path d={ray2Path} stroke="#06b6d4" strokeDasharray="10,10">
          <animate attributeName="stroke-dashoffset" from="20" to="0" dur="0.5s" repeatCount="indefinite" />
        </path>
        {/* Ray 3 (Focus -> Parallel) */}
        <path d={ray3Path} stroke="#6366f1" strokeDasharray="10,10">
          <animate attributeName="stroke-dashoffset" from="20" to="0" dur="0.5s" repeatCount="indefinite" />
        </path>
      </g>
      
      {/* Photon Particles */}
      <circle r="3" fill="#fff">
        <animateMotion dur="1.5s" repeatCount="indefinite" path={ray1Path} keyPoints="0;1" keyTimes="0;1" calcMode="linear" />
      </circle>
      <circle r="3" fill="#fff">
        <animateMotion dur="1.5s" repeatCount="indefinite" path={ray2Path} keyPoints="0;1" keyTimes="0;1" calcMode="linear" />
      </circle>
      <circle r="3" fill="#fff">
        <animateMotion dur="1.5s" repeatCount="indefinite" path={ray3Path} keyPoints="0;1" keyTimes="0;1" calcMode="linear" />
      </circle>

      {/* --- Object (Candle/Arrow) --- */}
      <g transform={`translate(${objX}, ${CENTER_Y})`} filter="url(#glow-orange)">
        {/* Object Body */}
        <line x1="0" y1="0" x2="0" y2={-OBJ_HEIGHT} stroke="#f59e0b" strokeWidth="4" markerEnd="url(#arrow-start)" />
        {/* Base */}
        <rect x="-10" y="-2" width="20" height="4" fill="#f59e0b" />
        {/* Label */}
        <text x="0" y="-OBJ_HEIGHT - 10" textAnchor="middle" fill="#f59e0b" fontSize="14" dy="-10">物体 (Object)</text>
        {/* Distance Line */}
        <line x1="0" y1="20" x2={CENTER_X - objX} y2="20" stroke="#f59e0b" strokeWidth="1" strokeDasharray="2,2" />
        <text x={(CENTER_X - objX) / 2} y="35" textAnchor="middle" fill="#f59e0b" fontSize="12">u = {formatNum(u)}</text>
      </g>

      {/* --- Image (Inverted) --- */}
      <g transform={`translate(${imgX}, ${CENTER_Y})`} opacity="0.9">
        {/* Image Body (Ghostly) */}
        <line x1="0" y1="0" x2="0" y2={-imgHeight} stroke="#10b981" strokeWidth="4" strokeDasharray="4,2" />
        {/* Arrow Head Simulation */}
        <path d={`M -5 ${-imgHeight + (imgHeight > 0 ? -10 : 10)} L 0 ${-imgHeight} L 5 ${-imgHeight + (imgHeight > 0 ? -10 : 10)}`} fill="none" stroke="#10b981" strokeWidth="3" />
        
        {/* Label */}
        <text x="0" y={-imgHeight + 25} textAnchor="middle" fill="#10b981" fontSize="14">实像 (Real Image)</text>
        {/* Distance Line */}
        <line x1="0" y1="20" x2={-(imgX - CENTER_X)} y2="20" stroke="#10b981" strokeWidth="1" strokeDasharray="2,2" />
        <text x={-(imgX - CENTER_X) / 2} y="35" textAnchor="middle" fill="#10b981" fontSize="12">v = {formatNum(v)}</text>
      </g>

      {/* --- Dashboard / Info Panel --- */}
      <g transform="translate(20, 20)">
        <rect width="240" height="130" fill="rgba(30, 41, 59, 0.8)" rx="8" stroke="#334155" />
        <text x="20" y="30" fill="#fff" fontSize="16" fontWeight="bold">成像参数 (Parameters)</text>
        
        <g transform="translate(20, 60)" fontSize="14" fill="#94a3b8">
          <text y="0">焦距 (f): <tspan fill="#ef4444">{FOCAL_LENGTH}</tspan></text>
          <text y="25">物距 (u): <tspan fill="#f59e0b">{formatNum(u)}</tspan></text>
          <text y="50">像距 (v): <tspan fill="#10b981">{formatNum(v)}</tspan></text>
          <text x="120" y="0">放大率 (m): <tspan fill="#fff">{formatMag(m)}x</tspan></text>
          <text x="120" y="25">性质: <tspan fill="#fff">倒立实像</tspan></text>
        </g>
      </g>

      {/* --- Diagram Labels --- */}
      <text x={VIEW_WIDTH - 20} y={VIEW_HEIGHT - 20} textAnchor="end" fill="#475569" fontSize="12">凸透镜成像原理 / Convex Lens Imaging</text>

    </svg>
  );
}