"use client"

//***NextJS Only***
//import { usePathname, useRouter } from "next/navigation";
import * as React from "react"
import {
  BarChart3,
  BookOpen,
  Code2,
  FileText,
  HelpCircle,
  Layout,
  Mail,
  Newspaper,
  Puzzle,
  Users,
  Zap,
} from "lucide-react"
import { AnimatePresence, motion } from "motion/react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

const navigationItems = [
  {
    id: 1,
    title: "Docs",
    href: "#docs",
    children: [
      {
        title: "Getting Started",
        href: "#getting-started",
        description: "Quick setup guide",
        icon: BookOpen,
      },
      {
        title: "API Reference",
        href: "#api-reference",
        description: "Complete API docs",
        icon: FileText,
      },
      {
        title: "Examples",
        href: "#examples",
        description: "Code examples",
        icon: Code2,
      },
      {
        title: "Guides",
        href: "#guides",
        description: "How-to guides",
        icon: BookOpen,
      },
    ],
  },
  {
    id: 2,
    title: "Platform",
    href: "#platform",
    children: [
      {
        title: "Dashboard",
        href: "#dashboard",
        description: "Main overview",
        icon: Layout,
      },
      {
        title: "Analytics",
        href: "#analytics",
        description: "Usage insights",
        icon: BarChart3,
      },
      {
        title: "Integrations",
        href: "#integrations",
        description: "Connect tools",
        icon: Puzzle,
      },
      { title: "API", href: "#api", description: "Dev resources", icon: Zap },
    ],
  },
  {
    id: 3,
    title: "Teams",
    href: "#teams",
    // No children - simple link
  },
  {
    id: 4,
    title: "Resources",
    href: "#resources",
    children: [
      {
        title: "Blog",
        href: "#blog",
        description: "Latest updates",
        icon: Newspaper,
      },
      {
        title: "Community",
        href: "#community",
        description: "Join the forum",
        icon: Users,
      },
      {
        title: "Help Center",
        href: "#help",
        description: "Support docs",
        icon: HelpCircle,
      },
      {
        title: "Contact",
        href: "#contact",
        description: "Get in touch",
        icon: Mail,
      },
    ],
  },
  {
    id: 5,
    title: "Pricing",
    href: "#pricing",
    // No children - simple link
  },
]

const headerVariants = {
  hidden: {
    y: -20,
    opacity: 0,
  },
  visible: {
    y: 0,
    opacity: 1,
    transition: {
      duration: 0.4,
    },
  },
}

const linkVariants = {
  hidden: { opacity: 0, y: -10 },
  visible: (custom: number) => ({
    opacity: 1,
    y: 0,
    transition: {
      delay: custom * 0.1,
      duration: 0.3,
    },
  }),
}

interface MobileLinkProps
  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  href: string
  label: string
}

function MobileLink({ href, label, className, ...props }: MobileLinkProps) {
  //***NextJS Only***
  //const router = useRouter();

  //OR

  // Use this for plain React or other frameworks (e.g., Vite, CRA):
  const handleNavigation = () => {
    window.location.href = href
  }

  return (
    <a
      href={href}
      onClick={() => {
        //***NextJS Only***
        //router.push(href.toString());

        //OR

        // Use this for plain React or other frameworks (e.g., Vite, CRA):
        handleNavigation()
      }}
      className={cn(
        "text-muted-foreground w-min py-1 text-sm whitespace-nowrap",
        className
      )}
      {...props}
    >
      {label}
    </a>
  )
}

const DesktopNavigation = () => {
  const [selected, setSelected] = React.useState<number | null>(null)
  const [dir, setDir] = React.useState<string | null>(null)

  const handleSetSelected = (val: number | null) => {
    if (typeof selected === "number" && typeof val === "number") {
      setDir(selected > val ? "r" : "l")
    } else if (val === null) {
      setDir(null)
    }
    setSelected(val)
  }

  return (
    <div
      onMouseLeave={() => handleSetSelected(null)}
      className="relative flex h-fit gap-6"
    >
      {navigationItems.map((item, index) => {
        return (
          <NavItem
            key={item.id}
            selected={selected}
            handleSetSelected={handleSetSelected}
            item={item}
            index={index}
          />
        )
      })}

      <AnimatePresence>
        {selected && <DropdownContent dir={dir} selected={selected} />}
      </AnimatePresence>
    </div>
  )
}

interface NavItemProps {
  item: (typeof navigationItems)[0]
  selected: number | null
  handleSetSelected: (val: number | null) => void
  index: number
}

