"use client";

import Link from "next/link";
import { CalendarClock, Menu, PhoneCall, ShoppingBag, X } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { useCart } from "./cart-provider";
import { isFeatureEnabled, publicNav, siteConfig } from "@/config/site";
import { BookingTrigger } from "./booking-modal";
import { AuthTrigger } from "./auth-modal";

export function Header({ phoneHref }: { phoneHref: string }) {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const menuButtonRef = useRef<HTMLButtonElement | null>(null);
  const { count, hydrated, ordersEnabled } = useCart();
  const nav = publicNav.filter((item) => isFeatureEnabled(item.feature));

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

  useEffect(() => {
    if (!open) return;
    const previous = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const onKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setOpen(false);
        menuButtonRef.current?.focus();
      }
    };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = previous;
      window.removeEventListener("keydown", onKey);
    };
  }, [open]);

  return (
    <header className={`sticky top-0 z-40 border-b border-white/10 bg-kiln-black/90 backdrop-blur-xl transition-all ${scrolled ? "shadow-2xl" : ""}`}>
      <div className={`site-container flex items-center justify-between gap-4 transition-all ${scrolled ? "h-14" : "h-16"}`}>
        <Link href="/" className="flex items-center gap-3" aria-label="КИЛН на главную">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src="/brand/kiln-logo-content.webp" width={504} height={227} alt="КИЛН" className="site-logo shrink-0 object-contain" />
        </Link>
        <nav className="header-desktop-nav items-center gap-6 text-sm text-kiln-milk/82">
          {nav.map((item) => (
            <Link key={item.href} href={item.href} className="hover:text-white">
              {item.label}
            </Link>
          ))}
        </nav>
        <div className="header-actions">
          {siteConfig.features.bookingEnabled ? <BookingTrigger className="icon-button icon-button-primary booking-button" ariaLabel="Забронировать стол" tooltip="Забронировать">
            <CalendarClock size={20} /> <span className="booking-label">Бронировать</span>
          </BookingTrigger> : null}
          <a href={phoneHref} className="icon-button" aria-label="Позвонить в ресторан" data-tooltip="Позвонить">
            <PhoneCall size={20} />
          </a>
          <button type="button" className="icon-button header-social" aria-label="Написать в ресторан" data-tooltip="Написать (скоро)">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src="/icons/contact.svg" alt="" className="social-icon" />
          </button>
          <button type="button" className="icon-button header-social" aria-label="MAX" data-tooltip="MAX (скоро)">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src="/icons/max.svg" alt="" className="social-icon" />
          </button>
          <button type="button" className="icon-button header-social" aria-label="Telegram" data-tooltip="Telegram (скоро)">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src="/icons/telegram.svg" alt="" className="social-icon social-icon-telegram" />
          </button>
          {ordersEnabled ? <Link href="/cart" aria-label="Корзина" className="icon-button relative" data-tooltip="Корзина">
            <ShoppingBag size={20} />
            {hydrated && count ? <span className="absolute -right-1 -top-1 rounded-full bg-kiln-ember px-1.5 text-xs">{count}</span> : null}
          </Link> : null}
          <AuthTrigger />
          <button ref={menuButtonRef} className="icon-button header-menu-toggle" aria-label={open ? "Закрыть меню" : "Открыть меню"} aria-expanded={open} data-tooltip={open ? "Закрыть меню" : "Меню"} onClick={() => setOpen((value) => !value)}>
            {open ? <X size={20} /> : <Menu size={20} />}
          </button>
        </div>
      </div>
      {open && typeof document !== "undefined" ? createPortal(
        <>
          <div className="header-mobile-backdrop" role="presentation" onMouseDown={() => setOpen(false)} />
          <div className="header-mobile-menu fixed inset-x-0 top-14 z-50 max-h-[calc(100dvh-3.5rem)] overflow-y-auto border-t border-white/10">
            <nav className="site-container grid gap-2 py-6" aria-label="Мобильная навигация">
              {nav.map((item) => (
                <Link key={item.href} href={item.href} className="min-h-12 border-b border-white/10 py-3 text-2xl" onClick={() => setOpen(false)}>
                  {item.label}
                </Link>
              ))}
              <div className="flex gap-2">
                <a href={phoneHref} className="button button-secondary min-w-0 flex-1" onClick={() => setOpen(false)}>
                  <PhoneCall size={19} /> Позвонить
                </a>
                <button type="button" className="button button-secondary min-w-0 flex-1" onClick={() => setOpen(false)}>
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img src="/icons/contact.svg" alt="" className="h-[19px] w-[19px]" /> Написать
                </button>
              </div>
            </nav>
          </div>
        </>,
        document.body
      ) : null}
    </header>
  );
}