// 彤冠茶莊 website — slide-in Cart drawer
const { Button: CdButton, IconButton: CdIconButton, CartLineItem: CdCartLineItem, Price: CdPrice } = window.TongguanTeaDesignSystem_a1a7a1;

function CartDrawer({ open, onClose, items, t, lang, products, setQty, removeItem, onCheckout }) {
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  const lines = items.map((it) => ({ ...it, p: products.find((p) => p.id === it.id) })).filter((x) => x.p);
  const subtotal = lines.reduce((s, l) => s + l.p.price * l.qty, 0);
  const freeShip = subtotal >= 1500 || subtotal === 0;

  return (
    <div aria-hidden={!open} style={{ position: "fixed", inset: 0, zIndex: 60, pointerEvents: open ? "auto" : "none" }}>
      <div onClick={onClose} style={{ position: "absolute", inset: 0, background: "var(--scrim)", opacity: open ? 1 : 0, transition: "opacity var(--dur-base) var(--ease-out)" }}></div>
      <aside style={{
        position: "absolute", top: 0, right: 0, height: "100%", width: "min(440px, 92vw)",
        background: "var(--surface-page)", boxShadow: "var(--shadow-lg)", display: "flex", flexDirection: "column",
        transform: open ? "translateX(0)" : "translateX(100%)", transition: "transform var(--dur-slow) var(--ease-out)",
      }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "22px 24px", borderBottom: "1px solid var(--border-hairline)" }}>
          <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 22, margin: 0 }}>{t.cart.title} <span style={{ fontFamily: "var(--font-mono)", fontSize: 14, color: "var(--text-muted)" }}>({lines.reduce((s, l) => s + l.qty, 0)})</span></h2>
          <CdIconButton icon="x" variant="ghost" ariaLabel="close" onClick={onClose} />
        </div>

        {lines.length === 0 ? (
          <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 18, padding: 30 }}>
            <i data-lucide="package" style={{ width: 34, height: 34, color: "var(--ink-4)" }}></i>
            <p style={{ fontFamily: "var(--font-sans)", color: "var(--text-secondary)", margin: 0 }}>{t.cart.empty}</p>
            <CdButton variant="secondary" onClick={onClose}>{t.cart.emptyCta}</CdButton>
          </div>
        ) : (
          <>
            <div style={{ flex: 1, overflowY: "auto", padding: "0 24px" }}>
              {lines.map((l) => (
                <CdCartLineItem key={l.id} image={l.p.image} name={l.p.name[lang]} variant={l.p.variant[lang]} amount={l.p.price} qty={l.qty}
                  onQty={(n) => setQty(l.id, n)} onRemove={() => removeItem(l.id)} />
              ))}
            </div>
            <div style={{ borderTop: "1px solid var(--border-hairline)", padding: 24, background: "var(--paper-0)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
                <span style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-secondary)" }}>{t.cart.subtotal}</span>
                <CdPrice amount={subtotal} size="md" />
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 14 }}>
                <span style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-secondary)" }}>{t.cart.shipping}</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 14, color: freeShip ? "var(--tea)" : "var(--ink)" }}>{freeShip ? t.cart.shippingFree : "NT$ 120"}</span>
              </div>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: 11.5, color: "var(--text-muted)", margin: "0 0 14px", lineHeight: 1.5 }}>{t.cart.note}</p>
              <CdButton variant="seal" fullWidth size="lg" iconRight="arrow-right" onClick={onCheckout}>{t.cart.checkout}</CdButton>
            </div>
          </>
        )}
      </aside>
    </div>
  );
}
window.CartDrawer = CartDrawer;