import React, { useRef } from 'react';
import { motion } from 'framer-motion';
import { Rocket, Eye, Bot, TrendingUp, Play, Pause } from 'lucide-react';
import futureVideo from '../assets/ai_medical_assistant_combined.mp4';

const FutureVision = () => {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = React.useState(false);

  const toggleVideo = () => {
    if (videoRef.current) {
      if (isPlaying) {
        videoRef.current.pause();
      } else {
        videoRef.current.play();
      }
      setIsPlaying(!isPlaying);
    }
  };

  const features = [
    {
      icon: Eye,
      title: '智能诊断助手',
      description: '全息影像分析，实时诊断建议，如同拥有超级医疗顾问',
      tags: ['AR显示', '实时分析']
    },
    {
      icon: Bot,
      title: '智能健康管理',
      description: '个性化健康监测，智能预警提醒，全方位健康数据分析管理',
      tags: ['健康监测', '智能预警']
    },
    {
      icon: TrendingUp,
      title: '研究分析平台',
      description: '海量数据分析，科研假设生成，加速医学研究进程',
      tags: ['大数据', '智能分析']
    }
  ];

  return (
    <section id="vision" className="section-padding medical-gradient">
      <div className="container-custom">
        <motion.div
          className="text-center mb-16"
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          <h2 className="text-4xl md:text-5xl font-bold text-white mb-4">
            <Rocket className="inline-block w-12 h-12 mr-4" />
            未来愿景：AI医疗助手
          </h2>
          <p className="text-xl text-white/90">类似贾维斯的智能医疗系统</p>
        </motion.div>

        <motion.div
          className="medical-card p-8"
          initial={{ opacity: 0, scale: 0.95 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          {/* 视频展示区域 */}
          <motion.div
            className="relative bg-black rounded-xl overflow-hidden mb-8"
            whileHover={{ scale: 1.02 }}
            transition={{ duration: 0.3 }}
          >
            <video
              ref={videoRef}
              className="w-full h-96 object-cover"
              poster="/api/placeholder/800/400"
              onPlay={() => setIsPlaying(true)}
              onPause={() => setIsPlaying(false)}
              onEnded={() => setIsPlaying(false)}
            >
              <source src={futureVideo} type="video/mp4" />
              您的浏览器不支持视频播放。
            </video>
            
            {/* 视频控制覆盖层 */}
            <div className="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300">
              <motion.button
                onClick={toggleVideo}
                className="w-20 h-20 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-white/30 transition-colors"
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.9 }}
              >
                {isPlaying ? <Pause className="w-8 h-8" /> : <Play className="w-8 h-8 ml-1" />}
              </motion.button>
            </div>

            {/* 视频标题覆盖层 */}
            <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
              <h3 className="text-white text-xl font-bold mb-2">AI医疗助手演示视频</h3>
              <p className="text-white/80 text-sm">展示未来智能医疗系统的三大核心场景</p>
            </div>
          </motion.div>

          {/* 特色功能展示 */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <motion.div
                key={index}
                className="bg-blue-50 border-l-4 border-blue-500 p-6 rounded-lg"
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.2 }}
                whileHover={{ y: -5, transition: { duration: 0.3 } }}
              >
                <h4 className="font-bold text-blue-800 mb-3 flex items-center text-lg">
                  <feature.icon className="w-6 h-6 mr-2" />
                  {feature.title}
                </h4>
                <p className="text-blue-700 mb-4 leading-relaxed">
                  {feature.description}
                </p>
                <div className="flex flex-wrap gap-2">
                  {feature.tags.map((tag, tagIndex) => (
                    <motion.span
                      key={tagIndex}
                      className="medical-gradient text-white px-3 py-1 rounded-full text-sm font-medium"
                      whileHover={{ scale: 1.05 }}
                      transition={{ type: "spring", stiffness: 400, damping: 10 }}
                    >
                      {tag}
                    </motion.span>
                  ))}
                </div>
              </motion.div>
            ))}
          </div>

          {/* 技术展望 */}
          <motion.div
            className="mt-12 text-center"
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.5 }}
          >
            <div className="medical-gradient text-white p-8 rounded-xl">
              <h3 className="text-2xl font-bold mb-4">技术发展路线图</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="text-center">
                  <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
                    <span className="text-2xl font-bold">1</span>
                  </div>
                  <h4 className="font-semibold mb-2">当前阶段</h4>
                  <p className="text-sm opacity-90">基础AI医疗应用</p>
                </div>
                <div className="text-center">
                  <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
                    <span className="text-2xl font-bold">2</span>
                  </div>
                  <h4 className="font-semibold mb-2">近期目标</h4>
                  <p className="text-sm opacity-90">智能化医疗助手</p>
                </div>
                <div className="text-center">
                  <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
                    <span className="text-2xl font-bold">3</span>
                  </div>
                  <h4 className="font-semibold mb-2">远期愿景</h4>
                  <p className="text-sm opacity-90">全能医疗AI系统</p>
                </div>
              </div>
            </div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

export default FutureVision;

