import { useState, useEffect } from "react";
import { Link, useRouterState } from "@tanstack/react-router";
import { Phone, X } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import logo from "@/assets/classic-paints-logo.png";

const navItems = [
  { label: "Home", path: "/" },
  { label: "About", path: "/about" },
  { label: "Products", path: "/products" },
  { label: "Projects", path: "/projects" },
  { label: "Color Visualizer", path: "/visualizer" },
  { label: "Paint Calculator", path: "/calculator" },
  { label: "Find a Dealer", path: "/find-dealer" },
  { label: "Dealer Network", path: "/dealers" },
  { label: "Gallery", path: "/gallery" },
  { label: "Contact", path: "/contact" },
] as const;

const isActive = (current: string, target: string) =>
  target === "/" ? current === "/" : current === target || current.startsWith(`${target}/`);

export function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const pathname = useRouterState({ select: (s) => s.location.pathname });

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

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

  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  return (
    <>
      <nav
        className={`fixed top-0 inset-x-0 transition-all duration-500 ${
          menuOpen
            ? "z-[60] bg-transparent"
            : scrolled
            ? "z-50 bg-background/90 backdrop-blur-md border-b border-border"
            : "z-50 bg-transparent"
        }`}
      >
        <div className="container-regent flex items-center justify-between h-20 md:h-24">
          <Link to="/" className="flex items-center relative z-[60]">
            <img
              src={logo}
              alt="Classic Paints — It's an Art"
              className="h-10 md:h-12 w-auto object-contain"
            />
          </Link>

          {(() => {
            const onDark = !scrolled || menuOpen;
            const textCls = onDark ? "text-white/90" : "text-foreground/80";
            const borderCls = onDark ? "border-white/40" : "border-border";
            const lineCls = onDark ? "bg-white" : "bg-foreground";
            return (
          <button
            onClick={() => setMenuOpen(!menuOpen)}
            className="relative z-[60] group flex items-center gap-3 pl-4 pr-2 py-2"
            aria-label={menuOpen ? "Close menu" : "Open menu"}
          >
            <span className={`hidden sm:inline-block text-[10px] uppercase tracking-wider-x ${textCls} group-hover:text-brand-red transition-colors`}>
              {menuOpen ? "Close" : "Menu"}
            </span>
            <span className={`relative w-10 h-10 flex items-center justify-center border ${borderCls} group-hover:border-brand-red transition-colors`}>
              <AnimatePresence mode="wait" initial={false}>
                {menuOpen ? (
                  <motion.span
                    key="close"
                    initial={{ opacity: 0, rotate: -90 }}
                    animate={{ opacity: 1, rotate: 0 }}
                    exit={{ opacity: 0, rotate: 90 }}
                    transition={{ duration: 0.2 }}
                    className="absolute inset-0 flex items-center justify-center"
                  >
                    <X className="w-4 h-4" />
                  </motion.span>
                ) : (
                  <motion.span
                    key="lines"
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    transition={{ duration: 0.2 }}
                    className="absolute inset-0 flex flex-col items-center justify-center gap-[5px]"
                  >
                    <span className={`block w-5 h-px ${lineCls} group-hover:bg-brand-red transition-colors`} />
                    <span className={`block w-3 h-px ${lineCls} group-hover:bg-brand-red transition-colors ml-2`} />
                    <span className={`block w-5 h-px ${lineCls} group-hover:bg-brand-red transition-colors`} />
                  </motion.span>
                )}
              </AnimatePresence>
            </span>
          </button>
          );
          })()}
        </div>
      </nav>

      <AnimatePresence>
        {menuOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.35 }}
            className="fixed inset-0 z-[55]"
          >
            <div className="absolute inset-0 bg-background/90 backdrop-blur-2xl" />
            <div className="absolute inset-0 bg-gradient-hero opacity-60" />

            <div className="relative h-full overflow-y-auto">
              <div className="min-h-full flex flex-col justify-center px-6 sm:px-12 md:px-20 lg:px-32 py-28 md:py-32">
                <div className="flex items-center gap-3 mb-8 md:mb-10">
                  <span className="h-px w-10 bg-brand-red" />
                  <span className="eyebrow">Navigation</span>
                </div>
                <nav className="flex flex-col items-start gap-1 md:gap-2">
                  {navItems.map((item, i) => {
                    const active = isActive(pathname, item.path);
                    return (
                      <motion.div
                        key={item.label}
                        initial={{ opacity: 0, x: -30 }}
                        animate={{ opacity: 1, x: 0 }}
                        exit={{ opacity: 0, x: -15 }}
                        transition={{ duration: 0.3, delay: 0.05 + i * 0.04 }}
                        className="w-full"
                      >
                        <Link
                          to={item.path}
                          className={`group w-full flex items-center gap-3 md:gap-5 py-2 md:py-2.5 text-base sm:text-xl md:text-3xl lg:text-4xl uppercase tracking-editorial extralight transition-all duration-500 ease-out hover:text-brand-red hover:tracking-wider-x ${
                            active ? "text-brand-red" : "text-foreground/55"
                          }`}
                        >
                          <span
                            className={`h-px transition-all duration-500 ${
                              active ? "w-10 md:w-14 bg-brand-red" : "w-4 md:w-6 bg-foreground/30 group-hover:w-10 md:group-hover:w-14 group-hover:bg-brand-red"
                            }`}
                          />
                          <span>{item.label}</span>
                          <span className="text-[10px] text-muted-foreground tracking-wider-x ml-auto hidden md:inline">
                            {String(i + 1).padStart(2, "0")}
                          </span>
                        </Link>
                      </motion.div>
                    );
                  })}
                </nav>

                <motion.div
                  initial={{ opacity: 0, y: 15 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.4, delay: 0.5 }}
                  className="mt-12 md:mt-16 pt-8 md:pt-10 border-t border-border flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-8"
                >
                  <span className="text-[10px] uppercase tracking-wider-x text-muted-foreground">Hotline</span>
                  <a href="tel:+8801700000000" className="inline-flex items-center gap-2 md:gap-3 text-base sm:text-lg md:text-xl text-brand-red hover:text-brand-red/80 transition-colors tracking-[0.12em] extralight">
                    <Phone className="w-4 h-4 md:w-5 md:h-5" />
                    +880 1700 000 000
                  </a>
                </motion.div>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}