/**
 * GaugePill — minimal wrapper for gauge configuration display in EnclosView.
 * Renders a gauge level bar with tier badge and "vide en" info.
 */

import type { GaugeType } from '@domain/value-objects/GaugeType';
import { GAUGE_DEFS } from '@domain/value-objects/GaugeType';
import { tierNum, tierRate } from '@domain/value-objects/Tier';
import { timeToGain } from '@domain/services/GaugeCalculator';
import { fmt } from '@presentation/helpers/format';

export class GaugePill {
  private el: HTMLElement | null = null;

  render(container: HTMLElement, gaugeId: string, value: number, max: number): void {
    this.el = document.createElement('div');
    this.el.className = 'gauge-pill';
    container.appendChild(this.el);
    this.update(value, max);
  }

  update(value: number, max: number): void {
    if (!this.el) return;
    const pct = max > 0 ? Math.min(100, (value / max) * 100) : 0;
    const gid = this.el.dataset.gaugeId as GaugeType | undefined;
    const def = gid ? GAUGE_DEFS[gid] : null;
    const tn = tierNum(value);
    const tr = tierRate(value);
    const empty = timeToGain(value, value);
    const emptyStr = empty === Infinity ? '∞' : fmt(empty);

    this.el.innerHTML = `
      <div class="gauge-pill-header">
        ${def ? `<span>${def.icon} ${def.label}</span>` : ''}
        <span class="tier-badge">Tier ${tn} · ±${tr}/tick</span>
      </div>
      <div class="gauge-pill-bar">
        <div class="gauge-pill-fill" style="width:${pct.toFixed(1)}%"></div>
      </div>
      <div class="gauge-pill-info">Vide en ${emptyStr}</div>
    `;
  }

  destroy(): void {
    this.el?.remove();
    this.el = null;
  }
}