import { useState, useRef, useEffect } from "react";
import { Link, NavLink, useLocation } from "react-router-dom";
import { motion, AnimatePresence, useReducedMotion } from "framer-motion";

import {
  Server, Network, ShieldCheck, Cloud, MonitorSpeaker, Code2, Headphones,
  ChevronDown, Search, Menu, X, ArrowUpRight, Sparkles, CalendarDays,
} from "lucide-react";
import type { LucideIcon } from "lucide-react";
import Logo from "./Logo";
import SearchOverlay from "./SearchOverlay";
import { openMeetingModal } from "./MeetingModal";
import { NAV } from "../data/site";
import { SOLUTIONS } from "../data/solutions";

const PILLAR_ICONS: Record<string, LucideIcon> = {
  server: Server,
  network: Network,
  shield: ShieldCheck,
  cloud: Cloud,
  "monitor-speaker": MonitorSpeaker,
  code: Code2,
  headset: Headphones,
};

const EASE = [0.22, 1, 0.36, 1] as const;

export default function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [openMenu, setOpenMenu] = useState<string | null>(null); // "solutions" | "about" | "partners"
  const [mobileOpen, setMobileOpen] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);
  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const location = useLocation();
  const reduce = useReducedMotion();

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

  useEffect(() => {
    setMobileOpen(false);
    setOpenMenu(null);
  }, [location.pathname]);

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

  const enter = (menu: string) => {
    clearTimeout(closeTimer.current!);
    setOpenMenu(menu);
  };
  const leave = () => {
    clearTimeout(closeTimer.current!);
    closeTimer.current = setTimeout(() => setOpenMenu(null), 140);
  };

  // Esc anywhere closes the open mega-menu / dropdown / mobile drawer (keyboard a11y).
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        setOpenMenu(null);
        setMobileOpen(false);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  // ⌘K / Ctrl+K opens site search — the shortcut advertised on the search pill.
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setSearchOpen(true);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const navLinkCls = ({ isActive }: { isActive: boolean }) =>
    `relative text-[11.5px] font-semibold tracking-[0.14em] transition-colors duration-200 after:absolute after:left-0 after:-bottom-[7px] after:h-[2px] after:w-full after:origin-left after:transition-transform after:duration-300 ${
      isActive
        ? "text-white after:scale-x-100 after:bg-ember"
        : "text-white/70 hover:text-white after:scale-x-0 hover:after:scale-x-100 after:bg-white/25"
    }`;

  return (
    <>
      <header
        className={`fixed top-0 inset-x-0 z-50 transition-colors duration-500 ${
          scrolled || openMenu || mobileOpen
            ? "bg-[#14151A]/80 backdrop-blur-xl backdrop-saturate-150 border-b border-white/10 shadow-[0_18px_50px_rgba(0,0,0,0.4)]"
            : "bg-[#14151A]/60 backdrop-blur-xl backdrop-saturate-150 border-b border-white/[0.06]"
        }`}
        data-testid="site-header"
      >
        <div className="mx-auto max-w-[1320px] px-5 md:px-10 h-14 flex items-center justify-between gap-5">
          <Link to="/" aria-label="Aviokan Technologies — Home" data-testid="header-logo-link" className="shrink-0">
            <Logo size="sm" light />
          </Link>

          {/* Desktop nav */}
          <nav className="hidden lg:flex items-center gap-4 xl:gap-5 text-[12px] xl:text-sm" aria-label="Primary">
            {NAV.map((item) =>
              item.mega ? (
                <div key={item.label} className="relative" onMouseEnter={() => enter("solutions")} onMouseLeave={leave}>
                  <button
                    className={`relative flex items-center gap-1.5 text-[11.5px] font-semibold tracking-[0.14em] transition-colors duration-200 after:absolute after:left-0 after:-bottom-[7px] after:h-[2px] after:w-full after:origin-left after:transition-transform after:duration-300 ${
                      location.pathname.startsWith("/solutions")
                        ? "text-white after:scale-x-100 after:bg-ember"
                        : "text-white/70 hover:text-white after:scale-x-0 hover:after:scale-x-100 after:bg-white/25"
                    }`}
                    aria-expanded={openMenu === "solutions"}
                    data-testid="nav-solutions-trigger"
                  >
                    SOLUTIONS
                    <ChevronDown size={12} className={`transition-transform duration-300 ${openMenu === "solutions" ? "rotate-180" : ""}`} />
                  </button>
                </div>
              ) : item.children ? (
                <div key={item.label} className="relative" onMouseEnter={() => enter(item.label)} onMouseLeave={leave}>
                  <button
                    className={`relative flex items-center gap-1.5 text-[11.5px] font-semibold tracking-[0.14em] transition-colors duration-200 after:absolute after:left-0 after:-bottom-[7px] after:h-[2px] after:w-full after:origin-left after:transition-transform after:duration-300 ${
                      openMenu === item.label ? "text-white" : "text-white/70 hover:text-white"
                    } ${
                      location.pathname.startsWith(item.label === "PARTNERS & CLIENTS" ? "/partners" : `/${item.label.split(" ")[0].toLowerCase()}`)
                        ? "after:scale-x-100 after:bg-ember"
                        : "after:scale-x-0 hover:after:scale-x-100 after:bg-white/25"
                    }`}
                    aria-expanded={openMenu === item.label}
                  >
                    {item.label}
                    <ChevronDown size={12} className={`transition-transform duration-300 ${openMenu === item.label ? "rotate-180" : ""}`} />
                  </button>
                  <AnimatePresence>
                    {openMenu === item.label && (
                      <motion.div
                        initial={reduce ? { opacity: 1 } : { opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={reduce ? { opacity: 1 } : { opacity: 0, y: 8 }}
                        transition={{ duration: 0.25, ease: EASE }}
                        className="absolute left-0 top-full pt-4"
                      >
                        <motion.div
                          initial="hidden"
                          animate="visible"
                          exit="hidden"
                          variants={{ visible: { transition: { staggerChildren: 0.045 } } }}
                          className="w-60 bg-[#121318] backdrop-blur-xl border border-white/12 shadow-[0_24px_50px_rgba(0,0,0,0.5)] py-2"
                        >
                          {item.children.map((c) => (
                            <motion.div
                              key={c.to}
                              variants={{
                                hidden: { opacity: 0, x: -8 },
                                visible: { opacity: 1, x: 0, transition: { duration: 0.3, ease: EASE } },
                              }}
                            >
                              <Link
                                to={c.to}
                                className="group/dd flex items-center justify-between gap-3 px-4 py-2 text-[13px] font-medium text-white/95 hover:text-cy hover:bg-white/[0.06] transition-colors"
                                data-testid={`nav-dropdown-${c.to.replace(/\//g, "-")}`}
                              >
                                {c.label}
                                <ArrowUpRight size={11} className="text-white/40 group-hover/dd:text-cy transition-colors duration-200" />
                              </Link>
                            </motion.div>
                          ))}
                        </motion.div>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
              ) : (
                <NavLink key={item.label} to={item.to!} className={navLinkCls}>
                  {item.label}
                </NavLink>
              )
            )}
          </nav>

          <div className="flex items-center gap-2 md:gap-2.5">
            {/* Appointment — clean icon button */}
            <button
              onClick={openMeetingModal}
              aria-label="Book a consultation"
              title="Book a consultation"
              data-testid="header-book-meeting"
              className="h-9 w-9 grid place-items-center border border-white/15 bg-white/[0.03] text-white/75 hover:text-ember hover:border-ember/60 transition-all duration-200"
            >
              <CalendarDays size={15} strokeWidth={1.8} />
            </button>

            {/* Search — clean round icon button (⌘K works globally) */}
            <button
              onClick={() => setSearchOpen(true)}
              aria-label="Search site"
              title="Search (Ctrl/⌘K)"
              data-testid="header-search-button"
              className="h-9 w-9 grid place-items-center border border-white/15 bg-white/[0.03] rounded-full text-white/75 hover:text-cy hover:border-cy/60 transition-all duration-200"
            >
              <Search size={15} strokeWidth={1.8} />
            </button>

            <button
              className="lg:hidden h-9 w-9 grid place-items-center border border-white/15 text-white/85 hover:text-cy hover:border-cy/50 transition-colors duration-200"
              onClick={() => setMobileOpen((v) => !v)}
              aria-label={mobileOpen ? "Close menu" : "Open menu"}
              data-testid="mobile-menu-toggle"
            >
              {mobileOpen ? <X size={17} /> : <Menu size={17} />}
            </button>
          </div>
        </div>

        {/* Solutions mega menu */}
        <AnimatePresence>
          {openMenu === "solutions" && (
            <motion.div
              initial={reduce ? { opacity: 1 } : { opacity: 0, y: -8 }}
              animate={{ opacity: 1, y: 0 }}
              exit={reduce ? { opacity: 1 } : { opacity: 0, y: -8 }}
              transition={{ duration: 0.3, ease: EASE }}
              className="absolute inset-x-0 top-full hidden lg:block bg-[#121318] backdrop-blur-xl border-b border-white/10 shadow-[0_30px_60px_rgba(0,0,0,0.55)]"
              onMouseEnter={() => enter("solutions")}
              onMouseLeave={leave}
              data-testid="solutions-mega-menu"
            >
              <div className="mx-auto max-w-[1320px] px-10 py-5 grid grid-cols-3 gap-x-5 gap-y-1">
                {SOLUTIONS.map((s) => {
                  const Icon = PILLAR_ICONS[s.icon] || Server;
                  return (
                    <Link
                      key={s.slug}
                      to={`/solutions/${s.slug}`}
                      className="group flex gap-2.5 p-2.5 border border-transparent hover:border-cy/25 hover:bg-white/[0.04] transition-colors duration-300"
                      data-testid={`mega-menu-${s.slug}`}
                    >
                      <span className="shrink-0 h-9 w-9 grid place-items-center border border-cy/35 text-cy group-hover:border-ember group-hover:text-ember transition-colors duration-300">
                        <Icon size={17} strokeWidth={1.6} />
                      </span>
                      <span>
                        <span className="block text-[9px] font-tech text-ember tracking-[0.2em]">{s.num}</span>
                        <span className="block font-display font-bold text-white text-sm leading-tight mt-0.5">{s.shortTitle}</span>
                        <span className="block text-[11px] text-white/60 mt-1 leading-relaxed">
                          {s.services.slice(0, 3).join(" • ")}
                        </span>
                      </span>
                    </Link>
                  );
                })}
                <Link
                  to="/digital-engineering"
                  className="group flex items-center gap-3.5 p-3.5 bg-ember/10 border border-ember/30 hover:bg-ember transition-colors duration-300"
                  data-testid="mega-menu-digital-engineering"
                >
                  <span className="shrink-0 h-11 w-11 grid place-items-center border border-ember text-ember group-hover:border-white group-hover:text-white transition-colors">
                    <Sparkles size={19} strokeWidth={1.6} />
                  </span>
                  <span>
                    <span className="block text-[10px] font-tech text-ember group-hover:text-white tracking-[0.2em]">CAPABILITY</span>
                    <span className="block font-display font-bold text-white group-hover:text-white text-[15px] mt-0.5">Digital Engineering</span>
                    <span className="block text-xs text-white/70 group-hover:text-white/80 mt-1">Software • Data • AI/ML • DevSecOps</span>
                  </span>
                </Link>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </header>

      {/* Mobile menu — compact right-side drawer (never a full-screen takeover) */}
      <AnimatePresence>
        {mobileOpen && (
          <motion.div
            key="mobile-backdrop"
            initial={reduce ? { opacity: 1 } : { opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={reduce ? { opacity: 1 } : { opacity: 0 }}
            transition={{ duration: 0.25 }}
            className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm lg:hidden"
            onClick={() => setMobileOpen(false)}
            aria-hidden="true"
            data-testid="mobile-menu-backdrop"
          />
        )}
        {mobileOpen && (
          <motion.aside
            key="mobile-drawer"
            initial={reduce ? { x: 0 } : { x: "104%" }}
            animate={{ x: 0 }}
            exit={reduce ? { x: 0 } : { x: "104%" }}
            transition={{ duration: 0.35, ease: EASE }}
            className="fixed top-0 right-0 bottom-0 z-40 w-[86%] max-w-[380px] bg-[#0A0E14] border-l border-white/10 shadow-[-30px_0_80px_rgba(0,0,0,0.55)] flex flex-col lg:hidden"
            role="dialog"
            aria-label="Site menu"
            data-testid="mobile-menu"
          >
            <div className="flex-1 overflow-y-auto">
              <nav className="px-6 pt-20 pb-6" aria-label="Mobile">
                <Link to="/" className="block py-3.5 border-b border-white/10 font-display font-bold text-[15px] text-white tracking-[0.08em]" data-testid="mobile-nav-home">
                  HOME
                </Link>
                {NAV.slice(1).map((item) =>
                  item.mega ? (
                    <MobileAccordion key={item.label} title="SOLUTIONS" testId="mobile-nav-solutions">
                      {SOLUTIONS.map((s) => (
                        <Link key={s.slug} to={`/solutions/${s.slug}`} className="block py-2 pl-3 text-[13px] font-medium text-white/90 hover:text-cy" data-testid={`mobile-nav-${s.slug}`}>
                          {s.num} — {s.shortTitle}
                        </Link>
                      ))}
                      <Link to="/digital-engineering" className="block py-2 pl-3 text-[13px] font-bold text-ember">
                        Digital Engineering →
                      </Link>
                    </MobileAccordion>
                  ) : item.children ? (
                    <MobileAccordion key={item.label} title={item.label} testId={`mobile-nav-${item.label.split(" ")[0].toLowerCase()}`}>
                      {item.children.map((c) => (
                        <Link key={c.to} to={c.to} className="block py-2 pl-3 text-[13px] font-medium text-white/90 hover:text-cy" data-testid={`mobile-nav-${c.to.replace(/\//g, "-")}`}>
                          {c.label}
                        </Link>
                      ))}
                    </MobileAccordion>
                  ) : (
                    <Link key={item.label} to={item.to!} className="block py-3.5 border-b border-white/10 font-display font-bold text-[15px] text-white tracking-[0.08em]" data-testid={`mobile-nav-${item.label.toLowerCase()}`}>
                      {item.label}
                    </Link>
                  )
                )}
              </nav>
            </div>
            <div className="border-t border-white/10 p-4 space-y-2.5 bg-[#0A0E14]">
              <button
                onClick={openMeetingModal}
                className="flex items-center justify-center gap-2 border border-cy/40 text-cy font-bold text-sm py-3 w-full"
                data-testid="mobile-cta-book-meeting"
              >
                <CalendarDays size={15} /> Book a Consultation
              </button>
              <Link
                to="/contact"
                className="flex items-center justify-center gap-2 bg-ember text-white font-bold text-sm py-3.5 w-full"
                data-testid="mobile-cta-talk-to-expert"
              >
                Talk to an Expert <ArrowUpRight size={15} />
              </Link>
            </div>
          </motion.aside>
        )}
      </AnimatePresence>

      <SearchOverlay open={searchOpen} onClose={() => setSearchOpen(false)} />
    </>
  );
}

interface MobileAccordionProps {
  title: string;
  children: React.ReactNode;
  testId?: string;
}

function MobileAccordion({ title, children, testId }: MobileAccordionProps) {
  const [open, setOpen] = useState(false);
  return (
    <div className="border-b border-white/10">
      <button
        className="w-full flex items-center justify-between py-3.5 font-display font-bold text-[15px] text-white tracking-[0.08em]"
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
        data-testid={testId}
      >
        {title}
        <ChevronDown size={16} className={`transition-transform duration-300 ${open ? "rotate-180 text-cy" : ""}`} />
      </button>
      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.3, ease: EASE }}
            className="overflow-hidden"
          >
            <div className="pb-3">{children}</div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}