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

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

export function DashboardPage() {
  const { isAuthenticated } = useAuth();

  if (!isAuthenticated) {
    return (
      <Container maxW="md">
        <VStack spacing={6}>
          <Alert status="warning">
            <AlertIcon />
            Please sign in to access your dashboard
          </Alert>
          <Button as={RouterLink} to="/login" colorScheme="brand">
            Sign In
          </Button>
        </VStack>
      </Container>
    );
  }

  return (
    <Container maxW="6xl">
      <VStack spacing={8}>
        <Box textAlign="center">
          <Heading as="h1" size="xl" mb={4}>
            Dashboard
          </Heading>
          <Text fontSize="lg" color="gray.600">
            Your redirect tracking and analysis overview
          </Text>
          <Badge colorScheme="yellow" mt={2}>
            Dashboard UI coming in Phase 4 Complete
          </Badge>
        </Box>

        <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={6} w="full">
          <Card>
            <CardBody textAlign="center">
              <Heading as="h3" size="md" mb={4}>
                📊 Recent Checks
              </Heading>
              <Text color="gray.600" mb={4}>
                View your latest redirect tracking results
              </Text>
              <Button size="sm" variant="outline" disabled>
                Coming Soon
              </Button>
            </CardBody>
          </Card>

          <Card>
            <CardBody textAlign="center">
              <Heading as="h3" size="md" mb={4}>
                📈 Analytics
              </Heading>
              <Text color="gray.600" mb={4}>
                Charts and insights from your tracking data
              </Text>
              <Button size="sm" variant="outline" disabled>
                Coming Soon
              </Button>
            </CardBody>
          </Card>

          <Card>
            <CardBody textAlign="center">
              <Heading as="h3" size="md" mb={4}>
                🏢 Organizations
              </Heading>
              <Text color="gray.600" mb={4}>
                Manage your teams and projects
              </Text>
              <Button size="sm" variant="outline" disabled>
                Coming Soon
              </Button>
            </CardBody>
          </Card>

          <Card>
            <CardBody textAlign="center">
              <Heading as="h3" size="md" mb={4}>
                ⚙️ Settings
              </Heading>
              <Text color="gray.600" mb={4}>
                Configure your account and preferences
              </Text>
              <Button size="sm" variant="outline" disabled>
                Coming Soon
              </Button>
            </CardBody>
          </Card>

          <Card>
            <CardBody textAlign="center">
              <Heading as="h3" size="md" mb={4}>
                🔑 API Keys
              </Heading>
              <Text color="gray.600" mb={4}>
                Manage programmatic access tokens
              </Text>
              <Button size="sm" variant="outline" disabled>
                Coming Soon
              </Button>
            </CardBody>
          </Card>

          <Card>
            <CardBody textAlign="center">
              <Heading as="h3" size="md" mb={4}>
                📋 Projects
              </Heading>
              <Text color="gray.600" mb={4}>
                Organize your tracking checks
              </Text>
              <Button size="sm" variant="outline" disabled>
                Coming Soon
              </Button>
            </CardBody>
          </Card>
        </SimpleGrid>

        <Box textAlign="center">
          <Text mb={4}>
            All dashboard features are being built and will be available soon:
          </Text>
          <Button as={RouterLink} to="/track" colorScheme="brand">
            Start Tracking URLs
          </Button>
        </Box>
      </VStack>
    </Container>
  );
}