export class UI {
  private menuElement: HTMLElement | null = null;
  private hudElement: HTMLElement | null = null;
  private crosshairElement: HTMLElement | null = null;
  private statusElement: HTMLElement | null = null;
  private playButton: HTMLElement | null = null;
  private leaderboardButton: HTMLElement | null = null;
  private playerNameInput: HTMLElement | null = null;

  constructor() {
    this.menuElement = document.getElementById('menu');
    this.hudElement = document.getElementById('hud');
    this.crosshairElement = document.getElementById('crosshair');
    this.statusElement = document.getElementById('menuStatus');
    this.playButton = document.getElementById('playButton');
    this.leaderboardButton = document.getElementById('leaderboardButton');
    this.playerNameInput = document.getElementById('playerNameInput');
  }

  showMenu(show: boolean) {
    if (this.menuElement) {
      this.menuElement.style.display = show ? 'block' : 'none';
    }
    if (this.playButton) {
      this.playButton.style.display = show ? 'block' : 'none';
    }
    if (this.leaderboardButton) {
      this.leaderboardButton.style.display = show ? 'block' : 'none';
    }
    if (this.playerNameInput) {
      this.playerNameInput.style.display = show ? 'block' : 'none';
    }
  }

  showHUD(show: boolean) {
    if (this.hudElement) {
      this.hudElement.style.display = show ? 'block' : 'none';
    }
    if (this.crosshairElement) {
      this.crosshairElement.style.display = show ? 'block' : 'none';
    }
  }

  updateStatus(message: string) {
    if (this.statusElement) {
      this.statusElement.textContent = message;
    }
  }

  updateHealth(health: number) {
    const healthValue = document.getElementById('healthValue');
    if (healthValue) {
      healthValue.textContent = Math.max(0, health).toString();
    }
  }

  updateWeapon(weaponName: string) {
    const weaponElement = document.getElementById('weaponName');
    if (weaponElement) {
      weaponElement.textContent = weaponName;
    }
  }

  updateAmmo(ammo: number) {
    const ammoElement = document.getElementById('ammoValue');
    if (ammoElement) {
      ammoElement.textContent = ammo === -1 ? '∞' : ammo.toString();
    }
  }

  updateOpponentName(name: string) {
    const opponentElement = document.getElementById('opponentName');
    if (opponentElement) {
      opponentElement.textContent = name;
    }
  }

  showHitMarker() {
    // Simple hit marker animation
    const crosshair = this.crosshairElement;
    if (crosshair) {
      crosshair.style.borderColor = '#ff0000';
      setTimeout(() => {
        crosshair.style.borderColor = '#00ff00';
      }, 100);
    }
  }

  showNotification(message: string) {
    const notification = document.createElement('div');
    notification.style.cssText = `
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(0, 255, 0, 0.8);
      color: #000;
      padding: 15px;
      border-radius: 5px;
      font-weight: bold;
      z-index: 1000;
      animation: slideIn 0.3s ease-out;
    `;
    notification.textContent = message;
    document.body.appendChild(notification);

    setTimeout(() => {
      notification.remove();
    }, 3000);
  }
}