'use client';

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

const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const BALL_RADIUS = 30;
const STRING_LENGTH = 250;
const PIVOT_Y = 100;
const CENTER_X = VIEW_WIDTH / 2;
const MAX_ANGLE = Math.PI / 4; // 45 degrees swing

export const NewtonsCradle = () => {
  const [time, setTime] = useState(Math.PI); // Start with left ball ready to swing down
  const requestRef = useRef<number>();
  
  // Physics loop
  const animate = () => {
    // Increment time to drive the sine wave
    // Speed factor 0.05 controls the swing speed
    setTime(prevTime => prevTime + 0.08);
    requestRef.current = requestAnimationFrame(animate);
  };

  useEffect(() => {
    requestRef.current = requestAnimationFrame(animate);
    return () => {
      if (requestRef.current) cancelAnimationFrame(requestRef.current);
    };
  }, []);

  // Calculate angles based on a clamped sine wave
  // Cycle: 
  // sin(t) < 0: Left ball swings (clamped to negative values)
  // sin(t) > 0: Right ball swings (clamped to positive values)
  // sin(t) approx 0: Collision moment
  
  const cycle = Math.sin(time);
  
  // Ball 0 (Leftmost) only moves when cycle is negative (swings left)
  // We use Math.min(0, cycle) so it stays at 0 when cycle is positive
  const angle0 = Math.min(0, cycle) * MAX_ANGLE;
  
  // Ball 4 (Rightmost) only moves when cycle is positive (swings right)
  const angle4 = Math.max(0, cycle) * MAX_ANGLE;

  // Middle balls stay mostly still (perfect elasticity idealization)
  const angle1 = 0;
  const angle2 = 0;
  const angle3 = 0;

  const balls = [
    { id: 0, angle: angle0, label: '动量' },
    { id: 1, angle: angle1, label: '' },
    { id: 2, angle: angle2, label: '' },
    { id: 3, angle: angle3, label: '' },
    { id: 4, angle: angle4, label: '守恒' },
  ];

  // Helper to calculate ball position
  const getBallPos = (index: number, angle: number) => {
    // Calculate the pivot X for this specific ball (they are spaced out)
    // Total width of 5 balls is 5 * (2 * radius). Center is index 2.
    const offsetFromCenter = (index - 2) * (BALL_RADIUS * 2);
    const pivotX = CENTER_X + offsetFromCenter;

    const x = pivotX + STRING_LENGTH * Math.sin(angle);
    const y = PIVOT_Y + STRING_LENGTH * Math.cos(angle);
    
    return { x, y, pivotX };
  };

  return (
    <svg viewBox={`0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`} className="w-full h-full select-none" style={{ background: '#0f172a' }}>
      {/* Definitions for Gradients */}
      <defs>
        {/* Metallic Gradient for Balls */}
        <radialGradient id="metalGradient" cx="30%" cy="30%" r="70%" fx="40%" fy="40%">
          <stop offset="0%" stopColor="#f1f5f9" /> {/* Bright highlight */}
          <stop offset="30%" stopColor="#94a3b8" /> {/* Base metal */}
          <stop offset="80%" stopColor="#334155" /> {/* Shadow */}
          <stop offset="100%" stopColor="#0f172a" /> {/* Dark edge */}
        </radialGradient>
        
        {/* Metallic Gradient for Top Bar */}
        <linearGradient id="barGradient" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor="#475569" />
          <stop offset="50%" stopColor="#94a3b8" />
          <stop offset="100%" stopColor="#475569" />
        </linearGradient>
        
        {/* Glow filter for impact */}
        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
           <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
           <feMerge>
               <feMergeNode in="coloredBlur"/>
               <feMergeNode in="SourceGraphic"/>
           </feMerge>
        </filter>
      </defs>

      {/* Title Text */}
      <text x={VIEW_WIDTH / 2} y={50} textAnchor="middle" fill="#e2e8f0" fontSize="24" fontWeight="bold" letterSpacing="2">
        牛顿摆 (Newton's Cradle)
      </text>
      <text x={VIEW_WIDTH / 2} y={80} textAnchor="middle" fill="#94a3b8" fontSize="14">
        完美弹性碰撞演示
      </text>

      {/* Top Mounting Bar */}
      <rect 
        x={CENTER_X - 160} 
        y={PIVOT_Y - 10} 
        width={320} 
        height={20} 
        rx={5} 
        fill="url(#barGradient)" 
        stroke="#1e293b"
        strokeWidth="2"
      />

      {/* Render Balls and Strings */}
      {balls.map((ball) => {
        const { x, y, pivotX } = getBallPos(ball.id, ball.angle);
        
        return (
          <g key={ball.id}>
            {/* String */}
            <line 
              x1={pivotX} 
              y1={PIVOT_Y} 
              x2={x} 
              y2={y} 
              stroke="#64748b" 
              strokeWidth="2" 
              strokeLinecap="round"
            />
            
            {/* Connection Point at Top */}
            <circle cx={pivotX} cy={PIVOT_Y} r={3} fill="#334155" />
            
            {/* The Metal Ball */}
            <circle 
              cx={x} 
              cy={y} 
              r={BALL_RADIUS} 
              fill="url(#metalGradient)" 
              stroke="#1e293b" // Dark outline for definition
              strokeWidth="1"
            />
            
            {/* Highlight Reflection (fake glossy look) */}
            <ellipse 
              cx={x - 10} 
              cy={y - 10} 
              rx={8} 
              ry={5} 
              fill="rgba(255,255,255,0.3)" 
              transform={`rotate(-45, ${x-10}, ${y-10})`} 
            />

            {/* Optional Text on balls if moving */}
            {ball.label && (
              <text 
                x={x} 
                y={y + 50} 
                textAnchor="middle" 
                fill="#64748b" 
                fontSize="12"
                opacity={Math.abs(ball.angle) > 0.05 ? 1 : 0} // Only show when swinging
                style={{ transition: 'opacity 0.2s' }}
              >
                {ball.label}
              </text>
            )}
          </g>
        );
      })}

      {/* Impact visual effect (Flash when balls meet at center) */}
      {Math.abs(Math.sin(time)) < 0.1 && (
         <g opacity={1 - Math.abs(Math.sin(time)) * 10}>
             <circle cx={CENTER_X - BALL_RADIUS} cy={PIVOT_Y + STRING_LENGTH} r={5} fill="#fff" filter="url(#glow)" />
             <circle cx={CENTER_X + BALL_RADIUS} cy={PIVOT_Y + STRING_LENGTH} r={5} fill="#fff" filter="url(#glow)" />
         </g>
      )}

    </svg>
  );
};