/* global React, useWishlist, useUI, Placeholder, waLink, waMessageForWishlist, HeartIcon */
const { useEffect } = React;

function Wishlist() {
  const wl = useWishlist();
  const ui = useUI();

  useEffect(() => {
    if (!ui.wlOpen) return;
    const onKey = (e) => { if (e.key === "Escape") ui.closeWl(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [ui.wlOpen]);

  const total = wl.items.reduce((s, p) => s + (Number(String(p.price || "0").replace(/\./g, "")) || 0), 0);
  const fmt = (n) => n.toLocaleString("es-CO");
  const msg = waMessageForWishlist(wl.items);

  return (
    <>
      <div className={`wl-back ${ui.wlOpen ? "is-open" : ""}`} onClick={ui.closeWl} />
      <aside className={`wl-drawer ${ui.wlOpen ? "is-open" : ""}`} aria-hidden={!ui.wlOpen}>
        <div className="hd">
          <h3>Mis piezas <span className="mono" style={{ marginLeft: 8, color: "var(--ink-mute)" }}>{wl.count}</span></h3>
          <button className="close" onClick={ui.closeWl}>Cerrar</button>
        </div>

        {wl.items.length === 0 ? (
          <div className="body">
            <div className="empty">
              <div style={{ display: "inline-grid", placeItems: "center", width: 64, height: 64, borderRadius: "50%", border: "1px solid var(--line)", color: "var(--ink-mute)" }}>
                <HeartIcon size={22} />
              </div>
              <p>Guarda con corazón las piezas que te gusten — se acumulan acá listas para pedir por WhatsApp.</p>
              <button className="btn line" onClick={ui.closeWl}>Seguir mirando</button>
            </div>
          </div>
        ) : (
          <>
            <div className="body">
              {wl.items.map((p) => (
                <div className="item" key={p.id}>
                  <Placeholder ratio="4/5" tone={p.tone || "bone"} label="" corner={p.family || ""} />
                  <div>
                    <h5>{p.name}</h5>
                    <div className="sub">{p.family}{p.pattern ? ` · ${p.pattern}` : ""}</div>
                    {p.price ? <div className="price">$ {p.price}</div> : null}
                  </div>
                  <button className="rm" onClick={() => wl.remove(p.id)} aria-label="Quitar">Quitar</button>
                </div>
              ))}
            </div>
            <div className="ft">
              <div className="sum">
                <span>Subtotal estimado</span>
                <strong>$ {fmt(total)}</strong>
              </div>
              <a className="btn wa lg" href={waLink(msg)} target="_blank" rel="noopener">
                Pedir todas por WhatsApp
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 8h10M9 4l4 4-4 4" /></svg>
              </a>
              <button className="btn line sm" onClick={wl.clear} style={{ alignSelf: "center" }}>Vaciar lista</button>
            </div>
          </>
        )}
      </aside>
    </>
  );
}

window.Wishlist = Wishlist;