import React, { useEffect, useMemo, useRef, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

const TeamSection = ({ isActive }) => {
  const members = useMemo(() => ([
    {
      id: 'agan',
      name: '阿甘',
      role: '创始人',
      bio: '从0到1推动产品与战略落地，专注AI与工业融合。',
      avatar: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/agan.png',
      portrait: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/agan.png',
      brandLogo: '/asset/logo-bai.png',
      education: ['本科（待补充）', '硕士（待补充）'],
      experience: [
        '负责公司整体战略与产品路线',
        '推动跨部门协作与商业落地'
      ],
      skills: ['战略规划', '产品设计', 'AI应用', '工业融合']
    },
    {
      id: 'liwei',
      name: '立伟',
      role: '市场运营总监',
      bio: '增长策略与品牌叙事负责人，连接产品与客户价值。',
      avatar: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/liwei.png',
      portrait: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/liwei.png',
      brandLogo: '/asset/logo-bai.png',
      education: ['本科（待补充）'],
      experience: [
        '规划年度增长与渠道策略',
        '打造品牌故事与市场活动'
      ],
      skills: ['增长策略', '品牌建设', '整合营销', '渠道拓展']
    },
    {
      id: 'shuangji',
      name: '爽吉',
      role: '硬件工程师 & 硬件部门主管',
      bio: '负责高可靠硬件架构设计与产线可制造性优化。',
      avatar: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/shuangji.png',
      portrait: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/shuangji.png',
      brandLogo: '/asset/logo-bai.png',
      education: ['本科（待补充）'],
      experience: [
        '主导多款硬件平台架构设计',
        '建立DFM/DFT标准并提升良率'
      ],
      skills: ['硬件架构', '嵌入式', 'DFM/DFT', '可靠性']
    },
    {
      id: 'laoxv',
      name: '老许',
      role: '工业设计工程师 & 结构件工程师',
      bio: '负责高可靠硬件架构设计与产线可制造性优化。',
      avatar: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/laoxv.png',
      portrait: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/laoxv.png',
      brandLogo: '/asset/logo-bai.png',
      education: ['本科（待补充）'],
      experience: [
        '主导多款硬件平台架构设计',
        '建立DFM/DFT标准并提升良率'
      ],
      skills: ['硬件架构', '嵌入式', 'DFM/DFT', '可靠性']
    }
    
  ]), []);

  const [index, setIndex] = useState(0);
  const trackRef = useRef(null);
  const firstCardRef = useRef(null);
  const [slideStep, setSlideStep] = useState(0);
  const CARD_GAP = 24; // 与样式中的间距保持一致
  const [selected, setSelected] = useState(null);

  useEffect(() => {
    const measure = () => {
      if (!firstCardRef.current) return;
      const rect = firstCardRef.current.getBoundingClientRect();
      const step = Math.round(rect.width + CARD_GAP);
      setSlideStep(step);
    };
    measure();
    window.addEventListener('resize', measure);
    return () => window.removeEventListener('resize', measure);
  }, []);

  const goPrev = () => setIndex((prev) => (prev - 1 + members.length) % members.length);
  const goNext = () => setIndex((prev) => (prev + 1) % members.length);

  const handleDragEnd = (_e, info) => {
    const threshold = 80;
    if (info.offset.x < -threshold) {
      goNext();
    } else if (info.offset.x > threshold) {
      goPrev();
    }
  };

  const openDetail = (member) => setSelected(member);
  const closeDetail = () => setSelected(null);

  return (
    <div className="team-section-minimal">
      <motion.div 
        className="team-content"
        initial={{ opacity: 0, y: 60 }}
        animate={isActive ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 1.2, delay: 0.3 }}
      >
        <motion.h1 
          className="team-main-title"
          initial={{ opacity: 0, y: 40 }}
          animate={isActive ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8, delay: 0.6 }}
        >
          量迹AI
          <br />
          <span className="highlight-text">2025</span>
          <br />
          Team
        </motion.h1>
        
        <motion.div
          className="team-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 />
            拥有深厚的技术背景和丰富的
            <br />
            创新经验，致力于推动AI技术发展。
          </p>
        </motion.div>
      </motion.div>

      <motion.div 
        className="team-visual"
        initial={{ opacity: 0, scale: 0.9 }}
        animate={isActive ? { opacity: 1, scale: 1 } : {}}
        transition={{ duration: 1.5, delay: 0.5 }}
      >
        <div className="team-visual-container">
          <motion.div 
            className="team-visual-element-1"
            animate={isActive ? { 
              rotateZ: [0, 180, 360],
              scale: [1, 1.2, 1]
            } : {}}
            transition={{ 
              duration: 18, 
              repeat: Infinity,
              ease: "easeInOut"
            }}
          />
          <motion.div 
            className="team-visual-element-2"
            animate={isActive ? { 
              rotateY: [0, 180, 360],
              x: [0, 20, 0]
            } : {}}
            transition={{ 
              duration: 12, 
              repeat: Infinity,
              ease: "linear"
            }}
          />
        </div>
      </motion.div>

      {/* 科技感人员滑动卡片 */}
      <motion.div 
        className="team-slider"
        initial={{ opacity: 0, y: 30 }}
        animate={isActive ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 0.9, delay: 0.6 }}
      >
        <div className="team-slider-viewport">
          <motion.div
            ref={trackRef}
            className="team-slider-track"
            drag="x"
            dragConstraints={{ left: 0, right: 0 }}
            onDragEnd={handleDragEnd}
            animate={{ x: -index * slideStep }}
            transition={{ type: 'spring', stiffness: 120, damping: 18 }}
          >
            {members.map((m, i) => (
              <div
                key={m.id}
                ref={i === 0 ? firstCardRef : undefined}
                className="team-card"
                onClick={() => openDetail(m)}
              >
                <div className="card-bg-grid" />
                <div className="card-scanline" />
                <div className="card-glow" />
                <img src={m.avatar} alt={m.name} className="member-photo" />
                <div className="member-info">
                  <div className="member-name">{m.name}</div>
                  <div className="member-role">{m.role}</div>
                  <div className="member-bio-mini">{m.bio}</div>
                </div>
              </div>
            ))}
          </motion.div>
          <button className="slider-btn prev" onClick={goPrev} aria-label="prev">
            <span>←</span>
          </button>
          <button className="slider-btn next" onClick={goNext} aria-label="next">
            <span>→</span>
          </button>
          <div className="slider-dots">
            {members.map((m, i) => (
              <button
                key={m.id}
                className={`dot ${i === index ? 'active' : ''}`}
                onClick={() => setIndex(i)}
                aria-label={`go-to-${m.id}`}
              />
            ))}
          </div>
        </div>
      </motion.div>

      {/* 详情面板（桌面端右侧 / 移动端底部弹层） */}
      <AnimatePresence>
        {selected && (
          <>
            <motion.div 
              className="team-detail-mask"
              initial={{ opacity: 0 }}
              animate={{ opacity: 0.6 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.2 }}
              onClick={closeDetail}
            />
            <motion.div
              className="team-detail-panel"
              initial={{ opacity: 0, x: 40 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: 40 }}
              transition={{ type: 'spring', stiffness: 180, damping: 20 }}
            >
              <button className="detail-close" onClick={closeDetail} aria-label="close">×</button>
              <div className="detail-header">
                <img src={selected.brandLogo} alt="brand" className="detail-brand" />
                <div className="detail-meta">
                  <div className="detail-name">{selected.name}</div>
                  <div className="detail-role">{selected.role}</div>
                </div>
              </div>
              <img src={selected.portrait || selected.avatar} alt={selected.name} className="detail-portrait" />
              <div className="detail-body detail-scroller">
                {selected.bio && (
                  <div className="detail-card">
                    <h5>简介</h5>
                    <p>{selected.bio}</p>
                  </div>
                )}
                {selected.education && selected.education.length > 0 && (
                  <div className="detail-card">
                    <h5>毕业院校</h5>
                    <ul className="detail-list">
                      {selected.education.map((e, i) => (
                        <li key={i}>{e}</li>
                      ))}
                    </ul>
                  </div>
                )}
                {selected.experience && selected.experience.length > 0 && (
                  <div className="detail-card">
                    <h5>过往经历</h5>
                    <ul className="detail-list">
                      {selected.experience.map((e, i) => (
                        <li key={i}>{e}</li>
                      ))}
                    </ul>
                  </div>
                )}
                {selected.skills && selected.skills.length > 0 && (
                  <div className="detail-card">
                    <h5>擅长技能</h5>
                    <div className="chip-grid">
                      {selected.skills.map((s, i) => (
                        <span className="chip" key={i}>{s}</span>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>

      {/* 进度指示器 */}
      <motion.div
        className="team-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: "67%" } : {}}
            transition={{ duration: 2, delay: 2 }}
          ></motion.div>
        </div>
        <div className="progress-info">
          <span className="progress-time">00:12</span>
          <span className="progress-total">00:18</span>
        </div>
      </motion.div>
    </div>
  );
};

export default TeamSection;