Chakra UI Beispiele

// Chakra UI Fundamentals Examples
// Install required packages:
// npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion @chakra-ui/icons

import {
  Box,
  Button,
  Card,
  CardBody,
  CardFooter,
  CardHeader,
  Container,
  Divider,
  Flex,
  Grid,
  Heading,
  Icon,
  Image,
  Input,
  InputGroup,
  InputLeftElement,
  InputRightElement,
  Link,
  List,
  ListIcon,
  ListItem,
  Stack,
  Tag,
  Text,
  Textarea,
  useColorMode,
  useColorModeValue,
  VStack,
  HStack,
  Spacer,
  Avatar,
  Badge,
  Checkbox,
  Switch,
  Slider,
  SliderTrack,
  SliderFilledTrack,
  SliderThumb,
  Progress,
  ProgressLabel,
  Center,
  StackDivider,
  Wrap,
  WrapItem,
} from '@chakra-ui/react'
import {
  SearchIcon,
  PhoneIcon,
  EmailIcon,
  ViewIcon,
  EditIcon,
  DeleteIcon,
  CheckCircleIcon,
  WarningIcon,
  InfoIcon,
  StarIcon,
  HamburgerIcon,
  CloseIcon,
  ChevronRightIcon,
  ChevronLeftIcon,
  AddIcon,
  MinusIcon,
} from '@chakra-ui/icons'

// 1. Button Examples
export function ButtonExamples() {
  return (
    <VStack align="start" spacing={6}>
      <Box>
        <Heading size="md" mb={4}>Button Variants</Heading>
        <Wrap spacing={4}>
          <Button colorScheme="blue">Primary</Button>
          <Button colorScheme="gray">Secondary</Button>
          <Button colorScheme="green">Success</Button>
          <Button colorScheme="red">Danger</Button>
          <Button colorScheme="yellow">Warning</Button>
          <Button colorScheme="purple">Purple</Button>
        </Wrap>
      </Box>

      <Box>
        <Heading size="md" mb={4}>Button Variants</Heading>
        <Wrap spacing={4}>
          <Button variant="solid">Solid</Button>
          <Button variant="outline">Outline</Button>
          <Button variant="ghost">Ghost</Button>
          <Button variant="link">Link</Button>
          <Button variant="unstyled">Unstyled</Button>
        </Wrap>
      </Box>

      <Box>
        <Heading size="md" mb={4}>Button Sizes</Heading>
        <Wrap spacing={4} align="center">
          <Button size="xs">Extra Small</Button>
          <Button size="sm">Small</Button>
          <Button size="md">Medium</Button>
          <Button size="lg">Large</Button>
        </Wrap>
      </Box>

      <Box>
        <Heading size="md" mb={4}>Button States</Heading>
        <Wrap spacing={4}>
          <Button isLoading loadingText="Submitting">Loading</Button>
          <Button isDisabled>Disabled</Button>
          <Button leftIcon={<AddIcon />}>With Left Icon</Button>
          <Button rightIcon={<ChevronRightIcon />}>With Right Icon</Button>
          <Button leftIcon={<CheckCircleIcon />} rightIcon={<ChevronRightIcon />}>
            Both Icons
          </Button>
        </Wrap>
      </Box>
    </VStack>
  )
}

// 2. Card Examples
export function CardExamples() {
  return (
    <VStack spacing={6}>
      <Heading size="lg">Card Components</Heading>

      <Grid templateColumns={{ base: "1fr", md: "repeat(3, 1fr)" }} gap={6}>
        {/* Basic Card */}
        <Card maxW="sm">
          <CardHeader>
            <Heading size="md"> Basic Card</Heading>
          </CardHeader>
          <CardBody>
            <Text>This is a basic card component with header, body, and footer.</Text>
          </CardBody>
          <CardFooter>
            <Button colorScheme="blue">Learn More</Button>
          </CardFooter>
        </Card>

        {/* Card with Image */}
        <Card maxW="sm">
          <CardBody>
            <Image
              src="https://images.unsplash.com/photo-1555041469-a586e61f9488"
              alt="Green double couch with wooden legs"
              borderRadius="lg"
            />
            <Stack mt="6" spacing="3">
              <Heading size="md">Living Room</Heading>
              <Text>
                This card has an image and uses a stack for content organization.
              </Text>
              <Text color="blue.600" fontSize="2xl">
                $450
              </Text>
            </Stack>
          </CardBody>
          <Divider />
          <CardFooter>
            <ButtonGroup spacing="2">
              <Button variant="solid" colorScheme="blue">
                Buy now
              </Button>
              <Button variant="ghost" colorScheme="blue">
                Add to cart
              </Button>
            </ButtonGroup>
          </CardFooter>
        </Card>

        {/* Profile Card */}
        <Card maxW="sm">
          <CardHeader>
            <Flex spacing="4">
              <Flex flex="1" gap="4" alignItems="center" flexWrap="wrap">
                <Avatar name="Segun Adebayo" src="https://bit.ly/sage-adebayo" />
                <Box>
                  <Heading size="sm">Segun Adebayo</Heading>
                  <Text>Creator, Chakra UI</Text>
                </Box>
              </Flex>
            </Flex>
          </CardHeader>
          <CardBody>
            <Text>
              With Chakra UI, you can build accessible React applications with speed.
            </Text>
          </CardBody>
          <CardFooter
            justify="space-between"
            flexWrap="wrap"
            sx={{
              "& > button": {
                minW: "136px",
              },
            }}
          >
            <Button flex="1" variant="ghost" leftIcon={<PhoneIcon />}>
              Call
            </Button>
            <Button flex="1" variant="ghost" leftIcon={<EmailIcon />}>
              Email
            </Button>
          </CardFooter>
        </Card>
      </Grid>
    </VStack>
  )
}

