import { Link, useNavigate, useRouterState } from "@tanstack/react-router";
import { useEffect, useMemo, useState } from "react";
import { Search, X } from "lucide-react";
import { Logo } from "./Logo";
import { ConnectLogo } from "./ConnectLogo";
import { PartnerLoginDialog } from "./PartnerLoginDialog";

type SearchItem = {
  title: string;
  description: string;
  to: string;
  search?: Record<string, string>;
};

const SEARCH_INDEX: SearchItem[] = [
  { title: "Home", description: "Airfis overview and features", to: "/" },
  { title: "Become a Partner", description: "Grow your business with Airfis", to: "/partners" },
  { title: "About", description: "Our mission and story", to: "/about" },
  { title: "Careers", description: "Open roles at Airfis", to: "/career" },
  { title: "Contact", description: "Get in touch with our team", to: "/contact" },
  { title: "Support", description: "Help center and FAQs", to: "/support" },
  { title: "Coverage", description: "Cities and areas we serve", to: "/coverage" },
  { title: "Blog", description: "News, guides and updates", to: "/blog" },
  {
    title: "Privacy Policy",
    description: "How we handle your data",
    to: "/terms",
    search: { doc: "privacy" },
  },
  { title: "Terms of Service", description: "Terms and conditions", to: "/terms" },
];

export function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);
  const [query, setQuery] = useState("");
  const [loginOpen, setLoginOpen] = useState(false);
  const navigate = useNavigate();
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  const onPartnerPage = pathname.startsWith("/partners");

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

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setSearchOpen((v) => !v);
      } else if (e.key === "Escape") {
        setSearchOpen(false);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  useEffect(() => {
    if (searchOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
      setQuery("");
    }
    return () => {
      document.body.style.overflow = "";
    };
  }, [searchOpen]);

  const results = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return SEARCH_INDEX;
    return SEARCH_INDEX.filter(
      (i) => i.title.toLowerCase().includes(q) || i.description.toLowerCase().includes(q),
    );
  }, [query]);

  return (
    <>
      <header
        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
          scrolled
            ? "bg-white/80 backdrop-blur-xl border-b border-hairline"
            : "bg-transparent border-b border-transparent"
        }`}
      >
        <div className="container-airfis flex items-center justify-between h-[68px]">
          <Link to="/" className="flex items-center gap-2 shrink-0">
            {onPartnerPage ? (
              <ConnectLogo className="h-9 w-auto" />
            ) : (
              <Logo className="h-10 w-auto" />
            )}
          </Link>

          <nav className="flex items-center gap-2 sm:gap-4">
            <button
              type="button"
              aria-label="Search"
              onClick={() => setSearchOpen(true)}
              className="inline-flex items-center justify-center w-9 h-9 rounded-full text-ink-2 hover:text-ink hover:bg-surface-2 transition-colors"
            >
              <Search className="h-[18px] w-[18px]" />
            </button>

            {!onPartnerPage && (
              <Link
                to="/partners"
                className="inline-flex items-center justify-center px-4 py-2 rounded-full bg-[#2C2C2C] text-white text-sm font-semibold hover:bg-[#1a1a1a] hover:shadow-[0_10px_30px_-10px_rgba(0,0,0,0.35)] hover:-translate-y-0.5 transition-all shadow-sm whitespace-nowrap"
              >
                Become a Partner
              </Link>
            )}
            {onPartnerPage && (
              <button
                type="button"
                onClick={() => setLoginOpen(true)}
                className="inline-flex items-center justify-center px-4 py-2 rounded-full bg-[#2C2C2C] text-white text-sm font-semibold hover:bg-[#1a1a1a] hover:shadow-[0_10px_30px_-10px_rgba(0,0,0,0.35)] hover:-translate-y-0.5 transition-all shadow-sm whitespace-nowrap"
              >
                Partner Login
              </button>
            )}
          </nav>
        </div>
      </header>

      {searchOpen && (
        <div
          className="fixed inset-0 z-[100] bg-black/50 backdrop-blur-sm flex items-start justify-center pt-24 px-4"
          onClick={() => setSearchOpen(false)}
        >
          <div
            className="w-full max-w-xl bg-white rounded-2xl shadow-2xl overflow-hidden"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="flex items-center gap-3 px-4 border-b border-hairline">
              <Search className="h-5 w-5 text-ink-2 shrink-0" />
              <input
                autoFocus
                type="text"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Search Airfis..."
                className="flex-1 py-4 bg-transparent outline-none text-base text-ink placeholder:text-ink-3"
              />
              <button
                type="button"
                aria-label="Close search"
                onClick={() => setSearchOpen(false)}
                className="inline-flex items-center justify-center w-8 h-8 rounded-full text-ink-2 hover:bg-surface-2"
              >
                <X className="h-4 w-4" />
              </button>
            </div>
            <div className="max-h-[60vh] overflow-y-auto py-2">
              {results.length === 0 ? (
                <div className="px-4 py-8 text-center text-ink-2 text-sm">
                  No results for "{query}"
                </div>
              ) : (
                results.map((item) => (
                  <button
                    key={item.to}
                    type="button"
                    onClick={() => {
                      setSearchOpen(false);
                      navigate({ to: item.to as never, search: item.search as never });
                    }}
                    className="w-full text-left px-4 py-3 hover:bg-surface-2 transition-colors flex flex-col"
                  >
                    <span className="text-sm font-semibold text-ink">{item.title}</span>
                    <span className="text-xs text-ink-2">{item.description}</span>
                  </button>
                ))
              )}
            </div>
          </div>
        </div>
      )}

      <PartnerLoginDialog open={loginOpen} onClose={() => setLoginOpen(false)} />
    </>
  );
}