const CartPage = () => {
  const { cart, removeFromCart, updateQty, addToCart, openPDP, go, lang, t } = useApp();
  const subtotal = cart.reduce((s,l)=>s+(l.price*l.qty),0);
  const upsells = PRODUCTS.filter(p => !cart.find(l=>l.id===p.id) && p.price).slice(0,3);
  const hasDining = cart.some(l=>{const p=PRODUCTS.find(x=>x.id===l.id);return p&&p.category==='Esstische';});

  return (
    <div className="cart-page">
      <div className="cart-page-inner">
        <div className="cart-page-header">
          <div className="eyebrow">{t('Warenkorb')}</div>
          <h1>{t('Deine Auswahl')} <span className="cart-page-count">({cart.length})</span></h1>
        </div>

        {cart.length===0 && (
          <div className="cart-page-empty">
            <p>{t('Deine Auswahl ist leer.')}</p>
            <p>{t('Fang mit einem kleinen Piece an.')}</p>
            <button className="btn" onClick={()=>go({page:'shop'})}>{t('Alle Pieces')} <Icon name="arrow"/></button>
          </div>
        )}

        {cart.length>0 && <>
          <div className="cart-page-items">
            {cart.map((l,i)=>(
              <div className="cart-page-li" key={i}>
                <div className="cart-page-img"><Ph tone={l.tone} src={l.img} alt={l.name || ''}/></div>
                <div className="cart-page-body">
                  <div className="cart-page-name">{l.name}</div>
                  <div className="cart-page-variant">{l.size} · {l.finish}</div>
                  <div className="cart-page-qc">
                    <button onClick={()=>updateQty(i,l.qty-1)}><Icon name="minus"/></button>
                    <div className="cart-page-qn">{l.qty}</div>
                    <button onClick={()=>updateQty(i,l.qty+1)}><Icon name="plus"/></button>
                  </div>
                  <a className="cart-page-rm" onClick={()=>removeFromCart(i)}>{t('Entfernen')}</a>
                </div>
                <div className="cart-page-price">{fmt(l.price*l.qty)}</div>
              </div>
            ))}
          </div>

          {upsells.length>0 && <div className="cart-page-upsell">
            <h5>{t('Wird oft dazu bestellt')}</h5>
            <div className="cart-page-upsell-grid">
              {upsells.map(p=>(
                <div className="cart-page-u" key={p.id}>
                  <div className="cart-page-u-img" onClick={()=>openPDP(p)} style={{cursor:'pointer'}}><Ph tone={p.tone} src={p.img} alt={p.name || ''}/></div>
                  <div className="cart-page-u-info">
                    <div className="cart-page-u-name">{p.name}</div>
                    <div className="cart-page-u-price">{t('ab')} {fmt(p.price)}</div>
                  </div>
                  <button className="cart-page-u-add" onClick={()=>addToCart({id:p.id,name:p.name,tone:p.tone,img:p.img,price:p.price,size:p.sizes[0].k,finish:p.tones[0],qty:1})}>{t('Hinzu')}</button>
                </div>
              ))}
            </div>
          </div>}

          <div className="cart-page-summary">
            <div className="cart-page-row"><span>{t('Zwischensumme')}</span><span>{fmt(subtotal)}</span></div>
            <div className="cart-page-row"><span>{t('Lieferung')}</span><span>{hasDining ? t('An der Kasse berechnet') : t('Kostenlos')}</span></div>
            <div className="cart-page-total"><span>{t('Gesamt')}</span><span>{fmt(subtotal)}</span></div>
            <a className="btn brass" href="/checkout" style={{textAlign:'center',textDecoration:'none'}}>{t('Zur Kasse')} · {fmt(subtotal)} <Icon name="arrow"/></a>
            <div className="cart-page-sec"><span>{t('SSL sicher')}</span><span>·</span><span>{t('inkl. MwSt.')}</span><span>·</span><span>Klarna</span></div>
          </div>
        </>}
      </div>
    </div>
  );
};

Object.assign(window, { CartPage });