// 3. Form Examples
export function FormExamples() {
  return (
    <VStack spacing={6} maxW="md" w="full">
      <Heading size="lg">Form Components</Heading>

      <Card w="full">
        <CardBody>
          <VStack spacing={4}>
            <Box w="full">
              <Text mb={2}>Basic Input</Text>
              <Input placeholder="Enter your name" />
            </Box>

            <Box w="full">
              <Text mb={2}>Input with Left Element</Text>
              <InputGroup>
                <InputLeftElement pointerEvents="none">
                  <EmailIcon color="gray.300" />
                </InputLeftElement>
                <Input type="email" placeholder="Enter your email" />
              </InputGroup>
            </Box>

            <Box w="full">
              <Text mb={2}>Input with Right Element</Text>
              <InputGroup size="md">
                <Input
                  pr="4.5rem"
                  type="password"
                  placeholder="Enter password"
                />
                <InputRightElement width="4.5rem">
                  <Button h="1.75rem" size="sm">
                    Show
                  </Button>
                </InputRightElement>
              </InputGroup>
            </Box>

            <Box w="full">
              <Text mb={2}>Textarea</Text>
              <Textarea placeholder="Enter your message" rows={4} />
            </Box>

            <Box w="full">
              <Text mb={2}>Checkbox Group</Text>
              <VStack align="start" spacing={2}>
                <Checkbox>Enable notifications</Checkbox>
                <Checkbox>Enable dark mode</Checkbox>
                <Checkbox>Auto-save drafts</Checkbox>
              </VStack>
            </Box>

            <Box w="full">
              <Text mb={2}>Switch</Text>
              <VStack align="start" spacing={2}>
                <Switch defaultChecked>Feature 1</Switch>
                <Switch>Feature 2</Switch>
                <Switch isDisabled>Feature 3 (Disabled)</Switch>
              </VStack>
            </Box>

            <Button colorScheme="blue" w="full">
              Submit
            </Button>
          </VStack>
        </CardBody>
      </Card>
    </VStack>
  )
}

// 4. Badge and Tag Examples
export function BadgeTagExamples() {
  return (
    <VStack spacing={6} align="start">
      <Heading size="lg">Badges & Tags</Heading>

      <Box>
        <Heading size="md" mb={4}>Badges</Heading>
        <Wrap spacing={4}>
          <Badge>Default</Badge>
          <Badge colorScheme="red">Error</Badge>
          <Badge colorScheme="green">Success</Badge>
          <Badge colorScheme="yellow">Warning</Badge>
          <Badge colorScheme="blue">Info</Badge>
          <Badge colorScheme="purple">Purple</Badge>
        </Wrap>
      </Box>

      <Box>
        <Heading size="md" mb={4}>Badge Variants</Heading>
        <Wrap spacing={4}>
          <Badge variant="solid">Solid</Badge>
          <Badge variant="subtle">Subtle</Badge>
          <Badge variant="outline">Outline</Badge>
        </Wrap>
      </Box>

      <Box>
        <Heading size="md" mb={4}>Tags</Heading>
        <Wrap spacing={4}>
          <Tag size="sm" colorScheme="blue" variant="solid">
            React
          </Tag>
          <Tag size="md" colorScheme="green" variant="subtle">
            TypeScript
          </Tag>
          <Tag size="lg" colorScheme="purple" variant="outline">
            Chakra UI
          </Tag>
          <Tag size="sm" colorScheme="orange" variant="solid" borderRadius="full">
            JavaScript
          </Tag>
          <Tag size="md" colorScheme="cyan" variant="subtle" borderRadius="full">
            CSS
          </Tag>
        </Wrap>
      </Box>

      <Box>
        <Heading size="md" mb={4}>Tags with Icons</Heading>
        <Wrap spacing={4}>
          <Tag size="md" colorScheme="red" variant="solid">
            <TagLabel>Hot</TagLabel>
            <TagCloseButton />
          </Tag>
          <Tag size="md" colorScheme="green" variant="solid">
            <TagLeftIcon boxSize="12px" as={AddIcon} />
            <TagLabel>New</TagLabel>
          </Tag>
          <Tag size="md" colorScheme="blue" variant="solid">
            <TagLabel>Featured</TagLabel>
            <TagRightIcon as={StarIcon} />
          </Tag>
        </Wrap>
      </Box>
    </VStack>
  )
}

