// Game config with visual settings
const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  parent: "game-container",
  backgroundColor: "#000000",
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
  },
  scene: [MainScene],
  // Pixel art settings
  render: {
    pixelArt: true,
  },
};

new Phaser.Game(config);

// Enable pixel art rendering
const config: Phaser.Types.Core.GameConfig = {
  render: {
    pixelArt: true, // Disables smoothing
    antialias: false,
    roundPixels: false,
  },
  scene: [MainScene],
};

create() {
  // Main camera
  const camera = this.cameras.main;

  // Background color
  camera.setBackgroundColor('#2d2d2d');

  // Bounds (for level boundaries)
  camera.setBounds(0, 0, 2000, 2000);

  // Zoom
  camera.setZoom(1);

  // Follow player
  camera.startFollow(this.player, true, 0.08, 0.08);
}

export class MainScene extends Phaser.Scene {
  preload() {
    // Load all visual assets
    this.load.image("background", "assets/background.png");
    this.load.spritesheet("player", "assets/player.png", {
      frameWidth: 32,
      frameHeight: 32,
    });
    this.load.atlas("ui", "assets/ui.png", "assets/ui.json");
  }

  create() {
    // Setup visual layers
    this.setupBackground();
    this.setupPlayer();
    this.setupUI();
  }

  update(time: number, delta: number) {
    // Visual updates (60fps)
    this.updateParticles();
    this.updateAnimations();
  }

  private setupBackground() {
    // Tiling background
    this.bg = this.add.tileSprite(
      400,
      300,
      this.scale.width,
      this.scale.height,
      "background",
    );
    this.bg.setScrollFactor(0.5); // Parallax
  }

  private setupPlayer() {
    this.player = this.add.sprite(100, 300, "player");
    this.player.play("idle");
  }

  private setupUI() {
    // UI layer on top
    const uiContainer = this.add.container(0, 0);
    uiContainer.setScrollFactor(0); // Fixed position

    const healthBar = this.add.rectangle(20, 20, 200, 20, 0x00ff00);
    const healthText = this.add.text(120, 30, "100", {
      fontSize: "16px",
      color: "#ffffff",
    });
    healthText.setOrigin(0.5);

    uiContainer.add([healthBar, healthText]);
  }

  private updateParticles() {
    // Update particle emitters
  }

  private updateAnimations() {
    // Update sprite animations
  }
}