/* global React, ReactDOM, WORKS, ArtworkViewer, Pill, FloatRow, PhotoBar, PhotoViewer, PHOTOS,
   TweaksPanel, TweakSection, TweakSlider, TweakToggle, TweakColor */
const { useState, useRef, useEffect, useCallback, useMemo } = React;

// aspect ratio from a work's stated dimensions, clamped to sane tile shapes
function aspectOf(dim) {
  const m = /([\d.]+)\s*[×x]\s*([\d.]+)/.exec(dim || "");
  if (!m) return 1;
  const ar = Number(m[1]) / Number(m[2]);
  return Math.max(0.62, Math.min(1.6, ar));
}
const withAR = (w) => ({ ...w, ar: aspectOf(w.dimension) });

// studio + artist photos now live in their own row up top (shared PHOTOS,
// from sections.jsx) — the drifting wall behind the menu is paintings only.
const W = WORKS.map(withAR);
const MIX = W;
const rotate = (arr, n) => (arr.length ? arr.slice(n % arr.length).concat(arr.slice(0, n % arr.length)) : arr);

// ── top-bar view toggle: All Art vs For Sale only ─────────────
const VIEW_OPTS = ["All Art", "For Sale"];
function passesFilters(w, view) {
  if (view === "For Sale") return w.status === "Available";
  return true;
}

const HG_DEFAULTS = /*EDITMODE-BEGIN*/{
  "speed": 1,
  "gap": 6,
  "captions": true,
  "bg": "#222A30"
}/*EDITMODE-END*/;

// ─── featured horizontal-scroll strip (drag / wheel to scroll) ───────
function FeaturedRow({ items, onOpen }) {
  const ref = useRef(null);
  const drag = useRef({ down: false, startX: 0, startScroll: 0, moved: 0 });

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onWheel = (e) => {
      if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
      e.preventDefault();
      el.scrollLeft += e.deltaY;
    };
    el.addEventListener("wheel", onWheel, { passive: false });
    return () => el.removeEventListener("wheel", onWheel);
  }, []);

  const onPointerDown = (e) => {
    const el = ref.current;
    const tileEl = e.target.closest(".feat-tile");
    drag.current = { down: true, startX: e.clientX, startScroll: el.scrollLeft, moved: 0, wid: tileEl && tileEl.dataset.wid };
    el.classList.add("is-drag");
    try { el.setPointerCapture && el.setPointerCapture(e.pointerId); } catch (err) {}
  };
  const onPointerMove = (e) => {
    if (!drag.current.down) return;
    const el = ref.current;
    const dx = e.clientX - drag.current.startX;
    drag.current.moved = Math.max(drag.current.moved, Math.abs(dx));
    el.scrollLeft = drag.current.startScroll - dx;
  };
  const endDrag = (e) => {
    const el = ref.current;
    if (!el) return;
    const wasTap = drag.current.down && drag.current.moved <= 6 && drag.current.wid;
    drag.current.down = false;
    el.classList.remove("is-drag");
    if (e && e.pointerId != null && el.releasePointerCapture) {
      try { el.releasePointerCapture(e.pointerId); } catch (err) {}
    }
    if (wasTap) {
      const w = items.find((it) => it.id === drag.current.wid);
      if (w) onOpen(w);
    }
  };

  return (
    <div
      className="hg__scroller"
      ref={ref}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerUp={endDrag}
      onPointerCancel={endDrag}
    >
      {items.map((w, i) => (
        <a key={w.id + "-f" + i} className="feat-tile hg-rtile" href={"#" + w.id} data-wid={w.id} onClick={(e) => e.preventDefault()}>
          <img className="hg-rtile__img" src={w.src} alt={w.title} draggable="false" />
          {w.status === "Available" && <span className="hg-rtile__sale">For sale</span>}
          <div className="hg-rtile__cap">
            <span className="name">{w.title}</span>
            <span className="meta">{w.dimension}</span>
            <span className="meta">{w.year}</span>
          </div>
        </a>
      ))}
    </div>
  );
}

// ─── full-page artwork viewer: full-bleed, uncropped painting on black,
// meta card + For Sale tag + Similar Art ingress bottom-right. (global,
// shared via sections.jsx as ArtworkViewer). ───────

