/* ============================================================
   3DAX — Account drawer (customer order history)
   ============================================================ */
function Account({ open, user, onClose, onLogout, onOpenAdmin }){
  const orders = useStoreData(
    () => (user ? Store.ordersForUser(user.id, user.email) : []),
    [user && user.id]
  );
  useEffect(() => {
    if(open) document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = ""; };
  }, [open]);
  if(!user) return null;

  const statusLabel = (o) => o.status === "completed" ? "Enviado" : "En preparación";

  return (
    <div className={"acc" + (open ? " open" : "")} aria-hidden={!open}>
      <div className="acc__scrim" onClick={onClose} />
      <aside className="acc__panel" role="dialog" aria-label="Mi cuenta">
        <div className="acc__head">
          <div>
            <div className="acc__hi">Hola,</div>
            <h3 className="display">{user.name}</h3>
            <div className="acc__email">{user.email}</div>
          </div>
          <button className="cart__close" onClick={onClose} aria-label="Cerrar">
            <svg width="20" height="20" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.6"><path d="M6 6l12 12M18 6L6 18"/></svg>
          </button>
        </div>

        {user.role === "admin" && (
          <button className="acc__admin" onClick={onOpenAdmin}>
            <span>⚙︎ Panel de administración</span><span className="arr">→</span>
          </button>
        )}

        <div className="acc__body">
          <div className="acc__section-t">Mis pedidos <span>({orders.length})</span></div>
          {orders.length === 0 ? (
            <div className="acc__empty">Todavía no tienes pedidos.<br/>¡Tu primera deckbox te espera! 🏴‍☠️</div>
          ) : orders.map((o) => (
            <div className="aorder" key={o.id}>
              <div className="aorder__top">
                <span className="aorder__code">{o.code}</span>
                <span className={"aorder__status " + (o.status === "completed" ? "is-done" : "is-pending")}>{statusLabel(o)}</span>
              </div>
              <div className="aorder__items">
                {o.items.map((it, i) => (
                  <div key={i} className="aorder__item">
                    <span>{it.qty}× {it.name}</span><span>{eur(it.price * it.qty)}</span>
                  </div>
                ))}
              </div>
              <div className="aorder__foot">
                <span>{new Date(o.createdAt).toLocaleDateString("es-ES")}</span>
                {o.tracking
                  ? <span className="aorder__track">📦 Seguimiento: <strong>{o.tracking}</strong></span>
                  : <span className="aorder__total">{eur(o.total)}</span>}
              </div>
            </div>
          ))}
        </div>

        <div className="acc__foot">
          <button className="btn btn-ghost btn-block" onClick={onLogout}>Cerrar sesión</button>
        </div>
      </aside>
    </div>
  );
}
window.Account = Account;