// 5. Avatar Examples
export function AvatarExamples() {
  return (
    <VStack spacing={6} align="start">
      <Heading size="lg">Avatar Components</Heading>

      <Box>
        <Heading size="md" mb={4}>Basic Avatars</Heading>
        <Wrap spacing={6} align="center">
          <Avatar name="Dan Abrahmov" src="https://bit.ly/dan-abramov" />
          <Avatar name="Christian Nwamba" src="https://bit.ly/code-bean" />
          <Avatar name="Segun Adebayo" src="https://bit.ly/sage-adebayo" />
          <Avatar name="Prosper Otemuyiwa" src="https://bit.ly/prosper-baba" />
        </Wrap>
      </Box>

      <Box>
        <Heading size="md" mb={4}>Avatar Sizes</Heading>
        <Wrap spacing={4} align="center">
          <Avatar size="xs" name="John Doe" src="https://bit.ly/dan-abramov" />
          <Avatar size="sm" name="John Doe" src="https://bit.ly/dan-abramov" />
          <Avatar size="md" name="John Doe" src="https://bit.ly/dan-abramov" />
          <Avatar size="lg" name="John Doe" src="https://bit.ly/dan-abramov" />
          <Avatar size="xl" name="John Doe" src="https://bit.ly/dan-abramov" />
          <Avatar size="2xl" name="John Doe" src="https://bit.ly/dan-abramov" />
        </Wrap>
      </Box>

      <Box>
        <Heading size="md" mb={4}>Fallback Avatars</Heading>
        <Wrap spacing={6} align="center">
          <Avatar name="John Doe" />
          <Avatar name="Jane Smith" bg="teal.500" />
          <Avatar name="Bob Johnson" bg="purple.500" color="white" />
          <Avatar name="Alice Brown" bg="orange.400" />
        </Wrap>
      </Box>

      <Box>
        <Heading size="md" mb={4}>Avatar with Badges</Heading>
        <Wrap spacing={6} align="center">
          <Box position="relative">
            <Avatar name="John Doe" src="https://bit.ly/dan-abramov" />
            <Badge
              position="absolute"
              bottom={0}
              right={0}
              borderRadius="full"
              w={4}
              h={4}
              bg="green.400"
              border="2px solid white"
            />
          </Box>
          <Box position="relative">
            <Avatar name="Jane Smith" src="https://bit.ly/code-bean" />
            <Badge
              position="absolute"
              bottom={0}
              right={0}
              borderRadius="full"
              w={4}
              h={4}
              bg="red.400"
              border="2px solid white"
            />
          </Box>
        </Wrap>
      </Box>
    </VStack>
  )
}

// 6. Progress Examples
export function ProgressExamples() {
  return (
    <VStack spacing={6} align="start" w="full">
      <Heading size="lg">Progress Components</Heading>

      <Box w="full">
        <Heading size="md" mb={4}>Basic Progress</Heading>
        <VStack spacing={4} w="full">
          <Progress value={30} />
          <Progress value={50} colorScheme="green" />
          <Progress value={70} colorScheme="red" />
          <Progress value={90} colorScheme="yellow" />
        </VStack>
      </Box>

      <Box w="full">
        <Heading size="md" mb={4}>Progress with Sizes</Heading>
        <VStack spacing={4} w="full">
          <Progress value={40} size="xs" />
          <Progress value={60} size="sm" />
          <Progress value={80} size="md" />
          <Progress value={90} size="lg" />
        </VStack>
      </Box>

      <Box w="full">
        <Heading size="md" mb={4}>Progress with Stripes</Heading>
        <VStack spacing={4} w="full">
          <Progress value={45} hasStripe />
          <Progress value={65} hasStripe isAnimated colorScheme="green" />
          <Progress value={85} hasStripe colorScheme="red" />
        </VStack>
      </Box>

      <Box w="full">
        <Heading size="md" mb={4}>Circular Progress</Heading>
        <Wrap spacing={8} justify="center">
          <CircularProgress value={30} color="blue.400">
            <CircularProgressLabel>30%</CircularProgressLabel>
          </CircularProgress>
          <CircularProgress value={60} color="green.400">
            <CircularProgressLabel>60%</CircularProgressLabel>
          </CircularProgress>
          <CircularProgress value={90} color="red.400">
            <CircularProgressLabel>90%</CircularProgressLabel>
          </CircularProgress>
        </Wrap>
      </Box>
    </VStack>
  )
}

// 7. Slider Examples
export function SliderExamples() {
  return (
    <VStack spacing={6} align="start" w="full">
      <Heading size="lg">Slider Components</Heading>

      <Box w="full">
        <Heading size="md" mb={4}>Basic Sliders</Heading>
        <VStack spacing={6} w="full">
          <Slider defaultValue={40}>
            <SliderTrack>
              <SliderFilledTrack />
            </SliderTrack>
            <SliderThumb />
          </Slider>

          <Slider defaultValue={60} colorScheme="red">
            <SliderTrack>
              <SliderFilledTrack />
            </SliderTrack>
            <SliderThumb />
          </Slider>

          <Slider defaultValue={80} colorScheme="green">
            <SliderTrack>
              <SliderFilledTrack />
            </SliderTrack>
            <SliderThumb />
          </Slider>
        </VStack>
      </Box>

      <Box w="full">
        <Heading size="md" mb={4}>Slider with Marks</Heading>
        <VStack spacing={6} w="full">
          <Slider defaultValue={30} min={0} max={100} step={10}>
            <SliderMark value={25} mt="1" ml="-2.5" fontSize="sm">
              25%
            </SliderMark>
            <SliderMark value={50} mt="1" ml="-2.5" fontSize="sm">
              50%
            </SliderMark>
            <SliderMark value={75} mt="1" ml="-2.5" fontSize="sm">
              75%
            </SliderMark>
            <SliderTrack>
              <SliderFilledTrack />
            </SliderTrack>
            <SliderThumb />
          </Slider>
        </VStack>
      </Box>

      <Box w="full">
        <Heading size="md" mb={4}>Range Slider</Heading>
        <Slider defaultValue={[30, 60]}>
          <SliderTrack>
            <SliderFilledTrack />
          </SliderTrack>
          <SliderThumb index={0} />
          <SliderThumb index={1} />
        </Slider>
      </Box>
    </VStack>
  )
}

