// PDP, корзина, оформление
const { useState: useStateS, useRef: useRefS, useEffect: useEffectS } = React;
const useState = useStateS, useRef = useRefS, useEffect = useEffectS;
// собрать медиа-галерею товара: ракурсы (фото) + видео, если оно есть
function getGallery(p) {
  if (p.mediaItems) return getProductMedia(p);
  const media = [];
  if (p.video && p.videoFirst) media.push({ type: "video", src: p.video });
  // До отбора новых материалов у кепок оставляем только чистую обложку, без старых вспомогательных кадров.
  const images = p.cat === "hats" && !p.approvedGallery && p.img ? [p.img] : p.images;
  if (images && images.length) images.forEach((src) => media.push({ type: "image", img: src }));
  else if (p.img) media.push({ type: "image", img: p.img });
  else if (!p.video) {
    const angles = ["спереди", "сбоку", "деталь"];
    angles.forEach((a) => media.push({ type: "image", ph: (p.ph || "фото") + " · " + a }));
  }
  if (p.video && !p.videoFirst) media.push({ type: "video", src: p.video });
  if (p.videos) p.videos.forEach((src) => media.push({ type: "video", src }));
  return media;
}

function ProductView({ p, go, onAdd }) {
  const [ci, setCi] = useState(0);
  const [si, setSi] = useState(0);
  const [mi, setMi] = useState(0);
  const related = BATONS_PRODUCTS.filter((x) => x.cat === p.cat && x.id !== p.id).slice(0, 4);
  const gallery = getGallery(p);
  useEffect(() => { setMi(0); }, [p.id]);
  const active = gallery[Math.min(mi, gallery.length - 1)] || gallery[0] || { type: "image", ph: "медиа не добавлено" };
  return (
    <div className={`wrap pdp pdp-${p.id}`}>
      <button className="crumbs" onClick={() => go({ name: "catalog", cat: p.cat })}>← {BATONS_THEMES[p.cat].name}</button>
      <div className="pdp-grid">
        <div className="pdp-media">
          <div className="pdp-main">
            {active.type === "video"
              ? <video src={RES(active.src)} loop playsInline autoPlay controls data-allow-sound={p.videoFirst ? undefined : "1"}
                  muted={!!p.videoFirst}
                  ref={(el) => { if (el) { el.muted = !!p.videoFirst; el.volume = p.videoFirst ? 0 : 1; el.play().catch(() => {}); } }}
                  onLoadedMetadata={(e) => { const start = Number(active.trimStart) || 0; if (start) e.currentTarget.currentTime = start; }}
                  onTimeUpdate={(e) => { const start = Number(active.trimStart) || 0; const end = Number(active.trimEnd) || 0; const last = e.currentTarget.duration - end; if (Number.isFinite(last) && e.currentTarget.currentTime >= last) e.currentTarget.currentTime = start; }}
                  style={{ width: "100%", height: "100%", objectFit: p.cat === "hats" ? "contain" : "cover", background: "#f4f1ec", transform: `scale(${Number(active.scale) || 1})` }} />
              : <Media p={active} ratio="3 / 4" />}
            {mi > 0 && <button className="media-arrow prev" onClick={() => setMi((i) => i - 1)} aria-label="Предыдущее медиа"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m15 18-6-6 6-6" /></svg></button>}
            {mi < gallery.length - 1 && <button className="media-arrow next" onClick={() => setMi((i) => i + 1)} aria-label="Следующее медиа"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg></button>}
            {p.badge && <div className="card-badge"><Badge>{p.badge}</Badge></div>}
          </div>
          {gallery.length > 1 && (
            <div className="pdp-thumbs">
              {gallery.map((m, i) => (
                <button key={i} className={"pthumb" + (m.type === "video" ? " vid" : "") + (i === mi ? " on" : "")}
                  onClick={() => setMi(i)} aria-label={m.type === "video" ? "Видео" : "Ракурс " + (i + 1)}>
                  {m.type === "video"
                    ? <><video src={RES(m.src)} muted /><span className="play">▶</span></>
                    : <Media p={m} ratio="1 / 1" />}
                </button>
              ))}
            </div>
          )}
        </div>
        <div className="pdp-info">
          {p.brand && <span className="card-brand" style={{ alignSelf: "flex-start" }}>BATONS'ON · собственное производство</span>}
          <h1>{p.name}</h1>
          <p className="pdp-sub">{p.sub}</p>
          <Stars value={p.rating} sold={p.sold} />
          <div className="pdp-price">
            <span className="price-now" style={{ fontSize: 30 }}>{RUB(p.price)}</span>
            {p.old && <span className="price-old" style={{ fontSize: 17 }}>{RUB(p.old)}</span>}
            {p.old && <span className="pdp-off">выгода {RUB(p.old - p.price)}</span>}
          </div>
          <div className="pdp-split">или 4 платежа по {RUB(Math.round(p.price / 4))} · <b>Яндекс Сплит</b></div>

          <div className="pdp-block">
            <div className="pdp-lab">Цвет</div>
            <Swatches colors={p.colors} active={ci} onPick={setCi} />
          </div>
          <div className="pdp-block">
            <div className="pdp-lab">Размер <a href="#" className="size-help">таблица размеров</a></div>
            <div className="sizes">
              {p.sizes.map((s, i) => (
                <button key={s} className={"size" + (si === i ? " on" : "")} onClick={() => setSi(i)}>{s}</button>
              ))}
            </div>
          </div>
          <div className="pdp-cta">
            <button className="btn btn-primary" style={{ flex: 1, justifyContent: "center" }}
              onClick={() => onAdd(p, { color: ci, size: p.sizes[si] })}>В корзину · {RUB(p.price)}</button>
            <button className="icon-btn" style={{ width: 52, height: 52 }} title="В избранное" aria-label="Добавить в избранное">♡</button>
          </div>
          <div className="pdp-perks">
            <div className="perk"><b>Доставка 1–3 дня</b><span>СДЭК · Яндекс · Ozon · до двери или ПВЗ</span></div>
            <div className="perk"><b>Оплата как удобно</b><span>СБП, картой или Яндекс Сплит частями</span></div>
            <div className="perk"><b>Примерка и возврат</b><span>14 дней, бесплатно при заказе от 3 000 ₽</span></div>
          </div>
        </div>
      </div>
      <section className="sec" style={{ paddingBottom: 10 }}>
        <div className="sec-head"><h2>Другие модели</h2></div>
        <div className="grid">
          {related.map((r) => <ProductCard key={r.id} p={r} onOpen={(x) => go({ name: "product", product: x })} onAdd={onAdd} />)}
        </div>
      </section>
    </div>
  );
}

function CartDrawer({ open, items, onClose, setQty, remove, go }) {
  const total = items.reduce((s, i) => s + i.price * i.qty, 0);
  const count = items.reduce((s, i) => s + i.qty, 0);
  return (
    <>
      <div className={"scrim" + (open ? " on" : "")} onClick={onClose} />
      <aside className={"drawer" + (open ? " on" : "")}>
        <div className="drawer-hd">
          <h3>Корзина {count > 0 && <span>· {count}</span>}</h3>
          <button className="icon-btn" onClick={onClose} aria-label="Закрыть корзину">✕</button>
        </div>
        {items.length === 0 ? (
          <div className="drawer-empty">
            <div className="empty-ico">◔</div>
            <p>Пока пусто</p>
            <button className="btn btn-ghost" onClick={onClose}>За покупками</button>
          </div>
        ) : (
          <>
            <div className="drawer-items">
              {items.map((it) => (
                <div className="ci" key={it.key}>
                  <div className="ci-media"><Media p={it} ratio="1 / 1" round="12px" /></div>
                  <div className="ci-body">
                    <div className="ci-name">{it.name}</div>
                    <div className="ci-meta">{it.size ? "Размер " + it.size : ""}</div>
                    <div className="ci-foot">
                      <div className="qty">
                        <button onClick={() => setQty(it.key, it.qty - 1)}>−</button>
                        <span>{it.qty}</span>
                        <button onClick={() => setQty(it.key, it.qty + 1)}>+</button>
                      </div>
                      <span className="ci-price">{RUB(it.price * it.qty)}</span>
                    </div>
                  </div>
                  <button className="ci-rm" onClick={() => remove(it.key)}>✕</button>
                </div>
              ))}
            </div>
            <div className="drawer-foot">
              <div className="drawer-total"><span>Итого</span><b>{RUB(total)}</b></div>
              <div className="pdp-split" style={{ margin: "0 0 12px" }}>или 4 × {RUB(Math.round(total / 4))} · Яндекс Сплит</div>
              <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}
                onClick={() => { onClose(); go({ name: "checkout" }); }}>Оформить заказ →</button>
            </div>
          </>
        )}
      </aside>
    </>
  );
}

function Checkout({ items, go, total, clear }) {
  const [ship, setShip] = useState("cdek-pvz");
  const [pay, setPay] = useState("sbp");
  const [done, setDone] = useState(false);
  const sum = items.reduce((s, i) => s + i.price * i.qty, 0);
  const shipCost = ship === "courier" ? 390 : ship === "ozon" ? 0 : 190;
  const SHIP = [
    { k: "cdek-pvz", t: "СДЭК — пункт выдачи", d: "1–3 дня · 190 ₽", ico: "СДЭК" },
    { k: "courier", t: "Яндекс Доставка — курьер", d: "сегодня–завтра · 390 ₽", ico: "Я.Дост" },
    { k: "ozon", t: "Доставка Ozon", d: "2–4 дня · бесплатно", ico: "Ozon" },
  ];
  const PAY = [
    { k: "sbp", t: "СБП", d: "по QR или ссылке, без комиссии" },
    { k: "split", t: "Яндекс Сплит", d: "4 платежа по " + RUB(Math.round((sum + shipCost) / 4)) },
    { k: "card", t: "Банковская карта", d: "Visa · Mastercard · МИР" },
  ];
  if (done) return (
    <div className="wrap" style={{ padding: "80px 0", textAlign: "center" }}>
      <div style={{ fontSize: 56 }}>✓</div>
      <h1 style={{ fontFamily: "var(--display)", fontSize: 40, marginTop: 12 }}>Заказ оформлен</h1>
      <p style={{ color: "var(--ink-soft)", marginTop: 10, fontSize: 17 }}>Мы отправили детали и трек-номер. Спасибо, что выбрали BATONS'ON.</p>
      <button className="btn btn-primary" style={{ marginTop: 26 }} onClick={() => { clear(); go({ name: "home" }); }}>На главную</button>
    </div>
  );
  return (
    <div className="wrap checkout">
      <button className="crumbs" onClick={() => go({ name: "home" })}>← В магазин</button>
      <h1 style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: "clamp(30px,4vw,48px)", margin: "6px 0 26px" }}>Оформление</h1>
      <div className="co-grid">
        <div className="co-main">
          <section className="co-card">
            <h3>1 · Контакты</h3>
            <div className="co-fields">
              <input placeholder="Имя и фамилия" />
              <input placeholder="Телефон" />
              <input placeholder="E-mail" className="full" />
            </div>
          </section>
          <section className="co-card">
            <h3>2 · Доставка</h3>
            <div className="opt-list">
              {SHIP.map((o) => (
                <button key={o.k} className={"opt" + (ship === o.k ? " on" : "")} onClick={() => setShip(o.k)}>
                  <span className="opt-radio" />
                  <span className="opt-ico">{o.ico}</span>
                  <span className="opt-txt"><b>{o.t}</b><span>{o.d}</span></span>
                </button>
              ))}
            </div>
            {ship !== "ozon" && <input placeholder={ship === "courier" ? "Адрес доставки" : "Адрес пункта выдачи / город"} style={{ marginTop: 12, width: "100%" }} />}
          </section>
          <section className="co-card">
            <h3>3 · Оплата</h3>
            <div className="opt-list">
              {PAY.map((o) => (
                <button key={o.k} className={"opt" + (pay === o.k ? " on" : "")} onClick={() => setPay(o.k)}>
                  <span className="opt-radio" />
                  <span className="opt-txt"><b>{o.t}</b><span>{o.d}</span></span>
                </button>
              ))}
            </div>
          </section>
        </div>
        <aside className="co-side">
          <div className="co-card co-summary">
            <h3>Заказ</h3>
            <div className="co-items">
              {items.map((it) => (
                <div className="co-item" key={it.key}>
                  <div className="co-item-media"><Media p={it} ratio="1 / 1" round="10px" /></div>
                  <div className="co-item-info"><b>{it.name}</b><span>{it.size ? "р. " + it.size + " · " : ""}{it.qty} шт.</span></div>
                  <span className="co-item-price">{RUB(it.price * it.qty)}</span>
                </div>
              ))}
            </div>
            <div className="co-line"><span>Товары</span><span>{RUB(sum)}</span></div>
            <div className="co-line"><span>Доставка</span><span>{shipCost === 0 ? "бесплатно" : RUB(shipCost)}</span></div>
            <div className="co-line total"><span>Итого</span><b>{RUB(sum + shipCost)}</b></div>
            <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center", marginTop: 14 }}
              onClick={() => setDone(true)}>
              {pay === "sbp" ? "Оплатить через СБП" : pay === "split" ? "Оформить Сплит" : "Оплатить картой"}
            </button>
            <p className="co-safe">Платёж защищён. Нажимая, вы соглашаетесь с условиями.</p>
          </div>
        </aside>
      </div>
    </div>
  );
}

Object.assign(window, { ProductView, CartDrawer, Checkout });