import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls, Stars } from '@react-three/drei';
import * as THREE from 'three';
import type { OrbitControls as OrbitControlsImpl } from 'three-stdlib';
import type { RocketConfig, SimulationState } from './types';
import { useOptionalTexture } from '../../hooks/useOptionalTexture';
import { RocketModel } from './RocketModel';
import { clamp, fogColor, groundDrop, separationAge, skyColor, starOpacity } from './sceneMath';

export type CameraMode = 'follow' | 'global';

interface RocketFlightSceneProps {
  rocket: RocketConfig;
  state: SimulationState;
  cameraMode: CameraMode;
  viewScale: number;
  viewScaleResetTrigger: number;
  onViewScaleChange: (scale: number) => void;
}

const EARTH_RADIUS_METERS = 6_371_000;
const EARTH_RADIUS = 34;
const EARTH_TEXTURE = '/upload/texture/2k_earth_daymap.jpg';
const EARTH_CENTER = new THREE.Vector3(0, -EARTH_RADIUS, 0);
const EARTH_ROTATION = new THREE.Euler(0, -1.25, -0.08);
const VIEW_SCALE_CALIBRATION = 0.7;

interface LaunchSite {
  latitude: number;
  longitude: number;
}

interface ManualCameraRef {
  current: boolean;
}

function launchSiteForRocket(rocket: RocketConfig) {
  return {
    latitude: rocket.launch_latitude_deg,
    longitude: rocket.launch_longitude_deg,
  };
}

function orbitLift(targetAltitude: number) {
  return clamp(targetAltitude / 200_000 * 11, 8, 18);
}

function globalFlightFrame(altitude: number, downrange: number, targetAltitude: number, site: LaunchSite) {
  const radius = EARTH_RADIUS + clamp(altitude / targetAltitude, 0, 1.45) * orbitLift(targetAltitude);
  const angle = downrange / EARTH_RADIUS_METERS;
  const latitude = THREE.MathUtils.degToRad(site.latitude);
  const longitude = THREE.MathUtils.degToRad(site.longitude);
  const launchNormal = new THREE.Vector3(
    Math.cos(latitude) * Math.cos(longitude),
    Math.sin(latitude),
    -Math.cos(latitude) * Math.sin(longitude),
  );
  const east = new THREE.Vector3(-Math.sin(longitude), 0, -Math.cos(longitude));
  const normal = launchNormal.multiplyScalar(Math.cos(angle)).addScaledVector(east, Math.sin(angle)).applyEuler(EARTH_ROTATION);
  const tangent = east.multiplyScalar(Math.cos(angle)).addScaledVector(
    new THREE.Vector3(
      Math.cos(latitude) * Math.cos(longitude),
      Math.sin(latitude),
      -Math.cos(latitude) * Math.sin(longitude),
    ),
    -Math.sin(angle),
  ).applyEuler(EARTH_ROTATION);

  return {
    normal,
    tangent,
    position: EARTH_CENTER.clone().addScaledVector(normal, radius),
  };
}

