/**
 * Login 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 LoginPage() {
  return (
    <Container maxW="md">
      <VStack spacing={8}>
        <Box textAlign="center">
          <Heading as="h1" size="xl" mb={4}>
            Sign In
          </Heading>
          <Text color="gray.600">
            Access your redirect tracking dashboard
          </Text>
          <Badge colorScheme="yellow" mt={2}>
            Login UI coming in Phase 4
          </Badge>
        </Box>

        <Card w="full">
          <CardBody textAlign="center" py={8}>
            <Text mb={6} color="gray.600">
              The authentication system is fully implemented in the backend API. 
              The login form UI will be completed in the next phase.
            </Text>
            
            <VStack spacing={4}>
              <Text fontSize="sm" fontWeight="medium">
                Backend Features Ready:
              </Text>
              <VStack fontSize="sm" color="gray.600">
                <Text>✅ User registration and login</Text>
                <Text>✅ JWT token authentication</Text>
                <Text>✅ Argon2 password hashing</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/login</Text>
          </Text>
        </VStack>
      </VStack>
    </Container>
  );
}