// 8. Layout Examples
export function LayoutExamples() {
  return (
    <VStack spacing={6} align="start">
      <Heading size="lg">Layout Components</Heading>

      <Box>
        <Heading size="md" mb={4}>Stack Components</Heading>
        <VStack
          spacing={4}
          align="stretch"
          p={4}
          borderWidth={1}
          borderRadius="md"
        >
          <Box bg="blue.100" p={4} rounded="md">
            <Text>Item 1 in VStack</Text>
          </Box>
          <Box bg="green.100" p={4} rounded="md">
            <Text>Item 2 in VStack</Text>
          </Box>
          <Box bg="purple.100" p={4} rounded="md">
            <Text>Item 3 in VStack</Text>
          </Box>
        </VStack>

        <Divider my={6} />

        <HStack
          spacing={4}
          p={4}
          borderWidth={1}
          borderRadius="md"
          justify="space-between"
        >
          <Box bg="blue.100" p={4} rounded="md" flex="1">
            <Text>Item 1 in HStack</Text>
          </Box>
          <Box bg="green.100" p={4} rounded="md" flex="1">
            <Text>Item 2 in HStack</Text>
          </Box>
          <Box bg="purple.100" p={4} rounded="md" flex="1">
            <Text>Item 3 in HStack</Text>
          </Box>
        </HStack>
      </Box>

      <Box w="full">
        <Heading size="md" mb={4}>Grid Layout</Heading>
        <Grid templateColumns="repeat(3, 1fr)" gap={6}>
          <Box bg="blue.100" p={4} rounded="md" height="100px">
            <Center h="full">
              <Text>Grid Item 1</Text>
            </Center>
          </Box>
          <Box bg="green.100" p={4} rounded="md" height="100px">
            <Center h="full">
              <Text>Grid Item 2</Text>
            </Center>
          </Box>
          <Box bg="purple.100" p={4} rounded="md" height="100px">
            <Center h="full">
              <Text>Grid Item 3</Text>
            </Center>
          </Box>
          <Box bg="yellow.100" p={4} rounded="md" height="100px" gridColumn="span 2">
            <Center h="full">
              <Text>Grid Item 4 (Span 2)</Text>
            </Center>
          </Box>
          <Box bg="orange.100" p={4} rounded="md" height="100px">
            <Center h="full">
              <Text>Grid Item 5</Text>
            </Center>
          </Box>
        </Grid>
      </Box>

      <Box w="full">
        <Heading size="md" mb={4}>Flex Layout</Heading>
        <Flex h="200px" gap={4}>
          <Box bg="blue.100" p={4} rounded="md" flex="1">
            <Text>Flex Item 1</Text>
          </Box>
          <Box bg="green.100" p={4} rounded="md" flex="2">
            <Text>Flex Item 2 (flex: 2)</Text>
          </Box>
          <Box bg="purple.100" p={4} rounded="md" flex="1">
            <Text>Flex Item 3</Text>
          </Box>
        </Flex>
      </Box>
    </VStack>
  )
}

// 9. List Components
export function ListExamples() {
  return (
    <VStack spacing={6} align="start">
      <Heading size="lg">List Components</Heading>

      <Grid templateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }} gap={8}>
        <Box>
          <Heading size="md" mb={4}>Unordered List</Heading>
          <List spacing={3}>
            <ListItem>
              <ListIcon as={CheckCircleIcon} color="green.500" />
              Lorem ipsum dolor sit amet, consectetur
            </ListItem>
            <ListItem>
              <ListIcon as={WarningIcon} color="yellow.500" />
              Adipisicing elit, sed do eiusmod
            </ListItem>
            <ListItem>
              <ListIcon as={InfoIcon} color="blue.500" />
              Tempor incididunt ut labore et dolore
            </ListItem>
          </List>
        </Box>

        <Box>
          <Heading size="md" mb={4}>Styled List</Heading>
          <List spacing={3}>
            <ListItem
              bg="gray.100"
              p={3}
              borderRadius="md"
              borderLeft="4px"
              borderColor="blue.500"
            >
              <Text fontWeight="bold">Feature 1</Text>
              <Text fontSize="sm" color="gray.600">
                Detailed description of the first feature
              </Text>
            </ListItem>
            <ListItem
              bg="gray.100"
              p={3}
              borderRadius="md"
              borderLeft="4px"
              borderColor="green.500"
            >
              <Text fontWeight="bold">Feature 2</Text>
              <Text fontSize="sm" color="gray.600">
                Detailed description of the second feature
              </Text>
            </ListItem>
            <ListItem
              bg="gray.100"
              p={3}
              borderRadius="md"
              borderLeft="4px"
              borderColor="purple.500"
            >
              <Text fontWeight="bold">Feature 3</Text>
              <Text fontSize="sm" color="gray.600">
                Detailed description of the third feature
              </Text>
            </ListItem>
          </List>
        </Box>
      </Grid>
    </VStack>
  )
}

