// ==============================================
// Quotation Cart page
// ==============================================

function CartPage({ session, cart, updateCartLine, removeFromCart, clearCart, navigate }) {
  const isDealer = session?.role === "dealer";
  const subtotal = cart.reduce((s, i) => s + (isDealer ? i.dealerPrice : i.price) * i.qty, 0);
  const dealerDiscount = isDealer ? cart.reduce((s, i) => s + (i.price - i.dealerPrice) * i.qty, 0) : 0;
  const couponDiscount = 0;
  const beforeVat = subtotal - couponDiscount;
  const vat = beforeVat * 0.07;
  const total = beforeVat + vat;

  if (cart.length === 0) {
    return (
      <div className="container">
        <div className="page-head">
          <div>
            <div className="crumb"><a onClick={() => navigate("catalog")}>หน้าแรก</a> <Icon name="chevron-right" size={12}/> ใบเสนอราคา</div>
            <h1>ตะกร้าใบเสนอราคา</h1>
          </div>
        </div>
        <div className="card empty-state">
          <Icon name="file-text" size={56} className="icon"/>
          <h3>ยังไม่มีสินค้าในใบเสนอราคา</h3>
          <p>เลือกสินค้าจากแคตตาล็อก แล้วกด "เพิ่มในใบเสนอราคา" เพื่อสร้างใบเสนอราคา PDF</p>
          <button className="btn btn-primary" onClick={() => navigate("catalog")}>
            <Icon name="grid" size={14}/> เลือกสินค้า
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="container">
      <div className="page-head">
        <div>
          <div className="crumb"><a onClick={() => navigate("catalog")}>หน้าแรก</a> <Icon name="chevron-right" size={12}/> ใบเสนอราคา</div>
          <h1>ตะกร้าใบเสนอราคา <span className="muted" style={{fontWeight:500, fontSize:16}}>· {cart.length} รายการ</span></h1>
        </div>
        <div className="flex gap-8">
          <button className="btn btn-ghost" onClick={() => navigate("catalog")}>
            <Icon name="plus" size={14}/> เพิ่มสินค้าอีก
          </button>
          <button className="btn btn-danger" onClick={() => { if (confirm("ล้างตะกร้าทั้งหมด?")) clearCart(); }}>
            <Icon name="trash" size={14}/> ล้างตะกร้า
          </button>
        </div>
      </div>

      <div className="cart-layout">
        <div className="card">
          <div className="card-head">
            <h3>รายการสินค้า</h3>
            <span className="muted small">ราคาในตาราง = ราคาก่อน VAT</span>
          </div>
          {cart.map(item => {
            const p = item;
            const unit = isDealer ? p.dealerPrice : p.price;
            return (
              <div className="cart-line" key={p.id}>
                <div className="cart-line-img"><ProductImg product={p}/></div>
                <div>
                  <div className="cart-line-name">{p.th}</div>
                  <div className="cart-line-sku">{p.sku} · {p.brand} · {p.en}</div>
                  <div className="cart-line-meta">
                    <QtyStepper value={p.qty} onChange={q => updateCartLine(p.id, { qty: q })}/>
                    <span className="muted small">{p.qty} × ฿{fmtMoney(unit)} = <b style={{color:"var(--navy-800)"}}>฿{fmtMoney(unit * p.qty)}</b></span>
                    {isDealer && <span className="chip" style={{ background:"#fef3c7", color:"#b45309" }}>Dealer -15%</span>}
                  </div>
                  <textarea
                    className="cart-line-note"
                    value={p.note || ""}
                    onChange={e => updateCartLine(p.id, { note: e.target.value })}
                    placeholder="หมายเหตุ / Spec เพิ่มเติม (จะปรากฏใต้รายการในใบเสนอราคา)"
                  />
                </div>
                <div className="cart-line-right">
                  <span className="cart-line-price">฿{fmtMoney(unit * p.qty)}</span>
                  <span className="cart-line-unit">฿{fmtMoney(unit)} × {p.qty}</span>
                  <button className="cart-line-remove" onClick={() => removeFromCart(p.id)} title="ลบรายการ">
                    <Icon name="trash" size={15}/>
                  </button>
                </div>
              </div>
            );
          })}
        </div>

        <aside>
          <div className="card" style={{ position: "sticky", top: 16 }}>
            <div className="card-head">
              <h3>สรุปยอด</h3>
            </div>
            <div className="card-body">
              <div className="summary-row">
                <span className="label">ยอดรวมก่อนส่วนลด ({cart.length} รายการ)</span>
                <span className="value">฿{fmtMoney(cart.reduce((s, i) => s + i.price * i.qty, 0))}</span>
              </div>
              {dealerDiscount > 0 && (
                <div className="summary-row discount">
                  <span className="label">ส่วนลด Dealer (Gold -15%)</span>
                  <span className="value">- ฿{fmtMoney(dealerDiscount)}</span>
                </div>
              )}
              <div className="summary-row">
                <span className="label">ยอดสินค้า</span>
                <span className="value">฿{fmtMoney(subtotal)}</span>
              </div>
              <div className="summary-row">
                <span className="label">ภาษีมูลค่าเพิ่ม 7%</span>
                <span className="value">฿{fmtMoney(vat)}</span>
              </div>
              <div className="summary-row total">
                <span className="label">รวมทั้งสิ้น</span>
                <span className="value">฿{fmtMoney(total)}</span>
              </div>

              <button className="btn btn-primary btn-block btn-lg mt-16" onClick={() => navigate("checkout")}>
                <Icon name="file-text" size={16}/> สร้างใบเสนอราคา
              </button>
              <button className="btn btn-outline btn-block mt-8" onClick={() => navigate("catalog")}>
                <Icon name="plus" size={14}/> เพิ่มสินค้าอีก
              </button>

              <div className="divider"></div>

              <div className="small muted" style={{ lineHeight: 1.6 }}>
                <div className="flex gap-8 center mb-8"><Icon name="info" size={13}/> <b>ราคามีผล 30 วัน</b> หลังวันที่ออกใบเสนอราคา</div>
                <div className="flex gap-8 center mb-8"><Icon name="truck" size={13}/> จัดส่งฟรียอด ฿2,000 ขึ้นไป (กทม.)</div>
                <div className="flex gap-8 center"><Icon name="shield" size={13}/> รับประกันตามเงื่อนไขผู้ผลิต</div>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

Object.assign(window, { CartPage });