/** 发射场：混凝土地坪 + 导流槽 + 发射台 + 服务塔 + 避雷塔。 */
function LaunchPadStructure() {
  const towerHeight = 13;
  return (
    <group>
      {/* 混凝土地坪 */}
      <mesh position={[0, -0.74, 0]} rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
        <circleGeometry args={[130, 64]} />
        <meshStandardMaterial color="#2a3630" metalness={0} roughness={1} />
      </mesh>
      <mesh position={[0, -0.7, 0]} rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
        <circleGeometry args={[26, 48]} />
        <meshStandardMaterial color="#4a5350" metalness={0.05} roughness={0.95} />
      </mesh>
      {/* 尾焰熏黑区域 */}
      <mesh position={[0, -0.69, 0]} rotation={[-Math.PI / 2, 0, 0]}>
        <circleGeometry args={[8.5, 32]} />
        <meshStandardMaterial color="#171b1a" metalness={0.1} roughness={1} />
      </mesh>

      {/* 发射台 + 导流槽 */}
      <mesh position={[0, -0.34, 0]} receiveShadow>
        <boxGeometry args={[19, 0.7, 13]} />
        <meshStandardMaterial color="#6d736f" metalness={0.08} roughness={0.92} />
      </mesh>
      <mesh position={[0, -0.5, 0]}>
        <boxGeometry args={[7.4, 0.6, 15]} />
        <meshStandardMaterial color="#1b1f21" metalness={0.3} roughness={0.7} />
      </mesh>
      {/* 导流锥 */}
      <mesh position={[0, -0.18, 0]} rotation={[Math.PI, 0, 0]}>
        <coneGeometry args={[3.1, 1.1, 4]} />
        <meshStandardMaterial color="#343b3f" metalness={0.4} roughness={0.6} />
      </mesh>
      {/* 压紧机构 */}
      {[[-2.6, -2.6], [2.6, -2.6], [-2.6, 2.6], [2.6, 2.6]].map(([x, z]) => (
        <mesh key={`${x}-${z}`} position={[x, 0.1, z]}>
          <boxGeometry args={[0.5, 0.9, 0.5]} />
          <meshStandardMaterial color="#7c848a" metalness={0.5} roughness={0.5} />
        </mesh>
      ))}

      {/* 服务塔 */}
      <group position={[-6.2, 0, 0]}>
        {[-1.2, 1.2].map((offset) => (
          <mesh key={offset} position={[offset, towerHeight / 2, 0]}>
            <boxGeometry args={[0.42, towerHeight, 0.42]} />
            <meshStandardMaterial color="#59636a" metalness={0.5} roughness={0.5} />
          </mesh>
        ))}
        {[3.2, 6.4, 9.6, 12.2].map((y) => (
          <mesh key={y} position={[0, y, 0]}>
            <boxGeometry args={[3.4, 0.28, 0.3]} />
            <meshStandardMaterial color="#6b757b" metalness={0.45} roughness={0.55} />
          </mesh>
        ))}
        {/* 摆杆 / 加注臂 */}
        {[5.4, 9.4].map((y, index) => (
          <mesh key={y} position={[2.1 + (index === 0 ? 0.6 : 0), y, 0]}>
            <boxGeometry args={[3.6, 0.24, 0.5]} />
            <meshStandardMaterial color="#78838a" metalness={0.45} roughness={0.5} />
          </mesh>
        ))}
        {/* 塔顶工作平台（避雷针只装在四周的避雷塔上） */}
        <mesh position={[0, towerHeight + 0.15, 0]}>
          <boxGeometry args={[3.2, 0.3, 3.2]} />
          <meshStandardMaterial color="#6b757b" metalness={0.45} roughness={0.55} />
        </mesh>
        {[-1.55, 1.55].map((offset) => (
          <mesh key={offset} position={[offset, towerHeight + 0.85, 0]}>
            <boxGeometry args={[0.1, 1.1, 3.2]} />
            <meshStandardMaterial color="#828c92" metalness={0.4} roughness={0.6} transparent opacity={0.7} />
          </mesh>
        ))}
        <mesh position={[0, towerHeight + 0.85, -1.55]}>
          <boxGeometry args={[3.2, 1.1, 0.1]} />
          <meshStandardMaterial color="#828c92" metalness={0.4} roughness={0.6} transparent opacity={0.7} />
        </mesh>
      </group>

      {/* 避雷塔（四根柱子顶部的避雷针） */}
      {[[-14, -9], [14, -9], [-14, 9], [14, 9]].map(([x, z]) => (
        <group key={`${x}-${z}`} position={[x, 0, z]}>
          <mesh position={[0, 7.5, 0]}>
            <cylinderGeometry args={[0.16, 0.28, 15, 8]} />
            <meshStandardMaterial color="#4c555b" metalness={0.5} roughness={0.55} />
          </mesh>
          <mesh position={[0, 15.4, 0]}>
            <cylinderGeometry args={[0.03, 0.07, 1.6, 6]} />
            <meshStandardMaterial color="#aeb7bd" metalness={0.7} roughness={0.35} />
          </mesh>
        </group>
      ))}

      {/* 场坪编号，让地坪有尺度参照 */}
      <mesh position={[0, -0.68, 12]} rotation={[-Math.PI / 2, 0, 0]}>
        <planeGeometry args={[6, 1.2]} />
        <meshStandardMaterial color="#8b949e" metalness={0} roughness={0.9} />
      </mesh>
    </group>
  );
}

