'use client';

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

const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;

// ============================================================================
// SOLAR SYSTEM VIEW (New High Fidelity)
// ============================================================================

interface PlanetConfig {
  name: string;
  radius: number; // size of the planet
  distance: number; // distance from sun
  speed: number; // orbital speed factor
  color: string;
  color2: string; // Gradient end
  ring?: boolean;
}

const PLANETS: PlanetConfig[] = [
  { name: 'Mercury', radius: 5, distance: 60, speed: 1.5, color: '#a1a1a1', color2: '#666' },
  { name: 'Venus', radius: 9, distance: 90, speed: 1.1, color: '#e6be8a', color2: '#c79454' },
  { name: 'Earth', radius: 9.5, distance: 130, speed: 0.9, color: '#2c82c9', color2: '#155187' },
  { name: 'Mars', radius: 7, distance: 170, speed: 0.7, color: '#e27b58', color2: '#a64021' },
  { name: 'Jupiter', radius: 22, distance: 230, speed: 0.4, color: '#d4a373', color2: '#8c6441' },
  { name: 'Saturn', radius: 18, distance: 300, speed: 0.3, color: '#f4d58d', color2: '#bf9e54', ring: true },
  { name: 'Uranus', radius: 12, distance: 360, speed: 0.2, color: '#7de2f2', color2: '#3a9db0' },
  { name: 'Neptune', radius: 11, distance: 410, speed: 0.15, color: '#5b7cf7', color2: '#2a429e' }
];

export const SolarSystemView = () => {
  const [time, setTime] = useState(0);
  const reqRef = useRef<number>(0);
  
  // Center of the universe (view)
  const CX = VIEW_WIDTH / 2;
  const CY = VIEW_HEIGHT / 2;

  // Generate Stars Once
  const stars = useMemo(() => {
    return Array.from({ length: 100 }).map((_, i) => ({
      x: Math.random() * VIEW_WIDTH,
      y: Math.random() * VIEW_HEIGHT,
      r: Math.random() * 1.5,
      opacity: Math.random() * 0.8 + 0.2
    }));
  }, []);

  useEffect(() => {
    const animate = (t: number) => {
      setTime(t * 0.001);
      reqRef.current = requestAnimationFrame(animate);
    };
    reqRef.current = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(reqRef.current);
  }, []);

  return (
    <svg viewBox={`0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`} className="w-full h-full select-none">
      {/* Explicit Background */}
      <rect width={VIEW_WIDTH} height={VIEW_HEIGHT} fill="#000000" />

      <defs>
        {/* Sun Gradient */}
        <radialGradient id="sunGrad">
          <stop offset="0%" stopColor="#fff7d6" />
          <stop offset="50%" stopColor="#ffaa00" />
          <stop offset="90%" stopColor="#ff4500" />
          <stop offset="100%" stopColor="transparent" />
        </radialGradient>

        {/* Sun Glow Filter */}
        <filter id="sunGlow" x="-50%" y="-50%" width="200%" height="200%">
           <feGaussianBlur stdDeviation="10" result="blur" />
           <feMerge>
              <feMergeNode in="blur" />
              <feMergeNode in="SourceGraphic" />
           </feMerge>
        </filter>

        {/* Planet Gradients */}
        {PLANETS.map(p => (
          <radialGradient key={p.name} id={`grad-${p.name}`} cx="30%" cy="30%" r="70%">
             <stop offset="0%" stopColor={p.color} />
             <stop offset="100%" stopColor={p.color2} />
          </radialGradient>
        ))}
      </defs>

      {/* 1. Background Stars */}
      {stars.map((s, i) => (
        <circle key={i} cx={s.x} cy={s.y} r={s.r} fill="white" opacity={s.opacity} />
      ))}

      {/* 2. Orbits */}
      {PLANETS.map(p => (
        <circle 
          key={`orbit-${p.name}`} 
          cx={CX} cy={CY} r={p.distance} 
          fill="none" stroke="#333" strokeWidth="1" opacity="0.5" 
        />
      ))}

      {/* 3. The Sun */}
      <circle cx={CX} cy={CY} r="35" fill="url(#sunGrad)" filter="url(#sunGlow)" />
      
      {/* 4. Planets */}
      {PLANETS.map(p => {
        const angle = time * p.speed;
        const x = CX + p.distance * Math.cos(angle);
        const y = CY + p.distance * Math.sin(angle);

        return (
          <g key={p.name} transform={`translate(${x}, ${y})`}>
             {/* Label */}
             <text x={p.radius + 5} y="4" fill="#aaa" fontSize="10" fontFamily="monospace">
                {p.name}
             </text>

             {/* Saturn Ring */}
             {p.ring && (
                <ellipse 
                  cx="0" cy="0" rx={p.radius * 2.2} ry={p.radius * 0.6} 
                  fill="none" stroke="#c7b584" strokeWidth="3" 
                  opacity="0.7" transform="rotate(-20)" 
                />
             )}

             {/* Planet Body */}
             <circle r={p.radius} fill={`url(#grad-${p.name})`} />
             
             {/* Shadow overlay for realism (facing away from center) */}
             {/* Using a semi-transparent circle offset to simulate shadow side */}
             <circle r={p.radius} fill="black" opacity="0.3" transform={`rotate(${angle * 180 / Math.PI}) translate(${p.radius*0.3}, 0)`} />
          </g>
        );
      })}
      
      {/* Overlay Info */}
      <text x={20} y={30} fill="#666" fontFamily="monospace" fontSize="12">Solar System Visualization</text>

    </svg>
  );
};