// Tweaks app for U Barbers site — exposes team-photo spacing controls
// and the about → product → instagram color-transition tuning.

(function () {
  const { useEffect } = React;

  // Style tag that holds the dynamic @keyframes for the product bg reveal.
  function ensureSeamStyle() {
    let s = document.getElementById("seam-keyframes");
    if (!s) {
      s = document.createElement("style");
      s.id = "seam-keyframes";
      document.head.appendChild(s);
    }
    return s;
  }

  function App() {
    const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

    // Apply tweaks live by writing CSS vars on :root. The layout itself
    // is now driven purely by CSS (2×2 grid in .ar-grid + flex Arsalan),
    // so the sliders just adjust CSS custom properties — we no longer
    // write inline `top` / `width` on individual photos (those rules
    // were tuned to the old asymmetric collage and fight the new grid).
    useEffect(() => {
      const root = document.documentElement;
      const overlap = Math.max(0, Math.min(150, t.overlap));        // 0 = aligned columns, 150 = deep stagger
      const containerH = Math.max(40, Math.min(160, t.containerHeight));
      const scale = Math.max(60, Math.min(140, t.imageScale)) / 100;

      // overlap (0..150) → vertical stagger of the right column of the
      // 2×2 supporting-portrait grid. Picks up via the existing
      // `.ar-grid { --ar-grid-stagger: … }` rule cascade.
      root.style.setProperty("--ar-grid-stagger", `${overlap.toFixed(0)}px`);

      // imageScale (0.6..1.4) → scales the unified gap that drives the
      // 2×2 grid's column-gap, row-gap, AND the Arsalan↔2×2 gap so all
      // three spacings stay equal. Base value 22px matches the static
      // default in styles.css.
      root.style.setProperty("--ar-grid-gap", `${(22 * scale).toFixed(1)}px`);

      // One-time cleanup: strip any legacy inline `top` / `width` that the
      // previous tweak effect wrote directly onto each photo element. The
      // new grid layout doesn't need them and they fight the CSS.
      document.querySelectorAll(".about-photo").forEach((el) => {
        if (el.style.top)   el.style.top = "";
        if (el.style.width) el.style.width = "";
      });

      const right = document.querySelector(".about-right");
      if (right) right.style.minHeight = containerH + "vh";
    }, [t.overlap, t.containerHeight, t.imageScale]);

    // Apply color-transition tweaks: seam color + fade-in / fade-out timing.
    useEffect(() => {
      const root = document.documentElement;
      const seam = t.seamColor || "#121214";
      root.style.setProperty("--seam-dark", seam);

      // Clamp + order the percentages so fadeIn < fadeOut.
      const fIn  = Math.max(2, Math.min(95, t.fadeIn ?? 28));
      const fOut = Math.max(Math.min(98, t.fadeOut ?? 72), fIn + 1);

      const style = ensureSeamStyle();
      style.textContent = `
        @keyframes product-bg-reveal {
          0%       { background-color: ${seam}; }
          ${fIn}%  { background-color: #ffffff; }
          ${fOut}% { background-color: #ffffff; }
          100%     { background-color: ${seam}; }
        }
      `;
    }, [t.seamColor, t.fadeIn, t.fadeOut]);

    // Apply product wax size + parallax strength (both images).
    useEffect(() => {
      const root = document.documentElement;
      const waxSize = Math.max(70, Math.min(160, t.waxSize ?? 108));
      const px      = Math.max(0, Math.min(180, t.parallax ?? 60));

      root.style.setProperty("--wax-size", waxSize + "%");
      // Recenter the wax as it grows/shrinks so it stays roughly anchored.
      root.style.setProperty("--wax-offset-x", (-((waxSize - 100) / 2)).toFixed(2) + "%");
      root.style.setProperty("--wax-offset-y", (-((waxSize - 100) / 4)).toFixed(2) + "%");

      // Parallax strength drives both wax and comb (comb gets half the throw).
      root.style.setProperty("--parallax-wax",  px + "px");
      root.style.setProperty("--parallax-comb", (px * 0.5).toFixed(0) + "px");
      root.style.setProperty("--parallax-stamp", (px * 0.45).toFixed(0) + "px");
    }, [t.waxSize, t.parallax]);

    // Apply footer height tweaks.
    useEffect(() => {
      const root = document.documentElement;
      const padTop = Math.max(0, Math.min(200, t.footerPadTop ?? 0));
      const padBot = Math.max(0, Math.min(120, t.footerPadBottom ?? 28));
      const gap    = Math.max(0, Math.min(160, t.footerBottomGap ?? 24));
      root.style.setProperty("--foot-pad-top", padTop + "px");
      root.style.setProperty("--foot-pad-bottom", padBot + "px");
      root.style.setProperty("--foot-bottom-gap", gap + "px");
    }, [t.footerPadTop, t.footerPadBottom, t.footerBottomGap]);

    // Apply desktop team-photo parallax SCALE (single multiplier that
    // scales BOTH inner (img-wrap drift) and outer (--card-plx) parallax
    // for the 4 supporting portraits — Arsalan's strengths stay fixed).
    useEffect(() => {
      const scale = Math.max(0, Math.min(3, (t.teamParallax ?? 100) / 100));
      window.TEAM_PARALLAX_SCALE = scale;
      if (typeof window.__updateAboutParallax === "function") {
        window.__updateAboutParallax();
      }
    }, [t.teamParallax]);

    // Apply mobile team-photo parallax strengths (per-photo, signed).
    useEffect(() => {
      const clamp = (v) => Math.max(-1000, Math.min(1000, v ?? 0));
      window.MOBILE_PARALLAX = [
        clamp(t.mobileParallax1),
        clamp(t.mobileParallax2),
        clamp(t.mobileParallax3),
        clamp(t.mobileParallax4),
        clamp(t.mobileParallax5),
      ];
      if (typeof window.__updateAboutParallax === "function") {
        window.__updateAboutParallax();
      }
    }, [t.mobileParallax1, t.mobileParallax2, t.mobileParallax3, t.mobileParallax4, t.mobileParallax5]);

    return (
      <TweaksPanel title="Tweaks">
        <TweakSection label="Team Photos" />
        <TweakSlider
          label="Right-column stagger"
          value={t.overlap}
          min={0} max={150} step={5} unit="px"
          onChange={(v) => setTweak("overlap", v)}
        />
        <TweakSlider
          label="Grid spacing"
          value={t.imageScale}
          min={70} max={130} step={5} unit="%"
          onChange={(v) => setTweak("imageScale", v)}
        />
        <TweakSlider
          label="Parallax depth (desktop)"
          value={t.teamParallax ?? 100}
          min={0} max={200} step={5} unit="%"
          onChange={(v) => setTweak("teamParallax", v)}
        />
        <TweakSlider
          label="Section height"
          value={t.containerHeight}
          min={60} max={140} step={5} unit="vh"
          onChange={(v) => setTweak("containerHeight", v)}
        />

        <TweakSection label="About → Product → Instagram color transition" />
        <TweakColor
          label="Dark seam color"
          value={t.seamColor}
          options={["#121214", "#14110d", "#0a0a0c", "#1a1714"]}
          onChange={(v) => setTweak("seamColor", v)}
        />
        <TweakSlider
          label="Fade in (dark → white)"
          value={t.fadeIn}
          min={5} max={90} step={1} unit="%"
          onChange={(v) => setTweak("fadeIn", v)}
        />
        <TweakSlider
          label="Fade out start (white → dark)"
          value={t.fadeOut}
          min={10} max={95} step={1} unit="%"
          onChange={(v) => setTweak("fadeOut", v)}
        />

        <TweakSection label="Product visuals" />
        <TweakSlider
          label="Wax size"
          value={t.waxSize}
          min={80} max={140} step={2} unit="%"
          onChange={(v) => setTweak("waxSize", v)}
        />
        <TweakSlider
          label="Parallax strength"
          value={t.parallax}
          min={0} max={160} step={5} unit="px"
          onChange={(v) => setTweak("parallax", v)}
        />
        <TweakSection label="Footer height" />
        <TweakSlider
          label="Top padding"
          value={t.footerPadTop ?? 0}
          min={0} max={200} step={4} unit="px"
          onChange={(v) => setTweak("footerPadTop", v)}
        />
        <TweakSlider
          label="Bottom padding"
          value={t.footerPadBottom ?? 28}
          min={0} max={120} step={2} unit="px"
          onChange={(v) => setTweak("footerPadBottom", v)}
        />
        <TweakSlider
          label="Copyright row gap"
          value={t.footerBottomGap ?? 24}
          min={0} max={160} step={2} unit="px"
          onChange={(v) => setTweak("footerBottomGap", v)}
        />
        <TweakSection label="Mobile photo parallax (per photo)" />
        <TweakSlider
          label="I — Arsalan"
          value={t.mobileParallax1 ?? 40}
          min={-1000} max={1000} step={10} unit="px"
          onChange={(v) => setTweak("mobileParallax1", v)}
        />
        <TweakSlider
          label="II — Matin"
          value={t.mobileParallax2 ?? 50}
          min={-1000} max={1000} step={10} unit="px"
          onChange={(v) => setTweak("mobileParallax2", v)}
        />
        <TweakSlider
          label="III — Saeed"
          value={t.mobileParallax3 ?? 80}
          min={-1000} max={1000} step={10} unit="px"
          onChange={(v) => setTweak("mobileParallax3", v)}
        />
        <TweakSlider
          label="IV — Pouya"
          value={t.mobileParallax4 ?? 50}
          min={-1000} max={1000} step={10} unit="px"
          onChange={(v) => setTweak("mobileParallax4", v)}
        />
        <TweakSlider
          label="V — Member"
          value={t.mobileParallax5 ?? 80}
          min={-1000} max={1000} step={10} unit="px"
          onChange={(v) => setTweak("mobileParallax5", v)}
        />
      </TweaksPanel>
    );
  }

  // Mount when React + tweaks-panel are loaded
  function tryMount() {
    if (typeof useTweaks !== "function" || typeof TweaksPanel !== "function") {
      return setTimeout(tryMount, 60);
    }
    const root = document.getElementById("tweaks-root");
    ReactDOM.createRoot(root).render(<App />);
  }
  tryMount();
})();