/* global React, ReactDOM, Header, Footer, CTA, Reveal, Icon, WA, useChrome, ChromeTweaks, PageHero, TweaksPanel, TweakSection, TweakToggle */
// gallery.jsx — Фотогалерея (15 плиток, перетаскиваемые слоты + редактируемые подписи)

// Все 15 фото вшиты в страницу через gallery-data.js (window.GALLERY_PHOTOS),
// поэтому галерея не зависит от загрузки внешнего файла на хостинге.
// Фолбэк на ассеты — на случай, если данные почему-то не загрузились.
const PREFILL = (typeof window !== "undefined" && window.GALLERY_PHOTOS) ? window.GALLERY_PHOTOS : {
  1: "assets/portrait-chair2.jpg",
  5: "assets/portrait-smoke.jpg",
  9: "assets/portrait-chair.jpg",
};
// Подписи к фото. Пусто по умолчанию — фактические снимки в images.state.json
// не совпадают со старым PREFILL, поэтому показываем фото без подписей.
// Чтобы подписать плитку, добавьте сюда пару «номер: 'текст'».
const CAPTIONS = {};
const HEIGHTS = [340, 250, 290, 300, 240, 360, 260, 300, 270, 330, 240, 300, 280, 320, 250];

// Подпись только для просмотра: показываем заданный текст, пустые плитки
// остаются без подписи (никаких placeholder'ов на публичном сайте).
function Caption({ id, def }) {
  const key = "gm_gallery_cap_" + id;
  let text = def || "";
  try { const s = localStorage.getItem(key); if (s != null) text = s; } catch (e) { /* ignore */ }
  if (!text.trim()) return null;
  return <div className="g-cap">{text}</div>;
}

function Gallery({ showCaps }) {
  return (
    <section className="page-section" style={{ paddingTop: 16 }}>
      <div className="container">
        <Reveal className={"gallery-grid" + (showCaps ? "" : " caps-off")}>
          {HEIGHTS.map((h, i) => {
            const n = i + 1;
            const slotProps = {
              id: "gal-" + n,
              shape: "rounded",
              radius: "16",
              placeholder: "Фото " + n,
              style: { height: h + "px" },
            };
            if (PREFILL[n]) slotProps.src = PREFILL[n];
            return (
              <figure className="g-figure" key={n}>
                {React.createElement("image-slot", slotProps)}
                <Caption id={"gal-" + n} def={CAPTIONS[n]} />
              </figure>
            );
          })}
        </Reveal>
      </div>
    </section>
  );
}

function App() {
  const [t, setTweak] = useChrome({ captions: true });
  return (
    <React.Fragment>
      <Header />
      <main>
        <PageHero
          eyebrow="Галерея"
          title="Фотогалерея"
          lead="Кадры с выступлений, эфиров и из жизни.">
        </PageHero>
        <Gallery showCaps={t.captions} />
        <CTA />
      </main>
      <Footer />
      <TweaksPanel>
        <ChromeTweaks t={t} setTweak={setTweak} />
        <TweakSection label="Галерея" />
        <TweakToggle label="Подписи к фото" value={t.captions} onChange={(v) => setTweak("captions", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);