import React, { useMemo, useRef, Suspense } from 'react';
import { useCurrentFrame, useVideoConfig, interpolate, Easing, AbsoluteFill } from 'remotion';
import { Canvas, useFrame, useLoader } from '@react-three/fiber';
import * as THREE from 'three';
import { TextureLoader } from 'three';

// =============================================================================
// COMPOSITION CONFIG (Required for auto-discovery)
// =============================================================================
export const compositionConfig = {
  id: 'GlobeFlightArc',
  durationInSeconds: 5,
  fps: 30,
  width: 1920,
  height: 1080,
};

// =============================================================================
// PRE-GENERATED DATA (computed once, NOT during render)
// =============================================================================
const seededRandom = (seed: number): number => {
  const x = Math.sin(seed * 9999) * 10000;
  return x - Math.floor(x);
};

// Generate starfield positions
const STAR_COUNT = 2000;
const starPositions = new Float32Array(STAR_COUNT * 3);
const starColors = new Float32Array(STAR_COUNT * 3);
for (let i = 0; i < STAR_COUNT; i++) {
  const radius = 50 + seededRandom(i) * 50;
  const theta = seededRandom(i + 1000) * Math.PI * 2;
  const phi = Math.acos(2 * seededRandom(i + 2000) - 1);

  starPositions[i * 3] = radius * Math.sin(phi) * Math.cos(theta);
  starPositions[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta);
  starPositions[i * 3 + 2] = radius * Math.cos(phi);

  const brightness = 0.5 + seededRandom(i + 3000) * 0.5;
  starColors[i * 3] = brightness;
  starColors[i * 3 + 1] = brightness;
  starColors[i * 3 + 2] = brightness + seededRandom(i + 4000) * 0.1;
}

// Flight arc: New York to London
const FLIGHT_ARC = {
  from: { lat: 40.7128, lng: -74.006, name: 'New York' },
  to: { lat: 51.5074, lng: -0.1278, name: 'London' },
};

// =============================================================================
// UTILITY FUNCTIONS
// =============================================================================
const latLngToVector3 = (lat: number, lng: number, radius: number): THREE.Vector3 => {
  const phi = (90 - lat) * (Math.PI / 180);
  const theta = (lng + 180) * (Math.PI / 180);
  return new THREE.Vector3(
    -radius * Math.sin(phi) * Math.cos(theta),
    radius * Math.cos(phi),
    radius * Math.sin(phi) * Math.sin(theta)
  );
};

const generateArcPoints = (
  from: { lat: number; lng: number },
  to: { lat: number; lng: number },
  radius: number,
  segments: number = 100
): THREE.Vector3[] => {
  const start = latLngToVector3(from.lat, from.lng, radius);
  const end = latLngToVector3(to.lat, to.lng, radius);

  // Calculate arc height based on distance
  const distance = start.distanceTo(end);
  const arcHeight = radius + distance * 0.3;

  // Midpoint elevated above the surface
  const mid = new THREE.Vector3()
    .addVectors(start, end)
    .multiplyScalar(0.5)
    .normalize()
    .multiplyScalar(arcHeight);

  // Create quadratic bezier curve
  const curve = new THREE.QuadraticBezierCurve3(start, mid, end);
  return curve.getPoints(segments);
};

// =============================================================================
// 3D COMPONENTS
// =============================================================================

// Starfield Background
const Stars: React.FC = () => {
  const geometryRef = useRef<THREE.BufferGeometry>(null);

  return (
    <points>
      <bufferGeometry ref={geometryRef}>
        <bufferAttribute
          attach="attributes-position"
          count={STAR_COUNT}
          array={starPositions}
          itemSize={3}
        />
        <bufferAttribute
          attach="attributes-color"
          count={STAR_COUNT}
          array={starColors}
          itemSize={3}
        />
      </bufferGeometry>
      <pointsMaterial size={0.15} vertexColors transparent opacity={0.8} sizeAttenuation />
    </points>
  );
};

// Earth Sphere
const Earth: React.FC<{ rotation: number }> = ({ rotation }) => {
  const meshRef = useRef<THREE.Mesh>(null);

  const dayTexture = useLoader(
    TextureLoader,
    'https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg'
  );
  const bumpTexture = useLoader(
    TextureLoader,
    'https://threejs.org/examples/textures/planets/earth_normal_2048.jpg'
  );
  const specularTexture = useLoader(
    TextureLoader,
    'https://threejs.org/examples/textures/planets/earth_specular_2048.jpg'
  );

  return (
    <mesh ref={meshRef} rotation={[0, rotation, 0.1]}>
      <sphereGeometry args={[2, 64, 64]} />
      <meshPhongMaterial
        map={dayTexture}
        bumpMap={bumpTexture}
        bumpScale={0.05}
        specularMap={specularTexture}
        specular={new THREE.Color(0x333333)}
        shininess={5}
      />
    </mesh>
  );
};

// Atmosphere Glow
const Atmosphere: React.FC = () => {
  const shaderMaterial = useMemo(() => {
    return new THREE.ShaderMaterial({
      uniforms: {},
      vertexShader: `
        varying vec3 vNormal;
        void main() {
          vNormal = normalize(normalMatrix * normal);
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
      `,
      fragmentShader: `
        varying vec3 vNormal;
        void main() {
          float intensity = pow(0.7 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 2.0);
          gl_FragColor = vec4(0.3, 0.6, 1.0, 1.0) * intensity;
        }
      `,
      side: THREE.BackSide,
      blending: THREE.AdditiveBlending,
      transparent: true,
    });
  }, []);

  return (
    <mesh material={shaderMaterial}>
      <sphereGeometry args={[2.15, 64, 64]} />
    </mesh>
  );
};