// Main showcase component
export function ChakraUiShowcase() {
  const { colorMode, toggleColorMode } = useColorMode()
  const bgColor = useColorModeValue("gray.50", "gray.900")
  const cardBg = useColorModeValue("white", "gray.800")
  const textColor = useColorModeValue("gray.900", "gray.100")

  return (
    <Box bg={bgColor} minH="100vh" py={8}>
      <Container maxW="container.xl">
        <VStack spacing={12}>
          {/* Header */}
          <Box textAlign="center">
            <Heading size="4xl" mb={4} color={textColor}>
              Chakra UI Components
            </Heading>
            <Text fontSize="xl" color="gray.600" maxW="2xl" mx="auto">
              Simple, modular and accessible component library that gives you the
              building blocks you need to build your React applications
            </Text>
            <Button mt={6} onClick={toggleColorMode}>
              {colorMode === "light" ? "🌙 Dark Mode" : "☀️ Light Mode"}
            </Button>
          </Box>

          <Divider />

          {/* Component Examples */}
          <VStack spacing={12} align="stretch" w="full">
            <Box bg={cardBg} p={8} borderRadius="lg" boxShadow="md">
              <ButtonExamples />
            </Box>

            <Box bg={cardBg} p={8} borderRadius="lg" boxShadow="md">
              <CardExamples />
            </Box>

            <Box bg={cardBg} p={8} borderRadius="lg" boxShadow="md">
              <FormExamples />
            </Box>

            <Box bg={cardBg} p={8} borderRadius="lg" boxShadow="md">
              <BadgeTagExamples />
            </Box>

            <Box bg={cardBg} p={8} borderRadius="lg" boxShadow="md">
              <AvatarExamples />
            </Box>

            <Box bg={cardBg} p={8} borderRadius="lg" boxShadow="md">
              <ProgressExamples />
            </Box>

            <Box bg={cardBg} p={8} borderRadius="lg" boxShadow="md">
              <SliderExamples />
            </Box>

            <Box bg={cardBg} p={8} borderRadius="lg" boxShadow="md">
              <LayoutExamples />
            </Box>

            <Box bg={cardBg} p={8} borderRadius="lg" boxShadow="md">
              <ListExamples />
            </Box>
          </VStack>

          <Divider />

          {/* Footer */}
          <Box textAlign="center">
            <Text fontSize="md" color="gray.600">
              Built with ❤️ using Chakra UI
            </Text>
            <Text fontSize="sm" color="gray.500" mt={2}>
              All components are responsive and accessible by default
            </Text>
          </Box>
        </VStack>
      </Container>
    </Box>
  )
}

export {
  ButtonExamples,
  CardExamples,
  FormExamples,
  BadgeTagExamples,
  AvatarExamples,
  ProgressExamples,
  SliderExamples,
  LayoutExamples,
  ListExamples,
  ChakraUiShowcase
}

// Chakra UI Responsive Design Examples
// Advanced responsive patterns and theme customization

import {
  Box,
  Button,
  Container,
  Flex,
  Grid,
  Heading,
  HStack,
  Icon,
  Image,
  Link,
  Stack,
  Text,
  useBreakpointValue,
  useColorMode,
  useColorModeValue,
  VStack,
  SimpleGrid,
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  IconButton,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  Drawer,
  DrawerBody,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
  DrawerContent,
  DrawerCloseButton,
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
  AccordionIcon,
  Tabs,
  TabList,
  TabPanels,
  Tab,
  TabPanel,
  Stat,
  StatLabel,
  StatNumber,
  StatHelpText,
  StatArrow,
  StatGroup,
  Card,
  CardBody,
  Divider,
  Badge,
  Avatar,
  Alert,
  AlertIcon,
  AlertTitle,
  AlertDescription,
  useToast,
  extendTheme,
  ChakraProvider,
  CSSReset,
  ThemeProvider,
} from '@chakra-ui/react'
import {
  HamburgerIcon,
  CloseIcon,
  ChevronDownIcon,
  SearchIcon,
  PhoneIcon,
  EmailIcon,
  InfoIcon,
  CheckCircleIcon,
  WarningIcon,
  MoonIcon,
  SunIcon,
} from '@chakra-ui/icons'

// 1. Custom Theme Configuration
const customTheme = extendTheme({
  colors: {
    brand: {
      50: '#E3F2FD',
      100: '#BBDEFB',
      200: '#90CAF9',
      300: '#64B5F6',
      400: '#42A5F5',
      500: '#2196F3',  // Primary
      600: '#1E88E5',
      700: '#1976D2',
      800: '#1565C0',
      900: '#0D47A1',
    },
    accent: {
      50: '#F3E5F5',
      100: '#E1BEE7',
      200: '#CE93D8',
      300: '#BA68C8',
      400: '#AB47BC',
      500: '#9C27B0',  // Secondary
      600: '#8E24AA',
      700: '#7B1FA2',
      800: '#6A1B9A',
      900: '#4A148C',
    },
  },
  fonts: {
    heading: 'Inter, system-ui, sans-serif',
    body: 'Inter, system-ui, sans-serif',
  },
  fontSizes: {
    xs: '12px',
    sm: '14px',
    md: '16px',
    lg: '18px',
    xl: '20px',
    '2xl': '24px',
    '3xl': '30px',
    '4xl': '36px',
    '5xl': '48px',
    '6xl': '64px',
  },
  spacing: {
    '18': '4.5rem',
    '88': '22rem',
    '128': '32rem',
  },
  breakpoints: {
    sm: '320px',
    md: '768px',
    lg: '960px',
    xl: '1200px',
    '2xl': '1536px',
  },
  components: {
    Button: {
      baseStyle: {
        fontWeight: '600',
        borderRadius: '8px',
      },
      variants: {
        solid: {
          bg: 'brand.500',
          color: 'white',
          _hover: {
            bg: 'brand.600',
          },
        },
        outline: {
          borderColor: 'brand.500',
          color: 'brand.500',
          _hover: {
            bg: 'brand.50',
          },
        },
      },
    },
    Card: {
      baseStyle: {
        borderRadius: '12px',
        boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
      },
    },
  },
})

