import { Box, Button, Card, Flex, Grid, Heading, Text } from '@radix-ui/themes';
import type { Route } from './+types/home';
import TablePlaceholder from '../components/home/TablePlaceholder';
import { useLayout } from '../providers/LayoutProvider';
import { useEnsureLoggedIn } from '../hooks/ensureLoggedIn';

// eslint-disable-next-line no-empty-pattern
export function meta({}: Route.MetaArgs) {
  return [{ title: 'Proxy Host Demo | YANPM' }, { name: 'description', content: 'Demo of the unified navigation paradigm.' }];
}

export default function ProxyHostDemo() {
  useEnsureLoggedIn();
  const { activeTab } = useLayout();
  return (
    <Box>
      <Heading size="7" mb="1">
        {activeTab}
      </Heading>
      <Text color="gray" mb="4" as="p">
        This is the {activeTab.toLowerCase()} page demo.
      </Text>

      <Grid columns={{ initial: '1', sm: '2', lg: '3' }} gap="4">
        <Card size="2">
          <Flex direction="column" gap="2">
            <Text size="2" weight="bold">
              Status Overview
            </Text>
            <Text size="2" color="gray">
              Everything is running smoothly in your {activeTab.toLowerCase()} section.
            </Text>
            <Button variant="surface" size="1" style={{ width: 'fit-content' }} mt="1">
              View Details
            </Button>
          </Flex>
        </Card>
        <Card size="2">
          <Flex direction="column" gap="2">
            <Text size="2" weight="bold">
              Recent Activity
            </Text>
            <Text size="2" color="gray">
              No recent changes detected in the last 24 hours.
            </Text>
            <Button variant="surface" size="1" style={{ width: 'fit-content' }} mt="1">
              Refresh
            </Button>
          </Flex>
        </Card>
        <Card size="2">
          <Flex direction="column" gap="2">
            <Text size="2" weight="bold">
              Quick Actions
            </Text>
            <Text size="2" color="gray">
              Common tasks related to {activeTab.toLowerCase()} are available here.
            </Text>
            <Button variant="solid" size="1" style={{ width: 'fit-content' }} mt="1">
              Get Started
            </Button>
          </Flex>
        </Card>
      </Grid>

      {activeTab === 'Proxy Hosts' && (
        <Box mt="6">
          <Card variant="surface">
            <TablePlaceholder />
          </Card>
        </Box>
      )}
    </Box>
  );
}