import { useMediaQuery } from "@/hooks/use-media-query";
import { cn } from "@/lib/utils";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import * as NavigationMenu from "@radix-ui/react-navigation-menu";
import { AlignJustify, ChevronDown, ChevronDownIcon, X } from "lucide-react";
import { motion } from "motion/react";
import Image from "next/image";
import React, { useState } from "react";
import { Drawer } from "vaul";
function Header() {
  const isMobile = useMediaQuery("(max-width: 992px)");
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <motion.header
      className="w-full fixed top-1.5 z-50 "
      initial={{ y: -50, opacity: 0, filter: "blur(20px)" }}
      animate={{ y: 0, opacity: 1, filter: "blur(0px)" }}
      transition={{ duration: 0.5, delay: 1 }}
    >
      <nav className="max-w-screen-xl mx-auto xl:px-0 md:px-8 px-4 flex justify-between gap-4 text-black  ">
        {isMobile && (
          <Drawer.Root direction="left" open={isOpen} onOpenChange={setIsOpen}>
            <Drawer.Trigger className="px-3 text-white h-10 grid place-content-center bg-gradient-to-b from-[#372F37] from-100% to-[#211C21]  w-fit rounded-lg">
              <AlignJustify />
            </Drawer.Trigger>
            <Drawer.Portal>
              <Drawer.Overlay className="fixed inset-0 bg-black/40 z-50" />
              <Drawer.Content
                className="left-2 top-2 bottom-2 fixed z-50 outline-none w-72 flex"
                style={
                  {
                    "--initial-transform": "calc(100% + 8px)",
                  } as React.CSSProperties
                }
              >
                <div className="bg-white p-2 h-full w-full grow flex flex-col rounded-[16px]">
                  <div className="w-full flex justify-between">
                    <div className="flex gap-2 flex-shrink-0 items-center text-xl font-semibold  ">
                      <figure className="px-3 py-2 grid place-content-center h-full bg-black    w-fit rounded-xl ">
                        <Image
                          src="/white-logo.png"
                          width={400}
                          height={400}
                          alt="logo"
                          className="w-6"
                        />
                      </figure>
                      <span>Layoutic</span>
                    </div>
                    <button
                      className="rounded-md w-fit bg-neutral-950 px-3 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-neutral-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600"
                      onClick={() => setIsOpen(false)}
                    >
                      <X />
                    </button>
                  </div>
                  <AccordionPrimitive.Root
                    type="multiple"
                    className="space-y-2 mt-4"
                  >
                    <AccordionPrimitive.Item
                      value="home"
                      className="mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b rounded-md focus-within:relative focus-within:z-10"
                    >
                      <AccordionPrimitive.Header className=" data-[state=open]:bg-neutral-100 ">
                        <AccordionPrimitive.Trigger className="group flex h-[45px] w-full flex-1 hover:bg-neutral-100 cursor-default items-center justify-between px-2 text-[15px] leading-none outline-none ">
                          Home
                        </AccordionPrimitive.Trigger>
                      </AccordionPrimitive.Header>
                    </AccordionPrimitive.Item>

                    <AccordionPrimitive.Item
                      value="solution"
                      className="mt-px overflow-hidden first:mt-0 first:rounded-t border border-neutral-200 last:rounded-b rounded-md focus-within:relative focus-within:z-10"
                    >
                      <AccordionPrimitive.Header className=" data-[state=open]:bg-neutral-100 ">
                        <AccordionPrimitive.Trigger className="group flex h-[45px] w-full flex-1 hover:bg-neutral-100 cursor-default items-center justify-between px-2 text-[15px] leading-none outline-none ">
                          Solutions
                          <ChevronDownIcon
                            className="text-violet10 transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180"
                            aria-hidden
                          />
                        </AccordionPrimitive.Trigger>
                      </AccordionPrimitive.Header>
                      <AccordionPrimitive.Content className="data-[state=open]:bg-neutral-100 rounded-b-md py-2 px-3">
                        <ul className="space-y-2 text-sm">
                          <li className="hover:bg-neutral-50 cursor-pointer p-1.5 px-2 rounded-md">
                            LayoutKit
                          </li>
                          <li className="hover:bg-neutral-50 cursor-pointer p-1.5 px-2 rounded-md">
                            ComponentFlow
                          </li>
                          <li className="hover:bg-neutral-50 cursor-pointer p-1.5 px-2 rounded-md">
                            TemplateSync
                          </li>
                          <li className="hover:bg-neutral-50 cursor-pointer p-1.5 px-2 rounded-md">
                            AutoGrid
                          </li>
                          <li className="hover:bg-neutral-50 cursor-pointer p-1.5 px-2 rounded-md">
                            ResponsiveKit
                          </li>
                        </ul>
                      </AccordionPrimitive.Content>
                    </AccordionPrimitive.Item>
                    <AccordionPrimitive.Item
                      value="resources"
                      className="mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b rounded-md focus-within:relative focus-within:z-10"
                    >
                      <AccordionPrimitive.Header className=" data-[state=open]:bg-neutral-100 ">
                        <AccordionPrimitive.Trigger className="group flex h-[45px] w-full flex-1 hover:bg-neutral-100 cursor-default items-center justify-between px-2 text-[15px] leading-none outline-none ">
                          Resources
                        </AccordionPrimitive.Trigger>
                      </AccordionPrimitive.Header>
                    </AccordionPrimitive.Item>
                    <AccordionPrimitive.Item
                      value="price"
                      className="mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b rounded-md focus-within:relative focus-within:z-10"
                    >
                      <AccordionPrimitive.Header className=" data-[state=open]:bg-neutral-100 ">
                        <AccordionPrimitive.Trigger className="group flex h-[45px] w-full flex-1 hover:bg-neutral-100 cursor-default items-center justify-between px-2 text-[15px] leading-none outline-none ">
                          Price
                        </AccordionPrimitive.Trigger>
                      </AccordionPrimitive.Header>
                    </AccordionPrimitive.Item>
                  </AccordionPrimitive.Root>
                </div>
              </Drawer.Content>
            </Drawer.Portal>
          </Drawer.Root>
        )}
        {!isMobile && (
          <div className="flex justify-between w-full">
            <div className="flex gap-2 h-11 flex-shrink-0 items-center text-xl font-semibold  ">
              <figure className="px-3  grid place-content-center h-full bg-black w-fit rounded-lg ">
                <Image
                  src="/white-logo.png"
                  width={400}
                  height={400}
                  alt="logo"
                  className="w-6"
                />
              </figure>
              <span>Layoutic</span>
            </div>
            <div className="w-full">
              <NavigationMenu.Root className="relative z-10 flex  items-center justify-center">
                <NavigationMenu.List className=" m-0 flex list-none items-center  rounded-md bg-white text-black p-1 ">
                  <NavigationMenu.Item>
                    <NavigationMenu.Link
                      className="flex items-center select-none rounded px-3 py-3 text-[15px] font-medium leading-none text-violet11 no-underline outline-none hover:bg-gray-100 focus:shadow-[0_0_0_2px] focus:shadow-violet7"
                      href="https://pro.ui-layouts.com/pricing"
                    >
                      Home
                    </NavigationMenu.Link>
                  </NavigationMenu.Item>

                  <NavigationMenu.Item>
                    <NavigationMenu.Trigger className="group flex select-none items-center justify-between gap-0.5 rounded px-3 py-3 text-[15px] font-medium leading-none text-violet11 outline-none hover:bg-gray-100 data-[state=open]:bg-gray-100 focus:shadow-[0_0_0_2px]">
                      Solutions{" "}
                      <ChevronDown
                        size={16}
                        className="relative top-px  transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
                        aria-hidden
                      />
                    </NavigationMenu.Trigger>
                    <NavigationMenu.Content className="absolute left-0 top-0 w-full sm:w-auto">
                      <ul className="m-0 grid list-none gap-x-2.5 p-[22px] sm:w-[600px] sm:grid-flow-col sm:grid-rows-3">
                        <ListItem
                          title="Introduction"
                          className="text-black"
                          href="/primitives/docs/overview/introduction"
                        >
                          Build high-quality, accessible design systems and web
                          apps.
                        </ListItem>
                        <ListItem
                          title="Getting started"
                          href="/primitives/docs/overview/getting-started"
                        >
                          A quick tutorial to get you up and running with Radix
                          Primitives.
                        </ListItem>
                        <ListItem
                          title="Styling"
                          href="/primitives/docs/guides/styling"
                        >
                          Unstyled and compatible with any styling solution.
                        </ListItem>
                        <ListItem
                          title="Animation"
                          href="/primitives/docs/guides/animation"
                        >
                          Use CSS keyframes or any animation library of your
                          choice.
                        </ListItem>
                        <ListItem
                          title="Accessibility"
                          href="/primitives/docs/overview/accessibility"
                        >
                          Tested in a range of browsers and assistive
                          technologies.
                        </ListItem>
                        <ListItem
                          title="Releases"
                          href="/primitives/docs/overview/releases"
                        >
                          Radix Primitives releases and their changelogs.
                        </ListItem>
                      </ul>
                    </NavigationMenu.Content>
                  </NavigationMenu.Item>
                  <NavigationMenu.Item>
                    <NavigationMenu.Link
                      className="flex items-center select-none rounded px-3 py-3 text-[15px] font-medium leading-none text-violet11 no-underline outline-none hover:bg-gray-100 focus:shadow-[0_0_0_2px] focus:shadow-violet7"
                      href="https://pro.ui-layouts.com/pricing"
                    >
                      Resources
                    </NavigationMenu.Link>
                  </NavigationMenu.Item>
                  <NavigationMenu.Item>
                    <NavigationMenu.Link
                      className="flex items-center select-none rounded px-3 py-3 text-[15px] font-medium leading-none text-violet11 no-underline outline-none hover:bg-gray-100 focus:shadow-[0_0_0_2px] focus:shadow-violet7"
                      href="https://pro.ui-layouts.com/pricing"
                    >
                      Price
                    </NavigationMenu.Link>
                  </NavigationMenu.Item>

                  <NavigationMenu.Indicator className="top-full z-10 flex h-2.5 items-end justify-center overflow-hidden transition-[width,transform_250ms_ease] data-[state=hidden]:animate-fadeOut data-[state=visible]:animate-fadeIn">
                    <div className="relative top-[70%] size-2.5 rotate-45 rounded-tl-sm bg-white" />
                  </NavigationMenu.Indicator>
                </NavigationMenu.List>

                <div className="perspective-[2000px] absolute left-0 top-full flex w-full justify-center">
                  <NavigationMenu.Viewport className="relative mt-2.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md bg-white transition-[width,_height] duration-300 data-[state=closed]:animate-scaleOut data-[state=open]:animate-scaleIn sm:w-[var(--radix-navigation-menu-viewport-width)]" />
                </div>
              </NavigationMenu.Root>
            </div>
          </div>
        )}

        <div className="flex  gap-2 items-center flex-shrink-0 ">
          <button className=" h-11 px-3 font-semibold gap-2  flex items-center  backdrop-blur-2xl   bg-gradient-to-b from-[#372F37] from-100% to-[#211C21]  text-white  rounded-full [box-shadow:inset_0px_1px_3px_rgba(255,255,255,0.25)]">
            Get Started
          </button>
        </div>
      </nav>
    </motion.header>
  );
}
interface ListItemProps {
  className?: string;
  children: React.ReactNode;
  title: string;
  href: string;
}

const ListItem = React.forwardRef<HTMLAnchorElement, ListItemProps>(
  ({ className, children, title, ...props }, forwardedRef) => (
    <li className="w-full">
      <NavigationMenu.Link asChild>
        <a
          className={cn(
            "block select-none rounded-md p-3 text-[15px] w-full leading-none no-underline outline-none transition-colors hover:bg-gray-100 focus:shadow-[0_0_0_2px] ",
            className,
          )}
          {...props}
          ref={forwardedRef}
        >
          <div className="mb-[5px] font-medium leading-[1.2]">{title}</div>
          <p className="leading-[1.4] text-zinc-950">{children}</p>
        </a>
      </NavigationMenu.Link>
    </li>
  ),
);

export default Header;
layoutic