// ─── app ─────────────────────────────────────────────────────
function HGallery() {
  const [tweaks, setTweaksState] = useState(HG_DEFAULTS);
  const [open, setOpen] = useState(null);
  const [photoIndex, setPhotoIndex] = useState(null);
  const [compact, setCompact] = useState(false);
  const [view, setView] = useState("All Art");

  const setTweak = useCallback((key, value) => {
    setTweaksState((prev) => {
      const next = typeof key === "object" ? { ...prev, ...key } : { ...prev, [key]: value };
      try {
        window.parent.postMessage(
          { type: "__edit_mode_set_keys", edits: typeof key === "object" ? key : { [key]: value } },
          "*"
        );
      } catch (e) {}
      return next;
    });
  }, []);

  useEffect(() => {
    document.body.style.setProperty("--hg-bg", tweaks.bg);
  }, [tweaks.bg]);

  // deterministic shuffle so groups interleave instead of clustering by category
  const shuffle = (arr, seed) => {
    const a = arr.slice();
    let s = seed;
    const rand = () => { s = (s * 1103515245 + 12345) & 0x7fffffff; return s / 0x7fffffff; };
    for (let i = a.length - 1; i > 0; i--) {
      const j = Math.floor(rand() * (i + 1));
      [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
  };

  // single full-height row: new work only
  const rows = useMemo(() => {
    const filtered = MIX.filter((w) => passesFilters(w, view));
    const pool = filtered.filter((w) => w.category === "New Work");
    return [{ dir: -1, speed: 26, items: pool }];
  }, [view]);

  const empty = rows[0].items.length === 0;

  return (
    <div className={"hg" + (compact ? " is-compact" : "") + (view === "For Sale" ? " is-forsale" : "")}>
      <div className="hg__hero">
        <div className="hg__bar">
        <div className="hg__bar-left">
          <div className="hg__menu-slot">
            <Pill label="home" variant="brand" align="left">
              {(close) => (
                <React.Fragment>
                  <a className="pill__item" href="Artwork.html" onClick={close}>artwork</a>
                  <a className="pill__item" href="Bio.html" onClick={close}>bio</a>
                  <a className="pill__item" href="Statement.html" onClick={close}>statement</a>
                  <a className="pill__item" href="CV.html" onClick={close}>cv</a>
                  <a className="pill__item" href="Contact.html" onClick={close}>contact</a>
                </React.Fragment>
              )}
            </Pill>
          </div>

          <a className="hg__brand" href="Home.html">
            <h2 className="hg__title">tracy boyd · painter</h2>
          </a>
        </div>

        <div className="hg__bar-right">
          <div className="hg__viewtoggle" role="tablist">
            {VIEW_OPTS.map((o) => (
              <button
                key={o}
                className={"hg__vt-btn" + (view === o ? " is-active" : "")}
                role="tab"
                aria-selected={view === o}
                onClick={() => setView(o)}
              >{o}</button>
            ))}
          </div>
          <a className="hg__ingress" href="Artwork.html">
            <span>All Art</span>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 5l7 7-7 7" /></svg>
          </a>
        </div>
      </div>

      <div className="hg__body">
        {empty ? (
          <div className="hg__empty">
            <p>Nothing currently for sale.</p>
            <button className="hg__clear" onClick={() => setView("All Art")}>Show all art</button>
          </div>
        ) : (
          <div className="hg__rows" style={{ "--row-gap": tweaks.gap + "px" }}>
            {rows.map((r, i) => (
              <FloatRow
                key={i + "-" + r.items.length}
                items={r.items}
                dir={r.dir}
                speed={r.speed}
                speedMul={tweaks.speed}
                gap={tweaks.gap}
                captions={tweaks.captions}
                onOpen={setOpen}
              />
            ))}
          </div>
        )}
      </div>
      </div>

      <Footer />

      <ArtworkViewer
        work={open}
        onClose={() => setOpen(null)}
        onPrev={open ? () => {
          const i = MIX.findIndex((w) => w.id === open.id);
          if (i === -1) return;
          setOpen(MIX[(i - 1 + MIX.length) % MIX.length]);
        } : undefined}
        onNext={open ? () => {
          const i = MIX.findIndex((w) => w.id === open.id);
          if (i === -1) return;
          setOpen(MIX[(i + 1) % MIX.length]);
        } : undefined}
      />


      <TweaksPanel title="Tweaks">
        <TweakSection label="Motion">
          <TweakSlider label="Drift speed" min={0} max={3} step={0.1} value={tweaks.speed}
            onChange={(v) => setTweak("speed", v)} unit="×" />
          <TweakSlider label="Gap" min={0} max={48} step={2} value={tweaks.gap}
            onChange={(v) => setTweak("gap", v)} unit="px" />
        </TweakSection>
        <TweakSection label="Detail">
          <TweakToggle label="Hover captions" value={tweaks.captions}
            onChange={(v) => setTweak("captions", v)} />
          <TweakColor label="Background" value={tweaks.bg}
            onChange={(v) => setTweak("bg", v)}
            options={["#222A30", "#191F24", "#2A333A", "#1B2126"]} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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