// Cloud Layer
const Clouds: React.FC<{ rotation: number }> = ({ rotation }) => {
  const cloudTexture = useLoader(
    TextureLoader,
    'https://threejs.org/examples/textures/planets/earth_clouds_1024.png'
  );

  return (
    <mesh rotation={[0, rotation + 0.1, 0]}>
      <sphereGeometry args={[2.03, 64, 64]} />
      <meshPhongMaterial
        map={cloudTexture}
        transparent
        opacity={0.4}
        depthWrite={false}
      />
    </mesh>
  );
};

// Animated Flight Arc
const FlightArc: React.FC<{ progress: number; rotation: number }> = ({ progress, rotation }) => {
  const arcPoints = useMemo(
    () => generateArcPoints(FLIGHT_ARC.from, FLIGHT_ARC.to, 2, 100),
    []
  );

  // Number of points to show based on progress
  const visiblePoints = Math.floor(progress * arcPoints.length);

  const geometry = useMemo(() => {
    const geo = new THREE.BufferGeometry();
    const positions = new Float32Array(Math.max(visiblePoints, 1) * 3);

    for (let i = 0; i < visiblePoints; i++) {
      positions[i * 3] = arcPoints[i].x;
      positions[i * 3 + 1] = arcPoints[i].y;
      positions[i * 3 + 2] = arcPoints[i].z;
    }

    geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
    return geo;
  }, [visiblePoints, arcPoints]);

  // Glowing trail head
  const headPosition = visiblePoints > 0 ? arcPoints[visiblePoints - 1] : arcPoints[0];

  return (
    <group rotation={[0, rotation, 0]}>
      {/* Main arc line */}
      {visiblePoints > 1 && (
        <line geometry={geometry}>
          <lineBasicMaterial color="#00ffff" linewidth={2} transparent opacity={0.8} />
        </line>
      )}

      {/* Glowing head of the arc */}
      {progress > 0 && progress < 1 && (
        <mesh position={[headPosition.x, headPosition.y, headPosition.z]}>
          <sphereGeometry args={[0.03, 16, 16]} />
          <meshBasicMaterial color="#ffffff" />
        </mesh>
      )}

      {/* Start marker (New York) */}
      <mesh position={latLngToVector3(FLIGHT_ARC.from.lat, FLIGHT_ARC.from.lng, 2.02).toArray()}>
        <sphereGeometry args={[0.04, 16, 16]} />
        <meshBasicMaterial color="#ff4444" />
      </mesh>

      {/* End marker (London) */}
      <mesh position={latLngToVector3(FLIGHT_ARC.to.lat, FLIGHT_ARC.to.lng, 2.02).toArray()}>
        <sphereGeometry args={[0.04, 16, 16]} />
        <meshBasicMaterial color="#44ff44" />
      </mesh>
    </group>
  );
};

// =============================================================================
// SCENE COMPONENT
// =============================================================================
const Scene: React.FC<{ frame: number; durationInFrames: number }> = ({ frame, durationInFrames }) => {
  // Globe rotation animation
  const rotation = interpolate(
    frame,
    [0, durationInFrames],
    [0.5, -0.8],
    { easing: Easing.inOut(Easing.cubic) }
  );

  // Arc drawing progress (starts at 10%, completes at 80%)
  const arcProgress = interpolate(
    frame,
    [durationInFrames * 0.1, durationInFrames * 0.8],
    [0, 1],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.cubic) }
  );

  return (
    <>
      {/* Lighting */}
      <ambientLight intensity={0.3} />
      <directionalLight position={[5, 3, 5]} intensity={1.5} />
      <pointLight position={[-10, -10, -10]} intensity={0.5} color="#4488ff" />

      {/* Background */}
      <Stars />

      {/* Earth + Clouds wrapped in Suspense so textures don't block the canvas */}
      <Suspense fallback={null}>
        <Earth rotation={rotation} />
        <Clouds rotation={rotation} />
      </Suspense>
      <Atmosphere />

      {/* Flight Arc */}
      <FlightArc progress={arcProgress} rotation={rotation} />
    </>
  );
};

// =============================================================================
// MAIN COMPONENT
// =============================================================================
const GlobeAnimation: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames } = useVideoConfig();

  return (
    <AbsoluteFill style={{ backgroundColor: '#000010' }}>
      <Canvas
        // Landscape 16:9 has tons of horizontal room; pull camera closer
        // and keep FOV tight so the globe reads BIG and crisp.
        camera={{ position: [0, 0, 6.5], fov: 45 }}
        gl={{ antialias: true, alpha: true }}
        // Fixes Remotion Player preview: Player applies a CSS transform to
        // scale the composition; R3F's default resize uses getBoundingClientRect
        // which returns the SCALED size, making the canvas tiny in the corner.
        // offsetSize uses offsetWidth/offsetHeight which ignore transforms.
        resize={{ offsetSize: true }}
        style={{ width: '100%', height: '100%' }}
      >
        <Scene frame={frame} durationInFrames={durationInFrames} />
      </Canvas>

      {/* UI Overlay */}
      <div
        style={{
          position: 'absolute',
          bottom: 100,
          left: 0,
          right: 0,
          textAlign: 'center',
          color: 'white',
          fontFamily: 'system-ui, sans-serif',
          fontSize: 32,
          textShadow: '0 2px 10px rgba(0,0,0,0.8)',
        }}
      >
        <div style={{ opacity: interpolate(frame, [0, 30], [0, 1], { extrapolateRight: 'clamp' }) }}>
          New York → London
        </div>
      </div>
    </AbsoluteFill>
  );
};

export default GlobeAnimation;