// bootscene.js — the home loading cover's scene: soft smoke and rising dust
// motes drifting in a theme-matched haze. A trimmed sibling of the messenger's
// boot scene (web/static/bootscene.js): the SAME smoke + motes, but none of the
// "lights" (no under-lit 11-segment meter), no quotes, and no punch-to-eleven.
//
// Home just needs a calm cover over the gap between "signed in on this browser"
// and "your spaces list has decrypted + rendered", so a refresh doesn't flash
// the Sign-in screen first. It's shown only for returning members (a live
// session in sessionStorage) — a pre-paint gate in index.html adds html.booting
// so the cover is up from the very first frame; signed-out visitors never see it.
//
// home.js drives it with two calls:
//   startHomeLoader()  — reveal the cover + begin the drift
//   finishHomeLoader() — fade the cover away once the list (or Sign-in) is ready

// Hold the loader at least this long before it fades — a deliberate beat on the
// scene, so even an instant load gets ~2s of smoke rather than a strobe.
const MIN_SHOW = 2000;
// On the session paths the cover's pageantry holds this long before appearing
// at all (the cover-wait CSS in index.html — the cover still blocks from frame
// zero, only its visibility waits). A load that lifts inside the window never
// showed chrome, so it skips the dwell and the exit fade too.
const CHROME_DELAY = 500;

let scene = null; // the live scene, if startHomeLoader ran

// Soft cloud sprite: layered radial blobs, feathered, tinted once. (Identical to
// the messenger scene's puff so the smoke reads the same.)
function makePuffShape(size) {
  const c = document.createElement("canvas");
  c.width = c.height = size;
  const p = c.getContext("2d");
  for (let i = 0; i < 24; i++) {
    const bx = size / 2 + (Math.random() - 0.5) * size * 0.52;
    const by = size / 2 + (Math.random() - 0.5) * size * 0.38;
    const br = size * (0.09 + Math.random() * 0.17);
    const grad = p.createRadialGradient(bx, by, 0, bx, by, br);
    grad.addColorStop(0, "rgba(255,255,255,0.055)");
    grad.addColorStop(1, "rgba(255,255,255,0)");
    p.fillStyle = grad;
    p.fillRect(0, 0, size, size);
  }
  const mask = p.createRadialGradient(size / 2, size / 2, size * 0.3, size / 2, size / 2, size * 0.5);
  mask.addColorStop(0, "rgba(0,0,0,1)");
  mask.addColorStop(1, "rgba(0,0,0,0)");
  p.globalCompositeOperation = "destination-in";
  p.fillStyle = mask;
  p.fillRect(0, 0, size, size);
  return c;
}
function tinted(shape, rgb) {
  const c = document.createElement("canvas");
  c.width = c.height = shape.width;
  const p = c.getContext("2d");
  p.drawImage(shape, 0, 0);
  p.globalCompositeOperation = "source-in";
  p.fillStyle = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
  p.fillRect(0, 0, c.width, c.height);
  return c;
}

export function startHomeLoader() {
  const canvas = document.getElementById("boot-canvas");
  if (!canvas) return;
  const g = canvas.getContext("2d");
  if (!g) return;
  const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;

  // Which room are we in? Judge by the RESOLVED page background (theme +
  // colour-scheme decide it). Dark room: white smoke, additive glints. Lit
  // room: dark grey smoke + dust that occludes over the light bg.
  const bgRGB = ((getComputedStyle(document.body).backgroundColor || "").match(/\d+/g) || []).map(Number);
  const dark = bgRGB.length >= 3 && 0.299 * bgRGB[0] + 0.587 * bgRGB[1] + 0.114 * bgRGB[2] < 128;
  const room = dark
    ? { comp: "lighter", neutral: [216, 216, 224], neutralA: 0.26, mote: [255, 255, 255], moteA: 0.42, puffMul: 1 }
    : { comp: "source-over", neutral: [26, 28, 38], neutralA: 0.65, mote: [24, 26, 36], moteA: 0.65, puffMul: 1.7 };

  const shapes = Array.from({ length: 6 }, () => makePuffShape(256));
  const sprites = shapes.map((s) => tinted(s, room.neutral));

  const S = {
    canvas, g, room, sprites, reduced,
    W: 0, H: 0, puffs: [], motes: [], grain: null, raf: 0, t0: performance.now(),
  };
  scene = S;
  sizeScene(S);
  seedScene(S);
  makeGrain(S);
  S.onResize = () => { sizeScene(S); seedScene(S); };
  addEventListener("resize", S.onResize);

  if (reduced) { drawFrame(S, 0, performance.now()); return; } // a single considered still
  let last = performance.now();
  const tick = (now) => {
    if (!S.canvas.isConnected || scene !== S) return; // finishHomeLoader removed/replaced it
    const dt = Math.min(0.05, (now - last) / 1000);
    last = now;
    drawFrame(S, dt, now);
    S.raf = requestAnimationFrame(tick);
  };
  S.raf = requestAnimationFrame(tick);
}

