{{ $id := default "latteCanvas" (.Get "id") }}
{{ $width := default "500" (.Get "width") }}
{{ $height := default "500" (.Get "height") }}

<div class="latte-simulation">
  <canvas id="{{ $id }}" width="{{ $width }}" height="{{ $height }}"></canvas>
  <style>
    .latte-simulation {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 2rem 0;
    }

    .latte-simulation canvas {
      border: 1px solid #aaa;
    }
  </style>
  <script>
    const canvas = document.getElementById('latteCanvas');
    const ctx = canvas.getContext('2d');
    const gridSize = 100;
    const cellSize = canvas.width / gridSize;

    const grid = new Array(gridSize).fill().map(() => new Array(gridSize).fill(0));
    const velocityX = new Array(gridSize).fill().map(() => new Array(gridSize).fill(0));
    const velocityY = new Array(gridSize).fill().map(() => new Array(gridSize).fill(0));

    let lastMousePos = null;

    function drawGrid() {
      for (let y = 0; y < gridSize; y++) {
        for (let x = 0; x < gridSize; x++) {
          const milkRatio = grid[y][x];
          ctx.fillStyle = `rgb(${111 + milkRatio * 144}, ${78 + milkRatio * 177}, ${55 + milkRatio * 200})`;
          ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
        }
      }
    }

    function diffuse() {
      const newGrid = grid.map(row => row.slice());
      for (let y = 1; y < gridSize - 1; y++) {
        for (let x = 1; x < gridSize - 1; x++) {
          const neighbors = [
            grid[y - 1][x], grid[y + 1][x],
            grid[y][x - 1], grid[y][x + 1]
          ];
          const avgNeighborMilk = neighbors.reduce((a, b) => a + b, 0) / neighbors.length;
          const viscosity = 0.05 + grid[y][x] * 0.1;
          newGrid[y][x] += (avgNeighborMilk - grid[y][x]) * viscosity;
        }
      }
      grid.splice(0, grid.length, ...newGrid);
    }

    function advect() {
      const newGrid = grid.map(row => row.slice());
      for (let y = 1; y < gridSize - 1; y++) {
        for (let x = 1; x < gridSize - 1; x++) {
          const vx = velocityX[y][x];
          const vy = velocityY[y][x];

          let prevX = x - vx;
          let prevY = y - vy;

          prevX = Math.min(Math.max(prevX, 0), gridSize - 1);
          prevY = Math.min(Math.max(prevY, 0), gridSize - 1);

          newGrid[y][x] = grid[Math.floor(prevY)][Math.floor(prevX)];

          velocityX[y][x] *= 0.95;
          velocityY[y][x] *= 0.95;
        }
      }
      grid.splice(0, grid.length, ...newGrid);
    }

    function applyBrush(x, y) {
      const brushSize = 2;
      for (let dyBrush = -brushSize; dyBrush <= brushSize; dy++) {
        for (let dxBrush = -brushSize; dxBrush <= brushSize; dxBrush++) {
          const ix = x + dxBrush;
          const iy = y + dy;
          if (ix >= 1 && ix < gridSize - 1 && iy >= 1 && iy < gridSize - 1) {
            grid[iy][ix] = 1;
          }
        }
      }
    }

    canvas.addEventListener('mousemove', e => {
      if (e.buttons === 1) {
        const rect = canvas.getBoundingClientRect();
        const mouseX = e.clientX - rect.left;
        const mouseY = e.clientY - rect.top;

        if (lastMousePos) {
          const dx = mouseX - lastMousePos.x;
          const dy = mouseY - lastMousePos.y;
          const distance = Math.sqrt(dx * dx + dy * dy);

          for (let i = 0; i <= distance; i += 0.5) {
            const interpX = lastMousePos.x + (dx * i) / distance;
            const interpY = lastMousePos.y + (dy * i) / distance;

            const ix = Math.floor(interpX / cellSize);
            const iy = Math.floor(interpY / cellSize);

            applyBrush(ix, iy);
          }
        }

        lastMousePos = { x: mouseX, y: mouseY };
      } else {
        lastMousePos = null;
      }
    });

    function applyBrush(x, y) {
      const brushSize = 2;
      for (let dy = -brushSize; dy <= brushSize; dy++) {
        for (let dx = -brushSize; dx <= brushSize; dx++) {
          const ix = x + dx;
          const iy = y + dy;
          if (ix >= 1 && ix < gridSize - 1 && iy >= 1 && iy < gridSize - 1) {
            grid[iy][ix] = 1;
          }
        }
      }
    }

    function animate() {
      advect();
      diffuse();
      drawGrid();
      requestAnimationFrame(animate);
    }

    drawGrid();
    animate();
  </script>
</div>