/**
 * 发射瞬间的蒸汽/烟雾：点火后从发射台底部翻涌扩散，
 * 随飞行高度升高逐渐淡出（离地后不再有地面烟雾）。
 */
function PadExhaust({ state }: { state: SimulationState }) {
  const groupRef = useRef<THREE.Group>(null);
  const puffs = useMemo(
    () => Array.from({ length: 14 }, (_, index) => ({
      angle: index * 2.399,
      speed: 0.5 + (index % 5) * 0.09,
      delay: (index % 7) / 7,
    })),
    [],
  );

  useFrame(({ clock }) => {
    if (!groupRef.current) return;
    const burning = state.isRunning && state.throttle > 0.05 && state.altitude < 4_000;
    groupRef.current.visible = burning;
    if (!burning) return;
    const time = clock.elapsedTime * 0.5;
    groupRef.current.children.forEach((child, index) => {
      const puff = puffs[index];
      const progress = (time * puff.speed + puff.delay) % 1;
      const spread = 3 + progress * 26;
      child.position.set(
        Math.cos(puff.angle) * spread,
        progress * 9,
        Math.sin(puff.angle) * spread,
      );
      child.scale.setScalar(1.4 + progress * 4.2);
      const material = (child as THREE.Mesh).material as THREE.MeshBasicMaterial;
      material.opacity = (1 - progress) * 0.24;
    });
  });

  return (
    <group ref={groupRef} visible={false}>
      {puffs.map((_, index) => (
        <mesh key={index}>
          <sphereGeometry args={[1, 10, 8]} />
          <meshBasicMaterial color="#dfe6ea" transparent opacity={0.2} depthWrite={false} />
        </mesh>
      ))}
    </group>
  );
}

/** 地面场景容器：随飞行高度下移、随射程后移。 */
function LaunchRack({ state }: { state: SimulationState }) {
  const groupRef = useRef<THREE.Group>(null);

  useFrame(() => {
    if (groupRef.current) {
      groupRef.current.position.y = -groundDrop(state.altitude);
      // Slide sideways with downrange travel so the pad falls behind.
      groupRef.current.position.x = -clamp(state.downrange / 4000, 0, 60);
    }
  });

  return (
    <group ref={groupRef}>
      <LaunchPadStructure />
      <PadExhaust state={state} />
    </group>
  );
}

function EarthSurface({ texture, state }: { texture: THREE.Texture | null; state?: SimulationState }) {
  const highAltitude = state ? state.altitude >= 9_000 : true;
  if (!highAltitude) return null;

  const gap = state ? 7 + clamp((state.altitude - 9_000) / 91_000, 0, 1) * 5 : 0;
  const radius = state ? 62 : EARTH_RADIUS;
  const centerY = state ? -radius - gap : -EARTH_RADIUS;

  return (
    <group position={[0, centerY, 0]}>
      <mesh rotation={[0, -1.25, -0.08]} receiveShadow>
        <sphereGeometry args={[radius, 96, 64]} />
        <meshStandardMaterial map={texture ?? undefined} color={texture ? '#ffffff' : '#295c72'} roughness={0.9} metalness={0} />
      </mesh>
      <mesh>
        <sphereGeometry args={[radius * 1.018, 72, 48]} />
        <meshBasicMaterial color="#7fc7e8" transparent opacity={state ? 0.12 : 0.18} side={THREE.BackSide} depthWrite={false} />
      </mesh>
      <mesh rotation={[0, -0.9, 0]}>
        <sphereGeometry args={[radius * 1.006, 72, 48]} />
        <meshPhongMaterial color="#ffffff" transparent opacity={0.07} depthWrite={false} />
      </mesh>
    </group>
  );
}

