import { Link } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { ChevronDown, Menu, X } from "lucide-react";
import { categories } from "@/lib/services";

type NavItem = { to: "/" | "/about" | "/services" | "/contact"; label: string; hasMenu?: boolean };
const nav: NavItem[] = [
  { to: "/", label: "Home" },
  { to: "/about", label: "About" },
  { to: "/services", label: "Services", hasMenu: true },
  { to: "/contact", label: "Contact" },
];

export function SiteHeader() {
  const [open, setOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

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

  return (
    <header
      className={`sticky top-0 z-50 w-full transition-all duration-300 ${
        scrolled ? "bg-background/85 backdrop-blur-md border-b border-border/60" : "bg-transparent"
      }`}
    >
      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-6 lg:h-20">
        <Link to="/" className="flex items-center gap-2 group">
          <div className="relative h-8 w-8 rounded-lg" style={{ background: "var(--gradient-accent)" }}>
            <div className="absolute inset-1 rounded-md bg-background/90" />
            <div className="absolute inset-2.5 rounded-sm" style={{ background: "var(--gradient-accent)" }} />
          </div>
          <span className="font-display text-xl font-semibold tracking-tight">
            Cyber<span style={{ color: "var(--brand-teal-deep)" }}>Data</span>
          </span>
        </Link>

        <nav className="hidden lg:flex items-center gap-1">
          {nav.map((item) =>
            item.hasMenu ? (
              <div
                key={item.to}
                className="relative"
                onMouseEnter={() => setOpen(true)}
                onMouseLeave={() => setOpen(false)}
              >
                <Link
                  to={item.to}
                  className="flex items-center gap-1 rounded-full px-4 py-2 text-sm font-medium text-foreground/80 hover:text-foreground transition-colors"
                  activeProps={{ className: "text-foreground" }}
                >
                  {item.label}
                  <ChevronDown className={`h-3.5 w-3.5 transition-transform ${open ? "rotate-180" : ""}`} />
                </Link>
                {open && (
                  <div className="absolute left-1/2 top-full -translate-x-1/2 pt-3">
                    <div className="w-[720px] rounded-2xl border border-border bg-card p-6 shadow-2xl">
                      <div className="grid grid-cols-2 gap-x-6 gap-y-5">
                        {categories.map((cat) => (
                          <div key={cat.slug}>
                            <Link
                              to="/services/$category"
                              params={{ category: cat.slug }}
                              className="block text-xs font-semibold uppercase tracking-widest"
                              style={{ color: "var(--brand-teal-deep)" }}
                            >
                              {cat.name}
                            </Link>
                            <ul className="mt-2 space-y-1">
                              {cat.items.map((s) => (
                                <li key={s.slug}>
                                  <Link
                                    to="/services/$category"
                                    params={{ category: cat.slug }}
                                    hash={s.slug}
                                    className="block rounded-md px-2 py-1 text-sm text-foreground/75 hover:bg-secondary hover:text-foreground transition-colors"
                                  >
                                    {s.name}
                                  </Link>
                                </li>
                              ))}
                            </ul>
                          </div>
                        ))}
                      </div>
                      <div className="mt-6 flex items-center justify-between border-t border-border pt-4">
                        <p className="text-xs text-muted-foreground">
                          Explore our full portfolio of AI data & operations services.
                        </p>
                        <Link
                          to="/services"
                          className="text-xs font-medium hover:underline"
                          style={{ color: "var(--brand-teal-deep)" }}
                        >
                          View all services →
                        </Link>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            ) : (
              <Link
                key={item.to}
                to={item.to}
                className="rounded-full px-4 py-2 text-sm font-medium text-foreground/80 hover:text-foreground transition-colors"
                activeProps={{ className: "text-foreground" }}
                activeOptions={{ exact: true }}
              >
                {item.label}
              </Link>
            )
          )}
        </nav>

        <Link
          to="/contact"
          className="hidden lg:inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-medium text-primary-foreground transition-transform hover:scale-[1.02]"
          style={{ background: "var(--gradient-accent)" }}
        >
          Start a project
        </Link>

        <button
          className="lg:hidden inline-flex items-center justify-center rounded-md p-2"
          onClick={() => setMobileOpen((v) => !v)}
          aria-label="Toggle menu"
        >
          {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
        </button>
      </div>

      {mobileOpen && (
        <div className="lg:hidden border-t border-border bg-background">
          <div className="max-w-7xl mx-auto px-6 py-4 space-y-4">
            {nav.map((item) => (
              <Link
                key={item.to}
                to={item.to}
                onClick={() => setMobileOpen(false)}
                className="block text-base font-medium"
              >
                {item.label}
              </Link>
            ))}
            <div className="pt-2 border-t border-border">
              <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-2">
                Services
              </p>
              {categories.map((cat) => (
                <Link
                  key={cat.slug}
                  to="/services/$category"
                  params={{ category: cat.slug }}
                  onClick={() => setMobileOpen(false)}
                  className="block py-1.5 text-sm text-foreground/80"
                >
                  {cat.name}
                </Link>
              ))}
            </div>
          </div>
        </div>
      )}
    </header>
  );
}