/* global React, useWishlist, useUI, HeartIcon, Arr */
const { useState, useEffect } = React;

function Header({ page, setPage, dark, mobile }) {
  const [solid, setSolid] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const wl = useWishlist();
  const ui = useUI();

  useEffect(() => {
    const root = mobile ? document.querySelector(".phone-scroll") : window;
    const onScroll = () => {
      const y = mobile ? root.scrollTop : window.scrollY;
      setSolid(y > 32);
    };
    onScroll();
    root.addEventListener("scroll", onScroll, { passive: true });
    return () => root.removeEventListener("scroll", onScroll);
  }, [mobile, page]);

  // Cierra el menú al cambiar de página
  useEffect(() => { setMenuOpen(false); }, [page]);

  // Bloquea scroll del body cuando el menú está abierto
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  const navItems = [
    { id: "home", label: "Inicio" },
    { id: "catalog", label: "Catálogo" },
    { id: "cursos", label: "Cursos" },
    { id: "showroom", label: "Showroom" },
    { id: "clientes", label: "Clientes" },
    { id: "taller", label: "Taller" },
  ];

  return (
    <>
      <header className={`hdr ${solid ? "solid" : ""} ${dark && !solid ? "on-dark" : ""}`}>
        <nav className="hdr-nav">
          {navItems.map((it) => (
            <button key={it.id} className={page === it.id ? "is-active" : ""} onClick={() => setPage(it.id)}>{it.label}</button>
          ))}
        </nav>
        <button className="hdr-burger" aria-label="Abrir menú" onClick={() => setMenuOpen(true)}>
          <span></span><span></span><span></span>
        </button>
        <button className="hdr-mark" onClick={() => setPage("home")} aria-label="Volver al inicio" style={{ display: "flex", alignItems: "center", lineHeight: 0, fontSize: 0, padding: 0, background: "transparent", border: "none", cursor: "pointer" }}>
          <img src="logo.png" alt="DAVA'S" style={{height: 80, width: "auto", display: "block", minHeight: 80, maxHeight: "none"}} onError={(e) => { e.target.outerHTML = "<span>Dava\u2019s</span>"; }} />
        </button>
        <div className="hdr-right">
          <a className="pill wa-pill" href="https://wa.me/573005260637" target="_blank" rel="noopener">
            <span>WhatsApp · 300 526 0637</span>
          </a>
          <button className="hdr-heart" onClick={ui.openWl} aria-label={`Mis piezas, ${wl.count} guardadas`}>
            <HeartIcon size={15} />
            {wl.count > 0 ? <span className="count">{wl.count}</span> : null}
          </button>
        </div>
      </header>

      {/* Mobile drawer */}
      <div className={`hdr-drawer-back ${menuOpen ? "is-open" : ""}`} onClick={() => setMenuOpen(false)} />
      <aside className={`hdr-drawer ${menuOpen ? "is-open" : ""}`}>
        <div className="hdr-drawer-top">
          <img src="logo.png" alt="DAVA'S" style={{height: 80, width: "auto"}} onError={(e) => { e.target.outerHTML = "<span style='font-family:var(--f-display);font-style:italic;font-size:22px'>Dava\u2019s</span>"; }} />
          <button className="hdr-drawer-close" onClick={() => setMenuOpen(false)} aria-label="Cerrar">×</button>
        </div>
        <nav className="hdr-drawer-nav">
          {navItems.map((it) => (
            <button key={it.id} className={page === it.id ? "is-active" : ""} onClick={() => setPage(it.id)}>{it.label}</button>
          ))}
        </nav>
        <div className="hdr-drawer-foot">
          <a className="pill wa-pill" href="https://wa.me/573005260637" target="_blank" rel="noopener">
            <span>WhatsApp · 300 526 0637</span>
          </a>
          <button className="hdr-drawer-wl" onClick={() => { setMenuOpen(false); ui.openWl(); }}>
            <HeartIcon size={14} /> Mis piezas {wl.count > 0 ? `(${wl.count})` : ""}
          </button>
        </div>
      </aside>
    </>
  );
}

window.Header = Header;