import React, { useState, useEffect, useRef, useMemo } from 'react';
import * as THREE from 'three';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { 
  Upload, 
  Trash2, 
  Download, 
  Play, 
  Box, 
  Loader2, 
  CheckCircle2, 
  AlertCircle,
  Film,
  Info,
  Maximize,
  Pause,
  ChevronUp,
  ChevronDown
} from 'lucide-react';

const APP_TITLE = "Mixamo Animation Merger";

const App = () => {
  const mountRef = useRef(null);
  const [isProcessing, setIsProcessing] = useState(false);
  const [activeAnimation, setActiveAnimation] = useState(null);
  const [masterModel, setMasterModel] = useState(null);
  const [status, setStatus] = useState({ type: 'info', message: 'Ready to load Mixamo FBX files.' });
  
  // Timeline state
  const [timelineTime, setTimelineTime] = useState(0);
  const [isPaused, setIsPaused] = useState(false);
  const isScrubbing = useRef(false);

  // Three.js Scene State
  const sceneRef = useRef({
    scene: null,
    camera: null,
    renderer: null,
    controls: null,
    mixer: null,
    clock: new THREE.Clock(),
    currentModel: null,
    currentAction: null
  });

  useEffect(() => {
    if (!mountRef.current) return;
    
    const width = mountRef.current.clientWidth;
    const height = mountRef.current.clientHeight;

    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x0f172a); 

    // Near plane reduced to 0.001 to allow extreme close-ups
    const camera = new THREE.PerspectiveCamera(45, width / height, 0.001, 2000);
    camera.position.set(2, 2, 5);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(width, height);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    mountRef.current.appendChild(renderer.domElement);

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;
    controls.screenSpacePanning = true;
    controls.minDistance = 0.01;
    controls.maxDistance = 100;

    const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
    scene.add(ambientLight);

    const dirLight = new THREE.DirectionalLight(0xffffff, 1.2);
    dirLight.position.set(5, 10, 7.5);
    scene.add(dirLight);

    const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.4);
    hemiLight.position.set(0, 20, 0);
    scene.add(hemiLight);

    const grid = new THREE.GridHelper(20, 100, 0x334155, 0x1e293b);
    scene.add(grid);

    sceneRef.current = { ...sceneRef.current, scene, camera, renderer, controls };

    const animate = () => {
      requestAnimationFrame(animate);
      const delta = sceneRef.current.clock.getDelta();
      
      if (sceneRef.current.mixer && !isScrubbing.current) {
        sceneRef.current.mixer.update(delta);
        if (sceneRef.current.currentAction) {
          setTimelineTime(sceneRef.current.currentAction.time);
        }
      }
      
      if (sceneRef.current.controls) sceneRef.current.controls.update();
      if (sceneRef.current.renderer) sceneRef.current.renderer.render(scene, camera);
    };
    animate();

    const handleResize = () => {
      if (!mountRef.current) return;
      const w = mountRef.current.clientWidth;
      const h = mountRef.current.clientHeight;
      camera.aspect = w / h;
      camera.updateProjectionMatrix();
      renderer.setSize(w, h);
    };
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
      if (renderer.domElement && renderer.domElement.parentNode) {
        renderer.domElement.parentNode.removeChild(renderer.domElement);
      }
      renderer.dispose();
    };
  }, []);

  const fitCameraToObject = (object) => {
    const box = new THREE.Box3().setFromObject(object);
    const center = box.getCenter(new THREE.Vector3());
    const size = box.getSize(new THREE.Vector3());

    const maxDim = Math.max(size.x, size.y, size.z);
    const fov = sceneRef.current.camera.fov * (Math.PI / 180);
    
    let cameraZ = Math.abs(maxDim / 2 / Math.tan(fov / 2));
    cameraZ *= 1.5; // Padding

    const { camera, controls } = sceneRef.current;
    
    // Position camera
    camera.position.set(center.x, center.y + size.y / 4, center.z + cameraZ);
    controls.target.copy(center);
    
    // Scale-aware constraints
    controls.minDistance = maxDim * 0.01; // Allow zooming into 1% of model size
    controls.maxDistance = maxDim * 15;
    
    camera.updateProjectionMatrix();
    controls.update();
  };

  const setView = (type) => {
    if (!masterModel?.object) return;
    const box = new THREE.Box3().setFromObject(masterModel.object);
    const center = box.getCenter(new THREE.Vector3());
    const size = box.getSize(new THREE.Vector3());
    const maxDim = Math.max(size.x, size.y, size.z);
    const fov = sceneRef.current.camera.fov * (Math.PI / 180);
    let dist = Math.abs(maxDim / 2 / Math.tan(fov / 2)) * 1.5;

    const { camera, controls } = sceneRef.current;
    controls.target.copy(center);

    switch(type) {
      case 'front': camera.position.set(center.x, center.y + size.y/4, center.z + dist); break;
      case 'top': camera.position.set(center.x, center.y + dist, center.z); break;
      case 'left': camera.position.set(center.x - dist, center.y + size.y/4, center.z); break;
      case 'right': camera.position.set(center.x + dist, center.y + size.y/4, center.z); break;
    }
    controls.update();
  };

  const handleFileUpload = async (e) => {
    const uploadedFiles = Array.from(e.target.files).filter(f => f.name.toLowerCase().endsWith('.fbx'));
    if (uploadedFiles.length === 0) return;

    setIsProcessing(true);
    setStatus({ type: 'info', message: 'Processing FBX files...' });
    const loader = new FBXLoader();
    
    try {
      let startIdx = 0;
      let localMaster = masterModel;

      if (!localMaster) {
        const file = uploadedFiles[0];
        const url = URL.createObjectURL(file);
        const object = await loader.loadAsync(url);
        object.scale.setScalar(0.01); 
        
        if (object.animations?.length > 0) {
          object.animations[0].name = file.name.replace('.fbx', '');
        }

        sceneRef.current.scene.add(object);
        sceneRef.current.currentModel = object;
        sceneRef.current.mixer = new THREE.AnimationMixer(object);
        
        localMaster = { name: file.name, object, animations: object.animations || [] };
        setMasterModel(localMaster);
        startIdx = 1;

        // Auto-fit immediately on load
        fitCameraToObject(object);
      }

      const newClips = [];
      for (let i = startIdx; i < uploadedFiles.length; i++) {
        const file = uploadedFiles[i];
        const url = URL.createObjectURL(file);
        const tempObject = await loader.loadAsync(url);

        if (tempObject.animations?.length > 0) {
          const clip = tempObject.animations[0];
          clip.name = file.name.replace('.fbx', '');
          clip.tracks.forEach(track => {
            const parts = track.name.split('.');
            let boneName = parts[0];
            const property = parts[1];
            if (boneName.includes(':')) boneName = boneName.split(':').pop();
            track.name = `${boneName}.${property}`;
          });
          newClips.push(clip);
        }
        
        tempObject.traverse((child) => {
          if (child.isMesh) {
            child.geometry.dispose();
            if (Array.isArray(child.material)) child.material.forEach(m => m.dispose());
            else if (child.material) child.material.dispose();
          }
        });
      }

      if (newClips.length > 0) {
        const updatedAnims = [...localMaster.animations, ...newClips];
        localMaster.animations = updatedAnims;
        localMaster.object.animations = updatedAnims;
        setMasterModel({ ...localMaster });
        setStatus({ type: 'success', message: `Added ${newClips.length} tracks.` });
      }
    } catch (error) {
      console.error(error);
      setStatus({ type: 'error', message: 'Error processing FBX files.' });
    } finally {
      setIsProcessing(false);
      e.target.value = null;
    }
  };

  const playAnimation = (clipName) => {
    if (!sceneRef.current.mixer || !masterModel) return;

    if (activeAnimation === clipName) {
      if (sceneRef.current.currentAction) sceneRef.current.currentAction.fadeOut(0.2);
      masterModel.object.traverse(c => { if (c.isSkinnedMesh) c.skeleton.pose(); });
      sceneRef.current.currentAction = null;
      setActiveAnimation(null);
      setIsPaused(false);
      return;
    }

    const clip = masterModel.animations.find(a => a.name === clipName);
    if (!clip) return;

    const action = sceneRef.current.mixer.clipAction(clip);
    if (sceneRef.current.currentAction) {
      action.reset().setLoop(THREE.LoopRepeat).play().crossFadeFrom(sceneRef.current.currentAction, 0.2, true);
    } else {
      action.reset().setLoop(THREE.LoopRepeat).play();
    }
    
    sceneRef.current.currentAction = action;
    setActiveAnimation(clipName);
    setIsPaused(false);
  };

  const togglePause = () => {
    if (!sceneRef.current.currentAction) return;
    const paused = !isPaused;
    setIsPaused(paused);
    sceneRef.current.currentAction.paused = paused;
  };

  const handleScrub = (e) => {
    const val = parseFloat(e.target.value);
    setTimelineTime(val);
    if (sceneRef.current.currentAction) {
      sceneRef.current.currentAction.time = val;
      if (isScrubbing.current) {
        sceneRef.current.mixer.update(0); 
      }
    }
  };

  const removeClip = (index) => {
    const anims = [...masterModel.animations];
    const removedName = anims[index].name;
    anims.splice(index, 1);
    
    if (activeAnimation === removedName) {
      if (sceneRef.current.currentAction) sceneRef.current.currentAction.stop();
      sceneRef.current.currentAction = null;
      setActiveAnimation(null);
    }
    
    const updated = { ...masterModel, animations: anims };
    updated.object.animations = anims;
    setMasterModel(updated);
  };

  const moveClip = (index, dir) => {
    if ((index === 0 && dir === -1) || (index === masterModel.animations.length - 1 && dir === 1)) return;
    const anims = [...masterModel.animations];
    const item = anims.splice(index, 1)[0];
    anims.splice(index + dir, 0, item);
    
    const updated = { ...masterModel, animations: anims };
    updated.object.animations = anims;
    setMasterModel(updated);
  };

  const exportGLB = () => {
    if (!masterModel) return;
    setIsProcessing(true);
    const exporter = new GLTFExporter();
    exporter.parse(masterModel.object, (result) => {
      const blob = new Blob([result], { type: 'application/octet-stream' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = "consolidated.glb";
      link.click();
      setIsProcessing(false);
      setStatus({ type: 'success', message: 'GLB exported!' });
    }, (e) => {
      console.error(e);
      setIsProcessing(false);
    }, { binary: true, animations: masterModel.animations, trs: true, onlyVisible: true });
  };

  const currentDuration = sceneRef.current.currentAction?.getClip().duration || 0;

  return (
    <div className="flex flex-col h-screen bg-slate-950 text-slate-100 font-sans overflow-hidden">
      <header className="px-6 py-4 border-b border-slate-800 flex justify-between items-center bg-slate-900 shadow-xl z-20">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-indigo-600 rounded-lg shadow-lg">
            <Box size={24} className="text-white" />
          </div>
          <div>
            <h1 className="text-xl font-bold tracking-tight">{APP_TITLE}</h1>
            <p className="text-[10px] text-slate-400 uppercase tracking-widest font-semibold">Mixamo Pipeline Tool</p>
          </div>
        </div>
        <div className="flex items-center gap-4">
          <button 
            onClick={() => {
              if (sceneRef.current.currentModel) sceneRef.current.scene.remove(sceneRef.current.currentModel);
              sceneRef.current.mixer = null;
              setMasterModel(null);
              setActiveAnimation(null);
            }} 
            className="px-4 py-2 text-sm font-medium text-slate-400 hover:text-white transition-colors"
          >
            Reset
          </button>
          <button 
            onClick={exportGLB}
            disabled={!masterModel || isProcessing}
            className="flex items-center gap-2 px-6 py-2 rounded-full font-bold bg-indigo-500 hover:bg-indigo-400 disabled:opacity-50 transition-all"
          >
            {isProcessing ? <Loader2 className="animate-spin" size={18} /> : <Download size={18} />}
            Export GLB
          </button>
        </div>
      </header>

      <main className="flex flex-1 overflow-hidden relative">
        <aside className="w-80 bg-slate-900 border-r border-slate-800 flex flex-col p-4 z-10 shadow-2xl">
          <div className={`mb-4 p-3 rounded-lg border text-sm flex gap-2 ${status.type === 'success' ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400' : 'bg-sky-500/10 border-sky-500/30 text-sky-400'}`}>
            <Info size={16} /> <span className="truncate">{status.message}</span>
          </div>

          <div className="relative group mb-6">
            <input type="file" multiple onChange={handleFileUpload} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-20" accept=".fbx" disabled={isProcessing} />
            <div className="flex flex-col items-center justify-center p-8 border-2 border-dashed border-slate-700 rounded-xl group-hover:border-indigo-500 group-hover:bg-indigo-500/5 transition-all">
              <Upload className="text-slate-500 group-hover:text-indigo-400 mb-2" size={32} />
              <p className="text-sm font-medium text-slate-400 group-hover:text-slate-200 text-center">Drop Animations</p>
            </div>
          </div>

          <div className="flex-1 flex flex-col min-h-0">
            <div className="flex items-center justify-between mb-3 px-1 text-xs font-bold text-slate-500 uppercase tracking-widest">
              <span>Timeline Clips</span>
              <span>{masterModel?.animations.length || 0} tracks</span>
            </div>
            <div className="flex-1 overflow-y-auto space-y-2 pr-2 custom-scrollbar">
              {masterModel?.animations.map((anim, idx) => (
                <div key={`${anim.name}-${idx}`} className={`group flex flex-col p-2 rounded-lg border transition-all ${activeAnimation === anim.name ? 'bg-indigo-600/20 border-indigo-500' : 'bg-slate-800/50 border-transparent hover:bg-slate-800'}`}>
                  <div className="flex items-center justify-between">
                    <button onClick={() => playAnimation(anim.name)} className="flex-1 flex items-center gap-3 truncate text-sm">
                      <Film size={14} className={activeAnimation === anim.name ? 'text-indigo-400' : 'text-slate-500'} />
                      <span className="truncate font-medium">{anim.name}</span>
                    </button>
                    <div className="flex items-center gap-1">
                      <button onClick={() => moveClip(idx, -1)} disabled={idx === 0} className="p-1 text-slate-500 hover:text-white disabled:opacity-20"><ChevronUp size={14} /></button>
                      <button onClick={() => moveClip(idx, 1)} disabled={idx === masterModel.animations.length - 1} className="p-1 text-slate-500 hover:text-white disabled:opacity-20"><ChevronDown size={14} /></button>
                      <button onClick={() => removeClip(idx)} className="p-1 text-slate-500 hover:text-rose-400 opacity-0 group-hover:opacity-100 transition-opacity"><Trash2 size={14} /></button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Export Settings Note */}
          <div className="mt-4 pt-4 border-t border-slate-800">
             <div className="bg-slate-950/50 p-3 rounded-lg border border-slate-800 flex items-start gap-2">
                <Info size={16} className="text-amber-400 shrink-0 mt-0.5" />
                <p className="text-[11px] text-slate-400 leading-relaxed">
                  <span className="text-amber-400 font-bold block mb-1">Export Settings Requirement</span>
                  For best results, ensure Mixamo exports have <span className="text-slate-200 underline font-semibold">Keyframe Reduction</span> set to <span className="text-slate-200 underline font-semibold">None</span>. This prevents jitter in the merged GLB.
                </p>
             </div>
          </div>
        </aside>

        <section ref={mountRef} className="flex-1 relative cursor-grab active:cursor-grabbing">
          {/* Camera View Overlay */}
          <div className="absolute top-4 left-4 z-10 flex flex-col gap-2">
            <div className="bg-slate-900/80 backdrop-blur-md p-1 rounded-lg border border-white/5 flex gap-1 shadow-2xl pointer-events-auto">
              {['front', 'top', 'left', 'right'].map(v => (
                <button key={v} onClick={() => setView(v)} className="px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider text-slate-400 hover:text-white hover:bg-slate-800 rounded transition-all">
                  {v}
                </button>
              ))}
              <div className="w-px h-4 bg-slate-700 mx-1 self-center" />
              <button 
                onClick={() => masterModel && fitCameraToObject(masterModel.object)} 
                className="p-1.5 text-slate-400 hover:text-indigo-400 transition-colors"
                title="Fit Model"
              >
                <Maximize size={14} />
              </button>
            </div>
          </div>

          {/* Timeline Bottom Overlay */}
          {activeAnimation && (
            <div className="absolute bottom-6 left-1/2 -translate-x-1/2 w-[90%] max-w-2xl bg-slate-900/90 backdrop-blur-xl border border-white/10 p-4 rounded-2xl shadow-2xl z-20 pointer-events-auto">
              <div className="flex items-center gap-4">
                <button onClick={togglePause} className="p-2 bg-indigo-500 hover:bg-indigo-400 rounded-full text-white shadow-lg transition-all active:scale-90">
                  {isPaused ? <Play size={20} fill="currentColor" /> : <Pause size={20} fill="currentColor" />}
                </button>
                <div className="flex-1 flex flex-col gap-1">
                  <div className="flex justify-between text-[10px] font-mono text-slate-500 uppercase tracking-widest">
                    <span>{timelineTime.toFixed(2)}s</span>
                    <span className="text-indigo-400 font-bold">{activeAnimation}</span>
                    <span>{currentDuration.toFixed(2)}s</span>
                  </div>
                  <input 
                    type="range" 
                    min="0" 
                    max={currentDuration} 
                    step="0.01" 
                    value={timelineTime}
                    onMouseDown={() => { isScrubbing.current = true; }}
                    onMouseUp={() => { isScrubbing.current = false; }}
                    onChange={handleScrub}
                    className="w-full h-1.5 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-indigo-500"
                  />
                </div>
              </div>
            </div>
          )}
        </section>
      </main>

      <style>{`
        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
        input[type='range']::-webkit-slider-thumb {
          appearance: none; width: 12px; height: 12px; background: #6366f1; border-radius: 50%; cursor: pointer; transition: transform 0.1s;
        }
        input[type='range']:active::-webkit-slider-thumb { transform: scale(1.3); }
      `}</style>
    </div>
  );
};

export default App;