/* TAKEBOX — Showroom (grid + category filter) */
const { useState: useStateS } = React;
const { useLang: useLangS, withLang: withLangS, UI: UIS, Header: HeaderS, Footer: FooterS } = window.TB;

/* all detail photos from img/ — shown in the Options carousel */
const DETAIL_PHOTOS = (window.TB_CATALOG && window.TB_CATALOG.detailPhotos) || [
  "img/case-detail-tall.jpg", "img/case-foam.jpg", "img/case-foam-detail.jpg",
  "img/case-hardware.jpg", "img/case-slides.jpg", "img/case-dividers.jpg",
  "img/case-wheels.jpg", "img/case-cascade.jpg", "img/case-drawers-front.jpg",
  "img/case-closed.jpg"
];

/* „Možnosti výroby" — default obsah; texty přebíráme z CMS (TBStore), aby se
   úpravy v administraci promítly i sem (a do živého náhledu). */
const OPTIONS = [
  { icon: "i-lock", pn: "OPT-01", h: "Zámky", p: "Motýlkové, západkové nebo uzamykatelné." },
  { icon: "i-grip", pn: "OPT-02", h: "Madla", p: "Zapuštěná, sklopná nebo ergonomická." },
  { icon: "i-wheel", pn: "OPT-03", h: "Kolečka", p: "Otočná, s brzdou nebo s vyšší nosností." },
  { icon: "i-archive", pn: "OPT-04", h: "Zásuvky", p: "Plnovýsuvné pojezdy a individuální dělení." },
  { icon: "i-layers", pn: "OPT-05", h: "Police", p: "Pevné nebo nastavitelné police a přepážky." },
  { icon: "i-scan", pn: "OPT-06", h: "Pěnové výplně", p: "Přesné výřezy pro maximální ochranu." },
  { icon: "i-badge", pn: "OPT-07", h: "Logo a popisy", p: "Gravírování, štítky, potisk nebo označení." },
  { icon: "i-ruler", pn: "OPT-08", h: "Rozměry na míru", p: "Vyrobíme přesně podle vašich požadavků." }
];
const txtS = (k, d) => (window.TBStore && window.TBStore.text ? window.TBStore.text(k, d) : d);
/* překlad českých výchozích textů přes hlavní slovník (lang.js + lang-*.js) —
   React render probíhá až po skenu lang.js, takže překládáme přímo při renderu */
const TT = (s) => {
  try {
    var L = window.__TBLANG || "cs";
    if (L === "cs" || !window.TBI18N) return s;
    return window.TBI18N.t(s, L);
  } catch (e) { return s; }
};

