/* ============================================================
   LUMFELL — shared components
   ============================================================ */
const { useState, useEffect, useRef } = React;
const I = window.LumIcons;

/* ---- Placeholder image ------------------------------------ */
function Placeholder({ tag, tone, light, style, className = "", children }) {
  const vars = tone ? { "--ph-a": tone[0], "--ph-b": tone[1] } : {};
  return (
    <div className={`ph ${light ? "ph--light" : ""} ${className}`}
      style={{ ...vars, ...style }}>
      {children}
      {tag && <span className="ph__tag">{tag}</span>}
    </div>
  );
}

/* ---- money ------------------------------------------------ */
const money = (n) => "£" + n.toLocaleString("en-GB");

/* ---- Product card ----------------------------------------- */
function ProductCard({ p, onOpen, onAdd, index = 0 }) {
  return (
    <article className="pcard reveal" style={{ transitionDelay: `${index * 70}ms` }}>
      <div className="pcard__media" onClick={() => onOpen(p)}>
        <Placeholder tag={p.tag} tone={p.tone} className="pcard__ph" />
        {p.badge && <span className="pcard__badge">{p.badge}</span>}
        <button className="pcard__quick"
          onClick={(e) => { e.stopPropagation(); onAdd(p); }}>
          Add to Bag
        </button>
      </div>
      <div className="pcard__body">
        <div className="pcard__row">
          <h3 className="pcard__name" onClick={() => onOpen(p)}>{p.name}</h3>
          <span className="pcard__price">{money(p.price)}</span>
        </div>
        <p className="pcard__meta">{p.leather} · {p.color}</p>
      </div>
    </article>
  );
}

/* ---- Header ----------------------------------------------- */
const NAV = ["Shop", "About", "Journal", "Contact"];

function Header({ solid, onDark, cream, cartCount, onCart, onHome, onNavShop }) {
  return (
    <header className={`hdr ${solid ? "hdr--solid" : ""} ${onDark ? "hdr--ondark" : ""}`}>
      <div className="hdr__inner u-wrap">
        <button className="hdr__brand" onClick={onHome} aria-label="Lumfell home">
          <img src={cream ? "uploads/logo-cream.png" : "uploads/logo-ink.png"} alt="" className="hdr__logomark" />
          <span className="hdr__word">Lumfell</span>
        </button>
        <nav className="hdr__nav">
          {NAV.map((n) => (
            <a key={n} className="hdr__link"
              onClick={(e) => { e.preventDefault(); if (n === "Shop") onNavShop(); }}
              href="#">{n}</a>
          ))}
        </nav>
        <div className="hdr__actions">
          <button className="hdr__icn" aria-label="Search"><I.IcoSearch size={20} /></button>
          <button className="hdr__icn hdr__bag" aria-label="Shopping bag" onClick={onCart}>
            <I.IcoBag size={20} />
            {cartCount > 0 && <span className="hdr__count">{cartCount}</span>}
          </button>
        </div>
      </div>
    </header>
  );
}

/* ---- Cart drawer ------------------------------------------ */
function CartDrawer({ open, items, onClose, onQty, onRemove, onCheckout }) {
  const subtotal = items.reduce((s, it) => s + it.price * it.qty, 0);
  useEffect(() => {
    const k = (e) => e.key === "Escape" && onClose();
    if (open) window.addEventListener("keydown", k);
    return () => window.removeEventListener("keydown", k);
  }, [open]);

  return (
    <>
      <div className={`scrim ${open ? "is-on" : ""}`} onClick={onClose} />
      <aside className={`cart ${open ? "is-on" : ""}`} aria-hidden={!open}>
        <div className="cart__head">
          <span className="u-eyebrow">Your Bag — {items.reduce((s, i) => s + i.qty, 0)}</span>
          <button className="cart__x" onClick={onClose} aria-label="Close bag"><I.IcoClose size={20} /></button>
        </div>

        {items.length === 0 ? (
          <div className="cart__empty">
            <p className="u-serif cart__empty-h">Your bag is empty.</p>
            <p className="cart__empty-p">Every piece is cut and stitched by hand, then sent to your door.</p>
            <button className="btn btn--ghost" onClick={onClose}>Continue Shopping</button>
          </div>
        ) : (
          <>
            <div className="cart__items thin-scroll">
              {items.map((it) => (
                <div className="citem" key={it.id}>
                  <Placeholder tag="" tone={it.tone} className="citem__ph" />
                  <div className="citem__body">
                    <div className="citem__top">
                      <h4 className="citem__name">{it.name}</h4>
                      <button className="citem__rm" onClick={() => onRemove(it.id)} aria-label="Remove"><I.IcoClose size={15} /></button>
                    </div>
                    <p className="citem__meta">{it.color}</p>
                    <div className="citem__foot">
                      <div className="qty">
                        <button onClick={() => onQty(it.id, -1)} aria-label="Decrease"><I.IcoMinus size={14} /></button>
                        <span>{it.qty}</span>
                        <button onClick={() => onQty(it.id, +1)} aria-label="Increase"><I.IcoPlus size={14} /></button>
                      </div>
                      <span className="citem__price">{money(it.price * it.qty)}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
            <div className="cart__foot">
              <div className="cart__sub">
                <span className="u-eyebrow">Subtotal</span>
                <span className="cart__total">{money(subtotal)}</span>
              </div>
              <p className="cart__note">Shipping & taxes calculated at checkout.</p>
              <button className="btn" style={{ width: "100%", justifyContent: "center" }} onClick={onCheckout}>
                <span>Checkout</span>
              </button>
              <button className="cart__cont" onClick={onClose}>Continue shopping</button>
            </div>
          </>
        )}
      </aside>
    </>
  );
}

/* ---- Toast stack ------------------------------------------ */
function ToastStack({ toasts }) {
  return (
    <div className="toasts">
      {toasts.map((t) => (
        <div className="toast" key={t.id}>
          <span className="toast__ic"><I.IcoCheck size={16} /></span>
          <span>{t.msg}</span>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Placeholder, ProductCard, Header, CartDrawer, ToastStack, money });