function TargetOrbit({ targetAltitude, launchSite }: { targetAltitude: number; launchSite: LaunchSite }) {
  const orbit = useMemo(() => {
    const radius = EARTH_RADIUS + orbitLift(targetAltitude);
    const points = Array.from({ length: 181 }, (_, index) => {
      const angle = index / 180 * Math.PI * 2;
      return globalFlightFrame(0, angle * EARTH_RADIUS_METERS, targetAltitude, launchSite)
        .normal.multiplyScalar(radius).add(EARTH_CENTER);
    });
    const geometry = new THREE.BufferGeometry().setFromPoints(points);
    const material = new THREE.LineDashedMaterial({ color: '#8a9496', dashSize: 1.2, gapSize: 0.75, transparent: true, opacity: 0.65 });
    const line = new THREE.LineLoop(geometry, material);
    line.computeLineDistances();
    return line;
  }, [launchSite, targetAltitude]);

  useEffect(() => () => {
    orbit.geometry.dispose();
    (orbit.material as THREE.Material).dispose();
  }, [orbit]);

  return <primitive object={orbit} />;
}

function FlightPath({ state, targetAltitude, launchSite }: { state: SimulationState; targetAltitude: number; launchSite: LaunchSite }) {
  const line = useMemo(() => new THREE.Line(
    new THREE.BufferGeometry(),
    new THREE.LineBasicMaterial({ color: '#59c78f', transparent: true, opacity: 0.95 }),
  ), []);
  const lineRef = useRef<THREE.Line>(null);

  useLayoutEffect(() => {
    const activeLine = lineRef.current;
    if (!activeLine) return;
    const points = [globalFlightFrame(0, 0, targetAltitude, launchSite).position];
    state.history.forEach((point) => {
      points.push(globalFlightFrame(point.altitude, point.downrange, targetAltitude, launchSite).position);
    });
    points.push(globalFlightFrame(state.altitude, state.downrange, targetAltitude, launchSite).position);
    const previousGeometry = activeLine.geometry;
    activeLine.geometry = new THREE.BufferGeometry().setFromPoints(points);
    previousGeometry.dispose();
  }, [launchSite, state.altitude, state.downrange, state.history, targetAltitude]);

  useEffect(() => () => {
    lineRef.current?.geometry.dispose();
    (line.material as THREE.Material).dispose();
  }, [line]);

  return <primitive ref={lineRef} object={line} />;
}

function GlobalEarthView({ rocket, state, texture }: { rocket: RocketConfig; state: SimulationState; texture: THREE.Texture | null }) {
  const targetAltitude = rocket.target_orbit_km * 1000;
  const launchSite = launchSiteForRocket(rocket);
  const frame = globalFlightFrame(state.altitude, state.downrange, targetAltitude, launchSite);
  const launchFrame = globalFlightFrame(0, 0, targetAltitude, launchSite);
  const pitchFromVertical = THREE.MathUtils.degToRad(90 - state.pitch);
  const direction = frame.normal.clone().multiplyScalar(Math.cos(pitchFromVertical))
    .addScaledVector(frame.tangent, Math.sin(pitchFromVertical)).normalize();
  const orientation = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction);
  const markerPosition = launchFrame.position.clone().addScaledVector(launchFrame.normal, 0.25);

  return (
    <>
      <EarthSurface texture={texture} />
      <TargetOrbit targetAltitude={targetAltitude} launchSite={launchSite} />
      <FlightPath state={state} targetAltitude={targetAltitude} launchSite={launchSite} />
      <mesh position={markerPosition}>
        <sphereGeometry args={[0.34, 16, 12]} />
        <meshBasicMaterial color="#f2b84b" />
      </mesh>
      <group position={frame.position} quaternion={orientation} scale={0.7 * VIEW_SCALE_CALIBRATION}>
        <RocketModel rocket={rocket} state={state} />
      </group>
      <pointLight position={frame.position} color="#f2b84b" intensity={2.5} distance={9} />
    </>
  );
}

function FollowVehicle({ rocket, state }: { rocket: RocketConfig; state: SimulationState }) {
  const pitchFromVertical = THREE.MathUtils.degToRad(90 - state.pitch);

  return (
    <group rotation={[0, 0, -pitchFromVertical]}>
      <SeparationBurst state={state} />
      <RocketModel rocket={rocket} state={state} />
    </group>
  );
}

