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

function Checkout() {
  const { cart, products, total, navigate, clearCart } = useStore();
  const [form, setForm] = useS_ch({ name:"", phone:"", email:"", city:"Россия", address:"", index:"", note:"" });
  const [pay, setPay] = useS_ch("sbp");
  const [orderId, setOrderId] = useS_ch(null);

  const set = (k) => (e) => setForm(f => ({...f, [k]: e.target.value}));

  const submit = (e) => {
    e.preventDefault();
    const id = "SA-" + (1024 + Math.floor(Math.random()*100));
    setOrderId(id);
    // store id locally so confirmation page sees it
    sessionStorage.setItem("lastOrderId", id);
    sessionStorage.setItem("lastOrderTotal", String(total));
    clearCart();
    navigate("confirmation");
  };

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

  if (cart.length === 0 && !orderId) {
    return (
      <div className="page">
        <div style={{padding:"180px 40px",textAlign:"center"}}>
          <h2 className="h-display" style={{fontSize:48,marginBottom:20}}>Корзина пуста</h2>
          <button className="btn btn-gold" onClick={()=>navigate("catalog")}>В каталог →</button>
        </div>
      </div>
    );
  }

  return (
    <div className="page">
      <section className="page-banner concrete">
        <div className="mono caps" style={{fontSize:11,color:"var(--gold)",marginBottom:30}}>Шаг 02 · 03</div>
        <h1>Оформление</h1>
      </section>

      <form className="checkout-wrap" onSubmit={submit}>
        <div>
          <div className="checkout-section">
            <h2>01 · Контакты</h2>
            <div className="form-grid">
              <div className="full">
                <span className="field-label">Имя и фамилия</span>
                <input required value={form.name} onChange={set("name")} placeholder="Анна Сандлер"/>
              </div>
              <div>
                <span className="field-label">Телефон</span>
                <input required type="tel" value={form.phone} onChange={set("phone")} placeholder="+7 (___) ___-__-__"/>
              </div>
              <div>
                <span className="field-label">E-mail</span>
                <input required type="email" value={form.email} onChange={set("email")} placeholder="you@example.com"/>
              </div>
            </div>
          </div>

          <div className="checkout-section">
            <h2>02 · Доставка</h2>
            <div className="form-grid">
              <div>
                <span className="field-label">Город</span>
                <input required value={form.city} onChange={set("city")}/>
              </div>
              <div>
                <span className="field-label">Индекс</span>
                <input value={form.index} onChange={set("index")} placeholder="119021"/>
              </div>
              <div className="full">
                <span className="field-label">Адрес доставки</span>
                <input required value={form.address} onChange={set("address")} placeholder="ул. Никитская, 12, кв. 8"/>
              </div>
              <div className="full">
                <span className="field-label">Комментарий курьеру (опционально)</span>
                <textarea rows="2" value={form.note} onChange={set("note")} style={{resize:"vertical",minHeight:60}}/>
              </div>
            </div>
            <div style={{marginTop:20,display:"flex",gap:14,fontFamily:"var(--f-mono)",fontSize:11,letterSpacing:".18em",textTransform:"uppercase",color:"var(--gray-2)"}}>
              <span style={{padding:"10px 16px",border:"1px solid var(--gold)",color:"var(--gold)"}}>СДЭК · ПВЗ · {delivery === 0 ? "Бесплатно" : `${delivery} ₽`}</span>
              <span style={{padding:"10px 16px",border:"1px solid var(--line)"}}>СДЭК · Курьер · 450 ₽</span>
              <span style={{padding:"10px 16px",border:"1px solid var(--line)"}}>СДЭК · Постамат · 290 ₽</span>
            </div>
          </div>

          <div className="checkout-section">
            <h2>03 · Оплата</h2>
            <div
              className={`pay-card ${pay==="sbp"?"active":""}`}
              data-cursor="hover" onClick={()=>setPay("sbp")}>
              <div>
                <div className="name">СБП · Система быстрых платежей</div>
                <div className="desc">Оплата через QR-код в банковском приложении</div>
              </div>
              <div className="radio-dot"></div>
            </div>
            <div
              className={`pay-card ${pay==="card"?"active":""}`}
              data-cursor="hover" onClick={()=>setPay("card")}>
              <div>
                <div className="name">Банковская карта</div>
                <div className="desc">Visa, Mastercard, МИР · защищённый платёж</div>
              </div>
              <div className="radio-dot"></div>
            </div>
            <div
              className={`pay-card ${pay==="cod"?"active":""}`}
              data-cursor="hover" onClick={()=>setPay("cod")}>
              <div>
                <div className="name">При получении</div>
                <div className="desc">Только в пунктах СДЭК · комиссия 99 ₽</div>
              </div>
              <div className="radio-dot"></div>
            </div>
          </div>

          <button type="submit" className="btn btn-gold btn-block" style={{padding:"28px 32px",marginTop:20}}>
            <span>Подтвердить заказ — {grand.toLocaleString("ru-RU")} ₽</span>
            <span className="arrow">→</span>
          </button>

          <div className="mono" style={{fontSize:10,letterSpacing:".2em",textTransform:"uppercase",color:"var(--gray-2)",marginTop:18,lineHeight:1.7}}>
            Нажимая «подтвердить», вы соглашаетесь с офертой и политикой обработки данных.
          </div>
        </div>

        <aside className="cart-summary" style={{position:"sticky",top:120,maxHeight:"calc(100vh - 140px)",overflow:"auto"}}>
          <h3>Ваш заказ</h3>
          {cart.map((line, i) => {
            const p = products.find(p => p.id === line.productId);
            if (!p) return null;
            return (
              <div key={i} style={{display:"grid",gridTemplateColumns:"60px 1fr auto",gap:14,padding:"14px 0",borderBottom:"1px solid var(--line)",alignItems:"center"}}>
                <img src={p.img[0]} alt="" style={{width:60,height:80,objectFit:"cover"}}/>
                <div>
                  <div style={{fontFamily:"var(--f-display)",fontWeight:700,fontSize:12,letterSpacing:".18em",textTransform:"uppercase"}}>{p.name}</div>
                  <div className="mono" style={{fontSize:11,color:"var(--gray-2)",marginTop:4,letterSpacing:".08em"}}>{line.size} · {line.qty} шт.</div>
                </div>
                <div className="mono" style={{fontSize:12,fontWeight:600}}>{(p.price * line.qty).toLocaleString("ru-RU")} ₽</div>
              </div>
            );
          })}
          <div className="row" style={{paddingTop:20}}>
            <span>Товары</span><span>{total.toLocaleString("ru-RU")} ₽</span>
          </div>
          <div className="row">
            <span>Доставка</span>
            <span>{delivery === 0 ? <span style={{color:"var(--gold)"}}>0 ₽</span> : `${delivery} ₽`}</span>
          </div>
          <div className="row total">
            <span>Итого</span>
            <span>{grand.toLocaleString("ru-RU")} ₽</span>
          </div>
        </aside>
      </form>
    </div>
  );
}

