// Cart drawer — slide-over with line items, coupon input, and DM-order CTA
function CartDrawer({ open, items, onClose, onDM, onChange }) {
  const [couponInput, setCouponInput] = React.useState("");
  const [applied, setApplied]         = React.useState(null); // { code, discount }
  const [couponErr, setCouponErr]     = React.useState("");

  if (!open) return null;
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  const discountAmt = applied ? Math.round(subtotal * applied.discount / 100) : 0;
  const total = subtotal - discountAmt;

  const applyCoupon = () => {
    setCouponErr("");
    const code = couponInput.trim().toUpperCase();
    if (!code) return;
    try {
      const saved = localStorage.getItem("n9_admin_coupons");
      const list = saved ? JSON.parse(saved) : [];
      const c = list.find(x => x.code === code && x.active);
      if (!c) { setCouponErr("Код олдсонгүй эсвэл идэвхгүй байна."); return; }
      if (c.uses >= c.maxUses) { setCouponErr("Энэ код дууссан байна."); return; }
      if (new Date(c.expires) < new Date()) { setCouponErr("Хугацаа дууссан байна."); return; }
      setApplied({ code: c.code, discount: c.discount });
      // increment usage
      const updated = list.map(x => x.code === code ? {...x, uses: x.uses + 1} : x);
      localStorage.setItem("n9_admin_coupons", JSON.stringify(updated));
      setCouponInput("");
    } catch(e) { setCouponErr("Алдаа гарлаа."); }
  };

  const removeCoupon = () => { setApplied(null); setCouponErr(""); };

  const mob = typeof window !== "undefined" && window.innerWidth < 768;
  return (
    <div style={cdStyles.scrim} onClick={onClose}>
      <aside style={{ ...cdStyles.panel, width: mob ? "100%" : 440, borderRadius: mob ? "20px 20px 0 0" : 0, height: mob ? "92%" : "100%", marginTop: mob ? "auto" : 0 }} onClick={(e) => e.stopPropagation()}>
        <div style={cdStyles.head}>
          <div>
            <span style={cdStyles.meta}>YOUR BAG · {items.length} ITEM{items.length === 1 ? "" : "S"}</span>
            <h2 style={cdStyles.title}>Захиалгаа шалгаарай.</h2>
          </div>
          <button onClick={onClose} style={cdStyles.close}><Ic.Close /></button>
        </div>

        {items.length === 0 ? (
          <div style={cdStyles.empty}>
            <img src="assets/chrome-orb.svg" style={{width: 120, opacity: 0.7}} />
            <h3 style={cdStyles.emptyTitle}>Nothing yet.</h3>
            <p style={cdStyles.emptyLead}>The 3 left won't wait forever.</p>
          </div>
        ) : (
          <div style={cdStyles.list}>
            {items.map((it, i) => (
              <div key={i} style={cdStyles.item}>
                <div style={{...cdStyles.thumb, background: it.img ? "#FAFAFB" : it.palette[0]}}>
                  {it.img
                    ? <img src={it.img} style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 12 }} />
                    : <img src={it.id.startsWith("ipn") || it.id.startsWith("ips") ? "assets/icon-ipod.svg" : "assets/chrome-orb.svg"} style={{width: "60%", height: "60%"}} />
                  }
                </div>
                <div style={cdStyles.itemBody}>
                  <span style={cdStyles.itemCat}>{it.cat.toUpperCase()} · {it.color.toUpperCase()}</span>
                  <div style={cdStyles.itemName}>{it.name}</div>
                  <div style={cdStyles.itemFoot}>
                    <div style={cdStyles.qty}>
                      <button onClick={() => onChange(i, it.qty - 1)} style={cdStyles.qtyBtn}>−</button>
                      <span style={cdStyles.qtyVal}>{it.qty}</span>
                      <button onClick={() => onChange(i, it.qty + 1)} style={cdStyles.qtyBtn}>+</button>
                    </div>
                    <span style={cdStyles.itemPrice}>₮ {(it.price * it.qty).toLocaleString()}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}

        <div style={cdStyles.foot}>
          {/* Coupon input */}
          {!applied ? (
            <div style={cdStyles.couponWrap}>
              <input
                style={cdStyles.couponInput}
                placeholder="Купон код оруулах..."
                value={couponInput}
                onChange={e => { setCouponInput(e.target.value.toUpperCase()); setCouponErr(""); }}
                onKeyDown={e => e.key === "Enter" && applyCoupon()}
              />
              <button style={cdStyles.couponBtn} onClick={applyCoupon}>Хэрэглэх</button>
            </div>
          ) : (
            <div style={cdStyles.couponApplied}>
              <span>✦ <b>{applied.code}</b> — {applied.discount}% хямдрал</span>
              <button style={cdStyles.couponRemove} onClick={removeCoupon}>×</button>
            </div>
          )}
          {couponErr && <div style={cdStyles.couponErr}>{couponErr}</div>}

          {/* Totals */}
          <div style={cdStyles.totalRow}>
            <span style={cdStyles.totalLbl}>Subtotal</span>
            <span style={{...cdStyles.totalVal, fontSize: applied ? 18 : 24, color: applied ? "#8A8990" : "#0E0D11", textDecoration: applied ? "line-through" : "none"}}>₮ {subtotal.toLocaleString()}</span>
          </div>
          {applied && (
            <div style={{...cdStyles.totalRow, marginTop: 4}}>
              <span style={{...cdStyles.totalLbl, color: "#FF6A30"}}>Хямдрал -{applied.discount}%</span>
              <span style={{fontFamily: "Inter, sans-serif", fontWeight: 700, fontSize: 18, color: "#FF6A30"}}>−₮ {discountAmt.toLocaleString()}</span>
            </div>
          )}
          {applied && (
            <div style={{...cdStyles.totalRow, marginTop: 6, paddingTop: 10, borderTop: "1px solid #E8E7E9"}}>
              <span style={{...cdStyles.totalLbl, color: "#0E0D11", fontWeight: 600}}>Нийт дүн</span>
              <span style={{...cdStyles.totalVal, fontSize: 26}}>₮ {total.toLocaleString()}</span>
            </div>
          )}
          <span style={cdStyles.shipNote}>Shipping calculated at next step.</span>
          <button onClick={onDM} disabled={items.length === 0} style={{...cdStyles.cta, opacity: items.length === 0 ? 0.4 : 1}}>
            Захиалах ✦
          </button>
          <button style={cdStyles.alt} onClick={onDM}>Checkout руу үргэлжлэх →</button>
        </div>
      </aside>
    </div>
  );
}

const cdStyles = {
  scrim: { position:"fixed", inset:0, background:"rgba(14,13,17,0.4)", zIndex:100, display:"flex", justifyContent:"flex-end", flexDirection:"column", animation:"fade .22s" },
  panel: { width:440, height:"100%", background:"#FFFFFF", display:"flex", flexDirection:"column", animation:"slidein .25s cubic-bezier(.22,.61,.36,1)", overflowY:"auto" },
  head: { display:"flex", justifyContent:"space-between", alignItems:"flex-start", padding:"22px 24px 18px", borderBottom:"1px solid #F2F1F3" },
  meta: { fontFamily:"JetBrains Mono, monospace", fontSize:10, letterSpacing:"0.18em", textTransform:"uppercase", color:"#8A8990" },
  title: { margin:"6px 0 0", fontFamily:"Inter, sans-serif", fontWeight:900, fontSize:28, lineHeight:0.95, letterSpacing:"-0.025em", textTransform:"uppercase", color:"#0E0D11" },
  close: { background:"transparent", border:"none", color:"#0E0D11", cursor:"pointer", padding:6 },
  empty: { flex:1, display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", textAlign:"center", padding:24 },
  emptyTitle: { margin:"14px 0 4px", fontFamily:"Inter, sans-serif", fontWeight:900, fontSize:28, letterSpacing:"-0.025em", textTransform:"uppercase", color:"#0E0D11" },
  emptyLead: { margin:0, fontFamily:"Inter, sans-serif", fontSize:14, color:"#4A4852" },
  list: { flex:1, overflowY:"auto", padding:"8px 24px" },
  item: { display:"flex", gap:14, padding:"16px 0", borderBottom:"1px solid #F2F1F3" },
  thumb: { width:80, height:80, borderRadius:12, display:"flex", alignItems:"center", justifyContent:"center", flexShrink:0 },
  itemBody: { flex:1, display:"flex", flexDirection:"column" },
  itemCat: { fontFamily:"JetBrains Mono, monospace", fontSize:9, letterSpacing:"0.18em", color:"#8A8990" },
  itemName: { fontFamily:"Inter, sans-serif", fontWeight:600, fontSize:14, color:"#0E0D11", marginTop:2 },
  itemFoot: { marginTop:"auto", display:"flex", justifyContent:"space-between", alignItems:"center" },
  qty: { display:"flex", alignItems:"center", border:"1px solid #E8E7E9", borderRadius:10 },
  qtyBtn: { width:30, height:30, background:"transparent", border:"none", fontSize:14, color:"#0E0D11", cursor:"pointer" },
  qtyVal: { width:30, textAlign:"center", fontFamily:"Inter, sans-serif", fontWeight:600, fontSize:13, color:"#0E0D11" },
  itemPrice: { fontFamily:"Inter, sans-serif", fontWeight:700, fontSize:14, color:"#0E0D11" },
  foot: { padding:"20px 24px 24px", borderTop:"1px solid #E8E7E9", background:"#FAFAFB" },
  totalRow: { display:"flex", justifyContent:"space-between", alignItems:"baseline" },
  totalLbl: { fontFamily:"Inter, sans-serif", fontSize:14, color:"#4A4852" },
  totalVal: { fontFamily:"Inter, sans-serif", fontWeight:800, fontSize:24, color:"#0E0D11", letterSpacing:"-0.01em" },
  shipNote: { display:"block", marginTop:4, fontFamily:"JetBrains Mono, monospace", fontSize:10, letterSpacing:"0.15em", color:"#8A8990", textTransform:"uppercase" },
  couponWrap: { display:"flex", gap:8, marginBottom:14 },
  couponInput: { flex:1, border:"1px solid #E8E7E9", borderRadius:10, padding:"10px 13px", fontFamily:"JetBrains Mono, monospace", fontSize:13, letterSpacing:"0.06em", color:"#0E0D11", background:"#fff", outline:"none" },
  couponBtn: { flexShrink:0, background:"#0E0D11", color:"#fff", border:"none", borderRadius:10, padding:"10px 14px", fontFamily:"Inter, sans-serif", fontWeight:600, fontSize:13, cursor:"pointer" },
  couponApplied: { display:"flex", justifyContent:"space-between", alignItems:"center", background:"#FFEC4220", border:"1px solid #FFEC4260", borderRadius:10, padding:"10px 14px", marginBottom:14, fontFamily:"Inter, sans-serif", fontSize:13, color:"#0E0D11" },
  couponRemove: { background:"transparent", border:"none", cursor:"pointer", color:"#8A8990", fontSize:18, lineHeight:1, padding:0 },
  couponErr: { fontFamily:"Inter, sans-serif", fontSize:12, color:"#FF3B6F", marginBottom:10, marginTop:-8 },
  cta: { width:"100%", marginTop:16, background:"#1F1D23", color:"#fff", border:"none", padding:"16px", borderRadius:12, fontFamily:"Inter, sans-serif", fontWeight:600, fontSize:14, display:"inline-flex", alignItems:"center", justifyContent:"center", gap:10, cursor:"pointer" },
  alt: { width:"100%", marginTop:8, background:"transparent", color:"#0E0D11", border:"none", padding:"10px", fontFamily:"Inter, sans-serif", fontWeight:500, fontSize:13, textDecoration:"underline", textUnderlineOffset:3, cursor:"pointer" },
};

window.CartDrawer = CartDrawer;