const NavItem: React.FC<NavItemProps> = ({
  item,
  selected,
  handleSetSelected,
  index,
}) => {
  //***NextJS Only***
  //const pathname = usePathname();

  //OR

  // Use this for plain React or other frameworks (e.g., Vite, CRA):
  const pathname = window.location.pathname

  const hasChildren = item.children && item.children.length > 0

  if (!hasChildren) {
    return (
      <motion.a
        key={item.id}
        custom={index}
        variants={linkVariants}
        href={item.href}
        className={cn(
          "text-[13.5px] font-medium transition-colors",
          pathname?.startsWith(item.href)
            ? "text-foreground"
            : "text-muted-foreground hover:text-foreground"
        )}
      >
        {item.title}
      </motion.a>
    )
  }

  return (
    <motion.button
      key={item.id}
      custom={index}
      variants={linkVariants}
      id={`nav-tab-${item.id}`}
      onMouseEnter={() => handleSetSelected(item.id)}
      onClick={() => handleSetSelected(item.id)}
      className={cn(
        "flex items-center gap-1 text-[13.5px] font-medium transition-colors",
        selected === item.id
          ? "text-foreground"
          : "text-muted-foreground hover:text-foreground"
      )}
    >
      <span>{item.title}</span>
      <svg
        className={cn(
          "mt-1 h-3 w-3 transition-transform",
          selected === item.id ? "rotate-180" : ""
        )}
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <polyline points="6,9 12,15 18,9"></polyline>
      </svg>
    </motion.button>
  )
}

interface DropdownContentProps {
  selected: number | null
  dir: string | null
}

const DropdownContent: React.FC<DropdownContentProps> = ({ selected, dir }) => {
  return (
    <motion.div
      id="dropdown-content"
      initial={{
        opacity: 0,
        y: 8,
      }}
      animate={{
        opacity: 1,
        y: 0,
      }}
      exit={{
        opacity: 0,
        y: 8,
      }}
      className="border-border bg-background absolute top-[calc(100%_+_18px)] left-0 w-96 rounded-lg border p-1.5 shadow-lg"
    >
      <Bridge />
      <div className="border-border/70 bg-secondary/50 rounded-md border">
        {navigationItems.map((item) => {
          return (
            <div className="overflow-hidden" key={item.id}>
              {selected === item.id && item.children && (
                <motion.div
                  initial={{
                    opacity: 0,
                    x: dir === "l" ? 100 : dir === "r" ? -100 : 0,
                  }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.25, ease: "easeInOut" }}
                >
                  <DropdownSection links={item.children} />
                </motion.div>
              )}
            </div>
          )
        })}
      </div>
    </motion.div>
  )
}

const Bridge = () => (
  <div className="absolute -top-[24px] right-0 left-0 h-[24px]" />
)

interface DropdownSectionProps {
  links: {
    title: string
    href: string
    description: string
    icon: React.ComponentType<{ className?: string }>
  }[]
}

const DropdownSection: React.FC<DropdownSectionProps> = ({ links }) => {
  return (
    <div className="divide-border grid grid-cols-2 divide-x">
      <div className="flex flex-col gap-2 p-3">
        {links.slice(0, Math.ceil(links.length / 2)).map((link) => {
          const IconComponent = link.icon
          return (
            <a
              key={link.href}
              href={link.href}
              className="hover:bg-muted group block rounded-md p-2 transition-colors"
            >
              <div className="grid grid-cols-[auto_1fr] gap-3">
                <IconComponent className="text-muted-foreground group-hover:text-foreground mt-0.5 h-4 w-4" />
                <div>
                  <div className="text-foreground group-hover:text-foreground mb-1 text-sm font-medium">
                    {link.title}
                  </div>
                  <div className="text-muted-foreground group-hover:text-muted-foreground text-xs">
                    {link.description}
                  </div>
                </div>
              </div>
            </a>
          )
        })}
      </div>
      <div className="flex flex-col gap-2 p-3">
        {links.slice(Math.ceil(links.length / 2)).map((link) => {
          const IconComponent = link.icon
          return (
            <a
              key={link.href}
              href={link.href}
              className="hover:bg-muted group block rounded-md p-2 transition-colors"
            >
              <div className="grid grid-cols-[auto_1fr] gap-3">
                <IconComponent className="text-muted-foreground group-hover:text-foreground mt-0.5 h-4 w-4" />
                <div>
                  <div className="text-foreground group-hover:text-foreground mb-1 text-sm font-medium">
                    {link.title}
                  </div>
                  <div className="text-muted-foreground group-hover:text-muted-foreground text-xs">
                    {link.description}
                  </div>
                </div>
              </div>
            </a>
          )
        })}
      </div>
    </div>
  )
}