// 2. Responsive Navigation
export function ResponsiveNavigation() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const { colorMode, toggleColorMode } = useColorMode()
  const bgColor = useColorModeValue('white', 'gray.800')
  const textColor = useColorModeValue('gray.800', 'white')

  return (
    <Box bg={bgColor} shadow="md" position="sticky" top={0} zIndex={1000}>
      <Container maxW="container.xl">
        <Flex h={16} alignItems="center" justify="space-between">
          {/* Logo */}
          <Box>
            <Heading size="md" color={textColor}>BrandLogo</Heading>
          </Box>

          {/* Desktop Menu */}
          <HStack spacing={8} display={{ base: 'none', md: 'flex' }}>
            <Link href="#" color={textColor}>Home</Link>
            <Link href="#" color={textColor}>Products</Link>
            <Link href="#" color={textColor}>Services</Link>
            <Link href="#" color={textColor}>About</Link>
            <Link href="#" color={textColor}>Contact</Link>
          </HStack>

          {/* Desktop Actions */}
          <HStack spacing={4} display={{ base: 'none', md: 'flex' }}>
            <IconButton
              aria-label="Toggle color mode"
              icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
              onClick={toggleColorMode}
              variant="ghost"
            />
            <Button colorScheme="brand">Get Started</Button>
          </HStack>

          {/* Mobile Menu Button */}
          <IconButton
            aria-label="Open menu"
            icon={<HamburgerIcon />}
            onClick={onOpen}
            display={{ base: 'flex', md: 'none' }}
          />
        </Flex>
      </Container>

      {/* Mobile Drawer */}
      <Drawer isOpen={isOpen} placement="right" onClose={onClose}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader>Menu</DrawerHeader>
          <DrawerBody>
            <VStack spacing={4} align="stretch">
              <Link href="#" py={2}>Home</Link>
              <Link href="#" py={2}>Products</Link>
              <Link href="#" py={2}>Services</Link>
              <Link href="#" py={2}>About</Link>
              <Link href="#" py={2}>Contact</Link>
              <Divider />
              <Button
                leftIcon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
                onClick={toggleColorMode}
                variant="outline"
              >
                Toggle Theme
              </Button>
              <Button colorScheme="brand">Get Started</Button>
            </VStack>
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </Box>
  )
}

// 3. Hero Section with Responsive Typography
export function ResponsiveHero() {
  const headingSize = useBreakpointValue({ base: '2xl', md: '3xl', lg: '4xl' })
  const textSize = useBreakpointValue({ base: 'md', lg: 'lg' })
  const buttonSize = useBreakpointValue({ base: 'sm', md: 'md' })

  return (
    <Box py={{ base: 16, md: 24 }} bgGradient="linear(to-r, brand.50, accent.50)">
      <Container maxW="container.xl">
        <Stack
          direction={{ base: 'column', lg: 'row' }}
          align="center"
          spacing={{ base: 8, lg: 16 }}
        >
          <Box flex={1}>
            <Heading size={headingSize} mb={6}>
              Build Beautiful React Apps with Chakra UI
            </Heading>
            <Text fontSize={textSize} color="gray.600" mb={8}>
              Chakra UI is a simple, modular and accessible component library
              that gives you the building blocks you need to build your React applications.
            </Text>
            <HStack spacing={4}>
              <Button colorScheme="brand" size={buttonSize}>
                Get Started
              </Button>
              <Button variant="outline" colorScheme="brand" size={buttonSize}>
                View Docs
              </Button>
            </HStack>
          </Box>
          <Box flex={1}>
            <Image
              src="https://images.unsplash.com/photo-1555066931-4365d14bab8c"
              alt="Chakra UI Dashboard"
              borderRadius="lg"
              boxShadow="xl"
            />
          </Box>
        </Stack>
      </Container>
    </Box>
  )
}

// 4. Responsive Grid Layout
export function ResponsiveGrid() {
  const cards = [
    {
      title: 'Responsive Design',
      description: 'Built-in responsive utilities that adapt to different screen sizes.',
      icon: '📱',
      color: 'blue',
    },
    {
      title: 'Accessibility',
      description: 'WCAG 2.1 AA compliant components out of the box.',
      icon: '♿',
      color: 'green',
    },
    {
      title: 'Customization',
      description: 'Easy theme customization and style overrides.',
      icon: '🎨',
      color: 'purple',
    },
    {
      title: 'Developer Experience',
      description: 'Intuitive API and excellent TypeScript support.',
      icon: '🚀',
      color: 'orange',
    },
    {
      title: 'Performance',
      description: 'Lightweight bundle size and optimized rendering.',
      icon: '⚡',
      color: 'yellow',
    },
    {
      title: 'Community',
      description: 'Active community and comprehensive documentation.',
      icon: '👥',
      color: 'cyan',
    },
  ]

  const columns = useBreakpointValue({ base: 1, md: 2, lg: 3 })

  return (
    <Box py={{ base: 12, md: 20 }}>
      <Container maxW="container.xl">
        <VStack spacing={12}>
          <Box textAlign="center">
            <Heading size="2xl" mb={4}>Why Choose Chakra UI?</Heading>
            <Text fontSize="lg" color="gray.600" maxW="2xl" mx="auto">
              Chakra UI provides everything you need to build modern React applications
            </Text>
          </Box>

          <SimpleGrid columns={columns} spacing={8}>
            {cards.map((card, index) => (
              <Card key={index} p={6} textAlign="center" h="full">
                <VStack spacing={4}>
                  <Box
                    fontSize="4xl"
                    p={4}
                    bg={`${card.color}.100`}
                    borderRadius="full"
                  >
                    {card.icon}
                  </Box>
                  <Heading size="md">{card.title}</Heading>
                  <Text color="gray.600">{card.description}</Text>
                </VStack>
              </Card>
            ))}
          </SimpleGrid>
        </VStack>
      </Container>
    </Box>
  )
}

