// Thin DOM controller for the HUD. Single source of truth lives in main's state.
const $ = (id) => document.getElementById(id);

export const hud = {
  el: {},
  init() {
    ['hud', 'mode', 'modeLabel', 'planetName', 'biomeTag', 'unitsVal', 'resVal',
      'taskScan', 'taskMine', 'scanCur', 'scanMax', 'mineCur', 'mineMax', 'scanBar', 'mineBar',
      'hint', 'reticle', 'banner', 'bannerName', 'bannerTag', 'toasts', 'scanwave',
      'win', 'winPlanets', 'winSpecies', 'winUnits', 'title', 'fps', 'flash']
      .forEach((id) => (this.el[id] = $(id)));
  },
  show() { this.el.hud.classList.add('show'); },
  mode(label) { this.el.modeLabel.textContent = label; },
  planet(name, biome) {
    this.el.planetName.textContent = name;
    this.el.biomeTag.textContent = biome;
  },
  stats(units, res) {
    this.el.unitsVal.textContent = Math.round(units).toLocaleString();
    this.el.resVal.textContent = Math.round(res);
  },
  goal(scanCur, scanMax, mineCur, mineMax) {
    this.el.scanCur.textContent = scanCur; this.el.scanMax.textContent = scanMax;
    this.el.mineCur.textContent = mineCur; this.el.mineMax.textContent = mineMax;
    this.el.scanBar.style.width = Math.min(100, (scanCur / scanMax) * 100) + '%';
    this.el.mineBar.style.width = Math.min(100, (mineCur / mineMax) * 100) + '%';
    this.el.taskScan.classList.toggle('done', scanCur >= scanMax);
    this.el.taskMine.classList.toggle('done', mineCur >= mineMax);
  },
  hint(html) {
    if (!html) { this.el.hint.classList.remove('show'); return; }
    this.el.hint.innerHTML = html; this.el.hint.classList.add('show');
  },
  reticle(on) { this.el.reticle.classList.toggle('show', on); },
  banner(name, tag) {
    this.el.bannerName.textContent = name;
    this.el.bannerTag.textContent = tag;
    this.el.banner.classList.add('show');
    clearTimeout(this._bt);
    this._bt = setTimeout(() => this.el.banner.classList.remove('show'), 4200);
  },
  scanWave() {
    const w = this.el.scanwave;
    w.classList.remove('go'); void w.offsetWidth; w.classList.add('go');
  },
  toast(title, name, units) {
    const t = document.createElement('div');
    t.className = 'toast panel';
    t.innerHTML = `<div class="tt">${title}</div><div class="tn">${name}</div>` +
      (units ? `<div class="tu">+${units} units</div>` : '');
    this.el.toasts.appendChild(t);
    setTimeout(() => { t.style.transition = 'opacity .4s'; t.style.opacity = '0'; }, 3000);
    setTimeout(() => t.remove(), 3500);
  },
  flash(color, alpha = 0.6) {
    const f = this.el.flash;
    f.style.background = `radial-gradient(circle at 50% 55%, ${color} 0%, ${color} 100%)`;
    f.style.transition = 'none'; f.style.opacity = alpha;
    requestAnimationFrame(() => { f.style.transition = 'opacity 1.4s ease'; f.style.opacity = '0'; });
  },
  setFlash(color, alpha) {
    const f = this.el.flash;
    f.style.transition = 'none';
    f.style.background = `radial-gradient(circle at 50% 55%, ${color} 0%, ${color} 100%)`;
    f.style.opacity = alpha;
  },
  clearFlash() { const f = this.el.flash; f.style.transition = 'none'; f.style.opacity = '0'; },
  fps(v) { this.el.fps.textContent = v + ' FPS'; },
  hideTitle() { this.el.title.classList.add('hide'); },
  showWin(planets, species, units) {
    this.el.winPlanets.textContent = planets;
    this.el.winSpecies.textContent = species;
    this.el.winUnits.textContent = Math.round(units).toLocaleString();
    this.el.win.classList.add('show');
  },
  hideWin() { this.el.win.classList.remove('show'); },
};
