import React, { useEffect, useRef, Suspense, useState } from 'react';
import { Canvas, useFrame, useLoader, useThree } from '@react-three/fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';
import { createVRMAnimationClip, VRMAnimationLoaderPlugin } from '@pixiv/three-vrm-animation';
import { AnimationMixer, Vector3, MathUtils } from 'three';
import { OrbitControls, PerspectiveCamera } from '@react-three/drei';
import { EffectComposer, ToneMapping } from '@react-three/postprocessing';
import { ToneMappingMode } from 'postprocessing';
import * as THREE from 'three';

// Takram Libraries
import { AerialPerspective, Atmosphere } from '@takram/three-atmosphere/r3f';
import { Clouds, CloudLayer } from '@takram/three-clouds/r3f';

const BASE_URL = import.meta.env.BASE_URL;

const VRM_URL = `${BASE_URL}ai.vrm`;
const VRMA_URL = `${BASE_URL}fly.vrma`;
const EARTH_RADIUS = 6378137;

// 天気変更の間隔 (ms) - 5分
const WEATHER_INTERVAL = 5 * 60 * 1000;

// 時間の進行速度 (倍率)
const TIME_SCALE = 100; 

// 初期時刻: 正午 (12:00)
const INITIAL_DATE = new Date('2024-06-21T12:00:00');

// --- Weather Presets (天候設定) ---
const WEATHER_PRESETS = [
  {
    name: 'Clear (快晴)',
    coverage: 0.1, 
    layers: [
      { channel: 'r', altitude: 1500, height: 500, densityScale: 0.0 },
      { channel: 'g', altitude: 2500, height: 800, densityScale: 0.0 },
      { channel: 'b', altitude: 7500, height: 500, densityScale: 0.1 }, 
    ]
  },
  {
    name: 'Sunny (晴れ)',
    coverage: 0.4, 
    layers: [
      { channel: 'r', altitude: 1500, height: 500, densityScale: 0.4 }, 
      { channel: 'g', altitude: 2500, height: 800, densityScale: 0.0 },
      { channel: 'b', altitude: 7500, height: 500, densityScale: 0.2 },
    ]
  },
  {
    name: 'Cloudy (曇り)',
    coverage: 0.75, 
    layers: [
      { channel: 'r', altitude: 1500, height: 500, densityScale: 0.6 },
      { channel: 'g', altitude: 2000, height: 1000, densityScale: 0.5 }, 
      { channel: 'b', altitude: 7500, height: 500, densityScale: 0.0 },
    ]
  }
];

// ---------------------------------------------------------
// Scene Components (Inside Canvas)
// ---------------------------------------------------------

// Canvasの内側で動作するメインシーンコンポーネント
function AtmosphereScene() {
  const { gl } = useThree();
  const sunRef = useRef(); 
  const atmosphereRef = useRef(); 
  const dateRef = useRef(new Date(INITIAL_DATE));
  const [weather, setWeather] = useState(WEATHER_PRESETS[1]);

  // 1. 露出設定 (Canvas内なのでuseThreeが使える)
  useEffect(() => {
    gl.toneMapping = THREE.NoToneMapping;
    gl.toneMappingExposure = 10.0; 
  }, [gl]);

  // 2. 天候の定期変更
  useEffect(() => {
    const interval = setInterval(() => {
      setWeather(prev => {
        const others = WEATHER_PRESETS.filter(w => w.name !== prev.name);
        const next = others[Math.floor(Math.random() * others.length)];
        console.log(`[Weather] Changing to: ${next.name}`);
        return next;
      });
    }, WEATHER_INTERVAL);
    return () => clearInterval(interval);
  }, []);

  // 3. 時間進行と太陽移動 (Canvas内なのでuseFrameが使える)
  useFrame((state, delta) => {
    // 時間を進める
    const currentDate = dateRef.current;
    const elapsedMs = delta * TIME_SCALE * 1000;
    currentDate.setTime(currentDate.getTime() + elapsedMs);

    // Atmosphere更新
    if (atmosphereRef.current) {
      atmosphereRef.current.updateByDate(currentDate);
    }

    // 太陽移動
    if (sunRef.current) {
      const hours = currentDate.getHours() + currentDate.getMinutes() / 60 + currentDate.getSeconds() / 3600;
      const sunAngle = MathUtils.mapLinear(hours, 6, 18, 0, Math.PI);
      const sunX = -Math.cos(sunAngle);
      const sunY = Math.sin(sunAngle);

      if (hours < 6 || hours > 18) {
          sunRef.current.position.set(0, -1, 0);
          sunRef.current.intensity = 0.0;
      } else {
          sunRef.current.position.set(sunX, sunY, 0.2);
          sunRef.current.intensity = MathUtils.lerp(0.5, 3.0, sunY);
      }
    }
  });

  return (
    <>
      <PerspectiveCamera 
        makeDefault 
        position={[0, EARTH_RADIUS + 2000, 0]} 
        near={1} 
        far={10000000}
        fov={45} 
      />

      <directionalLight 
        ref={sunRef}
        position={[0, 1, 0]} 
        intensity={3.0} 
        castShadow
      />

      <Atmosphere ref={atmosphereRef}>
        <EffectComposer multisampling={0} disableNormalPass={false}>
          <Clouds disableDefaultLayers coverage={weather.coverage}>
            {weather.layers.map((layer, index) => (
              <CloudLayer 
                key={index}
                channel={layer.channel}
                altitude={layer.altitude}
                height={layer.height}
                densityScale={layer.densityScale}
                shapeAmount={0.5}
              />
            ))}
          </Clouds>
          <AerialPerspective sky sunLight skyLight />
          <ToneMapping mode={ToneMappingMode.AGX} />
        </EffectComposer>
      </Atmosphere>
      
      <FlyOverCamera />
    </>
  );
}

