/**
 * particleNetwork.js
 *
 * Particle network animation with slow-rolling fBm noise field opacity modulation.
 *
 * Usage:
 *   import { ParticleNetwork } from './particleNetwork.js';
 *
 *   const net = new ParticleNetwork(canvasEl, fieldCanvasEl, {
 *     count:      55,    // number of particles
 *     reach:      140,   // max connection distance (px)
 *     flowSpeed:  2,     // field drift speed (1–10 scale)
 *     fieldScale: 4,     // noise zoom level (1–10 scale)
 *     dimAtMin:   0.60,  // opacity multiplier at field minimum (0 = no dim, 1 = invisible)
 *   });
 *
 *   net.start();
 *   net.stop();
 *   net.setOption('count', 80);
 *   net.destroy();
 *
 * fieldCanvasEl is optional. Pass null to skip the debug field view.
 */

// ---------------------------------------------------------------------------
// Perlin noise helpers
// ---------------------------------------------------------------------------

function _fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); }
function _lerp(a, b, t) { return a + t * (b - a); }
function _grad(h, x, y) {
  h &= 7;
  const u = h < 4 ? x : y, v = h < 4 ? y : x;
  return ((h & 1) ? -u : u) + ((h & 2) ? -v : v);
}

function _buildPermutation() {
  const a = Array.from({ length: 256 }, (_, i) => i);
  for (let i = 255; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return [...a, ...a];
}

function _noise2(P, x, y) {
  const X = Math.floor(x) & 255, Y = Math.floor(y) & 255;
  x -= Math.floor(x); y -= Math.floor(y);
  const u = _fade(x), v = _fade(y);
  const aa = P[X] + Y, bb = P[X + 1] + Y;
  return _lerp(
    _lerp(_grad(P[aa],     x,     y), _grad(P[bb],     x - 1, y),     u),
    _lerp(_grad(P[aa + 1], x,     y - 1), _grad(P[bb + 1], x - 1, y - 1), u),
    v
  );
}

function _fbm(P, x, y, octaves = 4) {
  let value = 0, amp = 0.5, freq = 1, max = 0;
  for (let i = 0; i < octaves; i++) {
    value += _noise2(P, x * freq, y * freq) * amp;
    max   += amp;
    amp   *= 0.5;
    freq  *= 2;
  }
  return value / max;
}

// ---------------------------------------------------------------------------
// Defaults
// ---------------------------------------------------------------------------

const DEFAULTS = {
  count:      55,
  reach:      140,
  flowSpeed:  2,
  fieldScale: 4,
  dimAtMin:   0.60,

  // Particle motion
  particleSpeed: 0.35,
  particleMinR:  1.4,
  particleMaxR:  2.8,

  // Field evaluation
  fieldOffscreenW:  80,
  fieldOffscreenH:  52,
  fieldUpdateMs:    50,   // how often the noise field is recalculated (ms)
  fieldOctaves:     4,

  // Time warp constants — tweak to change how the field drifts
  // elapsed is in ms; these produce a very slow traversal at flowSpeed=1
  timeConstantX: 0.000014 * 60,  // primary axis
  timeConstantY: 0.0000085 * 37, // secondary axis (different ratio = swirl)

  // Visual
  bgColor:          '#040e1f',
  dotColorR:        180,
  dotColorG:        200,   // G channel base (G = R + 20 in original; kept separate for clarity)
  lineColor:        '80,160,240',
  lineColorMouse:   '160,220,255',
  glowColorInner:   '180,220,255',
  glowColorMid:     '100,170,255',
  canvasAspect:     0.65,  // H = W * aspect
};

// ---------------------------------------------------------------------------
// ParticleNetwork class
// ---------------------------------------------------------------------------

export class ParticleNetwork {
  /**
   * @param {HTMLCanvasElement} mainCanvas
   * @param {HTMLCanvasElement|null} fieldCanvas  — pass null to disable field preview
   * @param {Partial<typeof DEFAULTS>} options
   */
  constructor(mainCanvas, fieldCanvas = null, options = {}) {
    this._canvas      = mainCanvas;
    this._fieldCanvas = fieldCanvas;
    this._opt         = { ...DEFAULTS, ...options };

    this._mCtx  = mainCanvas.getContext('2d');
    this._fCtx  = fieldCanvas ? fieldCanvas.getContext('2d') : null;

    // Offscreen canvas for cheap noise evaluation
    this._off      = document.createElement('canvas');
    this._off.width  = this._opt.fieldOffscreenW;
    this._off.height = this._opt.fieldOffscreenH;
    this._oCtx     = this._off.getContext('2d');
    this._fieldCache = new Float32Array(
      this._opt.fieldOffscreenW * this._opt.fieldOffscreenH
    );

    this._P          = _buildPermutation();
    this._particles  = [];
    this._mouse      = { x: -9999, y: -9999 };
    this._elapsed    = 0;
    this._lastTs     = null;
    this._fieldAge   = 9999;
    this._rafId      = null;
    this._W          = 0;
    this._H          = 0;

    this._onMouseMove  = this._handleMouseMove.bind(this);
    this._onMouseLeave = this._handleMouseLeave.bind(this);
    this._onResize     = this._handleResize.bind(this);

    this._attach();
    this._resize();
    this._syncCount();
  }

  // -------------------------------------------------------------------------
  // Public API
  // -------------------------------------------------------------------------

  start() {
    if (this._rafId !== null) return;
    this._lastTs = null;
    this._rafId  = requestAnimationFrame(ts => this._loop(ts));
  }

  stop() {
    if (this._rafId !== null) {
      cancelAnimationFrame(this._rafId);
      this._rafId = null;
    }
  }

  /** Update a single option at runtime. */
  setOption(key, value) {
    this._opt[key] = value;
    if (key === 'count') this._syncCount();
  }

  /** Tear down all listeners and stop the loop. */
  destroy() {
    this.stop();
    this._detach();
  }

  // -------------------------------------------------------------------------
  // Event handling
  // -------------------------------------------------------------------------

  _attach() {
    this._canvas.addEventListener('mousemove',  this._onMouseMove);
    this._canvas.addEventListener('mouseleave', this._onMouseLeave);
    window.addEventListener('resize', this._onResize);
  }

  _detach() {
    this._canvas.removeEventListener('mousemove',  this._onMouseMove);
    this._canvas.removeEventListener('mouseleave', this._onMouseLeave);
    window.removeEventListener('resize', this._onResize);
  }

  _handleMouseMove(e) {
    const r = this._canvas.getBoundingClientRect();
    this._mouse.x = (e.clientX - r.left) * (this._W / r.width);
    this._mouse.y = (e.clientY - r.top)  * (this._H / r.height);
  }

  _handleMouseLeave() {
    this._mouse.x = -9999;
    this._mouse.y = -9999;
  }

  _handleResize() {
    this._resize();
    this._syncCount();
  }

  // -------------------------------------------------------------------------
  // Setup
  // -------------------------------------------------------------------------

  _resize() {
    const rect = this._canvas.parentElement.getBoundingClientRect();
    this._W = this._canvas.width  = Math.floor(rect.width);
    this._H = this._canvas.height = Math.round(this._W * this._opt.canvasAspect);
    this._canvas.style.height = this._H + 'px';

    if (this._fieldCanvas) {
      this._fieldCanvas.width  = this._W;
      this._fieldCanvas.height = this._H;
      this._fieldCanvas.style.height = this._H + 'px';
    }
  }

  _makeParticle() {
    const { particleSpeed, particleMinR, particleMaxR } = this._opt;
    return {
      x:  Math.random() * this._W,
      y:  Math.random() * this._H,
      vx: (Math.random() - 0.5) * particleSpeed,
      vy: (Math.random() - 0.5) * particleSpeed,
      r:  particleMinR + Math.random() * (particleMaxR - particleMinR),
    };
  }

  _syncCount() {
    const target = this._opt.count;
    while (this._particles.length < target) this._particles.push(this._makeParticle());
    while (this._particles.length > target) this._particles.pop();
  }

  // -------------------------------------------------------------------------
  // Field sampling
  // -------------------------------------------------------------------------

  /**
   * Sample the cached noise field at canvas coordinates (x, y).
   * Returns a value in [0, 1].
   */
  sampleField(x, y) {
    const { fieldOffscreenW: oW, fieldOffscreenH: oH } = this._opt;
    const cx = Math.max(0, Math.min(oW - 1, Math.round(x / this._W * (oW - 1))));
    const cy = Math.max(0, Math.min(oH - 1, Math.round(y / this._H * (oH - 1))));
    return this._fieldCache[cy * oW + cx];
  }

  /**
   * Map a raw field value [0,1] to an opacity multiplier.
   * At fv=1 (maximum): multiplier = 1.0 (no change).
   * At fv=0 (minimum): multiplier = 1 - dimAtMin.
   */
  _fieldToOpacity(fv) {
    const minMult = 1 - this._opt.dimAtMin;
    return minMult + (1 - minMult) * fv;
  }

  _updateField() {
    const {
      fieldOffscreenW: oW, fieldOffscreenH: oH,
      fieldScale, fieldOctaves,
      timeConstantX, timeConstantY,
    } = this._opt;

    const scale = fieldScale * 0.0018;
    const ox    = this._elapsed * timeConstantX;
    const oy    = this._elapsed * timeConstantY;

    const imgData = this._oCtx.createImageData(oW, oH);
    const d = imgData.data;

    for (let py = 0; py < oH; py++) {
      for (let px = 0; px < oW; px++) {
        const raw = _fbm(this._P, px * scale + ox, py * scale + oy, fieldOctaves);
        const v   = Math.max(0, Math.min(1, raw * 1.8 + 0.5));
        this._fieldCache[py * oW + px] = v;

        const idx = (py * oW + px) * 4;
        d[idx]     = Math.round(v * 30  + (1 - v) * 5);
        d[idx + 1] = Math.round(v * 110 + (1 - v) * 18);
        d[idx + 2] = Math.round(v * 210 + (1 - v) * 55);
        d[idx + 3] = 255;
      }
    }

    this._oCtx.putImageData(imgData, 0, 0);

    if (this._fCtx) {
      this._fCtx.fillStyle = this._opt.bgColor;
      this._fCtx.fillRect(0, 0, this._W, this._H);
      this._fCtx.drawImage(this._off, 0, 0, this._W, this._H);
    }
  }

  // -------------------------------------------------------------------------
  // Draw
  // -------------------------------------------------------------------------

  _drawMain() {
    const { bgColor, reach, lineColor, lineColorMouse,
            glowColorInner, glowColorMid } = this._opt;
    const { _mCtx: ctx, _W: W, _H: H, _mouse: mouse } = this;
    const reach2 = reach * reach;

    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, W, H);

    // Move particles
    for (const p of this._particles) {
      p.x += p.vx; p.y += p.vy;
      if (p.x < 0 || p.x > W) p.vx *= -1;
      if (p.y < 0 || p.y > H) p.vy *= -1;
    }

    // Build working set including mouse phantom node
    const all = [...this._particles, { x: mouse.x, y: mouse.y, r: 0, isMouse: true }];
    const n   = all.length;

    // Sample field values and opacity multipliers for each node
    const fv = all.map(p => this.sampleField(p.x, p.y));
    const fo = fv.map(v => this._fieldToOpacity(v));

    // Draw connecting lines
    for (let i = 0; i < n; i++) {
      for (let j = i + 1; j < n; j++) {
        const a = all[i], b = all[j];
        const dx = a.x - b.x, dy = a.y - b.y;
        const d2 = dx * dx + dy * dy;
        if (d2 >= reach2) continue;

        const dist     = Math.sqrt(d2);
        const t01      = dist / reach;
        const expFade  = (1 - t01) * (1 - t01) * (1 - t01);  // cubic falloff
        const lineMult = Math.sqrt(fo[i] * fo[j]);            // geometric mean of field mults
        const alpha    = expFade * lineMult * 0.85;
        if (alpha < 0.005) continue;

        const isMc = a.isMouse || b.isMouse;
        ctx.beginPath();
        ctx.moveTo(a.x, a.y);
        ctx.lineTo(b.x, b.y);
        ctx.strokeStyle = isMc
          ? `rgba(${lineColorMouse},${alpha * 0.9})`
          : `rgba(${lineColor},${alpha * 0.7})`;
        ctx.lineWidth = isMc ? 0.9 : 0.5;
        ctx.stroke();
      }
    }

    // Draw particles (glow + dot)
    for (let i = 0; i < this._particles.length; i++) {
      const p      = this._particles[i];
      const f      = fv[i];
      const opMult = fo[i];

      const dx = p.x - mouse.x, dy = p.y - mouse.y;
      const md = Math.sqrt(dx * dx + dy * dy);
      const mb = md < reach ? 0.4 * (1 - md / reach) : 0;

      const gA    = Math.max(0.02, opMult * 0.85 + mb);
      const glowR = p.r * (2.5 + f * 1.5);

      // Radial glow
      const grd = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, glowR * 3);
      grd.addColorStop(0,    `rgba(${glowColorInner},${gA * 0.55})`);
      grd.addColorStop(0.35, `rgba(${glowColorMid},${gA * 0.22})`);
      grd.addColorStop(1,    'rgba(0,0,0,0)');
      ctx.beginPath();
      ctx.arc(p.x, p.y, glowR * 3, 0, Math.PI * 2);
      ctx.fillStyle = grd;
      ctx.fill();

      // Hard dot
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.r * (0.8 + f * 0.5), 0, Math.PI * 2);
      const br = Math.round(180 + f * 75);
      ctx.fillStyle = `rgba(${br},${br + 20},255,${gA})`;
      ctx.fill();
    }
  }

  // -------------------------------------------------------------------------
  // Loop
  // -------------------------------------------------------------------------

  _loop(ts) {
    if (this._lastTs === null) this._lastTs = ts;
    const dt = ts - this._lastTs;
    this._lastTs = ts;

    // flowSpeed is on a 1–10 scale; divide by 3 to centre the "default" feel
    const speedMult = this._opt.flowSpeed / 3;
    this._elapsed  += dt * speedMult;

    this._fieldAge += dt;
    if (this._fieldAge >= this._opt.fieldUpdateMs) {
      this._updateField();
      this._fieldAge = 0;
    }

    this._drawMain();
    this._rafId = requestAnimationFrame(ts => this._loop(ts));
  }
}