/* global React */
const { useState: useS_lk, useEffect: useE_lk } = React;

function LookModal({ look, onClose }) {
  const { products, addToCart, navigate } = useStore();
  const items = look.products.map((id) => products.find((p) => p.id === id)).filter(Boolean);
  const gallery = [look.src, ...(look.gallery || [])].filter(Boolean);
  const [imgIdx, setImgIdx] = useS_lk(0);
  const [sizes, setSizes] = useS_lk({});
  const [added, setAdded] = useS_lk(false);
  const [warn, setWarn] = useS_lk(false);

  useE_lk(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [onClose]);

  const total = items.reduce((s, p) => s + p.price, 0);
  const allPicked = items.every((p) => sizes[p.id]);

  const addAll = () => {
    if (!allPicked) {setWarn(true);setTimeout(() => setWarn(false), 1800);return;}
    items.forEach((p) => addToCart(p.id, sizes[p.id], 1));
    setAdded(true);
    setTimeout(() => {onClose();setAdded(false);}, 900);
  };

  return (
    <div className="look-modal" onClick={onClose}>
      <div className="look-modal-inner" onClick={(e) => e.stopPropagation()}>
        {/* Left — image */}
        <div className="look-modal-media">
          <img src={gallery[imgIdx] || look.src} alt={look.title} key={imgIdx}/>
          <div className="look-modal-caption">
            <span>LOOK {String(look.id).padStart(2, "0")}</span>
            <span>{look.title}</span>
          </div>
          {gallery.length > 1 && (
            <div className="look-modal-thumbs">
              {gallery.map((g, i) => (
                <button key={i} className={i === imgIdx ? "active" : ""} onClick={()=>setImgIdx(i)}>
                  <img src={g} alt=""/>
                </button>
              ))}
            </div>
          )}
        </div>

        {/* Right — shop */}
        <div className="look-modal-side">
          <button className="look-modal-close" onClick={onClose} aria-label="Закрыть">×</button>

          <div className="look-modal-head">
            <div className="mono caps" style={{ fontSize: 10, color: "var(--gold)", letterSpacing: ".32em", marginBottom: 14 }}>
              Look {String(look.id).padStart(2, "0")} · {items.length} {items.length === 1 ? "вещь" : "вещи"}
            </div>
            <h2>Образ целиком</h2>
            <p className="look-modal-sub">
              Выберите размер для каждой позиции и отправьте в корзину одним нажатием.
            </p>
          </div>

          <div className="look-modal-list">
            {items.map((p) =>
            <div className="look-row" key={p.id}>
                <a className="look-row-thumb"
              href={`#product/${p.id}`}
              onClick={(e) => {e.preventDefault();onClose();navigate(`product/${p.id}`);}}>
                  <img src={p.img[0]} alt={p.name} />
                </a>
                <div className="look-row-body">
                  <div className="look-row-top">
                    <div>
                      <div className="look-row-name">{p.name}</div>
                      <div className="look-row-meta">{p.nameEn} · {p.composition.split(",")[0]}</div>
                    </div>
                    <div className="look-row-price">{p.price.toLocaleString("ru-RU")} ₽</div>
                  </div>
                  <p className="look-row-desc">{p.desc}</p>
                  <div className="look-row-sizes">
                    <span className="look-row-sizes-label">Размер</span>
                    <div className="size-grid" style={{ gap: 6 }}>
                      {["XS", "S", "M", "XS-S", "S-M"].map((s) => {
                      const avail = p.sizes.includes(s);
                      return (
                        <button key={s}
                        className={`size-btn ${sizes[p.id] === s ? "active" : ""} ${!avail ? "disabled" : ""}`}
                        style={{ width: 48, height: 48, fontSize: 11 }}
                        onClick={() => avail && setSizes((prev) => ({ ...prev, [p.id]: s }))}>
                            {s}
                          </button>);

                    })}
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>

          <div className="look-modal-foot">
            <div className="look-modal-total">
              <div className="mono caps" style={{ fontSize: 10, color: "var(--gray-2)", letterSpacing: ".24em", marginBottom: 6 }}>Сумма за образ</div>
              <div className="look-modal-total-num">{total.toLocaleString("ru-RU")} ₽</div>
            </div>
            <button className={`btn btn-gold ${added ? "flash" : ""}`} onClick={addAll} style={{ flex: 1, padding: "22px 24px", minWidth: 240 }}>
              {added ? <span>✓ Добавлено</span> : <>
                <span>В КОРЗИНУ
</span><span className="arrow">→</span>
              </>}
            </button>
          </div>

          {warn && <div className="look-modal-warn">← Выберите размер для каждой позиции</div>
          }
        </div>
      </div>
    </div>);

}

function Lookbook() {
  const { looks } = useStore();
  const [active, setActive] = useS_lk(null);

  return (
    <div className="page">
      <section className="page-banner concrete">
        <div className="mono caps" style={{ fontSize: 11, color: "var(--gold)", marginBottom: 30 }}>Кампания · SS 2026 · ph. Анна Войтенко</div>
        <h1>Образы</h1>
        <div className="sub">
          <span>{looks.length} кадров · {looks.reduce((s, l) => s + l.products.length, 0)} позиций</span>
          <span>БАЗА · ДРОП 01 ·
</span>
        </div>
      </section>

      <div style={{ padding: "60px 0", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0 }}>
        {looks.map((look, i) => <Reveal key={look.id} delay={i % 3 * 120} as="figure">
            <button className="look-tile" onClick={() => setActive(look)} data-cursor="hover">
              <img src={look.src} alt={look.title} loading="lazy" />
              <div className="look-tile-overlay">
                <span className="look-tile-shop">Shop the look →</span>
              </div>
              <div className="look-tile-caption">
                <span>Look {String(look.id).padStart(2, "0")}</span>
                <span>{look.title}</span>
              </div>
            </button>
          </Reveal>
        )}
      </div>

      {active && <LookModal look={active} onClose={() => setActive(null)} />}
    </div>);

}

function About() {
  const { navigate } = useStore();
  return (
    <div className="page">
      <section className="page-banner concrete">
        <div className="mono caps" style={{ fontSize: 11, color: "var(--gold)", marginBottom: 30 }}>Manifesto · Atelier · People</div>
        <h1>Атéлье</h1>
      </section>

      <section className="section" style={{ padding: "120px 40px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>
          <Reveal>
            <div className="mono caps" style={{ fontSize: 11, color: "var(--gold)", marginBottom: 30 }}>— 01 / Слово основателя</div>
            <h2 className="h-display" style={{ fontSize: "clamp(40px,5vw,72px)", lineHeight: 1, marginBottom: 30 }}>
              Я делаю одежду<br />для тех,<br />кто <em style={{ color: "var(--gold)", fontStyle: "normal" }}>знает</em>.
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <p style={{ fontFamily: "var(--f-display)", fontWeight: 300, fontSize: 18, lineHeight: 1.7, color: "var(--gray)", marginBottom: 24 }}>
              Сандлер Атéлье — это не про тренды. Это про материал, шов, силуэт и про женщину, которая не спрашивает разрешения войти в комнату.
            </p>
            <p style={{ fontFamily: "var(--f-display)", fontWeight: 300, fontSize: 18, lineHeight: 1.7, color: "var(--gray)", marginBottom: 24 }}>
              Каждый предмет мы вытачиваем как архитектурный объект — сначала каркас, потом плоть. Бетон под рукой, золото в кармане.
            </p>
            <p className="mono" style={{ fontSize: 11, letterSpacing: ".28em", textTransform: "uppercase", color: "var(--gray-2)", marginTop: 40 }}>
              Diana Sandler · Россия · 2026
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ padding: 0, display: "grid", gridTemplateColumns: "1fr 1fr" }}>
        <img src="assets/look-05.jpg" alt="" style={{ width: "100%", height: "auto", objectFit: "cover" }} />
        <img src="assets/look-06.jpg" alt="" style={{ width: "100%", height: "auto", objectFit: "cover" }} />
      </section>

      <section className="manifesto">
        {[
        { n: "Q1 26", h: "Запуск БАЗЫ", p: "Первые шесть архетипов: топ, боди, штаны, футболка, джинсы, корсет." },
        { n: "Q3 26", h: "Платья и латекс", p: "Расширение силуэтов. Эксперимент с латексными вставками." },
        { n: "Q1 27", h: "Шоурум в России", p: "Открытое ателье на Патриарших. Запись на примерку онлайн." }].
        map((m, i) =>
        <Reveal key={i} delay={i * 120} className="manifesto-card">
            <span className="num">— {m.n}</span>
            <h3>{m.h}</h3>
            <p>{m.p}</p>
          </Reveal>
        )}
      </section>

      <section style={{ padding: "100px 40px 140px", borderTop: "1px solid var(--line)", textAlign: "center" }}>
        <div className="mono caps" style={{ fontSize: 11, color: "var(--gold)", marginBottom: 24 }}>Готовы войти</div>
        <h2 className="h-display" style={{ fontSize: "clamp(40px,6vw,80px)", marginBottom: 40 }}>В магазин →</h2>
        <button className="btn btn-gold" onClick={() => navigate("catalog")}>
          <span>Смотреть БАЗУ</span><span className="arrow">→</span>
        </button>
      </section>
    </div>);

}

window.Lookbook = Lookbook;
window.About = About;
window.LookModal = LookModal;