function Confirmation() {
  const { navigate } = useStore();
  const id = sessionStorage.getItem("lastOrderId") || "SA-1025";
  const total = Number(sessionStorage.getItem("lastOrderTotal") || 0);

  return (
    <div className="confirm concrete">
      <svg viewBox="0 0 100 100" fill="none">
        <circle cx="50" cy="50" r="44" stroke="#ffd700" strokeWidth="1.5"/>
        <path className="check-anim" d="M28 52 L44 68 L74 36" stroke="#ffd700" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
      <h1>
        Заказ<br/>принят
        <span className="num">№ {id}</span>
      </h1>
      <p>Мы отправили детали на ваш e-mail. Подтверждение оплаты придёт в течение 15 минут. Курьер свяжется с вами в день отправки.</p>
      <div style={{display:"flex",gap:16,flexWrap:"wrap",justifyContent:"center"}}>
        <button className="btn btn-gold" onClick={()=>navigate("home")}>
          <span>На главную</span><span className="arrow">→</span>
        </button>
        <button className="btn btn-ghost" onClick={()=>navigate("catalog")}>
          <span>В каталог</span>
        </button>
      </div>
      {total > 0 && (
        <div className="mono caps" style={{fontSize:11,marginTop:60,color:"var(--gray-2)",letterSpacing:".24em"}}>
          К оплате · {total.toLocaleString("ru-RU")} ₽
        </div>
      )}
    </div>
  );
}

window.Checkout = Checkout;
window.Confirmation = Confirmation;