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

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

export function RegisterPage() {
  return (
    <Container maxW="md">
      <VStack spacing={8}>
        <Box textAlign="center">
          <Heading as="h1" size="xl" mb={4}>
            Create Account
          </Heading>
          <Text color="gray.600">
            Get started with enhanced redirect tracking
          </Text>
          <Badge colorScheme="yellow" mt={2}>
            Registration UI coming in Phase 4
          </Badge>
        </Box>

        <Card w="full">
          <CardBody textAlign="center" py={8}>
            <Text mb={6} color="gray.600">
              The user registration system is fully implemented in the backend API. 
              The registration form UI will be completed in the next phase.
            </Text>
            
            <VStack spacing={4}>
              <Text fontSize="sm" fontWeight="medium">
                Account Benefits:
              </Text>
              <VStack fontSize="sm" color="gray.600">
                <Text>🚀 Higher rate limits (200/hour)</Text>
                <Text>💾 Saved tracking history</Text>
                <Text>📊 Analysis dashboards</Text>
                <Text>🏢 Organization management</Text>
              </VStack>
            </VStack>
          </CardBody>
        </Card>

        <VStack>
          <Button as={RouterLink} to="/track" colorScheme="brand">
            Try Anonymous Tracking
          </Button>
          <Text fontSize="sm" color="gray.600">
            or test the API directly at <Text as="span" fontFamily="mono">/api/v1/auth/register</Text>
          </Text>
        </VStack>
      </VStack>
    </Container>
  );
}