/** Expanding shockwave ring shown briefly at stage separation. */
function SeparationBurst({ state }: { state: SimulationState }) {
  const ringRef = useRef<THREE.Mesh>(null);
  const age = separationAge(state);

  useFrame(() => {
    if (!ringRef.current) return;
    const visible = age !== null && age < 1.1;
    ringRef.current.visible = visible;
    if (visible && age !== null) {
      const scale = 1 + age * 9;
      ringRef.current.scale.set(scale, scale, scale);
      const mat = ringRef.current.material as THREE.MeshBasicMaterial;
      mat.opacity = clamp(1 - age / 1.1, 0, 1) * 0.7;
    }
  });

  return (
    <mesh ref={ringRef} rotation={[Math.PI / 2, 0, 0]} visible={false}>
      <ringGeometry args={[0.6, 0.9, 32]} />
      <meshBasicMaterial color="#ffd68a" transparent opacity={0} side={THREE.DoubleSide} depthWrite={false} />
    </mesh>
  );
}

const _camPos = new THREE.Vector3();
const _lookAt = new THREE.Vector3();

/**
 * Two webcast-style camera modes:
 *  - follow: tight tracking shot that stays close to the vehicle, gently
 *    pulling back with altitude (like an onboard/tracking-dish view).
 *  - global: wide cinematic establishing shot that pulls far back so the
 *    receding pad, downrange arc and darkening sky are all in frame.
 */
function FlightCamera({ rocket, state, mode, viewScale, viewScaleResetTrigger, manualCameraRef }: { rocket: RocketConfig; state: SimulationState; mode: CameraMode; viewScale: number; viewScaleResetTrigger: number; manualCameraRef: ManualCameraRef }) {
  useEffect(() => {
    manualCameraRef.current = false;
  }, [manualCameraRef, mode, rocket.code, viewScaleResetTrigger]);

  useFrame(({ camera, size }, delta) => {
    if (manualCameraRef.current) return;
    const perspectiveCamera = camera as THREE.PerspectiveCamera;
    if (mode === 'follow') {
      const zoom = VIEW_SCALE_CALIBRATION * clamp(viewScale, 50, 250) / 100;
      const portraitScale = size.width / size.height < 0.8 ? 1.55 : 1;
      const pullback = (22 + clamp(state.altitude / 4000, 0, 14)) / zoom * portraitScale;
      const height = (7 + clamp(state.altitude / 7000, 0, 7)) / Math.sqrt(zoom);
      const pitchFromVertical = THREE.MathUtils.degToRad(90 - state.pitch);
      _camPos.set(pullback * 0.32, height, pullback);
      _lookAt.set(
        Math.sin(pitchFromVertical) * 5.2,
        Math.cos(pitchFromVertical) * 5.2,
        0,
      );
      perspectiveCamera.fov = THREE.MathUtils.lerp(perspectiveCamera.fov, 42, 0.08);
    } else {
      const portrait = size.width / size.height < 0.8;
      const zoom = clamp(viewScale, 50, 250) / 100;
      const targetAltitude = rocket.target_orbit_km * 1000;
      const launchFrame = globalFlightFrame(0, 0, targetAltitude, launchSiteForRocket(rocket));
      const viewDirection = launchFrame.normal.clone()
        .addScaledVector(launchFrame.tangent, -0.72)
        .add(new THREE.Vector3(0, 0.16, 0))
        .normalize();
      _camPos.copy(EARTH_CENTER).addScaledVector(viewDirection, (portrait ? 320 : 165) / zoom);
      _lookAt.copy(EARTH_CENTER);
      perspectiveCamera.fov = THREE.MathUtils.lerp(perspectiveCamera.fov, 38, 0.08);
    }
    // Frame-rate independent smoothing.
    const t = 1 - Math.pow(0.001, delta);
    camera.position.lerp(_camPos, t * 0.9);
    camera.lookAt(_lookAt);
    perspectiveCamera.updateProjectionMatrix();
  });
  return null;
}

/** Sky + fog that shift color with altitude to sell the climb into space. */
function Atmosphere({ state, mode }: { state: SimulationState; mode: CameraMode }) {
  useFrame(({ scene }) => {
    if (mode === 'global') {
      scene.background = new THREE.Color('#020408');
      scene.fog = null;
      return;
    }
    const sky = new THREE.Color(skyColor(state.altitude));
    scene.background = sky;
    if (!scene.fog) scene.fog = new THREE.Fog(sky, 40, 260);
    const fog = scene.fog as THREE.Fog;
    fog.color.set(fogColor(state.altitude));
    // Thin the fog out with altitude so orbit reads crisp and dark.
    const density = clamp(1 - state.altitude / 45_000, 0, 1);
    fog.near = 40 + (1 - density) * 400;
    fog.far = 260 + (1 - density) * 1400;
  });
  return null;
}

