import { CONFIG } from '../config.js';
import { t } from '../lang/language.js';

export function createHud() {
  const score = document.querySelector('#scoreValue');
  const temp = document.querySelector('#tempValue');
  const fill = document.querySelector('#temperatureFill');
  const status = document.querySelector('#statusText');
  const menuHighscore = document.querySelector('#menuHighscore');
  const combo = document.querySelector('#comboValue');
  const gameScreen = document.querySelector('#gameScreen');
  let previousScore = 0;

  return {
    update(state) {
      const nextScore = Math.max(0, state.score);
      score.textContent = String(nextScore).padStart(6,'0');
      if (nextScore - previousScore >= 10) {
        score.classList.remove('score-bump');
        void score.offsetWidth;
        score.classList.add('score-bump');
      }
      previousScore = nextScore;
      temp.textContent = `${Math.round(state.temperature)}%`;
      fill.style.width = `${Math.max(0,Math.min(100,state.temperature))}%`;
      menuHighscore.textContent = String(state.highscore).padStart(6,'0');
      combo.textContent = state.combo >= 2 ? `${t('combo')} ×${state.combo}` : '';

      const safe = state.temperature >= CONFIG.safeMin && state.temperature <= CONFIG.safeMax;
      status.textContent = safe ? t('coreStable') : state.temperature < CONFIG.safeMin ? t('coreTooCold') : t('coreOverheating');
      status.style.color = safe ? '#b9ffc8' : '#ff8b73';
      const critical = state.temperature <= 15 || state.temperature >= 85;
      fill.classList.toggle('is-critical', critical);
      gameScreen.classList.toggle('is-danger', critical && state.running);
    }
  };
}