function FlyOverCamera() {
  useFrame((state) => {
    const t = state.clock.getElapsedTime() * 0.05;
    const altitude = 2000;
    const radius = 5000;

    state.camera.position.x = Math.sin(t) * radius;
    state.camera.position.z = Math.cos(t) * radius;
    state.camera.position.y = EARTH_RADIUS + altitude;
    
    const lookAtTarget = new Vector3(
      Math.sin(t + 0.1) * radius,
      EARTH_RADIUS + altitude, 
      Math.cos(t + 0.1) * radius
    );
    state.camera.lookAt(lookAtTarget);
  });
  return null;
}

// ---------------------------------------------------------
// Scene 2: Avatar
// ---------------------------------------------------------
function VrmCharacter() {
  const mixerRef = useRef(null);
  const vrmRef = useRef(null);

  const gltf = useLoader(GLTFLoader, VRM_URL, (loader) => {
    loader.register((parser) => new VRMLoaderPlugin(parser));
  });
  
  const vrma = useLoader(GLTFLoader, VRMA_URL, (loader) => {
    loader.register((parser) => new VRMAnimationLoaderPlugin(parser));
  });

  useEffect(() => {
    const vrm = gltf.userData.vrm;
    vrmRef.current = vrm;
    VRMUtils.removeUnnecessaryJoints(vrm.scene);
    vrm.humanoid.resetPose();
    vrm.scene.rotation.y = Math.PI; 

    if (vrma.userData.vrmAnimations?.[0]) {
      const clip = createVRMAnimationClip(vrma.userData.vrmAnimations[0], vrm);
      mixerRef.current = new AnimationMixer(vrm.scene);
      mixerRef.current.clipAction(clip).play();
    }
  }, [gltf, vrma]);

  useFrame((state, delta) => {
    mixerRef.current?.update(delta);
    vrmRef.current?.update(delta);
  });

  return <primitive object={gltf.scene} />;
}

function AvatarLayer() {
  return (
    <Canvas gl={{ alpha: true, antialias: true }}>
      <PerspectiveCamera makeDefault position={[0, 1.5, 3]} fov={30} />
      
      <directionalLight position={[-1, 1, 1]} intensity={1.5} />
      <ambientLight intensity={1.0} />
      <spotLight position={[0, 2, -2]} intensity={3} color="#ffdcb4" />

      <Suspense fallback={null}>
        <VrmCharacter />
      </Suspense>

      <OrbitControls target={[0, 1.2, 0]} />
    </Canvas>
  );
}

// ---------------------------------------------------------
// Main App
// ---------------------------------------------------------
function AtmosphereLayer() {
  // Canvasが親となり、その中にロジックコンポーネント(AtmosphereScene)を入れる
  return (
    <Canvas>
      <AtmosphereScene />
    </Canvas>
  );
}

export default function App() {
  const layerStyle = {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
  };

  return (
    <div style={{ position: 'relative', width: '100vw', height: '100vh', background: '#000' }}>
      
      {/* Layer 0: Atmosphere */}
      <div style={{ ...layerStyle, zIndex: 0 }}>
        <AtmosphereLayer />
      </div>

      {/* Layer 1: Avatar */}
      <div style={{ ...layerStyle, zIndex: 1, pointerEvents: 'none' }}>
         <div style={{ width: '100%', height: '100%', pointerEvents: 'auto' }}>
            <AvatarLayer />
         </div>
      </div>

    </div>
  );
}