function SceneContents({ rocket, state, cameraMode, viewScale, viewScaleResetTrigger, onViewScaleChange }: RocketFlightSceneProps) {
  const earthTexture = useOptionalTexture(EARTH_TEXTURE);
  const manualCameraRef = useRef(false);
  const orbitControlsRef = useRef<OrbitControlsImpl>(null);
  const manualDistanceRef = useRef<number | null>(null);
  const viewScaleRef = useRef(viewScale);
  useEffect(() => {
    viewScaleRef.current = viewScale;
  }, [viewScale]);
  const controlTarget = useMemo<[number, number, number]>(
    () => cameraMode === 'follow' ? [0, 5.2, 0] : [EARTH_CENTER.x, EARTH_CENTER.y, EARTH_CENTER.z],
    [cameraMode],
  );

  return (
    <>
      <Atmosphere state={state} mode={cameraMode} />
      <OrbitControls
        ref={orbitControlsRef}
        target={controlTarget}
        enablePan={false}
        enableRotate
        enableZoom
        enableDamping
        dampingFactor={0.08}
        minDistance={4}
        maxDistance={cameraMode === 'global' ? 500 : 100}
        onStart={() => {
          manualCameraRef.current = true;
          manualDistanceRef.current = orbitControlsRef.current?.getDistance() ?? null;
        }}
        onChange={() => {
          if (!manualCameraRef.current || manualDistanceRef.current === null || !orbitControlsRef.current) return;
          const distance = orbitControlsRef.current.getDistance();
          if (distance <= 0) return;
          const nextScale = Math.round(clamp(viewScaleRef.current * manualDistanceRef.current / distance, 50, 250) / 5) * 5;
          manualDistanceRef.current = distance;
          if (nextScale !== viewScaleRef.current) {
            viewScaleRef.current = nextScale;
            onViewScaleChange(nextScale);
          }
        }}
      />
      <FlightCamera rocket={rocket} state={state} mode={cameraMode} viewScale={viewScale} viewScaleResetTrigger={viewScaleResetTrigger} manualCameraRef={manualCameraRef} />
      <ambientLight intensity={cameraMode === 'global' ? 0.3 : 0.55} />
      <hemisphereLight args={['#bfe3ff', '#19150d', cameraMode === 'global' ? 0.25 : 0.6]} />
      <directionalLight position={[28, 34, 45]} intensity={2.4} castShadow />
      <group visible={cameraMode === 'global' || starOpacity(state.altitude) > 0.02}>
        <Stars radius={420} depth={140} count={5000} factor={4.5} saturation={0} fade speed={0.35} />
      </group>
      {cameraMode === 'follow' ? (
        <>
          <LaunchRack state={state} />
          <EarthSurface texture={earthTexture} state={state} />
          <FollowVehicle rocket={rocket} state={state} />
        </>
      ) : (
        <GlobalEarthView rocket={rocket} state={state} texture={earthTexture} />
      )}
    </>
  );
}

export function RocketFlightScene({ rocket, state, cameraMode, viewScale, viewScaleResetTrigger, onViewScaleChange }: RocketFlightSceneProps) {
  const initialSky = useMemo(() => skyColor(0), []);
  return (
    <div className="rocket-flight-scene" aria-label="火箭飞行三维动画">
      <Canvas
        shadows
        dpr={[1, 2]}
        camera={{ position: [0, 7, 32], fov: 42, near: 0.1, far: 4000 }}
        gl={{ antialias: true }}
        onCreated={({ scene, camera }) => {
          scene.background = new THREE.Color(initialSky);
          camera.lookAt(0, 5.2, 0);
        }}
      >
        <SceneContents rocket={rocket} state={state} cameraMode={cameraMode} viewScale={viewScale} viewScaleResetTrigger={viewScaleResetTrigger} onViewScaleChange={onViewScaleChange} />
      </Canvas>
    </div>
  );
}