import React, { Suspense, useEffect, useMemo, useRef, useState } from 'react';
import { motion } from 'framer-motion';
import { Canvas, useFrame, useLoader } from '@react-three/fiber';
import { OrbitControls, Bounds, ContactShadows, Html } from '@react-three/drei';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
import * as THREE from 'three';

const BoardScene = ({ onProject, onToggleConnections, objPath, mtlPath, modelName, isMobile }) => {
  const groupRef = useRef();

  const materials = useLoader(MTLLoader, mtlPath);
  materials.preload();
  const obj = useLoader(OBJLoader, objPath, (loader) => {
    loader.setMaterials(materials);
  });

  const { size } = useMemo(() => {
    const box = new THREE.Box3().setFromObject(obj);
    const size = new THREE.Vector3();
    const center = new THREE.Vector3();
    box.getSize(size);
    box.getCenter(center);
    // 将模型平移到原点，旋转更自然
    obj.position.sub(center);
    return { size };
  }, [obj]);

  useFrame((_state, delta) => {
    if (groupRef.current) {
      groupRef.current.rotation.y += delta * 0.2; // 轻微自转
    }
  });

  const annotations = useMemo(() => {
    const hx = size.x * 0.5;
    const hz = size.z * 0.5;
    const radius = Math.max(hx, hz) * 1.9 + 0.4; // 外扩半径，避免重叠

    const fromEsp32 = new THREE.Vector3(0, 0.05 * size.y, 0);
    const toEsp32 = fromEsp32.clone().add(new THREE.Vector3(-radius, 0.22 * size.y, radius)); // 左前

    const fromAntenna = new THREE.Vector3(hx * 0.6, 0.1 * size.y, -hz * 0.4);
    const toAntenna = fromAntenna.clone().add(new THREE.Vector3(radius, 0.18 * size.y, -radius)); // 右后

    const fromPower = new THREE.Vector3(-hx * 0.55, -0.05 * size.y, 0.15 * hz);
    const toPower = fromPower.clone().add(new THREE.Vector3(-radius, 0.16 * size.y, -radius)); // 左后

    const fromGpio = new THREE.Vector3(0.0, -0.1 * size.y, hz * 0.6);
    const toGpio = fromGpio.clone().add(new THREE.Vector3(radius, -0.02 * size.y, radius)); // 右前

    return [
      {
        from: fromEsp32,
        to: toEsp32,
        title: '小量 V3 · ESP32 主控',
        lines: ['双核 Xtensa 240MHz', 'Wi‑Fi 802.11 b/g/n', 'Bluetooth LE 5.0']
      },
      {
        from: fromAntenna,
        to: toAntenna,
        title: '2.4GHz 天线区',
        lines: ['射频匹配网络', '无线性能优化']
      },
      {
        from: fromPower,
        to: toPower,
        title: '电源稳压',
        lines: ['LDO/BUCK 稳压', '3.3V 供电，纹波低']
      },
      {
        from: fromGpio,
        to: toGpio,
        title: 'GPIO 接口',
        lines: ['多路 ADC/DAC', 'I2C/SPI/UART']
      }
    ];
  }, [size]);

  // 将 3D 锚点实时投影为屏幕坐标，交给外部 2D Overlay
  useFrame((state) => {
    if (!onProject || !groupRef.current) return;
    const { camera, size: viewportSize } = state;
    const results = annotations.map((a) => {
      const world = a.from.clone().applyMatrix4(groupRef.current.matrixWorld);
      const ndc = world.clone().project(camera);
      const x = (ndc.x * 0.5 + 0.5) * viewportSize.width;
      const y = (-ndc.y * 0.5 + 0.5) * viewportSize.height;
      return { x, y, title: a.title, lines: a.lines };
    });
    onProject(results);
  });

  const titlePosition = useMemo(() => {
    if (!size) return [0, 0, 0];
    return isMobile
      ? [-size.x * 0.9, size.y * 0.2, 0]
      : [0, size.y * 0.7, 0];
  }, [size, isMobile]);

  return (
    <group ref={groupRef}>
      <primitive object={obj} />
      {/* 模型标题（点击名称显示详情） */}
      <Html position={titlePosition} center style={{ pointerEvents: 'auto' }}>
        <div
          onClick={onToggleConnections}
          title="点击名称显示详情"
          style={{
            background: 'rgba(0,0,0,0.4)',
            border: '1px solid rgba(0,245,212,0.35)',
            borderRadius: 12,
            padding: '6px 10px',
            color: 'white',
            fontSize: 14,
            whiteSpace: 'nowrap',
            backdropFilter: 'blur(8px)',
            cursor: 'pointer'
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontWeight: 700 }}>{modelName}</span>
            <span style={{
              background: '#00f5d4',
              color: '#0a0f1c',
              borderRadius: 10,
              padding: '2px 6px',
              fontSize: 12,
              fontWeight: 600
            }}>详情</span>
          </div>
          <div style={{ opacity: 0.9, fontSize: 12, marginTop: 2 }}>点击名称显示详情</div>
        </div>
      </Html>
      <ContactShadows opacity={0.5} scale={10} blur={2.5} far={4} resolution={1024} color="#1a2336" />
    </group>
  );
};

