import { AnimatePresence, motion } from 'framer-motion';
import {
  ChevronDown,
  Mail,
  MapPin,
  Menu,
  Phone,
  Search,
  X,
} from 'lucide-react';
import { useEffect, useState } from 'react';
import { Link, NavLink } from 'react-router-dom';
import { NAV_ITEMS } from '../../data/content';
import { useSiteContent } from '../../context/ContentContext';
import { LinkButton } from '../ui/Button';
import { AccessibilityToolbar } from './AccessibilityToolbar';
import { GlobalSearchModal } from '../ui/GlobalSearchModal';
import { QuickCallbackModal } from '../ui/QuickCallbackModal';

export function Header() {
  const { site } = useSiteContent();
  const [mobileOpen, setMobileOpen] = useState(false);
  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
  const [searchOpen, setSearchOpen] = useState(false);
  const [callbackOpen, setCallbackOpen] = useState(false);

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

  return (
    <>
      <header className="sticky top-0 z-50 shadow-md">
        <AccessibilityToolbar />

        <div
          className="hidden text-xs text-white md:block"
          style={{ background: 'var(--color-topbar)' }}
        >
          <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-3 px-4 py-1.5">
            <div className="flex flex-wrap items-center gap-4">
              <a href={`tel:${site.phone?.replace(/\s/g, '') || ''}`} className="flex items-center gap-1.5 hover:underline font-medium">
                <Phone className="h-3.5 w-3.5 text-yellow-300" />
                {site.phone}
              </a>
              <a href={`mailto:${site.email}`} className="flex items-center gap-1.5 hover:underline">
                <Mail className="h-3.5 w-3.5 text-white/80" />
                {site.email}
              </a>
              <span className="hidden items-center gap-1.5 lg:flex text-white/90">
                <MapPin className="h-3.5 w-3.5 shrink-0 text-white/80" />
                {site.address}
              </span>
            </div>

            <div className="flex items-center gap-3">
              <button
                type="button"
                onClick={() => setCallbackOpen(true)}
                className="hidden sm:inline-flex items-center gap-1 rounded-full bg-white/15 px-3 py-0.5 text-xs font-semibold hover:bg-white/25 transition-colors"
              >
                Request Callback ⚡
              </button>
              {/* <span className="rounded-full bg-white/20 px-3 py-0.5 text-xs font-bold text-yellow-300 border border-white/20">
                {site.ndisBadge}
              </span> */}
            </div>
          </div>
        </div>

        <nav className="border-b border-theme bg-[var(--color-surface)]/95 backdrop-blur-md">
          <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-3">
            <Link to="/" className="group flex items-center gap-2.5" onClick={() => setMobileOpen(false)}>
              <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] text-white shadow-md transition-transform group-hover:scale-105">
                <span className="font-bold text-lg">E</span>
              </div>
              <div>
                <span className="block font-[family-name:var(--font-display)] text-2xl font-bold tracking-tight text-[var(--color-text)] leading-none md:text-3xl">
                  EMBR<span className="text-primary">ACE</span>
                </span>
                <span className="block text-[10px] font-semibold uppercase tracking-widest text-muted">
                  HomeCare · NDIS
                </span>
              </div>
            </Link>

            <ul className="hidden items-center gap-1 lg:flex">
              {NAV_ITEMS.map((item) => (
                <li
                  key={item.label}
                  className="relative"
                  onMouseEnter={() => item.children && setOpenDropdown(item.label)}
                  onMouseLeave={() => setOpenDropdown(null)}
                >
                  <NavLink
                    to={item.href}
                    className={({ isActive }) =>
                      `flex items-center gap-1 rounded-lg px-3 py-2 text-sm font-medium transition-colors hover:bg-[color-mix(in_srgb,var(--color-primary)_8%,transparent)] ${
                        isActive ? 'text-primary font-bold' : 'text-[var(--color-text)]'
                      }`
                    }
                  >
                    {item.label}
                    {item.children && <ChevronDown className="h-4 w-4 opacity-60" />}
                  </NavLink>

                  {item.children && openDropdown === item.label && (
                    <motion.div
                      initial={{ opacity: 0, y: 8 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: 8 }}
                      className="absolute left-0 top-full mt-1 w-64 rounded-2xl border border-theme bg-[var(--color-surface)] p-2 shadow-xl backdrop-blur-md"
                    >
                      {item.children.map((child) => (
                        <Link
                          key={child.href}
                          to={child.href}
                          className="block rounded-xl px-3 py-2 text-xs font-semibold text-[var(--color-text)] hover:bg-[color-mix(in_srgb,var(--color-primary)_10%,transparent)] hover:text-primary transition-colors"
                        >
                          {child.label}
                        </Link>
                      ))}
                    </motion.div>
                  )}
                </li>
              ))}
            </ul>

            <div className="flex items-center gap-2">
              <button
                type="button"
                onClick={() => setSearchOpen(true)}
                className="flex items-center gap-2 rounded-full border border-theme bg-[var(--color-bg)] px-3 py-1.5 text-xs text-muted hover:border-primary hover:text-primary transition-colors"
                title="Search services & site (Ctrl+K)"
              >
                <Search className="h-3.5 w-3.5 text-primary" />
                <span className="hidden sm:inline">Search...</span>
                <kbd className="hidden rounded bg-surface px-1.5 py-0.5 text-[10px] font-mono border border-theme md:inline">
                  Ctrl K
                </kbd>
              </button>

              <div className="hidden sm:flex items-center gap-2">
                <LinkButton to="/contact#book">Book Consultant</LinkButton>
              </div>

              <button
                type="button"
                className="rounded-xl border border-theme p-2 text-[var(--color-text)] lg:hidden"
                onClick={() => setMobileOpen(!mobileOpen)}
                aria-label="Toggle navigation menu"
              >
                {mobileOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
              </button>
            </div>
          </div>
        </nav>

        {/* Mobile Navigation Drawer */}
        <AnimatePresence>
          {mobileOpen && (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="fixed inset-0 z-[60] bg-black/50 lg:hidden"
              onClick={() => setMobileOpen(false)}
            >
              <motion.div
                initial={{ x: '100%' }}
                animate={{ x: 0 }}
                exit={{ x: '100%' }}
                transition={{ type: 'spring', damping: 28, stiffness: 280 }}
                className="absolute right-0 top-0 flex h-full w-[min(100%,320px)] flex-col bg-[var(--color-surface)] shadow-2xl"
                onClick={(e) => e.stopPropagation()}
              >
                <div className="flex items-center justify-between border-b border-theme p-4">
                  <span className="font-[family-name:var(--font-display)] text-xl font-bold">Menu</span>
                  <button type="button" onClick={() => setMobileOpen(false)} aria-label="Close menu">
                    <X className="h-6 w-6" />
                  </button>
                </div>

                <div className="flex-1 overflow-y-auto p-4">
                  {NAV_ITEMS.map((item) => (
                    <div key={item.label} className="mb-4">
                      <Link
                        to={item.href}
                        className="block py-2 text-base font-bold text-[var(--color-text)]"
                        onClick={() => setMobileOpen(false)}
                      >
                        {item.label}
                      </Link>
                      {item.children?.map((child) => (
                        <Link
                          key={child.href}
                          to={child.href}
                          className="block py-1.5 pl-3 text-xs text-muted hover:text-primary"
                          onClick={() => setMobileOpen(false)}
                        >
                          {child.label}
                        </Link>
                      ))}
                    </div>
                  ))}
                  <div className="mt-4 space-y-2">
                    <LinkButton to="/contact#book" className="w-full justify-center">
                      Book A Consultant
                    </LinkButton>
                  </div>
                </div>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>
      </header>

      <GlobalSearchModal isOpen={searchOpen} onClose={() => setSearchOpen(false)} />
      <QuickCallbackModal isOpen={callbackOpen} onClose={() => setCallbackOpen(false)} />
    </>
  );
}