import React from 'react';
import { Container } from '@/ui/Container';
import { Grid } from '@/ui/Grid';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Link } from '@/ui/Link';
import { Surface } from '@/ui/Surface';
import { BrandMark } from '@/ui/BrandMark';
import { Box } from '@/ui/Box';

interface AppFooterProps {
  children?: React.ReactNode;
}

/**
 * AppFooter is the bottom section of the application.
 * It follows the "Telemetry Workspace" structure: matte surface, thin separators, minimal.
 * Aligned with ControlBar (Header) design.
 */
export function AppFooter({ children }: AppFooterProps) {
  return (
    <Surface 
      as="footer" 
      variant="muted" 
      paddingY={8} 
      marginTop="auto"
      borderTop={true}
    >
      <Container size="xl">
        {children ? (
          children
        ) : (
          <Grid cols={{ base: 1, md: 4 }} gap={12}>
            <Stack gap={4}>
              <Stack direction="row" align="center" gap={4}>
                <BrandMark />
                <Box display={{ base: 'none', sm: 'flex' }} alignItems="center" gap={2} borderLeft borderColor="[#23272B]" pl={4}>
                  <Box w="4px" h="4px" rounded="full" bg="primary-accent" animate="pulse" />
                  <Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.1em">
                    INFRASTRUCTURE
                  </Text>
                </Box>
              </Stack>
              <Text size="sm" variant="low" maxWidth="xs">
                The ultimate companion for sim racers. Track your performance, manage your team, and compete in leagues.
              </Text>
            </Stack>
            
            <Stack gap={4}>
              <Text size="xs" weight="bold" variant="high" uppercase letterSpacing="wider">Platform</Text>
              <Stack gap={2}>
                <Link href="/leagues" variant="secondary">Leagues</Link>
                <Link href="/teams" variant="secondary">Teams</Link>
                <Link href="/leaderboards" variant="secondary">Leaderboards</Link>
              </Stack>
            </Stack>
            
            <Stack gap={4}>
              <Text size="xs" weight="bold" variant="high" uppercase letterSpacing="wider">Support</Text>
              <Stack gap={2}>
                <Link href="/docs" variant="secondary">Documentation</Link>
                <Link href="/status" variant="secondary">System Status</Link>
                <Link href="/contact" variant="secondary">Contact Us</Link>
              </Stack>
            </Stack>
            
            <Stack gap={4}>
              <Text size="xs" weight="bold" variant="high" uppercase letterSpacing="wider">Legal</Text>
              <Stack gap={2}>
                <Link href="/privacy" variant="secondary">Privacy Policy</Link>
                <Link href="/terms" variant="secondary">Terms of Service</Link>
              </Stack>
            </Stack>
          </Grid>
        )}
        
        <Box borderTop marginTop={8} paddingTop={6} display="flex" justifyContent="between" alignItems="center">
          <Text size="xs" variant="low">
            © {new Date().getFullYear()} GridPilot. All rights reserved.
          </Text>
          <Stack direction="row" gap={4}>
            <Text size="xs" variant="low" font="mono">v1.0.0-stable</Text>
            <Box w="4px" h="4px" rounded="full" bg="success-green" />
          </Stack>
        </Box>
      </Container>
    </Surface>
  );
}