"use client";

import { AnimatePresence, motion } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { ArrowUpRight, Menu, X } from "lucide-react";
import { getWhatsAppUrl } from "@/lib/contact";
import { isRouteActive, routePath } from "@/lib/route-url";
import { CustomerAccountButton } from "@/lib/user-auth";

const nav = [
  { to: "/", label: "Home" },
  { to: "/services", label: "Services" },
  { to: "/about", label: "About" },
  { to: "/blog", label: "Blog" },
  { to: "/faq", label: "FAQ" },
  { to: "/contact", label: "Contact" },
] as const;

export function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const pathname = usePathname();

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    onScroll();
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

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

  return (
    <motion.header
      initial={{ opacity: 0, y: -18 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }}
      className={`fixed inset-x-0 top-4 z-50 flex justify-center px-4 transition-all duration-300 ${
        scrolled ? "top-2" : "top-4"
      }`}
    >
      <div className="w-full max-w-7xl font-['Space_Grotesk']">
        <div
          className={`relative flex items-center justify-between overflow-visible rounded-2xl border px-4 py-2 transition-all duration-500 sm:px-5 ${
            scrolled
              ? "border-border/60 bg-background/90 shadow-[0_18px_60px_rgba(0,0,0,0.12)] backdrop-blur-2xl"
              : "border-white/40 bg-background/72 shadow-[0_18px_60px_rgba(0,0,0,0.08)] backdrop-blur-2xl"
          }`}
        >
          <Link href={routePath("/")} className="group flex min-w-0 items-center gap-2 sm:gap-3">
            <span className="relative my-[-18px] h-20 w-20 shrink-0 overflow-visible transition-transform group-hover:scale-105 sm:my-[-22px] sm:h-24 sm:w-24">
              <Image
                src="/images/new-logo.png"
                alt="Ride N Revive logo"
                fill
                sizes="96px"
                className="object-contain"
                priority
              />
            </span>
            <span className="hidden text-lg font-black tracking-tight text-foreground sm:inline">
              Ride <span className="text-primary">N</span> Revive
            </span>
          </Link>

          <nav className="hidden rounded-full border border-border/60 bg-background/70 p-1 shadow-inner shadow-black/[0.03] md:flex md:items-center md:gap-1">
            {nav.map((item) => {
              const active = isRouteActive(pathname, item.to);
              return (
                <Link
                  key={item.to}
                  href={routePath(item.to)}
                  className={`rounded-full px-4 py-2 text-sm font-bold transition-all ${
                    active
                      ? "bg-primary text-primary-foreground shadow-[0_8px_20px_rgba(211,47,47,0.22)]"
                      : "text-foreground/65 hover:bg-accent hover:text-foreground"
                  }`}
                >
                  {item.label}
                </Link>
              );
            })}
          </nav>

          <div className="flex items-center gap-2">
            <CustomerAccountButton />
            <Link
              href={getWhatsAppUrl()}
              target="_blank"
              rel="noreferrer"
              className="hidden items-center gap-2 rounded-full bg-foreground px-4 py-2 text-sm font-bold text-background shadow-[0_12px_30px_rgba(0,0,0,0.18)] transition hover:-translate-y-0.5 hover:bg-primary hover:text-primary-foreground active:scale-95 sm:inline-flex"
            >
              Book a service
              <ArrowUpRight className="h-4 w-4" />
            </Link>

            <button
              aria-label="Toggle menu"
              onClick={() => setOpen((v) => !v)}
              className="grid h-10 w-10 place-items-center rounded-full border border-border bg-background/75 shadow-sm backdrop-blur-sm md:hidden"
            >
              {open ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
            </button>
          </div>
        </div>

        <AnimatePresence>
          {open && (
            <motion.div
              initial={{ opacity: 0, y: -10, scale: 0.98 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: -10, scale: 0.98 }}
              transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
              className="mt-3 flex flex-col rounded-2xl border border-border/70 bg-background/95 p-3 shadow-[0_20px_55px_rgba(0,0,0,0.16)] backdrop-blur-2xl md:hidden"
            >
              {nav.map((item) => {
                const active = isRouteActive(pathname, item.to);
                return (
                  <Link
                    key={item.to}
                    href={routePath(item.to)}
                    className={`rounded-xl px-3 py-2.5 text-sm font-bold transition-colors ${
                      active ? "bg-primary text-primary-foreground" : "hover:bg-accent"
                    }`}
                  >
                    {item.label}
                  </Link>
                );
              })}
              <Link
                href={getWhatsAppUrl()}
                target="_blank"
                rel="noreferrer"
                className="mt-2 inline-flex items-center justify-center gap-2 rounded-xl bg-foreground px-4 py-2.5 text-center text-sm font-bold text-background"
              >
                Book a service
                <ArrowUpRight className="h-4 w-4" />
              </Link>
              <CustomerAccountButton mobile />
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </motion.header>
  );
}