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

function Header({ page, setPage, dark, mobile }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const wl = useWishlist();
  const ui = useUI();
  const headerRef = useRef(null);
  const [headerH, setHeaderH] = useState(0);

  // Mide la altura real del header (cambia entre mobile/desktop, y si el
  // logo/padding cambian en el futuro). La expone como --hdr-h en :root
  // para que la ficha de producto (única página sin foto) pueda reservar
  // su espacio real sin hardcodear píxeles.
  useEffect(() => {
    const el = headerRef.current;
    if (!el) return;
    const update = () => {
      const h = el.offsetHeight;
      setHeaderH(h);
      document.documentElement.style.setProperty("--hdr-h", h + "px");
    };
    update();
    const ro = new ResizeObserver(update);
    ro.observe(el);
    window.addEventListener("resize", update);
    return () => { ro.disconnect(); window.removeEventListener("resize", update); };
  }, []);

  // 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]);

  // Regla fija, sin scroll ni detección de fondo: header transparente y
  // logo/texto BLANCO en todas las páginas. Única excepción: la ficha de
  // producto (sin foto de fondo), donde va oscuro. El menú/drawer lateral
  // siempre es oscuro también (fondo crema propio, más abajo).
  // Asumo que la ficha de producto usa page==="ficha" (nombre del archivo
  // ficha.jsx) — si el valor real es otro, dímelo y cambio esta única línea.
  const isFicha = page === "ficha";
  const onDark = !isFicha;
  const showSpacer = isFicha;

  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 (
    <>
      <style>{`
        /* Header SIEMPRE transparente — se integra con la gráfica de cada página */
        .hdr { transition: color .25s !important;
               padding: 18px 28px !important;
               background: transparent !important;
               box-shadow: none !important;
               border-bottom: none !important; }

        /* La posición del logo (derecha, fija) va como estilo inline en el
           botón mismo — position:fixed le gana a cualquier CSS externo,
           sea flex, grid o lo que sea que use styles.css. Aquí solo el
           tamaño de la imagen por breakpoint. */
        .hdr-mark { padding: 0 !important; }
        @media(max-width:759px){
          .hdr { padding: 14px 16px !important; }
          .hdr-mark img { height: 62px !important; max-height: none !important; width: auto !important; }
        }
        @media(min-width:760px){
          .hdr-mark img { height: 78px !important; max-height: none !important; width: auto !important; }
        }

        /* Heart fuera del header — vive en drawer */
        .hdr-right { display: none !important; }

        /* Por defecto (sin foto detrás): texto oscuro, legible sobre crema */
        .hdr-nav button { color: #4a4035 !important; text-shadow: none !important; }
        .hdr-nav button.is-active { color: #1b1813 !important; }
        .hdr-burger span { background: #1b1813 !important; }
        .hdr-mark img { filter: none; }

        /* Con foto/banner detrás (on-dark): scrim sutil + texto blanco */
        .hdr.on-dark {
          background: linear-gradient(to bottom, rgba(20,17,13,.38) 0%, rgba(20,17,13,.14) 70%, rgba(20,17,13,0) 100%) !important;
        }
        .hdr.on-dark .hdr-nav button { color: #F7F2EA !important; text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 2px 14px rgba(0,0,0,.5); }
        .hdr.on-dark .hdr-nav button.is-active { color: #fff !important; }
        .hdr.on-dark .hdr-burger span { background: #F7F2EA !important; box-shadow: 0 1px 6px rgba(0,0,0,.5); }
        .hdr.on-dark .hdr-mark img { filter: drop-shadow(0 2px 16px rgba(0,0,0,.6)); }
      `}</style>
      <header
        ref={headerRef}
        className={`hdr ${onDark ? "on-dark" : ""}`}
        style={{
          background: onDark
            ? "linear-gradient(to bottom, rgba(20,17,13,.38) 0%, rgba(20,17,13,.14) 70%, rgba(20,17,13,0) 100%) !important"
            : "transparent !important",
          boxShadow: "none !important",
          borderBottom: "none !important",
        }}
      >
        <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={onDark ? "logo-blanco.png" : "logo.png"} alt="DAVA'S" style={{height: 80, width: "auto", display: "block", maxHeight: "none"}} onError={(e) => { e.target.outerHTML = "<span>Dava\u2019s</span>"; }} />
        </button>
        <div className="hdr-right">
          <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>

      {/* El header es fixed y ahora SIEMPRE transparente. Solo reservamos su
          altura real (empujamos el contenido) en páginas SIN foto arriba
          (dark=false) — ahí no hay nada que "integrar", así que evitamos que
          tape el primer texto/breadcrumb. En páginas con foto (dark=true:
          home, banner de categoría) el header flota superpuesto a propósito. */}
      {showSpacer && <div aria-hidden="true" style={{ height: headerH }} />}

      {/* Wishlist flotante — solo aparece cuando hay piezas guardadas */}
      {wl.count > 0 && (
        <button
          onClick={ui.openWl}
          style={{
            position:"fixed", bottom:88, right:16, zIndex:200,
            background:"#1b1813", color:"#F7F2EA", border:"none",
            borderRadius:40, padding:"10px 16px", cursor:"pointer",
            display:"flex", alignItems:"center", gap:8, fontSize:12,
            fontWeight:600, letterSpacing:"0.05em", boxShadow:"0 8px 24px rgba(0,0,0,.35)",
            transition:"transform .2s, box-shadow .2s",
          }}
          onMouseEnter={e=>{e.currentTarget.style.transform="translateY(-2px)";e.currentTarget.style.boxShadow="0 12px 32px rgba(0,0,0,.4)";}}
          onMouseLeave={e=>{e.currentTarget.style.transform="translateY(0)";e.currentTarget.style.boxShadow="0 8px 24px rgba(0,0,0,.35)";}}>
          <HeartIcon filled size={13} stroke="#C8901A" />
          <span style={{color:"#C8901A"}}>{wl.count}</span> guardada{wl.count > 1 ? "s" : ""}
        </button>
      )}

      {/* 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>

      {/* Botón flotante de WhatsApp — fijo abajo a la derecha */}
      <a
        className="wa-float"
        href="https://wa.me/573005260637"
        target="_blank"
        rel="noopener"
        aria-label="Escríbenos por WhatsApp"
        style={{
          position: "fixed",
          bottom: 22,
          right: 18,
          zIndex: 9999,
          width: 56,
          height: 56,
          borderRadius: "50%",
          background: "#25D366",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          boxShadow: "0 6px 24px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15)",
          textDecoration: "none",
          color: "#fff",
          transition: "transform .22s, box-shadow .22s",
        }}
        onMouseEnter={e => { e.currentTarget.style.transform="scale(1.1)"; e.currentTarget.style.boxShadow="0 10px 32px rgba(0,0,0,.3)"; }}
        onMouseLeave={e => { e.currentTarget.style.transform="scale(1)"; e.currentTarget.style.boxShadow="0 6px 24px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15)"; }}
      >
        <svg viewBox="0 0 32 32" width="28" height="28" fill="#fff" aria-hidden="true">
          <path d="M16.004 0h-.008C7.174 0 .002 7.173.002 16c0 3.5 1.128 6.74 3.046 9.37L1.05 31.4l6.24-1.995A15.92 15.92 0 0016.004 32C24.83 32 32 24.827 32 16S24.83 0 16.004 0zm9.31 22.594c-.386 1.09-1.92 1.995-3.142 2.26-.836.178-1.927.32-5.6-1.202-4.697-1.946-7.72-6.72-7.956-7.03-.226-.31-1.898-2.527-1.898-4.82 0-2.293 1.165-3.42 1.635-3.9.386-.394.84-.573 1.12-.573.27 0 .54.003.776.014.5.02.75.048 1.08.83.41.97 1.39 3.363 1.51 3.61.122.246.204.534.04.844-.154.31-.29.448-.534.71-.244.262-.476.464-.72.745-.222.246-.474.51-.193 1 .28.49 1.25 2.06 2.683 3.337 1.847 1.647 3.388 2.157 3.94 2.4.41.18.9.143 1.205-.18.387-.41.865-1.09 1.35-1.76.345-.48.78-.54 1.234-.37.464.164 2.94 1.385 3.443 1.636.504.25.84.373.964.583.122.21.122 1.213-.265 2.303z"/>
        </svg>
      </a>
    </>
  );
}

window.Header = Header;
