"use client";

import * as React from "react";
import Link from "next/link";
import Image from "next/image";
import {
  Menu,
  ChevronDown,
  LayoutGrid,
  ArrowUpRight,
  Phone,
  Mail,
  MapPin,
  LayoutGridIcon,
  MessageCircleMore,
} from "lucide-react";

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
  NavigationMenuViewport,
} from "@/components/ui/navigation-menu";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import CustomButton from "./CustomButton";

// ------------------------------------------------------------------
// Data
// ------------------------------------------------------------------
export const menuItems = [
  { id: "home", label: "Home", href: "/home" },
  { id: "about", label: "About", href: "#about" },
  {
    id: "services",
    label: "Services",
    children: [
      { id: "bathroom", label: "Bathroom Renovation", href: "#services" },
      { id: "kitchen", label: "Kitchen Renovation", href: "#services" },
      { id: "fullhouse", label: "Full House Renovation", href: "#services" },
    ],
  },

  { id: "testimonials", label: "Testimonials", href: "#testimonials" },
  {
    id: "get_in_touch",
    label: "Get In Touch",
    children: [
      { id: "join", label: "Join Us", href: "#" },
      { id: "contact", label: "Contact Us", href: "#contact" },
      { id: "social", label: "Social Platforms", href: "#" },
    ],
  },
];

// ------------------------------------------------------------------
// Desktop Nav (unchanged – each submenu is in its own absolute panel)
// ------------------------------------------------------------------
export function DesktopNav() {
  return (
    <NavigationMenu viewport={false} className="hidden lg:flex">
      <NavigationMenuList>
        {menuItems.map((item) =>
          item.children ? (
            <NavigationMenuItem key={item.id}>
              <NavigationMenuTrigger
                className={"bg-transparent !text-lg !font-medium"}
              >
                {item.label}
              </NavigationMenuTrigger>
              <NavigationMenuContent>
                <ul className=" w-[200px] gap-2">
                  {item.children.map((sub) => (
                    <li key={sub.id} className="">
                      <NavigationMenuLink asChild>
                        <Link
                          href={sub.href}
                          className={cn(
                            "!text-lg relative block select-none rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground active:bg-primary"
                          )}
                        >
                          {sub.label}
                        </Link>
                      </NavigationMenuLink>
                    </li>
                  ))}
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
          ) : (
            <NavigationMenuItem key={item.id} className="bg-transparent hover:bg-accent rounded-md">
              <NavigationMenuLink asChild>
                <Link
                  href={item.href}
                  className={cn(
                    "!bg-transparent !text-lg !font-medium ",
                    navigationMenuTriggerStyle()
                  )}
                >
                  {item.label}
                </Link>
              </NavigationMenuLink>
            </NavigationMenuItem>
          )
        )}
      </NavigationMenuList>
    </NavigationMenu>
  );
}

