"use client";

import NextLink from "next/link";
import {
  Box,
  Flex,
  Heading,
  Spacer,
  Link,
  IconButton,
  useColorMode,
  useColorModeValue,
  useDisclosure,
  Collapse,
  VStack
} from "@chakra-ui/react";
import { MoonIcon, SunIcon, HamburgerIcon, CloseIcon } from "@chakra-ui/icons";

export default function NavBar() {
  const { colorMode, toggleColorMode } = useColorMode();
  const { isOpen, onToggle } = useDisclosure();
  const bg = useColorModeValue("white", "brand.600");
  const borderCol = useColorModeValue("gray.200", "gray.700");
  const logo = useColorModeValue("/logo-light.svg", "/logo.svg");

  return (
    <Box bg={bg} px={4} borderBottom="1px solid" borderColor={borderCol} position="sticky" top="0" zIndex={9999}>
      <Flex h={16} alignItems="center" justify="space-between">
        {/* Logo */}
        <Heading size="md">
          <Link as={NextLink} href="/">
            <svg
              width="350"
              height="80"
              role="img"
              aria-label="No Worry Biz Solutions Logo"
            >
              <image xlinkHref={logo} x="0" y="0" height="80" width="350" />
            </svg>
          </Link>
        </Heading>

        {/* Mobile Menu Button */}
        <IconButton
          display={{ base: "flex", md: "none" }}
          aria-label="Open menu"
          icon={isOpen ? <CloseIcon /> : <HamburgerIcon />}
          onClick={onToggle}
        />

        {/* Desktop Links */}
        <Flex
          gap={4}
          align="center"
          display={{ base: "none", md: "flex" }}
        >
          <Link as={NextLink} href="/about">
            About
          </Link>
          <Link as={NextLink} href="/services">
            Services
          </Link>
          <Link as={NextLink} href="/contact">
            Contact
          </Link>
          <Link as={NextLink} href="/login">
            Login
          </Link>

          <IconButton
            aria-label="Toggle dark mode"
            onClick={toggleColorMode}
            icon={colorMode === "light" ? <MoonIcon /> : <SunIcon />}
          />
        </Flex>
      </Flex>

      {/* Mobile Links */}
      <Collapse in={isOpen} animateOpacity>
        <Box pb={4} display={{ md: "none" }}>
          <VStack as="nav" spacing={4} align="start">
            <Link as={NextLink} href="/about">
              About
            </Link>
            <Link as={NextLink} href="/services">
              Services
            </Link>
            <Link as={NextLink} href="/contact">
              Contact
            </Link>
            <Link as={NextLink} href="/login">
              Login
            </Link>
            <IconButton
              aria-label="Toggle dark mode"
              onClick={toggleColorMode}
              icon={colorMode === "light" ? <MoonIcon /> : <SunIcon />}
            />
          </VStack>
        </Box>
      </Collapse>
    </Box>
  );
}