// hud.js — DOM HUD: mode, counters, goal checklist, hints, banner, win, cockpit frame.
export class HUD {
  constructor(root) {
    root.innerHTML = `
      <div id="mode" class="panel"><div class="tag">SPACE</div><div class="sub">— flight —</div></div>
      <div id="res" class="panel">
        <div class="row"><span class="k">Units</span><span class="v am" data-units>0</span></div>
        <div class="row"><span class="k" data-orename>Crystallite</span><span class="v" data-res>0</span></div>
      </div>
      <div id="goal" class="panel">
        <h4>◊ Repair Hyperdrive</h4>
        <div class="task" data-task-scan><span class="box"></span><span>Scan species</span><span class="prog" data-scan>0/5</span></div>
        <div class="task" data-task-mine><span class="box"></span><span>Mine crystallite</span><span class="prog" data-mine>0/40</span></div>
      </div>
      <div id="hint"></div>
      <svg id="cross" width="46" height="46" viewBox="0 0 46 46"><g fill="none" stroke="#6ff0ff" stroke-width="1.5">
        <circle cx="23" cy="23" r="13" opacity="0.5"/><path d="M23 3v9M23 34v9M3 23h9M34 23h9"/><circle cx="23" cy="23" r="2" fill="#6ff0ff"/></g></svg>
      <div id="banner"><div class="welcome">WELCOME TO</div><div class="pname">—</div><div class="biome">—</div><div class="rule"></div></div>
      <svg id="cockpit" preserveAspectRatio="none" viewBox="0 0 100 100">
        <defs><linearGradient id="cg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stop-color="#0b1820" stop-opacity="0.0"/><stop offset="1" stop-color="#0b1820" stop-opacity="0.85"/></linearGradient></defs>
        <path d="M0 0 H100 V14 C70 24 30 24 0 14 Z" fill="#070f15" opacity="0.55"/>
        <path d="M0 100 H100 V70 C72 56 28 56 0 70 Z" fill="url(#cg)"/>
        <path d="M0 0 V100 H10 C6 64 6 36 10 0 Z" fill="#070f15" opacity="0.5"/>
        <path d="M100 0 V100 H90 C94 64 94 36 90 0 Z" fill="#070f15" opacity="0.5"/>
        <path d="M0 14 C30 24 70 24 100 14" fill="none" stroke="#6ff0ff" stroke-width="0.3" opacity="0.5"/>
        <path d="M0 70 C28 56 72 56 100 70" fill="none" stroke="#6ff0ff" stroke-width="0.3" opacity="0.5"/>
      </svg>
      <div id="win"><div class="big">SYSTEM CHARTED</div><div class="sub">— region surveyed —</div>
        <div class="stats">
          <span class="k">Planets visited</span><span class="v" data-w-planets>0</span>
          <span class="k">Species scanned</span><span class="v" data-w-species>0</span>
          <span class="k">Units earned</span><span class="v" data-w-units>0</span>
        </div></div>
      <div id="flash"></div>
    `;
    this.$ = (s) => root.querySelector(s);
    this.mode = this.$('#mode');
    this.hint = this.$('#hint');
    this.banner = this.$('#banner');
    this.win = this.$('#win');
    this.cross = this.$('#cross');
    this.cockpit = this.$('#cockpit');
    this.flash = this.$('#flash');
  }

  setMode(mode, sub) {
    this.mode.querySelector('.tag').textContent = mode;
    this.mode.querySelector('.sub').textContent = sub ? `— ${sub} —` : '';
    this.cockpit.classList.toggle('show', mode === 'SPACE');
    this.cross.classList.toggle('show', mode === 'SPACE');
  }
  setUnits(u) { this.$('[data-units]').textContent = u; }
  setResource(name, v) { this.$('[data-orename]').textContent = name; this.$('[data-res]').textContent = v; }
  setGoal(scans, scanTarget, mined, mineTarget) {
    this.$('[data-scan]').textContent = `${scans}/${scanTarget}`;
    this.$('[data-mine]').textContent = `${mined}/${mineTarget}`;
    this.$('[data-task-scan]').classList.toggle('done', scans >= scanTarget);
    this.$('[data-task-mine]').classList.toggle('done', mined >= mineTarget);
  }
  showHint(html) { this.hint.innerHTML = html; this.hint.classList.add('show'); }
  hideHint() { this.hint.classList.remove('show'); }

  showBanner(name, biome) {
    this.banner.querySelector('.pname').textContent = name;
    this.banner.querySelector('.biome').textContent = biome;
    this.banner.classList.remove('show');
    // force reflow then show for the slide animation
    void this.banner.offsetWidth;
    this.banner.classList.add('show');
    clearTimeout(this._bt);
    this._bt = setTimeout(() => this.banner.classList.remove('show'), 4200);
  }

  showWin(stats) {
    this.$('[data-w-planets]').textContent = stats.planets;
    this.$('[data-w-species]').textContent = stats.species;
    this.$('[data-w-units]').textContent = stats.units;
    this.win.classList.add('show');
  }

  doFlash(t) { this.flash.style.opacity = String(t); }
}
