// Cart drawer for the Xedap.vn website kit.
const { Button, IconButton } = window.XedapVnDesignSystem_03b1c0;

function CartDrawer({ open, lines, onClose, onRemove, onCheckout }) {
  const { IMG } = window.KitData;
  const total = lines.reduce((s, l) => s + l.product.price * l.qty, 0);
  const fmt = (n) => new Intl.NumberFormat("vi-VN", { style: "currency", currency: "VND", maximumFractionDigits: 0 }).format(n);
  return (
    <React.Fragment>
      <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,.35)", opacity: open ? 1 : 0, pointerEvents: open ? "auto" : "none", transition: "opacity .3s", zIndex: 1000 }} />
      <aside style={{ position: "fixed", top: 0, right: 0, height: "100%", width: 420, maxWidth: "90vw", background: "#fff", boxShadow: "var(--shadow-lg)", transform: open ? "translateX(0)" : "translateX(100%)", transition: "transform .3s var(--ease-out)", zIndex: 1001, display: "flex", flexDirection: "column" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 20px", borderBottom: "1px solid var(--border)" }}>
          <span style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-heading)", fontWeight: 700, fontSize: 18 }}><i className="ph ph-shopping-cart" /> Giỏ hàng của bạn</span>
          <IconButton label="Đóng" onClick={onClose}><i className="ph ph-x" /></IconButton>
        </div>
        {lines.length === 0 ? (
          <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 12, color: "var(--muted-foreground)" }}>
            <i className="ph ph-shopping-cart" style={{ fontSize: 40 }} />
            <p style={{ margin: 0, fontSize: 14 }}>Giỏ hàng của bạn đang trống.</p>
            <Button onClick={onClose} style={{ boxShadow: "none" }}>Tiếp tục mua sắm</Button>
          </div>
        ) : (
          <React.Fragment>
            <div style={{ flex: 1, overflowY: "auto", padding: "0 20px" }}>
              {lines.map((l) => (
                <div key={l.product.slug} style={{ display: "flex", gap: 12, padding: "16px 0", borderBottom: "1px solid var(--border)" }}>
                  <img src={IMG(l.product.seed, 128, 128)} alt="" style={{ width: 64, height: 64, borderRadius: "var(--radius-sm)", objectFit: "cover", background: "var(--muted)" }} />
                  <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 2 }}>
                    <span style={{ fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: ".04em", color: "var(--muted-foreground)" }}>{l.product.brand}</span>
                    <span style={{ fontSize: 14, fontWeight: 500 }}>{l.product.name}</span>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--danger)" }}>{fmt(l.product.price)} × {l.qty}</span>
                  </div>
                  <button onClick={() => onRemove(l.product.slug)} aria-label="Xóa" style={{ border: "none", background: "none", cursor: "pointer", color: "var(--muted-foreground)", height: "fit-content" }}><i className="ph ph-trash" style={{ fontSize: 18 }} /></button>
                </div>
              ))}
            </div>
            <div style={{ padding: "16px 20px", borderTop: "1px solid var(--border)", display: "flex", flexDirection: "column", gap: 12 }}>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 16, fontWeight: 600 }}><span>Tạm tính</span><span style={{ fontFamily: "var(--font-mono)" }}>{fmt(total)}</span></div>
              <Button size="lg" style={{ width: "100%", boxShadow: "none" }} onClick={() => (onCheckout ? onCheckout() : (window.location.href = "./cart.html"))}>Tiến hành thanh toán</Button>
            </div>
          </React.Fragment>
        )}
      </aside>
    </React.Fragment>
  );
}

Object.assign(window, { CartDrawer });