'use client'

import {
  Box,
  Flex,
  Button,
  useColorModeValue,
  Container,
  Link,
  HStack,
  Image,
  IconButton,
  Drawer,
  DrawerBody,
  DrawerHeader,
  DrawerOverlay,
  DrawerContent,
  DrawerCloseButton,
  useDisclosure,
  VStack,
} from '@chakra-ui/react'
import NextLink from 'next/link'
import { FiMenu } from 'react-icons/fi'
import { usePathname } from 'next/navigation'

export default function Header() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const pathname = usePathname()
  const accentColor = '#043F51'
  const bgColor = useColorModeValue('white', 'gray.900')

  const isActive = (path: string) => pathname === path

  return (
    <>
      {/* Mobile Menu Drawer */}
      <Drawer isOpen={isOpen} placement="right" onClose={onClose}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader borderBottomWidth="1px">Menu</DrawerHeader>
          <DrawerBody>
            <VStack spacing={4} align="stretch" mt={4}>
              <Link
                as={NextLink}
                href="/"
                onClick={onClose}
                fontSize="lg"
                fontWeight={500}
                color={isActive('/') ? accentColor : 'inherit'}
              >
                Početna
              </Link>
              <Link
                as={NextLink}
                href="/cenovnici"
                onClick={onClose}
                fontSize="lg"
                fontWeight={500}
                color={isActive('/cenovnici') ? accentColor : 'inherit'}
              >
                Cenovnici
              </Link>
              <Link
                as={NextLink}
                href="/blog"
                onClick={onClose}
                fontSize="lg"
                fontWeight={500}
                color={isActive('/blog') ? accentColor : 'inherit'}
              >
                Blog
              </Link>
              <Link
                as={NextLink}
                href="/faq"
                onClick={onClose}
                fontSize="lg"
                fontWeight={500}
                color={isActive('/faq') ? accentColor : 'inherit'}
              >
                Često postavljana pitanja
              </Link>
              <Link
                href="/#contact"
                onClick={onClose}
                fontSize="lg"
                fontWeight={500}
              >
                Kontakt
              </Link>
              <Button
                as="a"
                href="https://moj.aktiv.rs"
                target="_blank"
                rel="noopener noreferrer"
                bg={accentColor}
                color="white"
                size="lg"
                mt={4}
                _hover={{
                  bg: '#055468',
                }}
              >
                Pristup programu
              </Button>
            </VStack>
          </DrawerBody>
        </DrawerContent>
      </Drawer>

      {/* Header */}
      <Box
        bg={bgColor}
        boxShadow="sm"
        position="sticky"
        top={0}
        zIndex={1000}
      >
        <Container maxW="7xl">
          <Flex
            h={20}
            alignItems="center"
            justifyContent="space-between"
          >
            <Link as={NextLink} href="/" _hover={{ textDecoration: 'none' }}>
              <HStack spacing={3}>
                <Image
                  src="/images/aktiv-logo.png"
                  alt="AKTIV Logo"
                  height={{ base: '50px', md: '80px' }}
                  width="auto"
                />
              </HStack>
            </Link>

            <HStack spacing={8} display={{ base: 'none', md: 'flex' }}>
              <Link
                as={NextLink}
                href="/"
                _hover={{ color: accentColor }}
                fontWeight={500}
                color={isActive('/') ? accentColor : 'inherit'}
              >
                Početna
              </Link>
              <Link
                as={NextLink}
                href="/cenovnici"
                _hover={{ color: accentColor }}
                fontWeight={500}
                color={isActive('/cenovnici') ? accentColor : 'inherit'}
              >
                Cenovnici
              </Link>
              <Link
                as={NextLink}
                href="/blog"
                _hover={{ color: accentColor }}
                fontWeight={500}
                color={isActive('/blog') ? accentColor : 'inherit'}
              >
                Blog
              </Link>
              <Link
                as={NextLink}
                href="/faq"
                _hover={{ color: accentColor }}
                fontWeight={500}
                color={isActive('/faq') ? accentColor : 'inherit'}
              >
                Često postavljana pitanja
              </Link>
              <Link
                href="/#contact"
                _hover={{ color: accentColor }}
                fontWeight={500}
              >
                Kontakt
              </Link>
            </HStack>

            <HStack spacing={2}>
              <Button
                as="a"
                href="https://moj.aktiv.rs"
                target="_blank"
                rel="noopener noreferrer"
                bg={accentColor}
                color="white"
                size="md"
                fontWeight={600}
                display={{ base: 'none', md: 'flex' }}
                _hover={{
                  bg: '#055468',
                  transform: 'translateY(-2px)',
                }}
              >
                Pristup programu
              </Button>

              <IconButton
                aria-label="Open menu"
                icon={<FiMenu />}
                display={{ base: 'flex', md: 'none' }}
                onClick={onOpen}
                variant="ghost"
                fontSize="24px"
                color={accentColor}
              />
            </HStack>
          </Flex>
        </Container>
      </Box>
    </>
  )
}