// The animated backdrop, all on one canvas: drifting, twinkling stars with the
// odd shooting star, the striped sun, and a perspective grid floor sliding
// towards you. One canvas is one composited layer: no CSS 3D transforms, masks or
// animations, which is what made the old CSS floor flicker in mobile Safari.
//
// Built to survive mobile browsers: star positions are stored as fractions of
// the viewport so a resize (iOS fires them constantly as the toolbar collapses)
// never re-scatters them; a frame that throws cannot kill the loop; and the loop
// is restarted if it is ever found dead (dropped frame, back/forward cache,
// throttled tab), so the animation cannot silently stop.

const STAR_COUNT = 320;
const TINTS = ['#ffffff', '#ffffff', '#ffffff', '#9ff8ff', '#ffb3f0'];

export function startBackdrop(canvas) {
  const ctx = canvas.getContext('2d');
  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)');

  // Positions are fractions of the viewport (nx, ny in [0, 1)).
  const stars = Array.from({ length: STAR_COUNT }, () => ({
    nx: Math.random(),
    ny: Math.random(),
    z: 0.25 + Math.random() * 0.75,
    phase: Math.random() * Math.PI * 2,
    speed: 0.6 + Math.random() * 1.8,
    tint: TINTS[Math.floor(Math.random() * TINTS.length)],
  }));
  let shooters = [];
  let nextShot = 4000;

  let w = 0;
  let h = 0;
  let dpr = 1;
  let horizonY = 0; // where the floor starts
  let floorH = 0;
  let staticLayer = null; // sun + floor base, painted once per size
  let staticTop = 0; // the layer is empty above this row, so only the part below it is drawn
  let fade = null; // gradient that dissolves the grid into the horizon
  let shown = 0; // how many stars fit the current viewport
  let raf = 0;
  let last = performance.now();
  let lastFrame = performance.now();
  let resizeTimer = 0;

  function resize() {
    // The canvas is a fixed box of 100vh anchored to the bottom (see the CSS), so
    // it does not change size when a phone's toolbar slides in and out.
    const nw = canvas.clientWidth;
    const nh = canvas.clientHeight;
    if (!nw || !nh) return;
    dpr = Math.min(window.devicePixelRatio || 1, 2);
    if (nw !== w || nh !== h || canvas.width !== Math.round(nw * dpr)) {
      w = nw;
      h = nh;
      canvas.width = Math.round(w * dpr);
      canvas.height = Math.round(h * dpr);
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      floorH = Math.round(h * 0.17);
      horizonY = h - floorH;
      staticLayer = buildStatic();
      fade = ctx.createLinearGradient(0, horizonY, 0, horizonY + floorH * 0.55);
      fade.addColorStop(0, 'rgba(34,9,63,1)');
      fade.addColorStop(1, 'rgba(34,9,63,0)');
    }
    shown = Math.min(STAR_COUNT, Math.round((w * h) / 5500));
    draw(performance.now());
  }

  /** The parts that never move, painted once: the striped sun and the floor's base. */
  function buildStatic() {
    const c = document.createElement('canvas');
    c.width = canvas.width;
    c.height = canvas.height;
    const g = c.getContext('2d');
    g.setTransform(dpr, 0, 0, dpr, 0, 0);

    const S = Math.max(180, Math.min(400, 0.34 * Math.min(w, h)));
    const R = S / 2;
    const cx = w / 2;
    const cy = horizonY - 0.16 * S; // its lower third is hidden behind the floor
    staticTop = Math.max(0, Math.floor(cy - R - 60)); // top of the sun's halo

    const halo = g.createRadialGradient(cx, cy, R, cx, cy, R + 60);
    halo.addColorStop(0, 'rgba(255,58,216,0.30)');
    halo.addColorStop(1, 'rgba(255,58,216,0)');
    g.fillStyle = halo;
    g.beginPath();
    g.arc(cx, cy, R + 60, 0, Math.PI * 2);
    g.fill();

    const t = document.createElement('canvas'); // the disc, with its stripes cut out
    t.width = t.height = Math.ceil(S * dpr);
    const tg = t.getContext('2d');
    tg.scale(dpr, dpr);
    const sun = tg.createLinearGradient(0, 0, 0, S);
    sun.addColorStop(0, '#fff27a');
    sun.addColorStop(0.32, '#ffb62e');
    sun.addColorStop(0.72, '#ff3ad8');
    sun.addColorStop(1, '#8a2cff');
    tg.fillStyle = sun;
    tg.beginPath();
    tg.arc(R, R, R, 0, Math.PI * 2);
    tg.fill();
    tg.globalCompositeOperation = 'destination-out';
    for (const [from, to] of [[0.46, 0.49], [0.56, 0.6], [0.67, 0.72], [0.79, 0.85], [0.91, 0.98]]) {
      tg.fillRect(0, from * S, S, (to - from) * S);
    }
    g.drawImage(t, cx - R, cy - R, S, S);

    const base = g.createLinearGradient(0, horizonY, 0, h);
    base.addColorStop(0, '#22093f');
    base.addColorStop(1, '#0c0420');
    g.fillStyle = base;
    g.fillRect(0, horizonY, w, floorH);
    const glow = g.createLinearGradient(0, horizonY - 28, 0, horizonY);
    glow.addColorStop(0, 'rgba(40,245,255,0)');
    glow.addColorStop(1, 'rgba(40,245,255,0.45)');
    g.fillStyle = glow;
    g.fillRect(0, horizonY - 28, w, 28);
    g.fillStyle = '#28f5ff';
    g.fillRect(0, horizonY - 1, w, 2);
    return c;
  }

  /** The grid: lines at even steps in depth, projected onto the floor. */
  function drawGrid(now) {
    const Z_FAR = 26;
    const phase = reduce.matches ? 0 : ((now / 1000) * 0.42) % 1; // depth steps per second
    ctx.save();
    ctx.beginPath();
    ctx.rect(0, horizonY, w, floorH);
    ctx.clip();
    ctx.strokeStyle = '#ff3ad8';

    // lines across, sliding towards the viewer
    for (let j = 0; j < Z_FAR; j++) {
      const z = 1 + j - phase;
      const y = horizonY + floorH / z;
      ctx.globalAlpha = 0.85;
      ctx.lineWidth = 0.7 + 1.5 / Math.max(z, 1);
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(w, y);
      ctx.stroke();
    }

    // lines running into the distance, meeting at the vanishing point
    const spacing = floorH * 0.55;
    const n = Math.ceil((w / 2 / spacing) * 6);
    const cx = w / 2;
    ctx.globalAlpha = 0.7;
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    for (let i = -n; i <= n; i++) {
      ctx.moveTo(cx + (i * spacing) / Z_FAR, horizonY + floorH / Z_FAR);
      ctx.lineTo(cx + (i * spacing) / 0.4, horizonY + floorH / 0.4);
    }
    ctx.stroke();

    // dissolve everything into the horizon so distant lines cannot shimmer
    ctx.globalAlpha = 1;
    ctx.fillStyle = fade;
    ctx.fillRect(0, horizonY, w, floorH * 0.55);
    ctx.restore();
  }

  function draw(now) {
    if (!staticLayer) return;
    ctx.clearRect(0, 0, w, h);
    for (let i = 0; i < shown; i++) {
      const s = stars[i];
      const tw = 0.5 + 0.5 * Math.sin((now / 1000) * s.speed + s.phase);
      ctx.globalAlpha = reduce.matches ? 0.5 * s.z : (0.25 + 0.75 * tw) * s.z;
      ctx.fillStyle = s.tint;
      const r = 0.4 + s.z * 1.3;
      ctx.fillRect(s.nx * w, s.ny * h, r, r);
    }
    for (const s of shooters) {
      const g = ctx.createLinearGradient(s.x, s.y, s.x - s.vx * 9, s.y - s.vy * 9);
      g.addColorStop(0, 'rgba(255,255,255,0.95)');
      g.addColorStop(1, 'rgba(255,58,216,0)');
      ctx.globalAlpha = Math.max(0, Math.min(1, s.life));
      ctx.strokeStyle = g;
      ctx.lineWidth = 1.5;
      ctx.beginPath();
      ctx.moveTo(s.x, s.y);
      ctx.lineTo(s.x - s.vx * 9, s.y - s.vy * 9);
      ctx.stroke();
    }
    ctx.globalAlpha = 1;
    // sun and floor over the stars; only the part of the layer that has anything in it
    ctx.drawImage(staticLayer, 0, staticTop * dpr, canvas.width, canvas.height - staticTop * dpr, 0, staticTop, w, h - staticTop);
    drawGrid(now);
  }

  function update(dt) {
    for (let i = 0; i < shown; i++) {
      const s = stars[i];
      s.nx -= (s.z * 0.012 * dt) / w;
      if (s.nx < 0) {
        s.nx += 1;
        s.ny = Math.random();
      }
    }
    nextShot -= dt;
    if (nextShot <= 0) {
      nextShot = 7000 + Math.random() * 9000;
      shooters.push({ x: Math.random() * w * 0.8 + w * 0.2, y: Math.random() * h * 0.4, vx: -(6 + Math.random() * 4), vy: 2 + Math.random() * 2, life: 1.4 });
    }
    for (const s of shooters) {
      s.x += (s.vx * dt) / 16;
      s.y += (s.vy * dt) / 16;
      s.life -= dt / 900;
    }
    shooters = shooters.filter((s) => s.life > 0);
  }

  function frame(now) {
    raf = 0;
    try {
      const dt = Math.max(0, Math.min(64, now - last));
      last = now;
      update(dt);
      draw(now);
    } catch (e) {
      console.error('starfield frame failed; continuing', e);
    }
    lastFrame = performance.now();
    schedule();
  }

  function schedule() {
    if (raf || reduce.matches || document.visibilityState !== 'visible') return;
    raf = requestAnimationFrame(frame);
  }

  /** (Re)start the loop from a clean state. Safe to call at any time. */
  function restart() {
    cancelAnimationFrame(raf);
    raf = 0;
    last = lastFrame = performance.now();
    if (reduce.matches) draw(last);
    else schedule();
  }

  window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resize, 120);
  });
  window.addEventListener('orientationchange', () => setTimeout(resize, 250));
  document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') restart(); });
  window.addEventListener('pageshow', restart); // back/forward cache restore
  window.addEventListener('focus', restart);
  reduce.addEventListener('change', restart);

  // Watchdog: a visible page whose loop has gone quiet gets restarted.
  setInterval(() => {
    if (!reduce.matches && document.visibilityState === 'visible' && performance.now() - lastFrame > 1500) restart();
  }, 1000);

  resize();
  restart();
}