import React, { useState, useEffect, useRef } from "react";
import axios from "axios";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import "../style.css";

interface Point {
  x: number;
  y: number;
  z: number;
  value: number | string;
}

const EmbryoGeneration: React.FC = () => {
  const [cs7Data, setCs7Data] = useState<Point[]>([]);
  const [cs8Data, setCs8Data] = useState<Point[]>([]);
  const [cs75Data, setCs75Data] = useState<Point[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [animationProgress, setAnimationProgress] = useState(0);
  const [isAnimating, setIsAnimating] = useState(false);
  const [animationSpeed, setAnimationSpeed] = useState(2);

  // 加载数据
  useEffect(() => {
    const loadData = async () => {
      setLoading(true);
      setError("");
      try {
        const [cs7Res, cs8Res, cs75Res] = await Promise.all([
          axios.get("http://localhost:5000/api/cell", { params: { stage: "CS7" } }),
          axios.get("http://localhost:5000/api/cell", { params: { stage: "CS8" } }),
          axios.get("http://localhost:5000/api/cell", { params: { stage: "CS7.5" } })
        ]);
        setCs7Data(cs7Res.data.cells);
        setCs8Data(cs8Res.data.cells);
        setCs75Data(cs75Res.data.cells);
      } catch (err: any) {
        if (err.response && err.response.data?.error) {
          setError(err.response.data.error);
        } else {
          setError("Failed to fetch embryo data.");
        }
      } finally {
        setLoading(false);
      }
    };
    loadData();
  }, []);

  // 动画逻辑
  useEffect(() => {
    if (!isAnimating || cs7Data.length === 0 || cs8Data.length === 0 || cs75Data.length === 0) {
      return;
    }
    const duration = 5000 / animationSpeed;
    const startTime = Date.now();
    const animate = () => {
      const elapsed = Date.now() - startTime;
      const progress = Math.min(elapsed / duration, 1);
      setAnimationProgress(progress);
      if (progress < 1) {
        requestAnimationFrame(animate);
      } else {
        setIsAnimating(false);
        setAnimationProgress(1);
      }
    };
    animate();
  }, [isAnimating, cs7Data.length, cs8Data.length, cs75Data.length, animationSpeed]);

  const startAnimation = () => {
    setIsAnimating(true);
    setAnimationProgress(0);
  };
  const resetAnimation = () => {
    setIsAnimating(false);
    setAnimationProgress(0);
  };

  return (
    <div className="page-container">
      <div className="page-header">
        <h1>Embryo Generation</h1>
        <p className="page-description">
          观察胚胎发育过程中的细胞迁移和融合。CS7、CS8、CS7.5点云在同一3D视图中展示，动画模拟细胞从两侧汇聚到中间。
        </p>
      </div>
      <div className="page-content">
        <div className="control-panel" style={{
          display: "flex",
          alignItems: "center",
          gap: "2rem",
          marginBottom: "2rem",
          padding: "1rem",
          backgroundColor: "var(--bg-secondary)",
          borderRadius: "8px",
          flexWrap: "wrap"
        }}>
          <button 
            onClick={startAnimation} 
            disabled={isAnimating || loading}
            style={{
              padding: "0.75rem 1.5rem",
              backgroundColor: "var(--primary-color)",
              color: "white",
              border: "none",
              borderRadius: "6px",
              cursor: isAnimating || loading ? "not-allowed" : "pointer",
              opacity: isAnimating || loading ? 0.6 : 1
            }}
          >
            {isAnimating ? "动画中..." : "开始动画"}
          </button>
          <button 
            onClick={resetAnimation}
            disabled={loading}
            style={{
              padding: "0.75rem 1.5rem",
              backgroundColor: "var(--secondary-color)",
              color: "white",
              border: "none",
              borderRadius: "6px",
              cursor: loading ? "not-allowed" : "pointer",
              opacity: loading ? 0.6 : 1
            }}
          >
            重置
          </button>
          <label style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
            动画速度:
            <input
              type="range"
              min="0.5"
              max="3"
              step="0.1"
              value={animationSpeed}
              onChange={(e) => setAnimationSpeed(parseFloat(e.target.value))}
              style={{ width: "100px" }}
            />
            <span>{animationSpeed}x</span>
          </label>
          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
            进度: {Math.round(animationProgress * 100)}%
            <div style={{
              width: "100px",
              height: "8px",
              backgroundColor: "var(--bg-tertiary)",
              borderRadius: "4px",
              overflow: "hidden"
            }}>
              <div style={{
                width: `${animationProgress * 100}%`,
                height: "100%",
                backgroundColor: "var(--primary-color)",
                transition: "width 0.1s ease"
              }} />
            </div>
          </div>
        </div>
        {error && <div className="error-message" style={{ marginBottom: "2rem" }}>{error}</div>}
        <UnifiedEmbryoAnimation
          cs7Data={cs7Data}
          cs8Data={cs8Data}
          cs75Data={cs75Data}
          animationProgress={animationProgress}
        />
        <div className="section">
          <h2>使用说明</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "2rem", marginTop: "1.5rem" }}>
            <div>
              <h3>🎬 动画控制</h3>
              <p>点击"开始动画"按钮观看CS7.5阶段的细胞生成过程。可以调节动画速度，使用重置按钮重新开始。</p>
            </div>
            <div>
              <h3>🖱️ 交互操作</h3>
              <p>在3D视图中使用鼠标拖拽旋转视角，滚轮缩放，点击数据点查看详细信息。</p>
            </div>
            <div>
              <h3>🎨 颜色编码</h3>
              <p>相同颜色代表相同细胞类型，便于观察细胞在发育过程中的变化。</p>
            </div>
            <div>
              <h3>📊 发育过程</h3>
              <p>观察从CS7和CS8到CS7.5的胚胎发育过程，了解细胞的空间分布变化和类型分化。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

interface UnifiedEmbryoAnimationProps {
  cs7Data: Point[];
  cs8Data: Point[];
  cs75Data: Point[];
  animationProgress: number;
}

const UnifiedEmbryoAnimation: React.FC<UnifiedEmbryoAnimationProps> = ({ cs7Data, cs8Data, cs75Data, animationProgress }) => {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const rendererRef = useRef<THREE.WebGLRenderer | null>(null);
  const sceneRef = useRef<THREE.Scene | null>(null);
  const controlsRef = useRef<any>(null);
  const animationIdRef = useRef<number | null>(null);

  // 颜色映射
  const getColorMap = (allData: Point[]) => {
    const cellTypes = Array.from(new Set(allData.map(p => p.value as string))).sort();
    const colors = [
      '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7',
      '#DDA0DD', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E9',
      '#F8C471', '#82E0AA', '#F1948A', '#85CDCE', '#D7BDE2',
      '#A9DFBF', '#F9E79F', '#D5A6BD', '#AED6F1', '#E8DAEF'
    ];
    const colorMap = new Map<string, THREE.Color>();
    cellTypes.forEach((type, idx) => {
      colorMap.set(type, new THREE.Color(colors[idx % colors.length]));
    });
    return colorMap;
  };

  useEffect(() => {
    if (!containerRef.current) return;
    // 清理
    if (animationIdRef.current !== null) {
      cancelAnimationFrame(animationIdRef.current);
      animationIdRef.current = null;
    }
    if (rendererRef.current) {
      rendererRef.current.dispose();
      rendererRef.current = null;
    }
    while (containerRef.current.firstChild) {
      containerRef.current.removeChild(containerRef.current.firstChild);
    }
    // 初始化
    const width = containerRef.current.clientWidth;
    const height = containerRef.current.clientHeight;
    const scene = new THREE.Scene();
    sceneRef.current = scene;
    const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 1000);
    camera.position.set(0, 0, 30);
    camera.lookAt(0, 0, 0);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(width, height);
    rendererRef.current = renderer;
    containerRef.current.appendChild(renderer.domElement);
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controlsRef.current = controls;
    // 不添加坐标轴

    // 颜色映射
    const allData = [...cs7Data, ...cs8Data, ...cs75Data];
    const colorMap = getColorMap(allData);

    // 计算所有点的包围盒，自动居中和缩放
    let allPositions: number[] = [];
    cs7Data.forEach(p => { allPositions.push(p.x - 40, p.y, p.z); });
    cs8Data.forEach(p => { allPositions.push(p.x + 40, p.y, p.z); });
    cs75Data.forEach((p, i) => {
      const fromX = i % 2 === 0 ? p.x - 40 : p.x + 40;
      allPositions.push(fromX, p.y, p.z);
      allPositions.push(p.x, p.y, p.z);
    });
    if (allPositions.length > 0) {
      const posArr = new Float32Array(allPositions);
      const box = new THREE.Box3().setFromArray(posArr);
      const center = new THREE.Vector3();
      box.getCenter(center);
      const size = new THREE.Vector3();
      box.getSize(size);
      // 让最大边长适配canvas
      const maxDim = Math.max(size.x, size.y, size.z);
      const fitScale = 32 / maxDim; // 32为经验缩放系数
      scene.position.set(-center.x, -center.y, -center.z);
      scene.scale.set(fitScale, fitScale, fitScale);
    }

    // CS7点云（左，静态）
    if (cs7Data.length > 0) {
      const geometry = new THREE.BufferGeometry();
      const positions: number[] = [];
      const colors: number[] = [];
      cs7Data.forEach((p) => {
        positions.push(p.x - 40, p.y, p.z);
        const c = colorMap.get(p.value as string) || new THREE.Color('#CCCCCC');
        colors.push(c.r, c.g, c.b);
      });
      geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
      geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
      const material = new THREE.PointsMaterial({ 
        vertexColors: true, 
        size: 0.7,
        sizeAttenuation: true,
        transparent: true,
        alphaTest: 0.5,
        depthWrite: false,
        blending: THREE.NormalBlending,
        map: (() => {
          const canvas = document.createElement('canvas');
          canvas.width = 64;
          canvas.height = 64;
          const ctx = canvas.getContext('2d')!;
          ctx.clearRect(0, 0, 64, 64);
          // 绘制带有alpha渐变的圆形
          const gradient = ctx.createRadialGradient(32, 32, 0, 32, 32, 30);
          gradient.addColorStop(0, 'rgba(255,255,255,1)');
          gradient.addColorStop(0.98, 'rgba(255,255,255,1)');
          gradient.addColorStop(1, 'rgba(255,255,255,0)');
          ctx.beginPath();
          ctx.arc(32, 32, 30, 0, 2 * Math.PI);
          ctx.closePath();
          ctx.fillStyle = gradient;
          ctx.fill();
          return new THREE.CanvasTexture(canvas);
        })()
      });
      const points = new THREE.Points(geometry, material);
      scene.add(points);
    }
    // CS8点云（右，静态）
    if (cs8Data.length > 0) {
      const geometry = new THREE.BufferGeometry();
      const positions: number[] = [];
      const colors: number[] = [];
      cs8Data.forEach((p) => {
        positions.push(p.x + 40, p.y, p.z);
        const c = colorMap.get(p.value as string) || new THREE.Color('#CCCCCC');
        colors.push(c.r, c.g, c.b);
      });
      geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
      geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
      const material = new THREE.PointsMaterial({ 
        vertexColors: true, 
        size: 0.7,
        sizeAttenuation: true,
        transparent: true,
        alphaTest: 0.5,
        depthWrite: false,
        blending: THREE.NormalBlending,
        map: (() => {
          const canvas = document.createElement('canvas');
          canvas.width = 64;
          canvas.height = 64;
          const ctx = canvas.getContext('2d')!;
          ctx.clearRect(0, 0, 64, 64);
          // 绘制带有alpha渐变的圆形
          const gradient = ctx.createRadialGradient(32, 32, 0, 32, 32, 30);
          gradient.addColorStop(0, 'rgba(255,255,255,1)');
          gradient.addColorStop(0.98, 'rgba(255,255,255,1)');
          gradient.addColorStop(1, 'rgba(255,255,255,0)');
          ctx.beginPath();
          ctx.arc(32, 32, 30, 0, 2 * Math.PI);
          ctx.closePath();
          ctx.fillStyle = gradient;
          ctx.fill();
          return new THREE.CanvasTexture(canvas);
        })()
      });
      const points = new THREE.Points(geometry, material);
      scene.add(points);
    }
    // CS7.5点云（动画）
    if (cs75Data.length > 0) {
      const geometry = new THREE.BufferGeometry();
      const positions: number[] = [];
      const colors: number[] = [];
      const n = cs75Data.length;
      const moveDuration = 0.4; // 每个点的动画持续时间（占总进度的比例）
      const delayPerPoint = 0.6 / n; // 剩余0.6进度用于错峰
      for (let i = 0; i < n; i++) {
        const to = cs75Data[i];
        const fromX = i % 2 === 0 ? to.x - 40 : to.x + 40;
        const fromY = to.y;
        const fromZ = to.z;
        const delay = i * delayPerPoint;
        let pointProgress = (animationProgress - delay) / moveDuration;
        pointProgress = Math.max(0, Math.min(1, pointProgress));
        const x = fromX + (to.x - fromX) * pointProgress;
        const y = fromY + (to.y - fromY) * pointProgress;
        const z = fromZ + (to.z - fromZ) * pointProgress;
        positions.push(x, y, z);
        const c = colorMap.get(to.value as string) || new THREE.Color('#CCCCCC');
        colors.push(c.r, c.g, c.b);
      }
      geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
      geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
      const material = new THREE.PointsMaterial({ 
        vertexColors: true, 
        size: 0.7,
        sizeAttenuation: true,
        transparent: true,
        alphaTest: 0.5,
        depthWrite: false,
        blending: THREE.NormalBlending,
        map: (() => {
          const canvas = document.createElement('canvas');
          canvas.width = 64;
          canvas.height = 64;
          const ctx = canvas.getContext('2d')!;
          ctx.clearRect(0, 0, 64, 64);
          // 绘制带有alpha渐变的圆形
          const gradient = ctx.createRadialGradient(32, 32, 0, 32, 32, 30);
          gradient.addColorStop(0, 'rgba(255,255,255,1)');
          gradient.addColorStop(0.98, 'rgba(255,255,255,1)');
          gradient.addColorStop(1, 'rgba(255,255,255,0)');
          ctx.beginPath();
          ctx.arc(32, 32, 30, 0, 2 * Math.PI);
          ctx.closePath();
          ctx.fillStyle = gradient;
          ctx.fill();
          return new THREE.CanvasTexture(canvas);
        })()
      });
      const points = new THREE.Points(geometry, material);
      scene.add(points);
    }
    // 渲染循环
    const animate = () => {
      animationIdRef.current = requestAnimationFrame(animate);
      controls.update();
      renderer.render(scene, camera);
    };
    animate();
    // 清理
    return () => {
      if (animationIdRef.current !== null) {
        cancelAnimationFrame(animationIdRef.current);
      }
      if (controlsRef.current) {
        controlsRef.current.dispose();
      }
      if (rendererRef.current) {
        rendererRef.current.dispose();
      }
    };
  }, [cs7Data, cs8Data, cs75Data, animationProgress]);

  return <div ref={containerRef} className="point-cloud-container" style={{ width: "100%", height: "700px", minHeight: 600 }} />;
};

export default EmbryoGeneration;