// Hero camera: a short product-video move over the hero window, on one 20 s timeline.
// Two rows are checked, the camera glides in on the list and closer on the rows, slides to the sidebar as
// the filter switches to Passed and to Blocked, pans down the list and pulls back out.
// The motion and its blur are Web Animations, so the compositor runs them smoothly even while the page's
// animated background keeps the main thread busy; row states and filters follow the same clock.
// Still under reduced motion, on phones and wherever the kit holds the window; the kit's pause button
// pauses everything.
import { pausable, reduced, isStill } from "./assets/ui/ui.js";

const host = document.querySelector(".hero__window");
const win = host && host.querySelector(".ui-win");
const piece = win && win.closest(".ly-piece");
const rows = win ? [...win.querySelectorAll(".ui-win__row")] : [];
const list = win && win.querySelector(".ui-win__rows");
const navs = win ? [...win.querySelectorAll(".ui-win__side .ui-win__nav")] : [];
const navOf = (word) => navs.find((n) => n.firstChild && n.firstChild.textContent.trim() === word);
const badge = (r) => r.querySelector("[data-st]");
rows.forEach((r) => { r.dataset.final = badge(r).textContent.trim(); r.dataset.finalCls = badge(r).className; });

const LOOP = 20000;
// [start, end, from, to, peak blur px]; the camera holds between moves
const MOVES = [
  [1500, 3000, "home", "pane", 1.2], [3500, 4900, "pane", "rows", 1.2],
  [5700, 6700, "rows", "side", 0.8], [7400, 8400, "side", "rows", 0.8],
  [9600, 10600, "rows", "side", 0.8], [11300, 12300, "side", "rows", 0.8],
  [13600, 16600, "rows", "low", 0.5], [17200, 18800, "low", "home", 1.2],
];
const EASE = "cubic-bezier(0.65, 0, 0.25, 1)";
// the two rows the window checks on every loop: [time, row index, word, badge class]; null = final state
const QUEUE = [[0, 0, "Queued", ""], [0, 3, "Queued", ""], [500, 0, "Checking", "is-work"], [1500, 0, null, null],
  [1900, 3, "Checking", "is-work"], [3100, 3, null, null]];
const FILTERS = [[6900, "Passed"], [10800, "Blocked"], [13300, "All"]];

function setRow(i, word, cls) {
  const r = rows[i], b = badge(r);
  b.textContent = word ?? r.dataset.final;
  b.className = word ? `ui-win__st ${cls}`.trim() : r.dataset.finalCls;
  r.classList.toggle("is-sel", cls === "is-work");
}
let filter = "All";
function setFilter(word) {
  if (word === filter) return;
  filter = word;
  navs.forEach((n) => n.classList.toggle("is-on", n === navOf(word)));
  rows.forEach((r) => r.classList.toggle("cam-hide", word !== "All" && r.dataset.final !== word));
  list.classList.remove("cam-fade"); void list.offsetWidth; list.classList.add("cam-fade");
}
function rest() {                                    // the finished picture
  setFilter("All");
  rows.forEach((_, i) => setRow(i, null, null));
}

// A view is a scale and the point of the panel (its own px) shown at the frame's middle.
function views() {
  const H = host.getBoundingClientRect(), P = win.getBoundingClientRect();
  const box = (els) => {
    const rs = els.map((e) => e.getBoundingClientRect());
    const l = Math.min(...rs.map((r) => r.left)), t = Math.min(...rs.map((r) => r.top));
    return { l: l - P.left, t: t - P.top, w: Math.max(...rs.map((r) => r.right)) - l, h: Math.max(...rs.map((r) => r.bottom)) - t };
  };
  const W = H.width, Hv = H.height * 0.84;           // the frame fades out over its bottom 16%
  const g = { W, Hv, px: P.left - H.left, py: P.top - H.top, pw: P.width, ph: P.height };
  // the box's horizontal middle at the frame's middle, its top 14px under the frame's top
  const at = (b, s) => ({ s, cx: b.l + b.w / 2, cy: b.t - 14 / s + Hv / (2 * s) });
  const cols = win.querySelector(".ui-win__cols"), main = box([win.querySelector(".ui-win__main")]);
  const head = box([cols, ...rows.slice(0, 3)]), nav = box(navs.slice(0, 4));
  const topic = cols.children[1].getBoundingClientRect().left - P.left;
  const verdict = cols.children[2].getBoundingClientRect().right - P.left;
  const s = Math.min(2.1, W / 560);                  // the close-up: about 560px of the panel across the frame
  const rowsBox = { ...head, l: topic - 8, w: verdict - topic + 24 };
  g.home = { s: 1, cx: W / 2 - g.px, cy: Hv / 2 - g.py };
  g.pane = at(main, Math.min(1.6, W / (main.w * 0.92)));
  g.rows = at(rowsBox, s);
  g.side = at({ ...head, l: nav.l - 6, w: topic + 40 - nav.l }, s);
  g.low = at({ ...rowsBox, t: box(rows.slice(5, 9)).t }, s);
  return g;
}