const ProductSection = ({ isActive }) => {
  const visualRef = useRef();
  const [canvasSize, setCanvasSize] = useState({ width: 800, height: 800 });
  const [screenAnchors, setScreenAnchors] = useState([]);
  const [showConnections, setShowConnections] = useState(false);
  const [modelKey, setModelKey] = useState('v3'); // v3 | mini | v2
  const [isMobile, setIsMobile] = useState(false);

  const modelConfigs = {
    v3: {
      obj: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/3dmodo/xiaoliang1.obj',
      mtl: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/3dmodo/xiaoliang1.mtl',
      name: '小量 V3'
    },
    mini: {
      obj: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/3dmimi/3D_PCB_V3-mini.obj',
      mtl: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/3dmimi/3D_PCB_V3-mini.mtl',
      name: '小量 mini'
    },
    v2: {
      obj: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/3dV2/xiaoliangV2.obj',
      mtl: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/3dV2/xiaolaingV2.mtl',
      name: '小量 V2'
    }
  };

  useEffect(() => {
    const node = visualRef.current;
    if (!node) return;
    const resizeDirect = () => {
      if (!node) return;
      setCanvasSize({ width: node.clientWidth, height: node.clientHeight });
    };
    resizeDirect();
    const ro = new ResizeObserver((entries) => {
      const entry = entries && entries[0];
      if (entry) {
        const cr = entry.contentRect;
        setCanvasSize({ width: Math.round(cr.width), height: Math.round(cr.height) });
      } else {
        resizeDirect();
      }
    });
    ro.observe(node);
    window.addEventListener('resize', resizeDirect);
    return () => {
      window.removeEventListener('resize', resizeDirect);
      ro.disconnect();
    };
  }, []);

  useEffect(() => {
    const check = () => setIsMobile(window.innerWidth <= 768);
    check();
    window.addEventListener('resize', check);
    return () => window.removeEventListener('resize', check);
  }, []);

  const panelWidth = isMobile ? 0 : 260; // 移动端不占右侧面板

  return (
    <div className="product-section-minimal">
      <motion.div 
        className="product-content"
        initial={{ opacity: 0, y: 60 }}
        animate={isActive ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 1.2, delay: 0.3 }}
      >
        <motion.div 
          className="product-main-title"
          initial={{ opacity: 0, y: 40 }}
          animate={isActive ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8, delay: 0.6 }}
        >
          <img 
            src="/AItime.svg" 
            alt="AI时代标题"
            className="title-svg"
          />
        </motion.div>
        
        <motion.div
          className="product-quote"
          initial={{ opacity: 0, x: -20 }}
          animate={isActive ? { opacity: 1, x: 0 } : {}}
          transition={{ duration: 0.8, delay: 1 }}
        >
          <div className="quote-line"></div>
          <p>
            量迹科技的战略在于
            <br />
            将低价AI硬件嵌入更多线下场景。
            <br />
            让人工智能技术普惠更多人。
          </p>
        </motion.div>
        
        <motion.button
          className="learn-more-btn"
          initial={{ opacity: 0, y: 30 }}
          animate={isActive ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8, delay: 1.4 }}
          whileHover={{ 
            scale: 1.05,
            y: -3,
            boxShadow: "0 10px 30px rgba(0, 245, 212, 0.3)"
          }}
          whileTap={{ scale: 0.95 }}
        >
          <span className="btn-text">了解更多</span>
          <div className="btn-glow"></div>
          <div className="btn-arrow">→</div>
        </motion.button>
      </motion.div>

      <motion.div 
        className="product-visual"
        initial={{ opacity: 0, scale: 0.9 }}
        animate={isActive ? { opacity: 1, scale: 1 } : {}}
        transition={{ duration: 1.5, delay: 0.5 }}
      >
        <div className="visual-container" ref={visualRef} style={{ position: 'relative' }}>
          <Canvas
            dpr={[1, 2]}
            camera={{ position: [2.8, 1.8, 3.6], fov: 45 }}
            shadows
          >
            <Suspense fallback={null}>
              <ambientLight intensity={0.6} />
              <directionalLight position={[5, 7, 5]} intensity={1.0} castShadow shadow-mapSize-width={2048} shadow-mapSize-height={2048} />
               <Bounds fit clip observe>
                 <BoardScene
                   onProject={setScreenAnchors}
                   onToggleConnections={() => setShowConnections((v) => !v)}
                   objPath={modelConfigs[modelKey].obj}
                   mtlPath={modelConfigs[modelKey].mtl}
                  modelName={modelConfigs[modelKey].name}
                  isMobile={isMobile}
                 />
              </Bounds>
            </Suspense>
            <OrbitControls makeDefault enableDamping enablePan={false} maxPolarAngle={Math.PI * 0.8} minPolarAngle={Math.PI * 0.2} />
          </Canvas>
          {/* 2D Overlay（桌面端：右侧标签+连线；移动端：不在容器内渲染） */}
          {showConnections && !isMobile && (
            <>
              <svg
                width={canvasSize.width + panelWidth}
                height={canvasSize.height}
                style={{ position: 'absolute', left: 0, top: 0, overflow: 'visible', pointerEvents: 'none', zIndex: 1 }}
              >
                {screenAnchors.map((a, idx) => {
                  const count = Math.max(1, screenAnchors.length);
                  const padTop = Math.round(canvasSize.height * 0.15);
                  const padBottom = Math.round(canvasSize.height * 0.15);
                  const avail = Math.max(0, canvasSize.height - padTop - padBottom);
                  const step = count > 1 ? avail / (count - 1) : 0;
                  const labelY = Math.round(padTop + idx * step);
                  const startX = Math.min(Math.max(a.x, 0), canvasSize.width);
                  const startY = Math.min(Math.max(a.y, 0), canvasSize.height);
                  const endX = canvasSize.width + 16;
                  const endY = labelY + 16;
                  const ctrlX = (startX + endX) / 2 + 40;
                  const ctrlY = (startY + endY) / 2 - 20;
                  const d = `M ${startX},${startY} Q ${ctrlX},${ctrlY} ${endX},${endY}`;
                  return (
                    <path key={`p-${idx}`} d={d} stroke="#00f5d4" strokeWidth="1.5" fill="none" />
                  );
                })}
              </svg>
              {screenAnchors.map((a, idx) => {
                const count = Math.max(1, screenAnchors.length);
                const padTop = Math.round(canvasSize.height * 0.15);
                const padBottom = Math.round(canvasSize.height * 0.15);
                const avail = Math.max(0, canvasSize.height - padTop - padBottom);
                const step = count > 1 ? avail / (count - 1) : 0;
                const labelY = Math.round(padTop + idx * step);
                const left = canvasSize.width + 24;
                return (
                  <div
                    key={`l-${idx}`}
                    style={{
                      position: 'absolute',
                      left,
                      top: labelY,
                      width: panelWidth - 40,
                      background: 'rgba(10,15,28,0.85)',
                      border: '1px solid rgba(0,245,212,0.35)',
                      borderRadius: 12,
                      padding: '10px 12px',
                      color: 'white',
                      fontSize: 13,
                      boxShadow: '0 8px 25px rgba(0, 245, 212, 0.15)',
                      pointerEvents: 'auto',
                      zIndex: 2
                    }}
                  >
                    <div style={{ fontWeight: 700, color: '#00f5d4', marginBottom: 4 }}>{a.title}</div>
                    {a.lines?.map((t, i2) => (
                      <div key={i2} style={{ opacity: 0.9 }}>{t}</div>
                    ))}
                  </div>
                );
              })}
            </>
          )}
          {/* 模型切换滑动按钮 */}
          <div
            style={{
              position: 'absolute',
              left: '50%',
              bottom: 16,
              transform: 'translateX(-50%)',
              display: 'flex',
              gap: 8,
              background: 'rgba(10,15,28,0.6)',
              border: '1px solid rgba(255,255,255,0.15)',
              borderRadius: 20,
              padding: '6px 8px',
              backdropFilter: 'blur(8px)',
              zIndex: 10,
              pointerEvents: 'auto'
            }}
          >
            {[
              { key: 'v3', label: 'V3' },
              { key: 'mini', label: 'mini' },
              { key: 'v2', label: 'V2' }
            ].map((btn) => (
              <button
                key={btn.key}
                onClick={() => setModelKey(btn.key)}
                style={{
                  border: 'none',
                  outline: 'none',
                  padding: '6px 10px',
                  borderRadius: 14,
                  cursor: 'pointer',
                  color: btn.key === modelKey ? '#0a0f1c' : '#ffffff',
                  background: btn.key === modelKey ? '#00f5d4' : 'transparent'
                }}
              >
                {btn.label}
              </button>
            ))}
          </div>
        </div>
        {/* 移动端：画布下方展示标签列表（不画连线） */}
        {showConnections && isMobile && (
          <div style={{ width: '100%', marginTop: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {screenAnchors.map((a, idx) => (
              <div
                key={`ml-${idx}`}
                style={{
                  background: 'rgba(10,15,28,0.85)',
                  border: '1px solid rgba(0,245,212,0.35)',
                  borderRadius: 12,
                  padding: '10px 12px',
                  color: 'white',
                  fontSize: 13,
                  boxShadow: '0 8px 25px rgba(0, 245, 212, 0.15)'
                }}
              >
                <div style={{ fontWeight: 700, color: '#00f5d4', marginBottom: 4 }}>{a.title}</div>
                {a.lines?.map((t, i2) => (
                  <div key={i2} style={{ opacity: 0.9 }}>{t}</div>
                ))}
              </div>
            ))}
          </div>
        )}
      </motion.div>

      {/* 进度指示器 */}
      <motion.div
        className="product-progress"
        initial={{ opacity: 0, y: 20 }}
        animate={isActive ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 0.8, delay: 1.5 }}
      >
        <div className="progress-bar">
          <motion.div 
            className="progress-fill"
            initial={{ width: "0%" }}
            animate={isActive ? { width: "44%" } : {}}
            transition={{ duration: 2, delay: 2 }}
          ></motion.div>
        </div>
        <div className="progress-info">
          <span className="progress-time">00:08</span>
          <span className="progress-total">00:18</span>
        </div>
      </motion.div>
    </div>
  );
};

export default ProductSection;
