/* ============================================================
   FRUTA FRESCA — Cart
   ============================================================ */
function CartScreen() {
  const { cart, updateQty, removeFromCart, cartTotal, go, addToCart } = useApp();
  const [coupon, setCoupon] = useState("");
  const [applied, setApplied] = useState(false);
  const discount = applied ? Math.round(cartTotal * 0.1) : 0;
  const delivery = cartTotal > 999 || cartTotal === 0 ? 0 : 79;
  const total = cartTotal - discount + delivery;
  const upsell = FF.products.filter((p) => !cart.find((c) => c.id === p.id)).slice(0, 4);

  if (cart.length === 0) {
    return (
      <div data-screen-label="Cart" className="container text-center" style={{ paddingBlock: 80, maxWidth: 460 }}>
        <span style={{ width: 64, height: 64, borderRadius: 18, background: "var(--surface)", margin: "0 auto 18px",
          display: "grid", placeItems: "center", color: "var(--muted)" }}><Icon name="bag" size={30} /></span>
        <h1 className="h2">Your basket is empty</h1>
        <p className="muted" style={{ marginTop: 8, marginBottom: 22 }}>Fill it with the season's finest — graded Class 1 and cold-chain fresh.</p>
        <button className="btn btn--primary btn--lg" onClick={() => go("shop")}>Start shopping</button>
      </div>
    );
  }

  return (
    <div data-screen-label="Cart" className="container" style={{ paddingBlock: 24 }}>
      <h1 className="h2" style={{ marginBottom: 4 }}>Your basket</h1>
      <p className="muted small" style={{ marginBottom: 22 }}>{cart.reduce((s, c) => s + c.qty, 0)} items · freshness guaranteed</p>

      <div className="cart-layout" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 28 }}>
        <div>
          <div className="surface-card" style={{ overflow: "hidden" }}>
            {cart.map((item, i) => (
              <div key={item.key} className="row" style={{ gap: 14, padding: 16, alignItems: "flex-start",
                borderBottom: i < cart.length - 1 ? "1px solid var(--line)" : "none" }}>
                <img src={FF.img(item.img, 200)} alt={item.name} style={{ width: 84, height: 84, borderRadius: 12, objectFit: "cover", flex: "none" }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="between" style={{ alignItems: "flex-start", gap: 8 }}>
                    <div>
                      <div style={{ fontWeight: 600, fontSize: 15.5 }}>{item.name}</div>
                      <div className="small muted">{item.unit}{item.subscribe ? " · Subscription" : ""}</div>
                    </div>
                    <button onClick={() => removeFromCart(item.key)} aria-label="Remove" style={{ background: "none",
                      border: "none", color: "var(--muted)", padding: 4 }}><Icon name="close" size={18} /></button>
                  </div>
                  <div className="between" style={{ marginTop: 12 }}>
                    <QtyStepper qty={item.qty} onChange={(q) => updateQty(item.key, q)} size="sm" />
                    <span style={{ fontWeight: 600 }} className="tabnum">{FF.rupee((item.subscribe ? Math.round(item.price * 0.9) : item.price) * item.qty)}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Reassurance */}
          <div className="row wrap" style={{ gap: 18, marginTop: 16, padding: "0 4px" }}>
            {[["snowflake", "Cold-chain packed"], ["shield", "Freshness guaranteed"], ["truck", "Next-day metro delivery"]].map(([ic, t]) => (
              <span key={t} className="row small muted" style={{ gap: 7 }}><Icon name={ic} size={16} style={{ color: "var(--green)" }} /> {t}</span>
            ))}
          </div>

          {/* Upsell */}
          <div style={{ marginTop: 28 }}>
            <h3 className="h3" style={{ fontSize: 20, marginBottom: 14 }}>Add a little extra</h3>
            <div className="carousel">
              {upsell.map((p) => (
                <div key={p.id} className="card" style={{ padding: 12, display: "flex", gap: 12, alignItems: "center" }}>
                  <img src={FF.img(p.img, 140)} alt={p.name} style={{ width: 56, height: 56, borderRadius: 10, objectFit: "cover", flex: "none" }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 13.5, lineHeight: 1.2 }}>{p.name}</div>
                    <div className="small muted">{FF.rupee(p.price)}</div>
                  </div>
                  <button className="pc-add" style={{ width: 34, height: 34, flex: "none" }} aria-label={`Add ${p.name}`}
                    onClick={() => addToCart(p, 1)}><Icon name="plus" size={16} /></button>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Summary */}
        <aside className="cart-summary" style={{ alignSelf: "start", position: "sticky", top: 84 }}>
          <div className="surface-card" style={{ padding: 20 }}>
            <h3 className="h3" style={{ fontSize: 19, marginBottom: 16 }}>Order summary</h3>
            <div className="field" style={{ marginBottom: 16 }}>
              <div className="row" style={{ gap: 8 }}>
                <input className="input" placeholder="Coupon code" value={coupon} onChange={(e) => setCoupon(e.target.value)} />
                <button className="btn btn--ghost" style={{ flex: "none" }} onClick={() => setApplied(coupon.trim().length > 2)}>Apply</button>
              </div>
              {applied && <span className="small" style={{ color: "var(--leaf-700)", marginTop: 4 }}>
                <Icon name="check" size={13} style={{ verticalAlign: "-2px" }} /> FRESH10 applied — 10% off</span>}
            </div>
            <div style={{ display: "grid", gap: 10, fontSize: 14.5, paddingBottom: 14, borderBottom: "1px solid var(--line)" }}>
              <div className="between"><span className="muted">Subtotal</span><span className="tabnum">{FF.rupee(cartTotal)}</span></div>
              {discount > 0 && <div className="between"><span className="muted">Discount</span><span className="tabnum" style={{ color: "var(--leaf-700)" }}>−{FF.rupee(discount)}</span></div>}
              <div className="between"><span className="muted">Delivery</span><span className="tabnum">{delivery === 0 ? "Free" : FF.rupee(delivery)}</span></div>
            </div>
            <div className="between" style={{ paddingBlock: 14 }}>
              <span style={{ fontWeight: 600 }}>Total</span>
              <span className="serif" style={{ fontSize: 24, fontWeight: 600 }}>{FF.rupee(total)}</span>
            </div>
            <button className="btn btn--primary btn--block btn--lg" onClick={() => go("checkout")}>
              Checkout <Icon name="arrowR" size={18} /></button>
            <button className="btn btn--ghost btn--block" style={{ marginTop: 10 }} onClick={() => go("shop")}>Continue shopping</button>
            {delivery > 0 && <p className="small muted text-center" style={{ marginTop: 12 }}>
              Add {FF.rupee(1000 - cartTotal)} more for free delivery</p>}
          </div>
        </aside>
      </div>
    </div>
  );
}
Object.assign(window, { CartScreen });