// finishHomeLoader lifts the loading chrome: it drops html.booting so the
// content fades in, and fades out the cover's chrome — leaving the smoke canvas
// running as the page's ambient background. A minimum on-screen time keeps an
// instant load from strobing; { immediate: true } skips the floor for callers
// that ran their own choreography (the Apple return's staged exit in home.js).
// The chrome is parked, not removed — the Apple tap re-engages it later (the
// html.siwa-wait waiting face), so it must survive its first fade-out.
export function finishHomeLoader({ immediate = false } = {}) {
  const chrome = document.getElementById("app-loading");
  const elapsed = scene ? performance.now() - scene.t0 : MIN_SHOW;
  // The fast path: a session boot lifting while the page is younger than the
  // chrome delay. The pageantry never appeared (its CSS clock starts at first
  // paint — later than performance.now()'s navigation-start epoch, so this
  // check errs on the safe side of "never seen"), so nothing needs a graceful
  // exit: reveal the content at once, html.boot-fast trimming its fade to an
  // imperceptible beat. The siwa journey face keeps its own choreography.
  const fast = !immediate && performance.now() < CHROME_DELAY &&
    !document.documentElement.classList.contains("siwa-wait");
  setTimeout(() => {
    if (fast) document.documentElement.classList.add("boot-fast");
    document.documentElement.classList.remove("booting"); // reveal + fade the content in
    if (chrome) {
      chrome.classList.add("cover-out"); // fade the chrome out (it keeps display for the ride)
      setTimeout(() => {
        chrome.classList.remove("cover-out", "brand-in"); // parked (display:none), ready to re-engage
        document.documentElement.classList.remove("siwa-wait", "boot-fast"); // the wait face dies with its chrome
      }, fast ? 80 : 600);
    }
    // NB: the smoke canvas + its rAF are intentionally left running — the scene
    // is the page's living backdrop now, not a cover to tear down.
  }, immediate || fast ? 0 : Math.max(0, MIN_SHOW - elapsed));
}

function sizeScene(S) {
  const dpr = Math.min(2, window.devicePixelRatio || 1);
  S.W = window.innerWidth;
  S.H = window.innerHeight;
  S.canvas.width = S.W * dpr;
  S.canvas.height = S.H * dpr;
  S.g.setTransform(dpr, 0, 0, dpr, 0, 0);
}

