import React from "react";
import {
  Box,
  Heading,
  Container,
  Text,
  Flex,
  Image,
  VStack,
  HStack,
  Badge
} from "@chakra-ui/react";
import { Button } from "@chakra-ui/button";
import { Stack, SimpleGrid } from "@chakra-ui/layout";
import { Icon } from "@chakra-ui/icon";
import { useColorModeValue } from "@chakra-ui/color-mode";
import { createIcon } from "@chakra-ui/icons";
import { Link as RouterLink } from "react-router-dom";
import { TypeAnimation } from "react-type-animation";
import { FaJava, FaDatabase, FaCloud, FaGithub } from "react-icons/fa";
import { SiApachekafka, SiSpring, SiApachehadoop, SiApachespark } from "react-icons/si";
import type { IconType } from "react-icons";

export default function Home() {
  return (
    <Box>
      {/* Hero Section */}
      <Container maxW={"3xl"}>
        <Stack
          as={Box}
          textAlign={"center"}
          gap={{ base: 8, md: 14 }}
          py={{ base: 20, md: 36 }}
        >
          <Heading
            fontWeight={700}
            fontSize={{ base: "2xl", sm: "4xl", md: "6xl" }}
            lineHeight={"110%"}
          >
            <Text as={"span"} color={"brand.500"}>
              Java全栈开发者
            </Text>
            <br />
            <Text as={"span"} color={"accent.500"} fontSize={{ base: "xl", sm: "2xl", md: "4xl" }}>
              <TypeAnimation
                sequence={[
                  "专注于后台开发", 2000,
                  "热爱大数据技术", 2000,
                  "架构设计师", 2000,
                  "问题解决者", 2000
                ]}
                wrapper="span"
                cursor={true}
                repeat={Infinity}
              />
            </Text>
          </Heading>
          <Text color={"gray.500"} fontSize={{ base: "lg", md: "xl" }}>
            我是一名拥有多年经验的Java开发者，专注于企业级应用开发、微服务架构设计和大数据处理。
            在这里，你可以了解我的技能、项目经验和技术博客。
          </Text>
          <Stack
            direction={"column"}
            gap={3}
            align={"center"}
            alignSelf={"center"}
            position={"relative"}
          >
            <Button
              colorScheme={"brand"}
              bg={"brand.500"}
              rounded={"full"}
              px={6}
              _hover={{
                bg: "brand.600",
              }}
              onClick={() => window.location.href = '/projects'}
            >
              查看我的项目
            </Button>
            <Button
              variant={"outline"}
              colorScheme={"brand"}
              rounded={"full"}
              px={6}
              onClick={() => window.location.href = '/contact'}
            >
              联系我
            </Button>
            <Box>
              <Icon
                as={Arrow}
                color={useColorModeValue("gray.800", "gray.300")}
                w={71}
                position={"absolute"}
                right={-71}
                top={"10px"}
              />
              <Text
                fontSize={"lg"}
                fontFamily={"Caveat"}
                position={"absolute"}
                right={"-125px"}
                top={"-15px"}
                transform={"rotate(10deg)"}
              >
                开始了解我吧！
              </Text>
            </Box>
          </Stack>
        </Stack>
      </Container>

      {/* Skills Overview */}
      <Box bg={useColorModeValue("gray.50", "gray.900")} py={20}>
        <Container maxW={"6xl"}>
          <Heading
            textAlign={"center"}
            fontSize={"4xl"}
            py={10}
            fontWeight={"bold"}
          >
            我的技术栈
          </Heading>
          <SimpleGrid columns={{ base: 2, md: 4 }} gap={10}>
            <SkillCard
              icon={FaJava}
              title="Java开发"
              description="精通Java核心技术，Spring生态系统和JVM优化"
            />
            <SkillCard
              icon={SiApachekafka}
              title="消息队列"
              description="Kafka、RabbitMQ等消息中间件的设计和优化"
            />
            <SkillCard
              icon={FaDatabase}
              title="数据库"
              description="关系型数据库与NoSQL数据库的设计和优化"
            />
            <SkillCard
              icon={SiApachehadoop}
              title="大数据技术"
              description="Hadoop生态系统，包括HDFS、MapReduce等"
            />
            <SkillCard
              icon={SiApachespark}
              title="Spark"
              description="使用Spark进行大规模数据处理和分析"
            />
            <SkillCard
              icon={SiSpring}
              title="Spring生态"
              description="Spring Boot、Spring Cloud微服务架构"
            />
            <SkillCard
              icon={FaCloud}
              title="云原生"
              description="Docker、Kubernetes容器化技术与部署"
            />
            <SkillCard
              icon={FaGithub}
              title="版本控制"
              description="Git、Maven、Gradle等开发工具"
            />
          </SimpleGrid>
        </Container>
      </Box>

      {/* Featured Projects */}
      <Box py={20}>
        <Container maxW={"6xl"}>
          <Heading
            textAlign={"center"}
            fontSize={"4xl"}
            py={10}
            fontWeight={"bold"}
          >
            精选项目
          </Heading>
          <SimpleGrid columns={{ base: 1, md: 2 }} gap={10}>
            <ProjectCard
              title="分布式电商系统"
              description="基于Spring Cloud的微服务架构，实现了高可用、高并发的电商平台。"
              tags={["Spring Cloud", "微服务", "MySQL", "Redis"]}
              image="https://images.unsplash.com/photo-1556742502-ec7c0e9f34b1?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
            />
            <ProjectCard
              title="大数据分析平台"
              description="基于Hadoop、Spark的大数据处理平台，实现了实时数据分析和可视化。"
              tags={["Spark", "Hadoop", "Kafka", "ElasticSearch"]}
              image="https://images.unsplash.com/photo-1560807707-8cc77767d783?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
            />
          </SimpleGrid>
          <Box textAlign="center" mt={10}>
            <Button
              colorScheme={"brand"}
              bg={"brand.500"}
              rounded={"md"}
              px={6}
              _hover={{
                bg: "brand.600",
              }}
              onClick={() => window.location.href = '/projects'}
            >
              查看所有项目
            </Button>
          </Box>
        </Container>
      </Box>

      {/* Call to Action */}
      <Box bg={useColorModeValue("brand.500", "brand.600")} py={20}>
        <Container maxW={"3xl"}>
          <Stack
            as={Box}
            textAlign={"center"}
            gap={{ base: 8, md: 14 }}
          >
            <Heading
              fontWeight={700}
              fontSize={{ base: "2xl", sm: "4xl", md: "5xl" }}
              lineHeight={"110%"}
              color={"white"}
            >
              准备好开始合作了吗？
            </Heading>
            <Text color={"white"} fontSize={{ base: "lg", md: "xl" }}>
              无论是全职机会、自由职业项目还是技术咨询，我都很乐意与您交流。
              让我们一起创造令人惊叹的技术解决方案！
            </Text>
            <Stack
              direction={"column"}
              gap={3}
              align={"center"}
              alignSelf={"center"}
              position={"relative"}
            >
              <Button
                colorScheme={"whiteAlpha"}
                bg={"whiteAlpha.800"}
                rounded={"full"}
                px={6}
                _hover={{
                  bg: "whiteAlpha.900",
                }}
                color={"brand.500"}
                fontWeight="bold"
                onClick={() => window.location.href = '/contact'}
              >
                立即联系
              </Button>
            </Stack>
          </Stack>
        </Container>
      </Box>
    </Box>
  );
}

