/**
 * @fileoverview Utility module for GridBackground.js
 * 
 * @module games.cripto.ui.GridBackground
 */

export default class GridBackground {
  constructor(scene, container = null) {
    this.scene = scene;
    this.container = container;
    this.graphics = scene.add.graphics();

    if (container) container.add(this.graphics);

    this.width = scene.scale.width;
    this.height = scene.scale.height;
    this.horizonY = this.height / 2;
    this.centerX = this.width / 2;

    this.gridColor = 0x33ff33;
    this.gapSize = 50;
    this.numVerticalLines = 20;
    this.spreadBase = this.width * 4;
    this.numHorizontalLines = 10;
    this.lineAlpha = 0.1;

    // Controle de animação
    this.offset = 0;
    this.speed = 1;
  }

  update() {
    this.offset += this.speed;

    // Resetar offset quando completar um ciclo
    if (this.offset >= 100) {
      this.offset = 0;
    }

    this.draw();
  }

  draw() {
    this.graphics.clear();

    const horizonY = this.horizonY;
    const centerX = this.centerX;
    const width = this.width;
    const height = this.height;
    const gapSize = this.gapSize;

    this.graphics.lineStyle(2, this.gridColor, this.lineAlpha);

    // 1. Linhas Verticais (estáticas)
    for (
      let i = -this.numVerticalLines / 2;
      i <= this.numVerticalLines / 2;
      i++
    ) {
      const xBase = centerX + (i / this.numVerticalLines) * this.spreadBase;
      const totalDistanceY = height / 2;
      const skipFactor = gapSize / totalDistanceY;
      const xStart = centerX + (xBase - centerX) * skipFactor;

      // Chão
      this.graphics.beginPath();
      this.graphics.moveTo(xStart, horizonY + gapSize);
      this.graphics.lineTo(xBase, height);
      this.graphics.strokePath();

      // Teto
      this.graphics.beginPath();
      this.graphics.moveTo(xStart, horizonY - gapSize);
      this.graphics.lineTo(xBase, 0);
      this.graphics.strokePath();
    }

    // 2. Linhas Horizontais (animadas)
    const numLines = this.numHorizontalLines + 1;
    for (let i = 0; i <= numLines; i++) {
      // Adicionar offset para criar movimento
      const adjustedI = i - this.offset / 100;
      if (adjustedI < 0) continue;

      const t = adjustedI / this.numHorizontalLines;
      if (t > 1) continue;

      const perspectiveFactor = Math.pow(t, 2);
      const drawingSpace = height / 2 - gapSize;
      const relativeY = perspectiveFactor * drawingSpace;

      // Chão
      const yPosFloor = horizonY + gapSize + relativeY;
      this.graphics.beginPath();
      this.graphics.moveTo(0, yPosFloor);
      this.graphics.lineTo(width, yPosFloor);
      this.graphics.strokePath();

      // Teto
      const yPosCeiling = horizonY - gapSize - relativeY;
      this.graphics.beginPath();
      this.graphics.moveTo(0, yPosCeiling);
      this.graphics.lineTo(width, yPosCeiling);
      this.graphics.strokePath();
    }

    // 3. Gap (Horizonte)
    this.graphics.lineStyle(2, this.gridColor, 0.3);

    this.graphics.beginPath();
    this.graphics.moveTo(0, horizonY - gapSize);
    this.graphics.lineTo(width, horizonY - gapSize);
    this.graphics.strokePath();

    this.graphics.beginPath();
    this.graphics.moveTo(0, horizonY + gapSize);
    this.graphics.lineTo(width, horizonY + gapSize);
    this.graphics.strokePath();
  }
}
