/* global React */
const { useState: useS_ca } = React;

function Cart() {
  const { cart, products, removeLine, setQty, total, navigate } = useStore();

  if (cart.length === 0) {
    return (
      <div className="page">
        <section className="page-banner concrete">
          <div className="mono caps" style={{fontSize:11,color:"var(--gold)",marginBottom:30}}>Заказ · 00 / 00</div>
          <h1>Корзина</h1>
        </section>
        <div style={{maxWidth:720,margin:"0 auto",padding:"100px 40px 160px",textAlign:"center"}}>
          <div className="mono" style={{fontSize:12,letterSpacing:".24em",textTransform:"uppercase",color:"var(--gray-2)",marginBottom:24}}>
            Корзина пуста
          </div>
          <h2 className="h-display" style={{fontSize:48,marginBottom:30}}>Тишина.</h2>
          <p style={{fontFamily:"var(--f-display)",fontWeight:300,fontSize:18,lineHeight:1.6,color:"var(--gray)",marginBottom:50,maxWidth:480,margin:"0 auto 50px"}}>
            Положите что-нибудь сюда. Или ничего. Никто не торопит.
          </p>
          <button className="btn btn-gold" onClick={()=>navigate("catalog")}>
            <span>В каталог</span> <span className="arrow">→</span>
          </button>
        </div>
      </div>
    );
  }

  const delivery = total >= 12000 ? 0 : 350;
  const grand = total + delivery;

  return (
    <div className="page">
      <section className="page-banner concrete">
        <div className="mono caps" style={{fontSize:11,color:"var(--gold)",marginBottom:30}}>
          Заказ · {String(cart.reduce((s,l)=>s+l.qty,0)).padStart(2,"0")} {cart.length === 1 ? "позиция" : "позиций"}
        </div>
        <h1>Корзина</h1>
      </section>

      <div className="cart-wrap">
        <div>
          {cart.map((line, idx) => {
            const p = products.find(p => p.id === line.productId);
            if (!p) return null;
            return (
              <div className="cart-line" key={idx}>
                <a href={`#product/${p.id}`} onClick={(e)=>{e.preventDefault();navigate(`product/${p.id}`);}}>
                  <img src={p.img[0]} alt={p.name}/>
                </a>
                <div>
                  <a className="name" href={`#product/${p.id}`} onClick={(e)=>{e.preventDefault();navigate(`product/${p.id}`);}}>
                    {p.name}
                  </a>
                  <div className="meta">Размер · {line.size}</div>
                  <div className="meta">{p.composition}</div>
                  <button className="remove" onClick={()=>removeLine(idx)}>Удалить</button>
                </div>
                <div className="qty">
                  <button onClick={()=>setQty(idx, line.qty - 1)}>−</button>
                  <span>{line.qty}</span>
                  <button onClick={()=>setQty(idx, line.qty + 1)}>+</button>
                </div>
                <div className="price">{(p.price * line.qty).toLocaleString("ru-RU")} ₽</div>
              </div>
            );
          })}

          <div style={{marginTop:30,fontFamily:"var(--f-mono)",fontSize:11,letterSpacing:".2em",textTransform:"uppercase",color:"var(--gray-2)",display:"flex",justifyContent:"space-between"}}>
            <span>Подытог · {cart.reduce((s,l)=>s+l.qty,0)} ед.</span>
            <a href="#catalog" onClick={(e)=>{e.preventDefault();navigate("catalog");}} style={{borderBottom:"1px solid var(--line)",paddingBottom:3}}>
              ← Продолжить выбор
            </a>
          </div>
        </div>

        <aside className="cart-summary">
          <h3>Сводка</h3>
          <div className="row">
            <span>Товары</span>
            <span>{total.toLocaleString("ru-RU")} ₽</span>
          </div>
          <div className="row">
            <span>Доставка СДЭК</span>
            <span>{delivery === 0 ? <span style={{color:"var(--gold)"}}>Бесплатно</span> : `${delivery} ₽`}</span>
          </div>
          {delivery > 0 && (
            <div className="row" style={{fontSize:11,color:"var(--gray-2)"}}>
              <span>До бесплатной доставки</span>
              <span>{(12000 - total).toLocaleString("ru-RU")} ₽</span>
            </div>
          )}
          <div className="row total">
            <span>Итого</span>
            <span>{grand.toLocaleString("ru-RU")} ₽</span>
          </div>
          <button className="btn btn-gold btn-block" style={{marginTop:30}} onClick={()=>navigate("checkout")}>
            <span>К оформлению</span> <span className="arrow">→</span>
          </button>
          <div className="mono" style={{fontSize:10,letterSpacing:".2em",textTransform:"uppercase",color:"var(--gray-2)",marginTop:24,lineHeight:1.7}}>
            Оплата: СБП / банковская карта<br/>
            Доставка по РФ · СДЭК<br/>
            Возврат 14 дней
          </div>
        </aside>
      </div>
    </div>
  );
}

window.Cart = Cart;