"use client";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { Button, buttonVariants } from "@/components/ui/button";
import Link from "next/link";
import { cn } from "@/lib/utils";
import Logo from "@/components/logo";
import { useState } from "react";
import { AlignRight } from "lucide-react";
import { getWhatsAppUrl } from "@/lib/whatsapp";
import { WhatsAppIcon } from "@/components/ui/whatsapp-icon";
import { SETTINGS_QUERY_RESULT, NAVIGATION_QUERY_RESULT } from "@/sanity.types";

type SanityLink = NonNullable<NAVIGATION_QUERY_RESULT[0]["links"]>[number];

export default function MobileNav({
  navigation,
  settings,
}: {
  navigation: NAVIGATION_QUERY_RESULT;
  settings: SETTINGS_QUERY_RESULT;
}) {
  const [open, setOpen] = useState(false);
  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
        <Button
          aria-label="Open Menu"
          variant="ghost"
          className="w-10 p-5 focus-visible:ring-1 focus-visible:ring-offset-1 text-brand-dark"
        >
          <AlignRight className="h-6 w-6 text-brand-dark" />
        </Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <div className="mx-auto">
            <Logo settings={settings} />
          </div>
          <div className="sr-only">
            <SheetTitle className="font-title text-xl text-brand-dark">Vietnam Wedding Guide</SheetTitle>
            <SheetDescription>Bespoke Destination Weddings & Editorial Guides</SheetDescription>
          </div>
        </SheetHeader>
        <div className="pt-8 pb-12">
          <div className="container px-4">
            <ul className="list-none space-y-4 text-center">
              {navigation[0]?.links && navigation[0]?.links?.length > 0 ? (
                navigation[0]?.links?.map((navItem: SanityLink) => {
                  const title =
                    navItem.title?.trim().toLowerCase() === "inquire now"
                      ? "Contact"
                      : navItem.title;
                  const href =
                    navItem.title?.trim().toLowerCase() === "inquire now"
                      ? "/contact"
                      : navItem.href || "#";
                  return (
                    <li key={navItem._key}>
                      <Link
                        onClick={() => setOpen(false)}
                        href={href}
                        target={navItem.target ? "_blank" : undefined}
                        rel={navItem.target ? "noopener noreferrer" : undefined}
                        className="block py-2 text-base font-medium text-brand-dark hover:text-brand-gold transition-colors"
                      >
                        {title}
                      </Link>
                    </li>
                  );
                })
              ) : (
                <>
                  <li>
                    <Link
                      onClick={() => setOpen(false)}
                      href="/blog"
                      className="block py-2 text-base font-medium text-brand-dark hover:text-brand-gold transition-colors"
                    >
                      Wedding Guides
                    </Link>
                  </li>
                  <li>
                    <Link
                      onClick={() => setOpen(false)}
                      href="/services/private-consultant"
                      className="block py-2 text-base font-medium text-brand-dark hover:text-brand-gold transition-colors"
                    >
                      For Couples
                    </Link>
                  </li>
                  <li>
                    <Link
                      onClick={() => setOpen(false)}
                      href="/services/b2b"
                      className="block py-2 text-base font-medium text-brand-dark hover:text-brand-gold transition-colors"
                    >
                      For Professionals
                    </Link>
                  </li>
                  <li>
                    <Link
                      onClick={() => setOpen(false)}
                      href="/about"
                      className="block py-2 text-base font-medium text-brand-dark hover:text-brand-gold transition-colors"
                    >
                      About
                    </Link>
                  </li>
                  <li>
                    <Link
                      onClick={() => setOpen(false)}
                      href="/contact"
                      className="block py-2 text-base font-medium text-brand-dark hover:text-brand-gold transition-colors"
                    >
                      Contact
                    </Link>
                  </li>
                </>
              )}
            </ul>

            <div className="mt-8 pt-6 border-t border-brand-border space-y-3 text-center">
              <Link
                onClick={() => setOpen(false)}
                href="/partnership"
                className="block w-full bg-brand-gold hover:bg-brand-gold-hover text-white py-3 rounded-full text-xs font-semibold uppercase tracking-wider transition-all duration-300 shadow-sm hover:shadow-md"
              >
                Become a Partner
              </Link>
              <a
                onClick={() => setOpen(false)}
                href={getWhatsAppUrl("Hello Nhi, I would like to inquire about wedding advisory in Vietnam.")}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center justify-center gap-2 w-full bg-white hover:bg-brand-sand text-brand-dark border border-brand-border hover:border-brand-gold py-3 rounded-full text-xs font-semibold uppercase tracking-widest transition-all duration-300 shadow-xs"
              >
                <WhatsAppIcon className="w-4 h-4 fill-[#25D366] shrink-0" />
                <span>Chat on WhatsApp</span>
              </a>
            </div>
          </div>
        </div>
      </SheetContent>
    </Sheet>
  );
}