// 5. Responsive Data Table
export function ResponsiveTable() {
  const data = [
    {
      name: 'John Doe',
      email: '[email protected]',
      role: 'Developer',
      status: 'Active',
      lastActive: '2 hours ago',
    },
    {
      name: 'Jane Smith',
      email: '[email protected]',
      role: 'Designer',
      status: 'Active',
      lastActive: '5 minutes ago',
    },
    {
      name: 'Bob Johnson',
      email: '[email protected]',
      role: 'Manager',
      status: 'Inactive',
      lastActive: '3 days ago',
    },
    {
      name: 'Alice Brown',
      email: '[email protected]',
      role: 'Developer',
      status: 'Active',
      lastActive: '1 day ago',
    },
  ]

  return (
    <Box py={12}>
      <Container maxW="container.xl">
        <VStack spacing={8}>
          <Heading size="2xl">User Management</Heading>

          <Box w="full" overflowX="auto">
            <Box minW="600px">
              {data.map((user, index) => (
                <Box
                  key={index}
                  p={6}
                  bg={useColorModeValue('white', 'gray.800')}
                  borderRadius="lg"
                  borderWidth={1}
                  mb={4}
                >
                  <Flex
                    direction={{ base: 'column', sm: 'row' }}
                    justify="space-between"
                    align="start"
                  >
                    <HStack spacing={4} mb={{ base: 4, sm: 0 }}>
                      <Avatar name={user.name} src={user.avatar} />
                      <VStack align="start" spacing={1}>
                        <Text fontWeight="bold">{user.name}</Text>
                        <Text fontSize="sm" color="gray.600">{user.email}</Text>
                      </VStack>
                    </HStack>
                    <VStack align="end" spacing={1}>
                      <Badge
                        colorScheme={user.status === 'Active' ? 'green' : 'gray'}
                        variant="solid"
                      >
                        {user.status}
                      </Badge>
                      <Text fontSize="xs" color="gray.500">
                        {user.lastActive}
                      </Text>
                    </VStack>
                  </Flex>
                </Box>
              ))}
            </Box>
          </Box>
        </VStack>
      </Container>
    </Box>
  )
}

// 6. Responsive Sidebar Layout
export function ResponsiveSidebar() {
  const sidebarWidth = useBreakpointValue({ base: 'full', md: 280 })
  const { isOpen, onOpen, onClose } = useDisclosure()

  return (
    <Flex h="100vh">
      {/* Sidebar - Hidden on mobile */}
      <Box
        w={sidebarWidth}
        bg={useColorModeValue('gray.100', 'gray.900')}
        borderRightWidth={1}
        display={{ base: 'none', md: 'block' }}
        p={4}
      >
        <VStack align="stretch" spacing={4}>
          <Heading size="sm">Navigation</Heading>
          <Button variant="ghost" justifyContent="start">Dashboard</Button>
          <Button variant="ghost" justifyContent="start">Analytics</Button>
          <Button variant="ghost" justifyContent="start">Users</Button>
          <Button variant="ghost" justifyContent="start">Settings</Button>
          <Button variant="ghost" justifyContent="start">Reports</Button>
        </VStack>
      </Box>

      {/* Mobile Menu Button */}
      <IconButton
        aria-label="Open menu"
        icon={<HamburgerIcon />}
        onClick={onOpen}
        display={{ base: 'flex', md: 'none' }}
        position="absolute"
        top={4}
        left={4}
        zIndex={10}
      />

      {/* Mobile Menu Drawer */}
      <Drawer isOpen={isOpen} placement="left" onClose={onClose}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader>Navigation</DrawerHeader>
          <DrawerBody>
            <VStack align="stretch" spacing={4}>
              <Button variant="ghost" justifyContent="start">Dashboard</Button>
              <Button variant="ghost" justifyContent="start">Analytics</Button>
              <Button variant="ghost" justifyContent="start">Users</Button>
              <Button variant="ghost" justifyContent="start">Settings</Button>
              <Button variant="ghost" justifyContent="start">Reports</Button>
            </VStack>
          </DrawerBody>
        </DrawerContent>
      </Drawer>

      {/* Main Content */}
      <Box flex={1} p={{ base: 4, md: 8 }} pt={{ base: 16, md: 8 }}>
        <VStack spacing={8} align="stretch">
          <Heading size="lg">Dashboard</Heading>

          {/* Stats Grid */}
          <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={6}>
            <StatGroup>
              <Stat>
                <StatLabel>Total Users</Stat>
                <StatNumber>2,350</StatNumber>
                <StatHelpText>
                  <StatArrow type="increase" />
                  23.36%
                </StatHelpText>
              </Stat>
              <Stat>
                <StatLabel>Revenue</Stat>
                <StatNumber>$45,231</StatNumber>
                <StatHelpText>
                  <StatArrow type="increase" />
                  12.5%
                </StatHelpText>
              </Stat>
              <Stat>
                <StatLabel>Orders</Stat>
                <StatNumber>1,847</StatNumber>
                <StatHelpText>
                  <StatArrow type="decrease" />
                  3.2%
                </StatHelpText>
              </Stat>
              <Stat>
                <StatLabel>Growth Rate</Stat>
                <StatNumber>15.3%</StatNumber>
                <StatHelpText>
                  <StatArrow type="increase" />
                  5.4%
                </StatHelpText>
              </Stat>
            </StatGroup>
          </SimpleGrid>

          {/* Content Card */}
          <Card p={6}>
            <Heading size="md" mb={4}>Recent Activity</Heading>
            <VStack spacing={4} align="stretch">
              <Alert status="info">
                <AlertIcon />
                <Box>
                  <AlertTitle>New user registration</AlertTitle>
                  <AlertDescription>A new user has registered on your platform.</AlertDescription>
                </Box>
              </Alert>
              <Alert status="success">
                <AlertIcon />
                <Box>
                  <AlertTitle>Payment received</AlertTitle>
                  <AlertDescription>You have received a new payment of $299.</AlertDescription>
                </Box>
              </Alert>
              <Alert status="warning">
                <AlertIcon />
                <Box>
                  <AlertTitle>Server maintenance</AlertTitle>
                  <AlertDescription>Scheduled maintenance will occur at 2 AM UTC.</AlertDescription>
                </Box>
              </Alert>
            </VStack>
          </Card>
        </VStack>
      </Box>
    </Flex>
  )
}

