/**
 * Analysis Page - Placeholder for Phase 4
 */

import React from 'react';
import {
  Box,
  Heading,
  Text,
  Container,
  VStack,
  Badge,
  Card,
  CardBody,
  SimpleGrid,
  Button,
} from '@chakra-ui/react';
import { Link as RouterLink } from 'react-router-dom';

export function AnalysisPage() {
  return (
    <Container maxW="6xl">
      <VStack spacing={8}>
        <Box textAlign="center">
          <Heading as="h1" size="xl" mb={4}>
            URL Analysis Tools
          </Heading>
          <Text fontSize="lg" color="gray.600">
            Comprehensive SSL, SEO, and Security analysis for any URL
          </Text>
          <Badge colorScheme="yellow" mt={2}>
            Coming in Phase 4 Complete
          </Badge>
        </Box>

        <SimpleGrid columns={{ base: 1, md: 3 }} spacing={6} w="full">
          <Card>
            <CardBody textAlign="center">
              <Heading as="h3" size="md" mb={4}>
                🔒 SSL Analysis
              </Heading>
              <Text color="gray.600" mb={4}>
                Certificate validation, security scoring, and expiry tracking
              </Text>
              <Button size="sm" variant="outline" disabled>
                Coming Soon
              </Button>
            </CardBody>
          </Card>

          <Card>
            <CardBody textAlign="center">
              <Heading as="h3" size="md" mb={4}>
                🔍 SEO Analysis
              </Heading>
              <Text color="gray.600" mb={4}>
                Meta tags, robots.txt, and optimization recommendations
              </Text>
              <Button size="sm" variant="outline" disabled>
                Coming Soon
              </Button>
            </CardBody>
          </Card>

          <Card>
            <CardBody textAlign="center">
              <Heading as="h3" size="md" mb={4}>
                🛡️ Security Scan
              </Heading>
              <Text color="gray.600" mb={4}>
                Vulnerability detection and security header analysis
              </Text>
              <Button size="sm" variant="outline" disabled>
                Coming Soon
              </Button>
            </CardBody>
          </Card>
        </SimpleGrid>

        <Box textAlign="center">
          <Text mb={4}>
            In the meantime, you can test analysis through URL tracking:
          </Text>
          <Button as={RouterLink} to="/track" colorScheme="brand">
            Try URL Tracking with Analysis
          </Button>
        </Box>
      </VStack>
    </Container>
  );
}