export function Header() {
  //***NextJS Only***
  //const pathname = usePathname();

  //OR

  // Use this for plain React or other frameworks (e.g., Vite, CRA):
  // const pathname = window.location.pathname;

  return (
    <motion.div
      initial="hidden"
      animate="visible"
      variants={headerVariants}
      className="bg-background/70 sticky top-0 z-40 w-full border-b backdrop-blur-sm"
    >
      <div className="mx-auto flex h-16 w-full max-w-7xl items-center justify-between px-4 backdrop-blur-xs">
        {/*Large screen Nav*/}
        <div className="mr-4 hidden md:flex">
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.4 }}
          >
            <Logo />
          </motion.div>
        </div>

        <div className="hidden md:flex">
          <DesktopNavigation />
        </div>

        {/*Mobile nav*/}
        <div className="flex md:hidden">
          <Sheet>
            <SheetTrigger asChild>
              <div className="flex items-center gap-3">
                <button
                  className="flex items-center [&_svg]:size-5"
                  aria-label="Open menu"
                  aria-expanded="false"
                  aria-controls="mobile-menu"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="22"
                    height="22"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="lucide lucide-menu"
                  >
                    <line x1="4" x2="20" y1="12" y2="12" />
                    <line x1="4" x2="20" y1="6" y2="6" />
                    <line x1="4" x2="20" y1="18" y2="18" />
                  </svg>
                  <span className="sr-only">Toggle Menu</span>
                </button>
                <Logo />
              </div>
            </SheetTrigger>
            <SheetContent
              side="left"
              className="border-border bg-background z-50 max-w-72 px-4 pt-0"
              id="mobile-menu"
              role="dialog"
              aria-modal="true"
              aria-label="Mobile menu"
            >
              <SheetHeader className="p-0">
                <SheetTitle className="sr-only">Main Menu</SheetTitle>
                <SheetDescription className="sr-only">
                  Use the options below to navigate the application.
                </SheetDescription>
              </SheetHeader>
              <div className="flex flex-col items-start">
                <Logo />
                <div className="mt-6 flex flex-col space-y-3">
                  {navigationItems.map((item) => (
                    <MobileLink
                      key={item.href}
                      href={item.href}
                      label={item.title}
                    />
                  ))}
                </div>
              </div>
            </SheetContent>
          </Sheet>
        </div>

        <motion.nav
          initial={{ opacity: 0, x: 20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.4 }}
          className="flex items-center gap-3 text-sm font-medium"
          aria-label="Authentication"
        >
          <Button
            variant="secondary"
            className="h-8 rounded-lg px-4 text-[13.5px] whitespace-nowrap shadow-[inset_0_1px_0_0_#FFFFFF20]"
          >
            Sign Up
          </Button>
          <Button className="h-8 rounded-lg px-4 text-[13.5px] whitespace-nowrap shadow-[inset_0_1px_0_0_#FFFFFF20]">
            Sign In
          </Button>
        </motion.nav>
      </div>
    </motion.div>
  )
}

const Logo = () => {
  return (
    <a href="#home">
      <div className="text-foreground flex items-end gap-2.5 [&_svg]:h-5">
        <svg
          width="20"
          height="20"
          viewBox="0 0 190 190"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M102.256 188.162C97.6186 190.613 92.0647 190.613 87.4273 188.162L11.3881 147.988C6.20803 145.251 2.96875 139.885 2.96875 134.04L2.96875 55.9596C2.96875 50.115 6.20804 44.7487 11.3881 42.0119L87.4273 1.83758C92.0647 -0.612537 97.6186 -0.612537 102.256 1.83758L178.295 42.0119C183.475 44.7487 186.715 50.115 186.715 55.9596L186.715 134.04C186.715 139.885 183.475 145.251 178.295 147.988L102.256 188.162ZM17.2566 130.86C17.2566 133.8 18.9004 136.499 21.5152 137.859L86.6791 171.709C89.3137 173.075 92.4666 171.171 92.4666 168.21L92.4666 100.577C92.4666 97.6363 90.8224 94.9374 88.208 93.5771L23.0442 59.727C20.4089 58.3581 17.2566 60.2643 17.2566 63.2268L17.2566 130.86Z"
            fill="currentColor"
          />
        </svg>
        <span className="font-heading text-lg leading-none font-semibold">
          Badtz
        </span>
      </div>
    </a>
  )
}
Header 01

Header 02

Header 03

Header 04
