import { Box, Group, Stack, Text, Title, useMantineTheme } from '@mantine/core';

interface ColorSwatchProps {
  colorName: string;
  shade: number;
  hex: string;
}

function ColorSwatch({ colorName, shade, hex }: ColorSwatchProps) {
  return (
    <Box>
      <Box
        style={{
          backgroundColor: hex,
          width: '100%',
          height: 50,
          borderRadius: 5,
          marginBottom: 5,
          border: '1px solid var(--mantine-color-brand-gray-3)',
        }}
      />
      <Text size="xs" fw={700}>
        {colorName}-{shade}
      </Text>
      <Text size="xs" c="dimmed">
        {hex}
      </Text>
    </Box>
  );
}

interface ColorGroupProps {
  title: string;
  colorName: string;
  description: string;
  colors: readonly string[];
}

function ColorGroup({ title, colorName, description, colors }: ColorGroupProps) {
  return (
    <Stack gap="md">
      <Box mb={10}>
        <Title order={3}>{title}</Title>
        <Text size="sm">{description}</Text>
      </Box>
      <Group grow>
        {colors.map((color, index) => (
          <ColorSwatch key={index} colorName={colorName} shade={index} hex={color} />
        ))}
      </Group>
    </Stack>
  );
}

export function ColorPalette() {
  const theme = useMantineTheme();

  return (
    <Stack gap="xl">
      <Title order={1}>Color Palette Documentation</Title>
      <Text>
        This component showcases all colors defined in our theme system. Use these colors
        consistently throughout the application for a cohesive design.
      </Text>

      <ColorGroup
        title="Brand Primary"
        colorName="brand-primary"
        description="Main brand color for primary actions, links, and brand identity elements."
        colors={theme.colors['brand-primary']}
      />

      <ColorGroup
        title="Brand Secondary"
        colorName="brand-secondary"
        description="Complementary color for secondary UI elements and visual hierarchy."
        colors={theme.colors['brand-secondary']}
      />

      <ColorGroup
        title="Brand Accent"
        colorName="brand-accent"
        description="Accent color for call-to-actions and highlighting important elements."
        colors={theme.colors['brand-accent']}
      />

      <ColorGroup
        title="Brand Gray"
        colorName="brand-gray"
        description="Neutral colors for text, backgrounds, borders, and non-emphasized UI elements."
        colors={theme.colors['brand-gray']}
      />

      <ColorGroup
        title="Success"
        colorName="success"
        description="Used for positive actions, success messages, and confirmations."
        colors={theme.colors.success}
      />

      <ColorGroup
        title="Warning"
        colorName="warning"
        description="Used for warnings and alerts that need attention but aren't critical."
        colors={theme.colors.warning}
      />

      <ColorGroup
        title="Error"
        colorName="error"
        description="Used for errors, destructive actions, and critical alerts."
        colors={theme.colors.error}
      />

      <Box my={20}>
        <Title order={2}>Semantic Color Usage</Title>
        <Text mb={10}>These are recommended usages for our color system:</Text>

        <Stack gap="xs">
          <Text>
            <b>Primary Buttons:</b> brand-primary-6
          </Text>
          <Text>
            <b>Secondary Buttons:</b> brand-secondary-6
          </Text>
          <Text>
            <b>Accent Buttons:</b> brand-accent-6
          </Text>
          <Text>
            <b>Text on Light Backgrounds:</b> brand-gray-7
          </Text>
          <Text>
            <b>Text on Dark Backgrounds:</b> brand-gray-0
          </Text>
          <Text>
            <b>Borders & Dividers:</b> brand-gray-3
          </Text>
          <Text>
            <b>Page Backgrounds:</b> brand-gray-0
          </Text>
          <Text>
            <b>Success States:</b> success-6
          </Text>
          <Text>
            <b>Warning States:</b> warning-6
          </Text>
          <Text>
            <b>Error States:</b> error-6
          </Text>
        </Stack>
      </Box>
    </Stack>
  );
}