// ------------------------------------------------------------------
// Mobile Nav with collapsible sub-menus
// ------------------------------------------------------------------
export function MobileNav({className, buttonClassName}) {
  const [openSections, setOpenSections] = React.useState(false);

  const toggleSection = (id) => {
    setOpenSections((prev) => ({ ...prev, [id]: !prev[id] }));
  };

  return (
    <Sheet>
      <SheetTrigger asChild className="lg:hidden">
        <Button variant="ghost" size="icon" className={className}>
          <Menu className={cn("size-8")} />
     
          <span className="sr-only">Toggle menu</span>
        </Button>
      </SheetTrigger>

      <SheetContent
        side="right"
        className="w-[280px] sm:w-[320px]  px-8 space-y-4"
      >
        <SheetHeader>
          <SheetTitle>Focux</SheetTitle>
        </SheetHeader>

        <nav className="flex flex-col gap-y-3 mt-6 ">
          {menuItems.map((item) =>
            item.children ? (
              <div key={item.id} className="p-0 mb-0">
                <button
                  onClick={() => toggleSection(item.id)}
                  className="flex w-full self-center items-center justify-between px-3 py-2 text-lg font-medium "
                >
                  {item.label}
                  <ChevronDown
                    className={cn(
                      "w-4 h-4 transition-transform",
                      openSections[item.id] && "rotate-180"
                    )}
                  />
                </button>

                {/* collapsible list */}
                <ul
                  className={cn(
                    " overflow-hidden transition-[max-height] duration-300 ease-in-out px-6",
                    openSections[item.id] ? "max-h-96" : "max-h-0"
                  )}
                >
                  {item.children.map((sub) => (
                    <li key={sub.id}>
                      <Link
                        href={sub.href}
                        className="block rounded px-3 py-2 hover:bg-accent text-base"
                      >
                        {sub.label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            ) : (
              <Link
                key={item.id}
                href={item.href}
                className="block rounded px-3 hover:bg-accent text-lg font-medium py-2"
              >
                {item.label}
              </Link>
            )
          )}
        </nav>
      </SheetContent>
    </Sheet>
  );
}

function Drawer() {
  return (
    <Sheet>
      <SheetTrigger asChild className="hidden lg:block">
        <div className=" rounded-full p-3 bg-black hover:bg-cyan-400">
          <MessageCircleMore className="size-8 text-white " />
        </div>
      </SheetTrigger>
      <SheetContent
        side="right"
        className="w-[300px] sm:w-[400px]  px-8 space-y-4"
      >
        <SheetHeader>
          <SheetTitle>
            <Link href="/" className="flex items-center space-x-2">
              <Image
                src="/images/logo.png"
                alt="Focux Logo"
                width={140}
                height={40}
                style={{ objectFit: "contain" }}
              />
            </Link>
          </SheetTitle>
        </SheetHeader>
        <div className="flex flex-col gap-4 ">
          <p className="pb-8 -mt-8">
            Looking to increase your property value? Build your dream house?
            Focux are here to help and achieve your dream.
          </p>
          <div className="grid grid-cols-3 w-full">
            <Phone className="size-10 text-primary col-span-1" />
            <div className="col-span-2 flex flex-col">
              <span className="text-xl font-medium">Call Us</span>
              <Link href="tel: 0433 883 339" className="text-sm">
                0433 883 339
              </Link>
            </div>
          </div>
          <div className="grid grid-cols-3 w-full">
            <Mail className="size-10 text-primary col-span-1" />
            <div className="col-span-2 flex flex-col">
              <span className="text-xl font-medium">Mail Us</span>
              <Link href="tel: 0433 883 339" className="text-sm">
                info@focux.com.au
              </Link>
            </div>
          </div>
          <div className="grid grid-cols-3 w-full pb-8">
            <MapPin className="size-10 text-primary col-span-1" />
            <div className="col-span-2 flex flex-col">
              <span className="text-xl font-medium">Location</span>
              <Link href="tel: 0433 883 339" className="text-sm">
                Australia
              </Link>
            </div>
          </div>

          <div className="flex gap-3 border-t-1 border-gray-200 pt-4">
            <Link href="#" target="_blank" rel="noopener noreferrer">
              <Image
                src="/images/svg/facebook.png"
                width={40}
                height={40}
                className="object-contain filter grayscale-0 hover:grayscale transition-all duration-300"
                alt="facebook"
              />
            </Link>
            <Link href="#" target="_blank" rel="noopener noreferrer">
              <Image
                src="/images/svg/instagram.png"
                width={40}
                height={40}
                className="object-contain filter grayscale-0 hover:grayscale transition-all duration-300"
                alt="instagram"
              />
            </Link>
            <Link href="#" target="_blank" rel="noopener noreferrer">
              <Image
                src="/images/svg/whatsapp.png"
                width={40}
                height={40}
                className="object-contain filter grayscale-0 hover:grayscale transition-all duration-300"
                alt="whatsapp"
              />
            </Link>
            <Link href="#" target="_blank" rel="noopener noreferrer">
              <Image
                src="/images/svg/xiaohongshu.png"
                width={40}
                height={40}
                className="object-contain filter grayscale-0 hover:grayscale transition-all duration-300"
                alt="xiaohongshu"
              />
            </Link>
          </div>
        </div>
      </SheetContent>
    </Sheet>
  );
}

// ------------------------------------------------------------------
// Exported header
// ------------------------------------------------------------------
export default function Header() {
  return (
    <header className="p-6 sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-16 items-center justify-between max-w-7xl mx-auto">
        <Link href="/" className="flex items-center space-x-2">
          <Image
            src="/images/logo.png"
            alt="Focux Logo"
            width={120}
            height={40}
            style={{ objectFit: "contain" }}
          />
        </Link>

        <DesktopNav />
        <div className="flex gap-2 items-end">
          <CustomButton text="Get Started" />
          <Drawer />
        </div>

        <MobileNav />
      </div>
    </header>
  );
}