// 7. Responsive Form Layout
export function ResponsiveForm() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const toast = useToast()

  const handleSubmit = () => {
    toast({
      title: 'Form submitted',
      description: 'Your form has been submitted successfully',
      status: 'success',
      duration: 3000,
      isClosable: true,
    })
    onClose()
  }

  return (
    <Box py={12}>
      <Container maxW="container.xl">
        <VStack spacing={8}>
          <Heading size="2xl">Contact Form</Heading>

          {/* Grid Form */}
          <Card w="full" maxW="2xl" mx="auto">
            <CardBody>
              <VStack spacing={6}>
                <SimpleGrid columns={{ base: 1, md: 2 }} spacing={6} w="full">
                  <Box>
                    <Text mb={2} fontWeight="medium">First Name</Text>
                    <input className="chakra-input" placeholder="John" />
                  </Box>
                  <Box>
                    <Text mb={2} fontWeight="medium">Last Name</Text>
                    <input className="chakra-input" placeholder="Doe" />
                  </Box>
                </SimpleGrid>

                <Box w="full">
                  <Text mb={2} fontWeight="medium">Email</Text>
                  <input
                    className="chakra-input"
                    type="email"
                    placeholder="[email protected]"
                  />
                </Box>

                <Box w="full">
                  <Text mb={2} fontWeight="medium">Subject</Text>
                  <select className="chakra-input">
                    <option>General Inquiry</option>
                    <option>Technical Support</option>
                    <option>Billing Question</option>
                  </select>
                </Box>

                <Box w="full">
                  <Text mb={2} fontWeight="medium">Message</Text>
                  <textarea
                    className="chakra-input"
                    rows={4}
                    placeholder="Type your message here..."
                  />
                </Box>

                <HStack spacing={4} justify="end" w="full">
                  <Button variant="outline" onClick={onClose}>
                    Cancel
                  </Button>
                  <Button colorScheme="brand" onClick={handleSubmit}>
                    Send Message
                  </Button>
                </HStack>
              </VStack>
            </CardBody>
          </Card>
        </VStack>
      </Container>
    </Box>
  )
}

// 8. Footer with Responsive Layout
export function ResponsiveFooter() {
  return (
    <Box bg={useColorModeValue('gray.100', 'gray.900')} py={{ base: 8, md: 12 }}>
      <Container maxW="container.xl">
        <SimpleGrid
          columns={{ base: 1, sm: 2, lg: 4 }}
          spacing={8}
          mb={8}
        >
          <VStack align="start">
            <Heading size="md" mb={4}>Product</Heading>
            <VStack align="start" spacing={2}>
              <Link>Features</Link>
              <Link>Pricing</Link>
              <Link>Documentation</Link>
              <Link>API</Link>
            </VStack>
          </VStack>

          <VStack align="start">
            <Heading size="md" mb={4}>Company</Heading>
            <VStack align="start" spacing={2}>
              <Link>About</Link>
              <Link>Blog</Link>
              <Link>Careers</Link>
              <Link>Press</Link>
            </VStack>
          </VStack>

          <VStack align="start">
            <Heading size="md" mb={4}>Resources</Heading>
            <VStack align="start" spacing={2}>
              <Link>Community</Link>
              <Link>Forum</Link>
              <Link>Support</Link>
              <Link>Status</Link>
            </VStack>
          </VStack>

          <VStack align="start">
            <Heading size="md" mb={4}>Legal</Heading>
            <VStack align="start" spacing={2}>
              <Link>Privacy</Link>
              <Link>Terms</Link>
              <Link>Cookie Policy</Link>
              <Link>Licenses</Link>
            </VStack>
          </VStack>
        </SimpleGrid>

        <Divider />

        <Flex
          direction={{ base: 'column', md: 'row' }}
          justify="space-between"
          align="center"
          mt={8}
        >
          <Text>&copy; 2024 Chakra UI. All rights reserved.</Text>
          <HStack spacing={6} mt={{ base: 4, md: 0 }}>
            <Link>Twitter</Link>
            <Link>GitHub</Link>
            <Link>LinkedIn</Link>
          </HStack>
        </Flex>
      </Container>
    </Box>
  )
}

// Main responsive application
export function ResponsiveChakraApp() {
  return (
    <ChakraProvider theme={customTheme}>
      <CSSReset />
      <Box minH="100vh" bg={useColorModeValue('gray.50', 'gray.900')}>
        <ResponsiveNavigation />
        <ResponsiveHero />
        <ResponsiveGrid />
        <ResponsiveTable />
        <ResponsiveForm />
        <ResponsiveFooter />
      </Box>
    </ChakraProvider>
  )
}

export {
  customTheme,
  ResponsiveNavigation,
  ResponsiveHero,
  ResponsiveGrid,
  ResponsiveTable,
  ResponsiveSidebar,
  ResponsiveForm,
  ResponsiveFooter,
  ResponsiveChakraApp
}