/**
 * Footer Component for Redirect Intelligence v2
 * 
 * Site footer with links and attribution
 */

import React from 'react';
import {
  Box,
  Container,
  Flex,
  Text,
  Link,
  VStack,
  HStack,
  Divider,
  useColorModeValue,
  Badge,
} from '@chakra-ui/react';
import { ExternalLinkIcon } from '@chakra-ui/icons';

export function Footer() {
  const bg = useColorModeValue('white', 'gray.800');
  const borderColor = useColorModeValue('gray.200', 'gray.700');
  const textColor = useColorModeValue('gray.600', 'gray.400');

  return (
    <Box
      bg={bg}
      borderTop="1px"
      borderColor={borderColor}
      mt="auto"
    >
      <Container maxW="7xl" py={8}>
        <VStack spacing={6}>
          {/* Main footer content */}
          <Flex
            direction={{ base: 'column', md: 'row' }}
            justify="space-between"
            align={{ base: 'center', md: 'flex-start' }}
            w="full"
            gap={8}
          >
            {/* Brand and description */}
            <VStack align={{ base: 'center', md: 'flex-start' }} spacing={2} maxW="md">
              <HStack>
                <Text fontSize="lg" fontWeight="bold" color={useColorModeValue('brand.600', 'brand.400')}>
                  🔗 Redirect Intelligence
                </Text>
                <Badge colorScheme="brand" variant="subtle">v2</Badge>
              </HStack>
              <Text fontSize="sm" color={textColor} textAlign={{ base: 'center', md: 'left' }}>
                Comprehensive redirect tracking and analysis platform with SSL, SEO, and security insights.
              </Text>
            </VStack>

            {/* Links */}
            <HStack spacing={8} align="flex-start">
              <VStack align="flex-start" spacing={2}>
                <Text fontSize="sm" fontWeight="semibold">
                  Product
                </Text>
                <Link href="/" fontSize="sm" color={textColor} _hover={{ color: 'brand.500' }}>
                  Home
                </Link>
                <Link href="/track" fontSize="sm" color={textColor} _hover={{ color: 'brand.500' }}>
                  Track URL
                </Link>
                <Link href="/analysis" fontSize="sm" color={textColor} _hover={{ color: 'brand.500' }}>
                  Analysis
                </Link>
              </VStack>

              <VStack align="flex-start" spacing={2}>
                <Text fontSize="sm" fontWeight="semibold">
                  Developers
                </Text>
                <Link href="/api/docs" fontSize="sm" color={textColor} _hover={{ color: 'brand.500' }} isExternal>
                  API Documentation
                  <ExternalLinkIcon mx="2px" />
                </Link>
                <Link href="/health" fontSize="sm" color={textColor} _hover={{ color: 'brand.500' }} isExternal>
                  API Health
                  <ExternalLinkIcon mx="2px" />
                </Link>
              </VStack>

              <VStack align="flex-start" spacing={2}>
                <Text fontSize="sm" fontWeight="semibold">
                  Features
                </Text>
                <Text fontSize="sm" color={textColor}>
                  SSL Analysis
                </Text>
                <Text fontSize="sm" color={textColor}>
                  SEO Optimization
                </Text>
                <Text fontSize="sm" color={textColor}>
                  Security Scanning
                </Text>
              </VStack>
            </HStack>
          </Flex>

          <Divider />

          {/* Bottom footer */}
          <Flex
            direction={{ base: 'column', md: 'row' }}
            justify="space-between"
            align="center"
            w="full"
            gap={4}
          >
            <Text fontSize="sm" color={textColor}>
              © 2024 Redirect Intelligence v2. Built with React, Chakra UI, and TypeScript.
            </Text>
            
            <HStack spacing={6}>
              <Text fontSize="sm" color={textColor}>
                🚀 Phase 4 Complete
              </Text>
              <Badge colorScheme="green" variant="subtle">
                Production Ready
              </Badge>
            </HStack>
          </Flex>
        </VStack>
      </Container>
    </Box>
  );
}
