/**
 * GasSim v2 — Ideal Gas simulation (PV=nRT, Maxwell-Boltzmann distribution)
 * v2: hover inspector, velocity vectors, movable piston, v_mp/v_rms markers.
 */
class GasSim {
  constructor(canvas) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.W = 0;
    this.H = 0;
    this.particles = [];
    this.N = 80;
    this.T = 1.0;
    this._wallImpulse = 0;
    this._pressureSmooth = 0;
    this._raf = null;
    this._updateTick = 0;
    this.onUpdate = null;
    this._loop = this._loop.bind(this);

    // v2
    this._showVectors = false;
    this._pistonFrac  = 1.0;   // fraction of W — right wall position
    this._hover       = null;  // hovered particle
    this._pistonDrag  = false;

    canvas.addEventListener('mousemove',  e => this._onMouseMove(e));
    canvas.addEventListener('mouseleave', () => { this._hover = null; this._pistonDrag = false; });
    canvas.addEventListener('mousedown',  e => this._onMouseDown(e));
    canvas.addEventListener('mouseup',    () => { this._pistonDrag = false; });
  }

  // ── canvas coordinate helper ────────────────────────────────────────────────
  _cp(e) {
    const r = this.canvas.getBoundingClientRect();
    return {
      x: (e.clientX - r.left) * (this.W / r.width),
      y: (e.clientY - r.top)  * (this.H / r.height),
    };
  }

  _onMouseDown(e) {
    const { x } = this._cp(e);
    const px = this.W * this._pistonFrac;
    if (Math.abs(x - px) < 16) this._pistonDrag = true;
  }

  _onMouseMove(e) {
    const { x, y } = this._cp(e);

    if (this._pistonDrag) {
      this.setPiston(x / this.W);
      return;
    }

    // nearest particle within 28px
    let best = null, bestD = 28;
    for (const p of this.particles) {
      const d = Math.hypot(p.x - x, p.y - y);
      if (d < bestD) { bestD = d; best = p; }
    }
    this._hover = best;
  }

  // ── public API ──────────────────────────────────────────────────────────────
  fit() {
    this.W = this.canvas.offsetWidth;
    this.H = this.canvas.offsetHeight;
    this.canvas.width  = this.W * devicePixelRatio;
    this.canvas.height = this.H * devicePixelRatio;
    this.ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
    this.reset();
  }

  reset() {
    this.particles = [];
    const px = this.W * this._pistonFrac;
    for (let i = 0; i < this.N; i++) {
      const a = Math.random() * Math.PI * 2;
      const s = this._maxwellSpeed();
      this.particles.push({
        x:  20 + Math.random() * (px - 40),
        y:  20 + Math.random() * (this.H - 40),
        vx: s * Math.cos(a),
        vy: s * Math.sin(a),
        r:  5,
      });
    }
    this._wallImpulse    = 0;
    this._pressureSmooth = 0;
    this._updateTick     = 0;
    this._hover          = null;
  }

  setN(n)  { this.N = n; this.reset(); }

  setT(t) {
    const oldT = this.T;
    if (oldT <= 0) { this.T = t; this.reset(); return; }
    const f = Math.sqrt(t / oldT);
    for (const p of this.particles) { p.vx *= f; p.vy *= f; }
    this.T = t;
  }

  setPiston(frac) {
    this._pistonFrac = Math.max(0.3, Math.min(1.0, frac));
    const px = this.W * this._pistonFrac;
    for (const p of this.particles) {
      if (p.x + p.r > px) { p.x = px - p.r; if (p.vx > 0) p.vx = -p.vx; }
    }
  }

  toggleVectors() { this._showVectors = !this._showVectors; }

  start() { if (!this._raf) this._raf = requestAnimationFrame(this._loop); }
  stop()  { cancelAnimationFrame(this._raf); this._raf = null; }

  // ── simulation ──────────────────────────────────────────────────────────────
  _loop() {
    this._step();
    this._step();
    this.draw();
    this._raf = requestAnimationFrame(this._loop);
  }

  _maxwellSpeed() {
    const u1 = Math.max(1e-10, Math.random());
    const sigma = this.T * 60;
    return Math.abs(Math.sqrt(-2 * Math.log(u1)) * Math.cos(Math.PI * 2 * Math.random()) * sigma + sigma);
  }

  _step() {
    const { W, H, particles } = this;
    const px = W * this._pistonFrac;

    for (const p of particles) { p.x += p.vx; p.y += p.vy; }

    for (const p of particles) {
      if (p.x < p.r) {
        p.x = p.r; p.vx = Math.abs(p.vx);
        this._wallImpulse += 2 * Math.abs(p.vx);
      } else if (p.x > px - p.r) {
        p.x = px - p.r; p.vx = -Math.abs(p.vx);
        this._wallImpulse += 2 * Math.abs(p.vx);
      }
      if (p.y < p.r) {
        p.y = p.r; p.vy = Math.abs(p.vy);
        this._wallImpulse += 2 * Math.abs(p.vy);
      } else if (p.y > H - p.r) {
        p.y = H - p.r; p.vy = -Math.abs(p.vy);
        this._wallImpulse += 2 * Math.abs(p.vy);
      }
    }

    // Spatial grid collision
    const cell = 14, cols = Math.ceil(W / cell), rows = Math.ceil(H / cell);
    const grid = new Map();
    const key  = (cx, cy) => cy * cols + cx;

    for (let i = 0; i < particles.length; i++) {
      const p = particles[i];
      const k = key(Math.floor(p.x / cell), Math.floor(p.y / cell));
      if (!grid.has(k)) grid.set(k, []);
      grid.get(k).push(i);
    }

    const checked = new Set();
    for (let i = 0; i < particles.length; i++) {
      const p  = particles[i];
      const cx = Math.floor(p.x / cell);
      const cy = Math.floor(p.y / cell);
      for (let dy = -1; dy <= 1; dy++) for (let dx = -1; dx <= 1; dx++) {
        const nx = cx + dx, ny = cy + dy;
        if (nx < 0 || ny < 0 || nx >= cols || ny >= rows) continue;
        const cell2 = grid.get(key(nx, ny));
        if (!cell2) continue;
        for (const j of cell2) {
          if (j <= i) continue;
          const pk = i * 100000 + j;
          if (checked.has(pk)) continue;
          checked.add(pk);
          const q = particles[j];
          const ddx = q.x - p.x, ddy = q.y - p.y;
          const d2 = ddx * ddx + ddy * ddy;
          const md = p.r + q.r;
          if (d2 < md * md && d2 > 0) {
            const d = Math.sqrt(d2), nx2 = ddx / d, ny2 = ddy / d;
            const dvn = (q.vx - p.vx) * nx2 + (q.vy - p.vy) * ny2;
            if (dvn >= 0) continue;
            p.vx += dvn * nx2; p.vy += dvn * ny2;
            q.vx -= dvn * nx2; q.vy -= dvn * ny2;
            const ov = (md - d) / 2;
            p.x -= ov * nx2; p.y -= ov * ny2;
            q.x += ov * nx2; q.y += ov * ny2;
          }
        }
      }
    }

    this._pressureSmooth = this._pressureSmooth * 0.92 + this._wallImpulse * 0.08;
    this._wallImpulse = 0;

    if (++this._updateTick % 30 === 0 && this.onUpdate) this.onUpdate(this.info());
  }

  info() {
    const speeds   = this.particles.map(p => Math.hypot(p.vx, p.vy));
    const avgSpeed = speeds.length ? speeds.reduce((a, b) => a + b) / speeds.length : 0;
    const pf = this._pistonFrac;
    const P  = this._pressureSmooth / (2 * (this.W * pf + this.H)) * 100;
    const V  = (this.W * pf * this.H) / 10000;
    return {
      N: this.N, T: this.T,
      P: P.toFixed(1), V: V.toFixed(1), PV: (P * V).toFixed(1),
      avgSpeed: avgSpeed.toFixed(0),
      speedData: this._speedHistogram(speeds),
    };
  }

  _speedHistogram(speeds) {
    const maxSpeed = this.T * 200;
    const numBins  = 12;
    const binWidth = maxSpeed / numBins;
    const bins     = new Array(numBins).fill(0);
    for (const s of speeds) {
      const idx = Math.floor(s / binWidth);
      if (idx >= 0 && idx < numBins) bins[idx]++;
    }
    return { bins, max: Math.max(...bins, 1), binWidth };
  }

  _mbCurve(v) {
    const sigma = this.T * 60;
    return (v / (sigma * sigma)) * Math.exp(-v * v / (2 * sigma * sigma));
  }

  // ── drawing ─────────────────────────────────────────────────────────────────
  draw() {
    const { ctx, W, H } = this;
    const pistonX = W * this._pistonFrac;

    // Background
    const bg = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, Math.max(W, H) * 0.7);
    bg.addColorStop(0, '#080818'); bg.addColorStop(1, '#030308');
    ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H);

    // Grid
    ctx.strokeStyle = 'rgba(255,255,255,0.03)'; ctx.lineWidth = 1;
    ctx.beginPath();
    for (let x = 0; x <= W; x += 20) { ctx.moveTo(x, 0); ctx.lineTo(x, H); }
    for (let y = 0; y <= H; y += 20) { ctx.moveTo(0, y); ctx.lineTo(W, y); }
    ctx.stroke();

    // Dead zone beyond piston
    if (this._pistonFrac < 0.99) {
      ctx.fillStyle = 'rgba(0,0,0,0.55)';
      ctx.fillRect(pistonX, 0, W - pistonX, H);
    }

    // Pressure wall glow
    const P = parseFloat(this.info().P);
    const wi = Math.min(1, P / 50);
    if (wi > 0) {
      const a = wi * 0.3, gd = 30;
      const glows = [
        [ctx.createLinearGradient(0, 0, gd, 0),                        0,           0, gd,    H],
        [ctx.createLinearGradient(pistonX, 0, pistonX - gd, 0),        pistonX - gd, 0, gd,    H],
        [ctx.createLinearGradient(0, 0, 0, gd),                        0,           0, W,     gd],
        [ctx.createLinearGradient(0, H, 0, H - gd),                    0,     H - gd, W,     gd],
      ];
      for (const [g, rx, ry, rw, rh] of glows) {
        g.addColorStop(0, `rgba(155,93,229,${a})`);
        g.addColorStop(1, 'rgba(155,93,229,0)');
        ctx.fillStyle = g; ctx.fillRect(rx, ry, rw, rh);
      }
    }

    // Velocity vectors
    if (this._showVectors) {
      ctx.save();
      for (const p of this.particles) {
        const scale = 3;
        const ex = p.x + p.vx * scale, ey = p.y + p.vy * scale;
        const ang = Math.atan2(p.vy, p.vx);
        ctx.strokeStyle = 'rgba(255,255,255,0.3)'; ctx.lineWidth = 1;
        ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(ex, ey); ctx.stroke();
        const hl = 4;
        ctx.fillStyle = 'rgba(255,255,255,0.3)';
        ctx.beginPath();
        ctx.moveTo(ex, ey);
        ctx.lineTo(ex - hl * Math.cos(ang - 0.4), ey - hl * Math.sin(ang - 0.4));
        ctx.lineTo(ex - hl * Math.cos(ang + 0.4), ey - hl * Math.sin(ang + 0.4));
        ctx.closePath(); ctx.fill();
      }
      ctx.restore();
    }

    // Particles
    for (const p of this.particles) {
      const spd   = Math.hypot(p.vx, p.vy);
      const T     = this.T;
      const color = spd < T * 40 ? '#4CC9F0' : spd < T * 80 ? '#7BF5A4' : spd < T * 120 ? '#FFD166' : '#EF476F';
      const isH   = this._hover === p;
      ctx.save();
      ctx.shadowBlur  = isH ? 20 : 8;
      ctx.shadowColor = color;
      ctx.beginPath(); ctx.arc(p.x, p.y, isH ? p.r + 2 : p.r, 0, Math.PI * 2);
      ctx.fillStyle = color; ctx.fill();
      if (isH) { ctx.strokeStyle = 'rgba(255,255,255,0.6)'; ctx.lineWidth = 1.5; ctx.stroke(); }
      ctx.restore();
    }

    // Piston
    this._drawPiston(ctx, pistonX, H);

    // Hover inspector
    if (this._hover) this._drawInspector(ctx, this._hover, W, H);

    // Histogram
    this._drawHistogram(ctx, W, H);
  }

  _drawPiston(ctx, pistonX, H) {
    if (this._pistonFrac >= 0.99) return;
    ctx.save();
    const pw = 8;
    ctx.shadowBlur  = 16; ctx.shadowColor = 'rgba(255,209,102,0.5)';
    const g = ctx.createLinearGradient(pistonX - pw, 0, pistonX + pw, 0);
    g.addColorStop(0, 'rgba(255,209,102,0.4)');
    g.addColorStop(0.5, 'rgba(255,209,102,0.9)');
    g.addColorStop(1, 'rgba(255,209,102,0.3)');
    ctx.fillStyle = g; ctx.fillRect(pistonX - pw / 2, 0, pw, H);

    // Handle
    const hh = 44, hw = 18, hx = pistonX - hw / 2, hy = H / 2 - hh / 2;
    ctx.shadowBlur = 0;
    ctx.fillStyle = 'rgba(255,209,102,0.88)';
    ctx.beginPath(); ctx.roundRect(hx, hy, hw, hh, 4); ctx.fill();
    ctx.strokeStyle = 'rgba(0,0,0,0.25)'; ctx.lineWidth = 1.5;
    for (let i = 0; i < 3; i++) {
      const gy = hy + 10 + i * 10;
      ctx.beginPath(); ctx.moveTo(hx + 4, gy); ctx.lineTo(hx + hw - 4, gy); ctx.stroke();
    }

    ctx.fillStyle = 'rgba(255,209,102,0.7)';
    ctx.font = "bold 9px 'Manrope', sans-serif";
    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
    ctx.fillText('⇌', pistonX, hy - 12);
    ctx.restore();
  }

  _drawInspector(ctx, p, W, H) {
    const spd = Math.hypot(p.vx, p.vy);
    const ang = Math.atan2(p.vy, p.vx) * 180 / Math.PI;
    const ke  = 0.5 * spd * spd;
    const T   = this.T;
    const clr = spd < T * 40 ? '#4CC9F0' : spd < T * 80 ? '#7BF5A4' : spd < T * 120 ? '#FFD166' : '#EF476F';

    const rows = [
      ['|v|',  spd.toFixed(1) + ' у.е.'],
      ['vx',   p.vx.toFixed(1)],
      ['vy',   p.vy.toFixed(1)],
      ['KE',   ke.toFixed(0) + ' у.е.'],
      ['угол', ang.toFixed(1) + '°'],
    ];

    const tw = 132, th = 18 + rows.length * 17 + 8;
    let tx = p.x + 14, ty = p.y - th / 2;
    if (tx + tw > W - 10) tx = p.x - tw - 14;
    ty = Math.max(8, Math.min(H - th - 8, ty));

    ctx.save();
    ctx.fillStyle = 'rgba(6,8,28,0.92)';
    ctx.beginPath(); ctx.roundRect(tx, ty, tw, th, 8); ctx.fill();

    ctx.fillStyle = clr;
    ctx.beginPath(); ctx.roundRect(tx, ty, tw, 3, [8, 8, 0, 0]); ctx.fill();

    ctx.strokeStyle = 'rgba(255,255,255,0.08)'; ctx.lineWidth = 1;
    ctx.beginPath(); ctx.roundRect(tx, ty, tw, th, 8); ctx.stroke();

    ctx.beginPath(); ctx.arc(p.x, p.y, p.r + 5, 0, Math.PI * 2);
    ctx.strokeStyle = 'rgba(255,255,255,0.35)'; ctx.lineWidth = 1; ctx.stroke();

    ctx.font = "11px 'Manrope', monospace"; ctx.textBaseline = 'middle';
    for (let i = 0; i < rows.length; i++) {
      const ry = ty + 18 + i * 17;
      ctx.fillStyle = 'rgba(255,255,255,0.42)'; ctx.textAlign = 'left';
      ctx.fillText(rows[i][0], tx + 10, ry);
      ctx.fillStyle = 'rgba(255,255,255,0.92)'; ctx.textAlign = 'right';
      ctx.fillText(rows[i][1], tx + tw - 10, ry);
    }
    ctx.restore();
  }

  _drawHistogram(ctx, W, H) {
    const speeds = this.particles.map(p => Math.hypot(p.vx, p.vy));
    const hist   = this._speedHistogram(speeds);

    const hw = 204, hh = 102;
    const hx = W - hw - 12, hy = H - hh - 12;
    const pad = { l: 8, r: 8, t: 20, b: 18 };
    const barW    = (hw - pad.l - pad.r) / hist.bins.length;
    const barAreaH = hh - pad.t - pad.b;
    const maxV    = this.T * 200;

    ctx.save();
    ctx.fillStyle = 'rgba(0,0,0,0.58)';
    ctx.beginPath(); ctx.roundRect(hx, hy, hw, hh, 6); ctx.fill();

    ctx.fillStyle = 'rgba(255,255,255,0.72)'; ctx.font = '9px sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText('Распределение скоростей', hx + hw / 2, hy + 11);

    ctx.fillStyle = 'rgba(255,255,255,0.35)'; ctx.font = '8px sans-serif';
    ctx.fillText('v (у.е.)', hx + hw / 2, hy + hh - 2);

    // Bars
    for (let i = 0; i < hist.bins.length; i++) {
      const ratio = hist.bins[i] / hist.max;
      const bh = ratio * barAreaH;
      const bx = hx + pad.l + i * barW;
      const by = hy + pad.t + barAreaH - bh;
      ctx.fillStyle = 'rgba(155,93,229,0.75)';
      ctx.beginPath(); ctx.roundRect(bx + 0.5, by, barW - 1, bh, 2); ctx.fill();
    }

    // MB theoretical curve
    ctx.strokeStyle = 'rgba(255,209,102,0.9)'; ctx.lineWidth = 1.5;
    ctx.setLineDash([3, 3]); ctx.beginPath();
    let first = true;
    for (let i = 0; i <= 80; i++) {
      const v  = (i / 80) * maxV;
      const sc = this._mbCurve(v) * speeds.length * hist.binWidth / hist.max;
      const cx2 = hx + pad.l + (v / maxV) * (hw - pad.l - pad.r);
      const cy2 = hy + pad.t + barAreaH - sc * barAreaH;
      if (first) { ctx.moveTo(cx2, cy2); first = false; }
      else ctx.lineTo(cx2, cy2);
    }
    ctx.stroke(); ctx.setLineDash([]);

    // Characteristic speed lines
    const sigma   = this.T * 60;
    const v_mp    = sigma;              // v most probable (mode)
    const v_rms   = sigma * Math.sqrt(2); // v_rms in 2D = sqrt(2) * sigma

    const vline = (v, color, label) => {
      if (v > maxV) return;
      const vx2 = hx + pad.l + (v / maxV) * (hw - pad.l - pad.r);
      ctx.strokeStyle = color; ctx.lineWidth = 1;
      ctx.setLineDash([2, 3]);
      ctx.beginPath(); ctx.moveTo(vx2, hy + pad.t); ctx.lineTo(vx2, hy + pad.t + barAreaH); ctx.stroke();
      ctx.setLineDash([]);
      ctx.fillStyle = color; ctx.font = '7px sans-serif'; ctx.textAlign = 'center';
      ctx.fillText(label, vx2, hy + pad.t - 3);
    };
    vline(v_mp,  'rgba(76,201,240,0.9)',  'v_mp');
    vline(v_rms, 'rgba(239,71,111,0.9)',  'v_rms');

    ctx.restore();
  }
}