function transformOf(g, { s, cx, cy }) {
  let x = g.W / 2 - g.px - s * cx, y = g.Hv / 2 - g.py - s * cy;
  if (s > 1.01) {                                    // zoomed in: never show past the panel's edges
    if (s * g.pw > g.W) x = Math.min(-g.px, Math.max(g.W - g.px - s * g.pw, x));
    if (s * g.ph > g.Hv) y = Math.min(-g.py, Math.max(g.Hv - g.py - s * g.ph, y));
  }
  return `translate(${x.toFixed(1)}px, ${y.toFixed(1)}px) scale(${s.toFixed(3)})`;
}

let cam = null, blur = null, running = false, userPaused = false, visible = false, lastT = 0;

function build() {
  const t = cam ? cam.currentTime : 0;
  if (cam) { cam.cancel(); blur.cancel(); }
  const g = views();
  const kf = [{ offset: 0, transform: transformOf(g, g.home) }], bf = [{ offset: 0, filter: "blur(0px)" }];
  for (const [a, b, from, to, px] of MOVES) {
    kf.push({ offset: a / LOOP, transform: transformOf(g, g[from]), easing: EASE });
    kf.push({ offset: b / LOOP, transform: transformOf(g, g[to]) });
    bf.push({ offset: a / LOOP, filter: "blur(0px)", easing: "ease-in" });
    bf.push({ offset: (a + b) / 2 / LOOP, filter: `blur(${px}px)`, easing: "ease-out" });
    bf.push({ offset: b / LOOP, filter: "blur(0px)" });
  }
  kf.push({ offset: 1, transform: transformOf(g, g.home) });
  bf.push({ offset: 1, filter: "blur(0px)" });
  cam = win.animate(kf, { duration: LOOP, iterations: Infinity });
  blur = piece.animate(bf, { duration: LOOP, iterations: Infinity });
  cam.currentTime = blur.currentTime = t;
  if (!running) { cam.pause(); blur.pause(); }
}

// row states and filters read the camera's own clock, so they never drift from the motion
function events() {
  if (!cam || !running) return;
  const t = (cam.currentTime ?? 0) % LOOP;
  if (t < lastT) { rest(); lastT = -1; }
  for (const [at, i, word, cls] of QUEUE) if (lastT < at && t >= at) setRow(i, word, cls);
  for (const [at, word] of FILTERS) if (lastT < at && t >= at) setFilter(word);
  lastT = t;
  requestAnimationFrame(events);
}

function sync() {
  const want = visible && !userPaused && !document.hidden && innerWidth >= 640 && !isStill(win);
  if (want === running) return;
  running = want;
  if (want) {
    if (!cam) { lastT = -1; build(); }
    blur.currentTime = cam.currentTime;
    cam.play(); blur.play();
    requestAnimationFrame(events);
  } else if (cam) {
    cam.pause(); blur.pause();
    if (innerWidth < 640 || isStill(win)) { cam.cancel(); blur.cancel(); cam = blur = null; rest(); }
  }
}

if (win && piece && list && rows.length >= 9 && !reduced()) {
  win.classList.add("cam");
  new IntersectionObserver(([e]) => { visible = e.isIntersecting; sync(); }).observe(host);
  document.addEventListener("visibilitychange", sync);
  setInterval(sync, 1000);                           // picks up a hold the kit sets or lifts later
  let rt = 0;
  addEventListener("resize", () => { clearTimeout(rt); rt = setTimeout(() => { if (cam) build(); sync(); }, 150); });
  pausable(host, { pause: () => { userPaused = true; sync(); }, resume: () => { userPaused = false; sync(); } });
}