/* Lightbox — prohlížení všech fotek (celý produkt, contain) + náhledy + šipky */
function lbA() {
  var l = "cs";
  try {
    var q = new URLSearchParams(location.search).get("lang");
    var ls = localStorage.getItem("tb-lang");
    l = q || ls || "cs";
  } catch (e) {}
  return l === "cs"
    ? { close: "Zavřít", prev: "Předchozí", next: "Další", photo: "Foto", gallery: "Galerie fotek", zoom: "zvětšit fotky" }
    : { close: "Close", prev: "Previous", next: "Next", photo: "Photo", gallery: "Photo gallery", zoom: "view photos" };
}
/* dynamický proxy objekt — čte aktuální jazyk při každém použití */
const LB_A = ["close", "prev", "next", "photo", "gallery", "zoom"].reduce(function (o, k) {
  Object.defineProperty(o, k, { get: function () { return lbA()[k]; } });
  return o;
}, {});
function Lightbox({ photos, index, title, onClose, onIndex }) {
  const { useEffect: useEffectL } = React;
  useEffectL(() => {
    function onKey(e) {
      if (e.key === "Escape") onClose();
      else if (e.key === "ArrowRight") onIndex((index + 1) % photos.length);
      else if (e.key === "ArrowLeft") onIndex((index - 1 + photos.length) % photos.length);
    }
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [index, photos.length]);
  const n = photos.length;
  return (
    <div className="sx-lb" onClick={onClose} role="dialog" aria-modal="true" aria-label={title || LB_A.gallery}>
      <button type="button" className="sx-lb-close" aria-label={LB_A.close} onClick={onClose}>×</button>
      <div className="sx-lb-stage" onClick={(e) => { e.stopPropagation(); if (e.target === e.currentTarget) onClose(); }}>
        {n > 1 && <button type="button" className="sx-lb-nav prev" aria-label={LB_A.prev} onClick={() => onIndex((index - 1 + n) % n)}><svg><use href="#i-arrow-right" /></svg></button>}
        <img src={photos[index]} alt={(title || LB_A.photo) + " — " + (index + 1) + "/" + n} />
        {n > 1 && <button type="button" className="sx-lb-nav next" aria-label={LB_A.next} onClick={() => onIndex((index + 1) % n)}><svg><use href="#i-arrow-right" /></svg></button>}
        <span className="sx-lb-counter">{String(index + 1).padStart(2, "0")} / {String(n).padStart(2, "0")}</span>
      </div>
      {n > 1 && (
        <div className="sx-lb-thumbs" onClick={(e) => e.stopPropagation()}>
          {photos.map((src, i) => (
            <button key={i} type="button" className={"sx-lb-thumb" + (i === index ? " on" : "")} onClick={() => onIndex(i)} aria-label={LB_A.photo + " " + (i + 1)}>
              <img src={src.replace("img/", "img/thumb/")} alt="" loading="lazy" />
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function primaryMedia(p) {
  var ph = p.photos[0];
  if (ph.src) return <img src={ph.src} alt={p.name} />;
  return <image-slot id={ph.slot} style={{ width: "100%", height: "100%", display: "block" }} placeholder="+ foto"></image-slot>;
}

function ProductCard({ p, lang, catName, onOpen }) {
  const [pi, setPi] = useStateS(0);
  const nm = window.TB_NAME(p, lang);
  const photos = p.photos.filter((x) => x.src).map((x) => x.src);
  const TH = (s) => (s ? s.replace("img/", "img/thumb/") : s);
  const href = (lang === "cs" && p.slug) ? "produkty/" + p.slug + ".html" : withLangS("Produkt.html?id=" + p.id, lang);
  return (
    <article className="card">
      <button type="button" className="media media-btn" aria-label={nm + " — " + LB_A.zoom} onClick={() => onOpen(photos, pi, nm)}>
        <img src={photos[pi] || photos[0]} alt={nm} loading="lazy" decoding="async" />
        <span className="media-zoom" aria-hidden="true"><svg style={{ width: 16, height: 16 }}><use href="#i-scan" /></svg></span>
      </button>
      {photos.length > 1 && (
        <div className="sr-thumbs">
          {photos.map((src, i) => (
            <button key={i} type="button" className={"sr-thumb" + (i === pi ? " on" : "")} onClick={() => { setPi(i); onOpen(photos, i, nm); }} aria-label={nm + " — " + LB_A.photo.toLowerCase() + " " + (i + 1)}>
              <img src={TH(src)} alt="" loading="lazy" decoding="async" />
            </button>
          ))}
        </div>
      )}
      <a className="body" href={href}>
        <div>
          <span className="sr-cat">{catName(p.cat)}</span>
          <h3>{nm}</h3>
          <p>{p.tag[lang]}</p>
        </div>
        <span className="go"><svg style={{ width: 16, height: 16 }}><use href="#i-arrow-ur" /></svg></span>
      </a>
    </article>
  );
}

function ShowroomApp() {
  const [lang, setLang] = useLangS();
  const [cat, setCat] = useStateS("all");
  const [di, setDi] = useStateS(0);
  const [lb, setLb] = useStateS(null);   // { photos, index, title }
  const openLb = (photos, index, title) => setLb({ photos: photos, index: index || 0, title: title });
  // re-render při změně jazyka z utility dropdownu (lang.js → event "tblang")
  const [, setI18nTick] = React.useState(0);
  React.useEffect(() => {
    const f = () => setI18nTick(function (t) { return t + 1; });
    window.addEventListener("tblang", f);
    return () => window.removeEventListener("tblang", f);
  }, []);
  const cats = window.TB_CATALOG.cats;
  const LANG = window.TB.dl(lang);
  const products = window.TB_CATALOG.products.filter((p) => cat === "all" || p.cat === cat);
  const catName = (id) => { var c = cats.find((x) => x.id === id); return c ? c[LANG] : id; };
  // detailní fotky „Možnosti výroby" — pořadí + úpravy z CMS (override-applied)
  const detail = (window.TBStore && window.TBStore.detailPhotos) ? window.TBStore.detailPhotos(false) : DETAIL_PHOTOS.map((s) => ({ src: s, img: s }));
  const dN = detail.length || 1;
  const dCur = detail[di % dN] || detail[0] || { img: DETAIL_PHOTOS[0] };

  return (
    <React.Fragment>
      <HeaderS lang={lang} setLang={setLang} />
      <main>
        <section className="section invert pad">
          <div className="wrap">
            <div className="sec-head">
              <p className="eyebrow">{UIS.sr_eyebrow[LANG]}</p>
              <h1 className="h2" style={{ marginTop: 18 }}>{UIS.sr_title[LANG]}</h1>
              <p className="lead" style={{ marginTop: 18 }}>{UIS.sr_lead[LANG]}</p>
            </div>

            <div className="sr-filter">
              <button className={"chip" + (cat === "all" ? " on" : "")} onClick={() => setCat("all")}>{UIS.all[LANG]}</button>
              {cats.map((c) => (
                <button key={c.id} className={"chip" + (cat === c.id ? " on" : "")} onClick={() => setCat(c.id)}>{c[LANG]}</button>
              ))}
            </div>

            <div className="showroom-grid sr-grid">
              {products.map((p) => (
                <ProductCard key={p.id} p={p} lang={LANG} catName={catName} onOpen={openLb} />
              ))}
            </div>
          </div>
        </section>

        {/* ===== Možnosti výroby (přesunuto z úvodní stránky) ===== */}
        <section className="section pad" id="sr-moznosti">
          <div className="wrap">
            <div className="sec-head" style={{ marginBottom: 44 }}>
              <p className="eyebrow">{TT(txtS("options.eyebrow", "Možnosti výroby"))}</p>
              <h2 className="h2" style={{ marginTop: 18 }}>{TT(txtS("options.title", "Přizpůsobíme každý detail"))}</h2>
              <p className="lead" style={{ marginTop: 20 }}>{TT(txtS("options.lead", "Správný case není jen pevná krabice. Důležitá je konstrukce, ergonomie manipulace, ochrana obsahu, servisní přístup a celková organizace prostoru."))}</p>
            </div>
            <div className="options-grid">
              <div className="options-figure ticks">
                <span className="tick-bl"></span><span className="tick-br"></span>
                <img src={dCur.img} alt={TT("Detail provedení case na míru")} onClick={() => openLb(detail.map((d) => d.img), di % dN, TT(txtS("options.eyebrow", "Možnosti výroby")))} style={{ cursor: "zoom-in" }} />
                <button type="button" className="hc-nav hc-prev" aria-label={LB_A.prev} onClick={() => setDi((di - 1 + dN) % dN)}><svg><use href="#i-arrow-right" /></svg></button>
                <button type="button" className="hc-nav hc-next" aria-label={LB_A.next} onClick={() => setDi((di + 1) % dN)}><svg><use href="#i-arrow-right" /></svg></button>
                <span className="hc-counter">{String((di % dN) + 1).padStart(2, "0")} / {String(dN).padStart(2, "0")}</span>
              </div>
              <div className="options-list">
                {OPTIONS.map(function (o, i) {
                  return (
                    <div className="option" key={i}>
                      <div className="top"><svg className="icon"><use href={"#" + o.icon} /></svg><span className="pn">{o.pn}</span></div>
                      <h3>{TT(txtS("options.item" + i + ".h", o.h))}</h3>
                      <p>{TT(txtS("options.item" + i + ".p", o.p))}</p>
                    </div>
                  );
                })}
                </div>
            </div>
          </div>
        </section>
      </main>
      {lb && <Lightbox photos={lb.photos} index={lb.index} title={lb.title} onClose={() => setLb(null)} onIndex={(i) => setLb({ photos: lb.photos, index: i, title: lb.title })} />}
      <FooterS lang={lang} />
    </React.Fragment>
  );
}

function mountShowroom() {
  var ORIG = JSON.stringify(window.TB_CATALOG);
  var root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(<ShowroomApp />);
  window.__tbApplyPreview = function () {
    try { window.TB_CATALOG = JSON.parse(ORIG); window.TBStore.applyCatalog(window.TB_CATALOG); } catch (e) {}
    root.render(<ShowroomApp />);
  };
}
mountShowroom();