"use client";

import React, { PropsWithChildren, ReactNode } from "react";
import { cn } from "@/lib/utils";
import { Button, buttonVariants } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { MenuIcon } from "lucide-react";
import type { VariantProps } from "class-variance-authority";
import { Link } from "@/components/link/components/link";
import { Image } from "@/components/image/components/image";
import { Container } from "@/components/container/components/container";
import { Separator } from "@/components/ui/separator";

const HEADER_LINKS = [
  { href: "/product", label: "Product" },
  { href: "/pricing", label: "Pricing" },
  { href: "/news", label: "News" },
  { href: "/contact", label: "Contact" },
];

const isPathActive = (pathname: string, href: string) => {
  const regex = new RegExp(`^${href}`);
  return regex.test(pathname);
};

type ComponentLink = {
  href: string;
  label: string;
  button?: VariantProps<typeof buttonVariants>["variant"];
};

interface NavItemProps extends PropsWithChildren {
  href: string;
  isActive?: boolean;
}

function NavItemDesktop({ isActive, href, children }: NavItemProps) {
  return (
    <Link
      className={cn(
        "text-header-foreground/60 relative text-sm font-display h-8 hover:text-header-foreground transition inline-grid items-center",
        {
          "text-header-foreground": isActive,
        },
      )}
      href={href}
      key={href}
    >
      {children}
    </Link>
  );
}

function NavItemMobile({ isActive, href, children }: NavItemProps) {
  return (
    <Link
      className={cn(
        "text-header-foreground/60 text-sm font-display h-10 px-4 py-2 hover:text-header-foreground transition inline-grid items-center",
        {
          "text-foreground": isActive,
        },
      )}
      href={href}
      key={href}
    >
      {children}
    </Link>
  );
}

interface DesktopNavProps {
  links: ComponentLink[];
  pathname: string;
  className?: string;
}

function DesktopNav({ links, pathname, className }: DesktopNavProps) {
  return (
    <div className={cn("flex gap-8 items-center", className)}>
      <nav className="flex items-center gap-8">
        {links.map(({ href, label }) => (
          <NavItemDesktop
            key={href}
            href={href}
            isActive={isPathActive(pathname, href)}
          >
            {label}
          </NavItemDesktop>
        ))}
      </nav>
      <Separator orientation="vertical" className="h-6" />
      <div className="flex gap-6">
        <NavItemDesktop href="#">Log in</NavItemDesktop>
        <Button className="-mt-0.5">Sign up</Button>
      </div>
    </div>
  );
}

interface MobileNavProps {
  links: ComponentLink[];
  pathname: string;
  className?: string;
}

function MobileNav({ links, pathname, className }: MobileNavProps) {
  const [isOpen, setOpen] = React.useState(false);

  React.useEffect(() => {
    if (pathname) {
      setOpen(false);
    }
  }, [pathname]);

  return (
    <div className={className}>
      <Sheet open={isOpen} onOpenChange={setOpen}>
        <div className="flex gap-2">
          <Button>Sign up</Button>
          <SheetTrigger asChild>
            <Button size="icon" variant="outline">
              <MenuIcon />
            </Button>
          </SheetTrigger>
        </div>
        <SheetContent className="pt-2">
          <SheetHeader className="text-start sr-only">
            <SheetTitle>Menu</SheetTitle>
            <SheetDescription>Choose your destination</SheetDescription>
          </SheetHeader>
          <div className="grid gap-2">
            <nav className="grid">
              {links.map(({ href, label }) => (
                <NavItemMobile
                  key={href}
                  href={href}
                  isActive={isPathActive(pathname, href)}
                >
                  {label}
                </NavItemMobile>
              ))}
            </nav>
            <Separator orientation="horizontal" />
            <NavItemMobile href="#">Log in</NavItemMobile>
          </div>
        </SheetContent>
      </Sheet>
    </div>
  );
}

export interface HeaderProps {
  logo: ReactNode;
  links: ComponentLink[];
  pathname: string;
  className?: string;
  wrapperClassName?: string;
}

export function Header({
  logo = (
    <Link href="#">
      <Image
        className="size-10"
        src="/brand/zippystarter-icon.svg"
        alt="ZippyStarter logo"
      />
    </Link>
  ),
  links = HEADER_LINKS,
  pathname = "/product",
  className,
  wrapperClassName,
}: HeaderProps) {
  return (
    <Container
      component="header"
      className={cn("flex items-center justify-between py-4", className)}
      wrapperClassName={cn(wrapperClassName, "bg-header inset-header")}
    >
      {logo}
      <MobileNav links={links} pathname={pathname} className="md:hidden" />
      <DesktopNav
        links={links}
        pathname={pathname}
        className="hidden md:flex"
      />
    </Container>
  );
}
Headers
