// ET Storefront concept — Cart (LINE login · guest checkout · Buzzebee)
function CartScreen({ nav, cart, setQty, removeItem }) {
  const DS = window.ETDesignSystem_0c923e;
  const { Button } = DS;
  const { PhotoSlot, Icon, money, LineButton } = window;

  const subtotal = cart.reduce((s, it) => s + it.product.price * it.qty, 0);
  const count = cart.reduce((s, it) => s + it.qty, 0);
  const shipping = subtotal === 0 ? 0 : subtotal >= 1500 ? 0 : 60;
  const total = subtotal + shipping;
  const points = Math.floor(subtotal / 100);

  if (cart.length === 0) {
    return (
      <div style={{ paddingBottom: 40 }}>
        <section style={{ padding: "26px 22px 16px", background: "var(--surface-band)" }}>
          <div className="et-kicker" style={{ color: "var(--et-brown)" }}>ตะกร้า · Cart</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 30, margin: "8px 0 0" }}>ตะกร้าของคุณ</h1>
        </section>
        <div style={{ padding: "70px 22px", display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 14 }}>
          <img src="et-mark-gold.svg" alt="" style={{ width: 92, opacity: 0.3 }} />
          <div style={{ fontFamily: "var(--font-display)", fontSize: 20 }}>ตู้ยังว่างอยู่</div>
          <div className="et-thai" style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--text-secondary)", maxWidth: 260 }}>ลองเข้าไปดูของแปลกที่เราคัดมา แล้วหยิบชิ้นที่ถูกใจใส่ตะกร้า</div>
          <div style={{ marginTop: 6 }}><Button variant="primary" size="md" onClick={() => nav("collection")}>เข้าดูในตู้</Button></div>
        </div>
        <window.Footer nav={nav} />
      </div>
    );
  }

  return (
    <div style={{ paddingBottom: 100 }}>
      <section style={{ padding: "26px 22px 16px", background: "var(--surface-band)" }}>
        <div className="et-kicker" style={{ color: "var(--et-brown)" }}>ตะกร้า · Cart</div>
        <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 30, margin: "8px 0 0" }}>ตะกร้าของคุณ</h1>
        <div className="et-thai" style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-secondary)", marginTop: 6 }}>{count} ชิ้น · เก็บไว้ให้แล้ว ของบางชิ้นมีชิ้นเดียว รีบหน่อยนะ</div>
      </section>

      {/* line items */}
      <section style={{ padding: "16px 22px 4px", display: "flex", flexDirection: "column", gap: 16 }}>
        {cart.map((it) => (
          <div key={it.product.id} style={{ display: "flex", gap: 14 }}>
            <button onClick={() => nav("pdp", it.product.id)} style={{ flex: "0 0 auto", width: 84, background: "none", border: "none", padding: 0, cursor: "pointer" }}>
              <PhotoSlot label="" ratio="1 / 1" radius="var(--r-2)" tone="plain" />
            </button>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", justifyContent: "space-between", gap: 10 }}>
                <div style={{ fontFamily: "var(--font-body)", fontSize: 13.5, lineHeight: 1.35 }}>{it.product.name}</div>
                <button onClick={() => removeItem(it.product.id)} className="et-icbtn" style={{ flex: "0 0 auto", width: 28, height: 28 }} aria-label="ลบ"><Icon name="x" size={16} stroke="var(--text-tertiary)" /></button>
              </div>
              <div className="et-microlabel" style={{ marginTop: 3 }}>{it.product.origin}</div>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 10 }}>
                <div style={{ display: "flex", alignItems: "center", border: "1px solid var(--line-strong)", borderRadius: "var(--r-2)", overflow: "hidden" }}>
                  <button className="et-step" onClick={() => setQty(it.product.id, Math.max(1, it.qty - 1))} aria-label="ลด"><Icon name="minus" size={15} /></button>
                  <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 14, width: 24, textAlign: "center" }}>{it.qty}</span>
                  <button className="et-step" onClick={() => setQty(it.product.id, it.qty + 1)} aria-label="เพิ่ม"><Icon name="plus" size={15} /></button>
                </div>
                <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16 }}>{money(it.product.price * it.qty)}</span>
              </div>
            </div>
          </div>
        ))}
      </section>

      {/* LINE login + guest + Buzzebee */}
      <section style={{ margin: "22px 22px 0", padding: "18px", borderRadius: "var(--r-3)", background: "var(--surface-card)", border: "1px solid var(--line-hairline)" }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 16 }}>เข้าสู่ระบบเพื่อสะสมแต้ม</div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, margin: "8px 0 14px" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-body)", fontSize: 12, color: "var(--et-brown)", background: "var(--et-brown-soft)", borderRadius: "var(--r-pill)", padding: "5px 11px", whiteSpace: "nowrap" }}>
            <Icon name="sparkle" size={14} stroke="var(--et-brown)" /> ออเดอร์นี้รับ {points} แต้ม Buzzebee
          </span>
        </div>
        <LineButton onClick={() => {}}>เข้าสู่ระบบด้วย LINE</LineButton>
        <div style={{ display: "flex", alignItems: "center", gap: 10, margin: "12px 0" }}>
          <div style={{ flex: 1, height: 1, background: "var(--line-hairline)" }} />
          <span className="et-microlabel">หรือ</span>
          <div style={{ flex: 1, height: 1, background: "var(--line-hairline)" }} />
        </div>
        <button onClick={() => {}} style={{ width: "100%", padding: "11px 16px", borderRadius: "var(--r-2)", border: "1px solid var(--line-strong)", background: "var(--et-white)", fontFamily: "var(--font-body)", fontWeight: 500, fontSize: 14, cursor: "pointer" }}>
          ชำระเงินแบบไม่ต้องสมัคร (Guest)
        </button>
      </section>

      {/* summary */}
      <section style={{ margin: "22px 22px 0", padding: "18px", borderRadius: "var(--r-3)", background: "var(--surface-soft)" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {[["ยอดรวมสินค้า", money(subtotal)], ["ค่าจัดส่ง", shipping === 0 ? "ฟรี" : money(shipping)]].map(([k, v]) => (
            <div key={k} style={{ display: "flex", justifyContent: "space-between", gap: 16 }}>
              <span style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--text-secondary)", whiteSpace: "nowrap" }}>{k}</span>
              <span style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: shipping === 0 && k === "ค่าจัดส่ง" ? "var(--ok-fg)" : "var(--text-primary)", whiteSpace: "nowrap" }}>{v}</span>
            </div>
          ))}
          {subtotal < 1500 ? (
            <div className="et-thai" style={{ fontFamily: "var(--font-body)", fontSize: 11.5, color: "var(--text-tertiary)" }}>ซื้อเพิ่มอีก {money(1500 - subtotal)} ส่งฟรี</div>
          ) : null}
          <div style={{ height: 1, background: "var(--line-hairline)", margin: "4px 0" }} />
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <span style={{ fontFamily: "var(--font-display)", fontSize: 17 }}>ยอดชำระ</span>
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 22 }}>{money(total)}</span>
          </div>
        </div>
      </section>

      {/* trust */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 8, padding: "18px 22px 0" }}>
        <Icon name="shield" size={16} stroke="var(--text-tertiary)" />
        <span style={{ fontFamily: "var(--font-body)", fontSize: 11.5, color: "var(--text-tertiary)" }}>ชำระเงินปลอดภัย · ของแท้ทุกชิ้น · มีปัญหาทักได้ทาง LINE</span>
      </div>

      <window.Footer nav={nav} />

      {/* sticky checkout */}
      <div style={{ position: "sticky", bottom: 0, zIndex: 40, background: "rgba(251,247,241,0.96)", backdropFilter: "blur(10px)", WebkitBackdropFilter: "blur(10px)", borderTop: "1px solid var(--line-hairline)", padding: "12px 18px 30px", display: "flex", alignItems: "center", gap: 14 }}>
        <div style={{ flex: "0 0 auto" }}>
          <div className="et-microlabel">ยอดชำระ</div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 19 }}>{money(total)}</div>
        </div>
        <button className="et-atc" onClick={() => {}}>ชำระเงิน <Icon name="arrowR" size={18} stroke="var(--et-cream)" /></button>
      </div>
    </div>
  );
}
window.CartScreen = CartScreen;