// Cart — sheet-style

function Cart({ go, items, updateQty, removeItem }) {
  const lines = items.map((it) => {
    const p = PRODUCTS.find((x) => x.id === it.id);
    return { ...it, p };
  }).filter((l) => l.p);

  const subtotal = lines.reduce((s, l) => s + l.p.price * l.qty, 0);
  const total = subtotal;

  return (
    <div className="screen" data-screen-label="04 Cart">
      {/* Header */}
      <div style={{
        padding: "var(--safe-top) 20px 16px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        borderBottom: "1px solid var(--line)",
      }}>
        <button className="btn-icon" onClick={() => go("catalog")}>
          <Icon name="back" size={18} />
        </button>
        <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 22 }}>
          Keranjang
        </div>
        <div style={{ width: 40 }} />
      </div>

      {lines.length === 0 ? (
        <div style={{ padding: "60px 24px", textAlign: "center" }}>
          <div style={{
            width: 80, height: 80, borderRadius: "50%",
            background: "var(--surface)", border: "1px solid var(--line)",
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            color: "var(--ink-muted)", marginBottom: 18,
          }}>
            <Icon name="bag" size={28} />
          </div>
          <div className="h-display" style={{ fontSize: 24 }}>Keranjang masih kosong</div>
          <p style={{ color: "var(--ink-muted)", fontSize: 14, marginTop: 8 }}>
            Belum ada cokelat di sini.<br/>Yuk pilih dulu.
          </p>
          <button className="btn btn-primary" onClick={() => go("catalog")} style={{ width: "auto", padding: "14px 28px", marginTop: 18 }}>
            Lihat katalog
          </button>
        </div>
      ) : (
        <>
          <div style={{ padding: "16px 20px 0" }}>
            <div className="eyebrow">{lines.reduce((s, l) => s + l.qty, 0)} barang</div>
          </div>

          <div style={{ padding: "12px 20px 20px" }}>
            {lines.map((l) => (
              <div key={l.id} style={{
                display: "flex", gap: 14, padding: "16px 0",
                borderBottom: "1px solid var(--line)",
              }}>
                <div style={{
                  width: 84, height: 84, borderRadius: "var(--r-md)",
                  background: `linear-gradient(135deg, ${l.p.color}22, ${l.p.accent}30)`,
                  display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
                  position: "relative", overflow: "hidden",
                }}>
                  <ProductPhoto p={l.p} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 17, lineHeight: 1.1 }}>
                    {l.p.name}
                  </div>
                  <div style={{ fontSize: 11, color: "var(--ink-muted)", marginTop: 2, fontFamily: "var(--font-mono)" }}>
                    {l.p.weight} · {formatIDR(l.p.price)}
                  </div>
                  <div style={{
                    display: "flex", alignItems: "center", justifyContent: "space-between",
                    marginTop: 12,
                  }}>
                    <div style={{
                      display: "flex", alignItems: "center", gap: 4,
                      background: "var(--surface)", borderRadius: 999,
                      border: "1px solid var(--line)", padding: 2,
                    }}>
                      <button onClick={() => updateQty(l.id, l.qty - 1)} style={{
                        width: 28, height: 28, border: "none", background: "transparent",
                        cursor: "pointer", color: "var(--ink)", display: "flex", alignItems: "center", justifyContent: "center",
                      }}>
                        <Icon name="minus" size={12} />
                      </button>
                      <div style={{ minWidth: 22, textAlign: "center", fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600 }}>
                        {l.qty}
                      </div>
                      <button onClick={() => updateQty(l.id, l.qty + 1)} style={{
                        width: 28, height: 28, border: "none", background: "transparent",
                        cursor: "pointer", color: "var(--ink)", display: "flex", alignItems: "center", justifyContent: "center",
                      }}>
                        <Icon name="plus" size={12} />
                      </button>
                    </div>
                    <div style={{ fontFamily: "var(--font-mono)", fontWeight: 600, fontSize: 14 }}>
                      {formatIDR(l.p.price * l.qty)}
                    </div>
                  </div>
                </div>
                <button onClick={() => removeItem(l.id)} style={{
                  background: "transparent", border: "none", padding: 4,
                  color: "var(--ink-muted)", cursor: "pointer", alignSelf: "flex-start",
                }}>
                  <Icon name="trash" size={16} />
                </button>
              </div>
            ))}
          </div>

          {/* Summary */}
          <div style={{ padding: "0 20px 20px" }}>
            <div style={{
              background: "var(--surface)", border: "1px solid var(--line)",
              borderRadius: "var(--r-lg)", padding: 18,
            }}>
              {[
                { l: "Subtotal", v: formatIDR(subtotal) },
                { l: "Pengiriman", v: `mulai ${formatIDR(minShippingFee())}`, s: "Dihitung saat checkout" },
              ].map((row) => (
                <div key={row.l} style={{
                  display: "flex", justifyContent: "space-between", alignItems: "baseline",
                  padding: "6px 0",
                }}>
                  <div>
                    <div style={{ fontSize: 13, color: "var(--ink-soft)" }}>{row.l}</div>
                    {row.s && <div style={{ fontSize: 11, color: "var(--ink-muted)", marginTop: 2 }}>{row.s}</div>}
                  </div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 14 }}>{row.v}</div>
                </div>
              ))}
              <hr className="hr-dot" style={{ margin: "10px 0" }} />
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 20 }}>Total</div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 18, fontWeight: 700 }}>{formatIDR(total)}</div>
              </div>
            </div>
          </div>
        </>
      )}

      {lines.length > 0 && (
        <div style={{
          position: "sticky", bottom: 0,
          background: "var(--bg)", borderTop: "1px solid var(--line)",
          padding: "14px 20px 18px",
        }}>
          <button className="btn btn-primary" onClick={() => go("checkout")}>
            Lanjut ke checkout
            <Icon name="chevron" size={16} />
          </button>
          <div style={{ textAlign: "center", marginTop: 8, fontSize: 11, color: "var(--ink-muted)" }}>
            Bayar saat barang sampai · COD tersedia
          </div>
        </div>
      )}
    </div>
  );
}

window.Cart = Cart;