/**
 * Home Page for Redirect Intelligence v2
 * 
 * Landing page with hero section, features, and quick start
 */

import React from 'react';
import {
  Box,
  Heading,
  Text,
  Button,
  VStack,
  HStack,
  Container,
  SimpleGrid,
  Icon,
  Card,
  CardBody,
  Badge,
  useColorModeValue,
  Stat,
  StatLabel,
  StatNumber,
  StatHelpText,
  Divider,
  Link,
} from '@chakra-ui/react';
import { Link as RouterLink } from 'react-router-dom';
import { 
  FiShield, 
  FiSearch, 
  FiLock, 
  FiTrendingUp, 
  FiZap, 
  FiDatabase,
  FiArrowRight,
  FiExternalLink
} from 'react-icons/fi';
import { useQuery } from '@tanstack/react-query';

import { healthApi } from '../services/api';

export function HomePage() {
  const bgGradient = useColorModeValue(
    'linear(to-br, brand.50, white)',
    'linear(to-br, gray.900, gray.800)'
  );
  
  const cardBg = useColorModeValue('white', 'gray.800');
  const shadowColor = useColorModeValue('gray.100', 'gray.700');

  // Fetch health status for real-time stats
  const { data: health } = useQuery({
    queryKey: ['health'],
    queryFn: healthApi.getHealth,
    refetchInterval: 30000, // Refresh every 30 seconds
  });

  const features = [
    {
      icon: FiZap,
      title: 'Lightning Fast Tracking',
      description: 'Track redirects in real-time with detailed hop-by-hop analysis and performance metrics.',
      color: 'yellow',
    },
    {
      icon: FiLock,
      title: 'SSL Certificate Analysis',
      description: 'Comprehensive SSL inspection with security scoring and vulnerability detection.',
      color: 'green',
    },
    {
      icon: FiSearch,
      title: 'SEO Optimization',
      description: 'Analyze meta tags, robots.txt, sitemaps, and get actionable SEO recommendations.',
      color: 'blue',
    },
    {
      icon: FiShield,
      title: 'Security Scanning',
      description: 'Detect mixed content, security headers, and potential vulnerabilities.',
      color: 'red',
    },
    {
      icon: FiDatabase,
      title: 'Persistent Storage',
      description: 'All analysis results are stored for historical tracking and trend analysis.',
      color: 'purple',
    },
    {
      icon: FiTrendingUp,
      title: 'Visual Dashboards',
      description: 'Beautiful charts and graphs to visualize redirect patterns and performance.',
      color: 'teal',
    },
  ];

  return (
    <Box>
      {/* Hero Section */}
      <Box bgGradient={bgGradient} py={20}>
        <Container maxW="6xl">
          <VStack spacing={8} textAlign="center">
            <Badge colorScheme="brand" px={3} py={1} borderRadius="full" fontSize="sm">
              Version 2.0 - Now with Advanced Analysis
            </Badge>
            
            <Heading
              as="h1"
              size="2xl"
              bgGradient="linear(to-r, brand.400, brand.600)"
              bgClip="text"
              maxW="4xl"
            >
              Comprehensive Redirect Intelligence Platform
            </Heading>
            
            <Text fontSize="xl" color="gray.600" maxW="3xl" lineHeight={1.6}>
              Track, analyze, and optimize URL redirects with advanced SSL, SEO, and security insights. 
              Get detailed hop-by-hop analysis with performance metrics and actionable recommendations.
            </Text>
            
            <HStack spacing={4}>
              <Button
                as={RouterLink}
                to="/track"
                size="lg"
                colorScheme="brand"
                rightIcon={<Icon as={FiArrowRight} />}
              >
                Start Tracking
              </Button>
              <Button
                as={RouterLink}
                to="/analysis"
                size="lg"
                variant="outline"
                colorScheme="brand"
              >
                Try Analysis
              </Button>
            </HStack>
          </VStack>
        </Container>
      </Box>

      {/* Stats Section */}
      {health && (
        <Box py={12}>
          <Container maxW="6xl">
            <SimpleGrid columns={{ base: 1, md: 4 }} spacing={6}>
              <Stat
                bg={cardBg}
                p={6}
                borderRadius="lg"
                shadow="sm"
                border="1px solid"
                borderColor={shadowColor}
              >
                <StatLabel>API Status</StatLabel>
                <StatNumber color="green.500">Online</StatNumber>
                <StatHelpText>
                  {health.environment} environment
                </StatHelpText>
              </Stat>
              
              <Stat
                bg={cardBg}
                p={6}
                borderRadius="lg"
                shadow="sm"
                border="1px solid"
                borderColor={shadowColor}
              >
                <StatLabel>Version</StatLabel>
                <StatNumber>{health.version}</StatNumber>
                <StatHelpText>
                  Latest stable release
                </StatHelpText>
              </Stat>
              
              <Stat
                bg={cardBg}
                p={6}
                borderRadius="lg"
                shadow="sm"
                border="1px solid"
                borderColor={shadowColor}
              >
                <StatLabel>Analysis Types</StatLabel>
                <StatNumber>3</StatNumber>
                <StatHelpText>
                  SSL, SEO, Security
                </StatHelpText>
              </Stat>
              
              <Stat
                bg={cardBg}
                p={6}
                borderRadius="lg"
                shadow="sm"
                border="1px solid"
                borderColor={shadowColor}
              >
                <StatLabel>Backward Compatible</StatLabel>
                <StatNumber>100%</StatNumber>
                <StatHelpText>
                  Legacy API preserved
                </StatHelpText>
              </Stat>
            </SimpleGrid>
          </Container>
        </Box>
      )}

      {/* Features Section */}
      <Box py={20}>
        <Container maxW="6xl">
          <VStack spacing={12}>
            <VStack spacing={4} textAlign="center">
              <Heading as="h2" size="xl">
                Powerful Analysis Features
              </Heading>
              <Text fontSize="lg" color="gray.600" maxW="3xl">
                Everything you need to understand, optimize, and secure your redirects
              </Text>
            </VStack>
            
            <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={8}>
              {features.map((feature, index) => (
                <Card
                  key={index}
                  bg={cardBg}
                  shadow="sm"
                  border="1px solid"
                  borderColor={shadowColor}
                  _hover={{
                    shadow: 'md',
                    transform: 'translateY(-2px)',
                    transition: 'all 0.2s',
                  }}
                >
                  <CardBody p={6}>
                    <VStack align="start" spacing={4}>
                      <Box
                        p={3}
                        borderRadius="lg"
                        bg={`${feature.color}.100`}
                        color={`${feature.color}.600`}
                        _dark={{
                          bg: `${feature.color}.900`,
                          color: `${feature.color}.300`,
                        }}
                      >
                        <Icon as={feature.icon} boxSize={6} />
                      </Box>
                      
                      <VStack align="start" spacing={2}>
                        <Heading as="h3" size="md">
                          {feature.title}
                        </Heading>
                        <Text color="gray.600" fontSize="sm" lineHeight={1.6}>
                          {feature.description}
                        </Text>
                      </VStack>
                    </VStack>
                  </CardBody>
                </Card>
              ))}
            </SimpleGrid>
          </VStack>
        </Container>
      </Box>

      <Divider />

      {/* API Section */}
      <Box py={20}>
        <Container maxW="6xl">
          <VStack spacing={8} textAlign="center">
            <Heading as="h2" size="xl">
              Developer-Friendly API
            </Heading>
            <Text fontSize="lg" color="gray.600" maxW="3xl">
              RESTful API with comprehensive documentation and 100% backward compatibility
            </Text>
            
            <SimpleGrid columns={{ base: 1, md: 3 }} spacing={6} w="full" maxW="4xl">
              <VStack spacing={2}>
                <Badge colorScheme="green" px={3} py={1}>
                  Legacy API
                </Badge>
                <Text fontWeight="medium">Fully Compatible</Text>
                <Text fontSize="sm" color="gray.600">
                  All existing integrations continue to work
                </Text>
              </VStack>
              
              <VStack spacing={2}>
                <Badge colorScheme="blue" px={3} py={1}>
                  Enhanced API
                </Badge>
                <Text fontWeight="medium">v2 Features</Text>
                <Text fontSize="sm" color="gray.600">
                  Advanced analysis and database persistence
                </Text>
              </VStack>
              
              <VStack spacing={2}>
                <Badge colorScheme="purple" px={3} py={1}>
                  Analysis API
                </Badge>
                <Text fontWeight="medium">Dedicated Endpoints</Text>
                <Text fontSize="sm" color="gray.600">
                  SSL, SEO, and security analysis
                </Text>
              </VStack>
            </SimpleGrid>
            
            <HStack spacing={4}>
              <Button
                as={Link}
                href="/api/docs"
                variant="outline"
                rightIcon={<Icon as={FiExternalLink} />}
                isExternal
              >
                API Documentation
              </Button>
              <Button
                as={Link}
                href="/health"
                variant="ghost"
                rightIcon={<Icon as={FiExternalLink} />}
                isExternal
              >
                API Status
              </Button>
            </HStack>
          </VStack>
        </Container>
      </Box>

      {/* CTA Section */}
      <Box bgGradient={bgGradient} py={20}>
        <Container maxW="4xl">
          <VStack spacing={8} textAlign="center">
            <Heading as="h2" size="xl">
              Ready to Get Started?
            </Heading>
            <Text fontSize="lg" color="gray.600">
              Start tracking and analyzing your redirects in seconds
            </Text>
            
            <HStack spacing={4}>
              <Button
                as={RouterLink}
                to="/track"
                size="lg"
                colorScheme="brand"
                rightIcon={<Icon as={FiArrowRight} />}
              >
                Track Your First URL
              </Button>
              <Button
                as={RouterLink}
                to="/register"
                size="lg"
                variant="outline"
                colorScheme="brand"
              >
                Create Account
              </Button>
            </HStack>
          </VStack>
        </Container>
      </Box>
    </Box>
  );
}
