import React from "react";
import {
  Box,
  Button,
  Container,
  Flex,
  Heading,
  Image,
  SimpleGrid,
  Stack,
  Text,
  Badge,
  Link,
} from "@chakra-ui/react";
import { Icon } from "@chakra-ui/icon";
import { motion } from "framer-motion";
import { FaGithub, FaExternalLinkAlt } from "react-icons/fa";

interface ProjectCardProps {
  title: string;
  description: string;
  image: string;
  technologies: string[];
  github: string | null;
  demo: string | null;
}

const ProjectCard = ({ title, description, image, technologies, github, demo }: ProjectCardProps) => {
  return (
    <Box
      borderWidth="1px"
      borderRadius="lg"
      overflow="hidden"
      boxShadow="lg"
      bg="white"
      _hover={{ transform: "translateY(-5px)", transition: "transform 0.3s ease" }}
    >
      <Image
        src={image}
        alt={title}
        objectFit="cover"
        h="200px"
        w="100%"
      />
      <Box p={6}>
        <Stack gap={4}>
          <Heading as="h3" size="md" color="blue.600">
            {title}
          </Heading>
          <Text color="gray.600" fontSize="sm">
            {description}
          </Text>
          <Flex flexWrap="wrap" gap={2}>
            {technologies.map((tech, index) => (
              <Badge key={index} colorScheme="blue" fontSize="0.8em" px={2} py={1} borderRadius="full">
                {tech}
              </Badge>
            ))}
          </Flex>
          <Flex gap={4}>
            {github && (
              <Link href={github} target="_blank">
                <Button 
                  size="sm" 
                  colorScheme="gray" 
                  variant="outline"
                >
                  <Icon as={FaGithub as any} mr={2} />
                  源码
                </Button>
              </Link>
            )}
            {demo && (
              <Link href={demo} target="_blank">
                <Button 
                  size="sm" 
                  colorScheme="blue"
                >
                  <Icon as={FaExternalLinkAlt as any} mr={2} />
                  演示
                </Button>
              </Link>
            )}
          </Flex>
        </Stack>
      </Box>
    </Box>
  );
};

const Projects = () => {
  const projects = [
    {
      title: "分布式微服务电商平台",
      description: "基于Spring Cloud构建的高可用电商系统，包含用户、商品、订单、支付等微服务，实现了服务注册发现、配置中心、负载均衡、熔断降级等功能。",
      image: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?q=80&w=2070",
      technologies: ["Java", "Spring Boot", "Spring Cloud", "MySQL", "Redis", "RabbitMQ"],
      github: "#",
      demo: "#",
    },
    {
      title: "实时数据分析平台",
      description: "基于Kafka和Flink构建的实时数据处理平台，支持实时日志收集、指标计算、异常检测和业务监控，应用于电商、金融等多个场景。",
      image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070",
      technologies: ["Java", "Flink", "Kafka", "Elasticsearch", "Kibana", "Prometheus"],
      github: "#",
      demo: "#",
    },
    {
      title: "分布式数据仓库系统",
      description: "构建基于Hadoop生态的数据仓库系统，实现离线数据的ETL处理、存储和分析，支持多维度数据分析和报表生成。",
      image: "https://images.unsplash.com/photo-1504384308090-c894fdcc538d?q=80&w=2070",
      technologies: ["Hadoop", "Hive", "Spark", "HBase", "Sqoop", "Airflow"],
      github: "#",
      demo: null,
    },
    {
      title: "容器化微服务DevOps平台",
      description: "搭建基于Kubernetes的微服务DevOps平台，实现应用的自动构建、部署、监控和运维，提高了开发和运维效率。",
      image: "https://images.unsplash.com/photo-1667372393119-3d4c48d07fc9?q=80&w=2070",
      technologies: ["Docker", "Kubernetes", "Jenkins", "Prometheus", "Grafana", "Istio"],
      github: "#",
      demo: null,
    },
    {
      title: "分布式搜索引擎",
      description: "基于Elasticsearch构建的分布式搜索系统，支持全文检索、模糊匹配、数据聚合等功能，应用于企业内部知识库和产品搜索。",
      image: "https://images.unsplash.com/photo-1483058712412-4245e9b90334?q=80&w=2070",
      technologies: ["Java", "Elasticsearch", "Spring Boot", "Redis", "MySQL", "Vue"],
      github: "#",
      demo: "#",
    },
    {
      title: "机器学习推荐系统",
      description: "基于Spark MLlib实现的个性化推荐系统，通过协同过滤和内容特征分析，为用户提供精准的产品和内容推荐。",
      image: "https://images.unsplash.com/photo-1489549132488-d00b7eee80f1?q=80&w=2073",
      technologies: ["Spark", "Python", "MLlib", "Kafka", "Spring Boot", "MySQL"],
      github: "#",
      demo: null,
    },
  ];

  return (
    <Box py={20} bg="gray.50" id="projects">
      <Container maxW="7xl">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
          <Heading
            mb={2}
            fontSize={{ base: "3xl", md: "4xl" }}
            fontWeight="bold"
            textAlign="center"
            color="gray.700"
          >
            项目案例
          </Heading>
          <Text
            fontSize="xl"
            textAlign="center"
            mb={10}
            color="gray.600"
            maxW="3xl"
            mx="auto"
          >
            以下是我开发的一些代表性项目，涵盖企业级应用、大数据处理和云原生架构
          </Text>

          <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={8}>
            {projects.map((project, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.3, delay: index * 0.1 }}
              >
                <ProjectCard {...project} />
              </motion.div>
            ))}
          </SimpleGrid>
        </motion.div>
      </Container>
    </Box>
  );
};

export default Projects; 