function seedScene(S) {
  const { W, H } = S;
  // Two counter-drifting layers hanging in the lower two thirds — the smoke
  // floats, it doesn't fill the ceiling. Counts scale down on small screens.
  const k = Math.max(0.5, Math.min(1, W / 1100));
  const mul = S.room.puffMul || 1; // per-room smoke density (light needs more)
  S.puffs = [];
  for (const layer of [
    { n: Math.round(22 * k * mul), s: [480, 860], v: [13, 26], a: 0.6, dir: 1, band: [0.3, 0.98] },
    { n: Math.round(18 * k * mul), s: [240, 480], v: [22, 42], a: 0.8, dir: -1, band: [0.42, 1.0] },
  ]) {
    for (let i = 0; i < layer.n; i++) {
      S.puffs.push({
        x: Math.random() * (W + 400) - 200,
        y: H * (layer.band[0] + Math.random() * (layer.band[1] - layer.band[0])),
        s: layer.s[0] + Math.random() * (layer.s[1] - layer.s[0]),
        vx: layer.dir * (layer.v[0] + Math.random() * (layer.v[1] - layer.v[0])),
        rot: Math.random() * Math.PI * 2,
        vr: (Math.random() - 0.5) * 0.13,
        a: layer.a * (0.6 + Math.random() * 0.4),
        spi: (Math.random() * S.sprites.length) | 0,
        wob: Math.random() * Math.PI * 2,
      });
    }
  }
  S.motes = Array.from({ length: Math.min(130, Math.round(W / 11)) }, () => ({
    x: Math.random() * W,
    y: Math.random() * H,
    r: 0.5 + Math.random() * 1.2,
    vy: -(8 + Math.random() * 18), // motes rise on the warm air
    sway: 6 + Math.random() * 14,
    ph: Math.random() * Math.PI * 2,
    tw: 0.5 + Math.random() * 1.6,
  }));
}

function makeGrain(S) {
  const c = document.createElement("canvas");
  c.width = c.height = 256;
  const p = c.getContext("2d");
  const img = p.createImageData(256, 256);
  for (let i = 0; i < img.data.length; i += 4) {
    const v = 118 + Math.random() * 96;
    img.data[i] = img.data[i + 1] = img.data[i + 2] = v;
    img.data[i + 3] = 255;
  }
  p.putImageData(img, 0, 0);
  S.grain = c;
}

function drawSmoke(S, dt) {
  const { g, W } = S;
  g.save();
  g.globalCompositeOperation = S.room.comp;
  g.globalAlpha = 1;
  for (const p of S.puffs) {
    if (!S.reduced) {
      p.x += p.vx * dt;
      p.rot += p.vr * dt;
      p.wob += dt * 0.55;
      if (p.x < -p.s) p.x = W + p.s * 0.6;
      else if (p.x > W + p.s) p.x = -p.s * 0.6;
    }
    const y = p.y + Math.sin(p.wob) * 20;
    g.save();
    g.translate(p.x, y);
    g.rotate(p.rot);
    g.globalAlpha = p.a * S.room.neutralA; // no meter to light it — its own quiet presence
    g.drawImage(S.sprites[p.spi], -p.s / 2, -p.s / 2, p.s, p.s);
    g.restore();
  }
  g.restore();
}

function drawMotes(S, dt, now) {
  const { g, W, H, room } = S;
  g.save();
  g.globalCompositeOperation = room.comp; // dark room: additive glints; lit room: over
  for (const m of S.motes) {
    if (!S.reduced) {
      m.y += m.vy * dt;
      m.ph += dt * 0.9;
      if (m.y < -4) {
        m.y = H + 4;
        m.x = Math.random() * W;
      }
    }
    const x = m.x + Math.sin(m.ph) * m.sway;
    const tw = 0.65 + 0.35 * Math.sin(now * 0.001 * m.tw + m.ph * 3);
    const a = room.moteA * tw;
    if (a < 0.015) continue;
    g.globalAlpha = a;
    g.fillStyle = `rgb(${room.mote[0]},${room.mote[1]},${room.mote[2]})`;
    g.beginPath();
    g.arc(x, m.y, m.r, 0, 7);
    g.fill();
  }
  g.restore();
}

function drawFrame(S, dt, now) {
  const { g, W, H } = S;
  g.clearRect(0, 0, W, H); // transparent: the cover's own --bg shows through
  drawSmoke(S, dt);
  drawMotes(S, dt, now);
  if (S.grain) {
    g.save();
    g.globalAlpha = 0.045;
    g.globalCompositeOperation = "overlay";
    const ox = -((Math.random() * 256) | 0),
      oy = -((Math.random() * 256) | 0);
    for (let x = ox; x < W; x += 256) for (let y = oy; y < H; y += 256) g.drawImage(S.grain, x, y);
    g.restore();
  }
}