import { useEffect, useState } from "react";
import { motion, useMotionValueEvent, useScroll } from "motion/react";
import { Link } from "@tanstack/react-router";
import { Menu, X } from "lucide-react";
import logoLight from "@/assets/belarsen-logo-light.png";
import logoDark from "@/assets/belarsen-logo.png";

const NAV_ITEMS = [
  { label: "Products", hash: "products" },
  { label: "Projects", hash: "projects" },
  { label: "About", hash: "about" },
] as const;

export default function Navbar({ forceLight = false }: { forceLight?: boolean }) {
  const [open, setOpen] = useState(false);
  const { scrollY } = useScroll();
  const [scrolled, setScrolled] = useState(false);
  const [scrolledPastHero, setScrolledPastHero] = useState(false);
  const [heroEnd, setHeroEnd] = useState(1200);
  const onLight = forceLight || scrolledPastHero;

  useEffect(() => {
    const measure = () => setHeroEnd(window.innerHeight * 1.55);
    measure();
    window.addEventListener("resize", measure);
    return () => window.removeEventListener("resize", measure);
  }, []);

  useMotionValueEvent(scrollY, "change", (v) => {
    setScrolled(v > 20);
    setScrolledPastHero(v > heroEnd);
  });

  const linkClass = `group focus-visible:outline-brand relative text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-4 ${
    onLight ? "text-ink-muted hover:text-ink" : "text-gray-300 hover:text-white"
  }`;

  return (
    <motion.header
      className="fixed top-6 left-1/2 z-50 w-[calc(100%-2rem)] max-w-5xl -translate-x-1/2"
      initial={{ opacity: 0, y: -20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.8 }}
    >
      <nav
        aria-label="Main navigation"
        className={`border px-6 py-3 backdrop-blur-xl transition-[border-radius,box-shadow,background-color,border-color] duration-500 ${
          open ? "rounded-3xl" : "rounded-full"
        } ${onLight ? "border-ink/10 bg-plaster/80" : "border-white/10 bg-white/[0.06]"} ${
          scrolled
            ? onLight
              ? "shadow-[0_10px_40px_rgba(28,26,23,0.12)]"
              : "shadow-[0_8px_40px_rgba(0,0,0,0.45)]"
            : ""
        }`}
      >
        <div className="flex items-center justify-between gap-6">
          <Link
            to="/"
            aria-label="Belarsen Quality Paints — home"
            className="focus-visible:outline-brand relative shrink-0 focus-visible:outline-2 focus-visible:outline-offset-4"
          >
            <img
              src={onLight ? logoDark : logoLight}
              alt="Belarsen Quality Paints"
              width={1863}
              height={427}
              className="h-7 w-auto transition-opacity duration-300 sm:h-8"
            />
          </Link>

          <ul className="hidden items-center gap-8 md:flex">
            {NAV_ITEMS.map((item) => (
              <li key={item.label}>
                <Link to="/" hash={item.hash} className={linkClass}>
                  {item.label}
                  <span className="bg-brand absolute -bottom-1 left-0 h-px w-0 transition-all duration-300 group-hover:w-full" />
                </Link>
              </li>
            ))}
            <li>
              <Link to="/contact" className={linkClass}>
                Contact
                <span className="bg-brand absolute -bottom-1 left-0 h-px w-0 transition-all duration-300 group-hover:w-full" />
              </Link>
            </li>
          </ul>

          <div className="flex items-center gap-2">
            <Link
              to="/contact"
              className="bg-brand hidden rounded-full px-5 py-2 text-sm font-semibold text-white transition-transform duration-300 hover:scale-105 hover:shadow-[0_0_24px_rgba(239,59,54,0.45)] active:scale-95 md:inline-flex"
            >
              Get a Quote
            </Link>
            <button
              type="button"
              aria-label={open ? "Close menu" : "Open menu"}
              aria-expanded={open}
              onClick={() => setOpen((v) => !v)}
              className={`rounded-full border p-2 md:hidden ${
                onLight ? "border-ink/15 text-ink" : "border-white/10 text-white"
              }`}
            >
              {open ? <X size={18} /> : <Menu size={18} />}
            </button>
          </div>
        </div>

        {open && (
          <motion.ul
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            className={`mt-4 flex flex-col gap-4 overflow-hidden border-t pt-4 md:hidden ${
              onLight ? "border-ink/10" : "border-white/10"
            }`}
          >
            {NAV_ITEMS.map((item) => (
              <li key={item.label}>
                <Link
                  to="/"
                  hash={item.hash}
                  onClick={() => setOpen(false)}
                  className={`text-sm font-medium ${onLight ? "text-ink-soft" : "text-gray-300"}`}
                >
                  {item.label}
                </Link>
              </li>
            ))}
            <li>
              <Link
                to="/contact"
                onClick={() => setOpen(false)}
                className={`text-sm font-medium ${onLight ? "text-ink-soft" : "text-gray-300"}`}
              >
                Contact
              </Link>
            </li>
            <li>
              <Link
                to="/contact"
                onClick={() => setOpen(false)}
                className="bg-brand inline-flex rounded-full px-5 py-2 text-sm font-semibold text-white"
              >
                Get a Quote
              </Link>
            </li>
          </motion.ul>
        )}
      </nav>
    </motion.header>
  );
}