// Components
const SkillCard = ({ icon, title, description }: { icon: IconType, title: string, description: string }) => {
  return (
    <VStack
      align={"center"}
      bg={useColorModeValue("white", "gray.800")}
      p={5}
      boxShadow={"md"}
      rounded={"lg"}
      transition={"transform 0.3s ease"}
      _hover={{
        transform: "translateY(-5px)",
        boxShadow: "lg",
      }}
    >
      <Box
        p={2}
        rounded={"full"}
        bg={useColorModeValue("brand.50", "brand.900")}
        color={"brand.500"}
        mb={4}
      >
        <Icon as={icon as any} w={10} h={10} />
      </Box>
      <Heading size={"md"} mb={2}>
        {title}
      </Heading>
      <Text textAlign={"center"} color={"gray.500"}>
        {description}
      </Text>
    </VStack>
  );
};

const ProjectCard = ({ title, description, tags, image }: { 
  title: string, 
  description: string, 
  tags: string[], 
  image: string 
}) => {
  return (
    <Box
      bg={useColorModeValue("white", "gray.800")}
      p={0}
      rounded={"lg"}
      overflow={"hidden"}
      boxShadow={"md"}
      transition={"transform 0.3s ease"}
      _hover={{
        transform: "translateY(-5px)",
        boxShadow: "lg",
      }}
    >
      <Image
        src={image}
        alt={title}
        objectFit={"cover"}
        w={"100%"}
        h={"200px"}
      />
      <VStack p={5} align={"start"} gap={3}>
        <Heading size={"md"}>{title}</Heading>
        <Text color={"gray.500"}>{description}</Text>
        <HStack gap={2}>
          {tags.map((tag) => (
            <Badge
              key={tag}
              colorScheme={"brand"}
              variant={"subtle"}
              px={2}
              py={1}
              rounded={"md"}
            >
              {tag}
            </Badge>
          ))}
        </HStack>
      </VStack>
    </Box>
  );
};

const Arrow = createIcon({
  displayName: "Arrow",
  viewBox: "0 0 72 24",
  path: (
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M0.600904 7.08166C0.764293 6.8879 1.01492 6.79004 1.26654 6.82177C2.83216 7.01918 5.20326 7.24581 7.54543 7.23964C9.92491 7.23338 12.1351 6.98464 13.4704 6.32142C13.84 6.13785 14.2885 6.28805 14.4722 6.65692C14.6559 7.02578 14.5052 7.47362 14.1356 7.6572C12.4625 8.48822 9.94063 8.72541 7.54852 8.7317C5.67514 8.73663 3.79547 8.5985 2.29921 8.44247C2.80955 9.59638 3.50943 10.6396 4.24665 11.7384C4.39435 11.9585 4.54354 12.1809 4.69301 12.4068C5.79543 14.0733 6.88128 15.8995 7.1179 18.2636C7.15893 18.6735 6.85928 19.0393 6.4486 19.0805C6.03792 19.1217 5.67174 18.8227 5.6307 18.4128C5.43271 16.4346 4.52957 14.868 3.4457 13.2296C3.3058 13.0181 3.16221 12.8046 3.01684 12.5885C2.05899 11.1646 1.02372 9.62564 0.457909 7.78069C0.383671 7.53862 0.437515 7.27541 0.600904 7.08166ZM5.52039 10.2248C5.77662 9.90161 6.24663 9.84687 6.57018 10.1025C16.4834 17.9344 29.9158 22.4064 42.0781 21.4773C54.1988 20.5514 65.0339 14.2748 69.9746 0.584299C70.1145 0.196597 70.5427 -0.0046455 70.931 0.134813C71.3193 0.274276 71.5206 0.70162 71.3807 1.08932C66.2105 15.4159 54.8056 22.0014 42.1913 22.965C29.6185 23.9254 15.8207 19.3142 5.64226 11.2727C5.31871 11.0171 5.26415 10.5479 5.52039 10.2248Z"
      fill="currentColor"
    />
  )
}); 