const HEART_PATH =
  'M15 27 C 8 21.5, 2 16, 2 9.5 C 2 4.5, 6 2, 9.2 2 C 12 2, 14 3.6, 15 6 ' +
  'C 16 3.6, 18 2, 20.8 2 C 24 2, 28 4.5, 28 9.5 C 28 16, 22 21.5, 15 27 Z';

function heartSvg(fill: string, stroke: string): string {
  return (
    `<svg viewBox="0 0 30 29" width="30" height="28">` +
    `<path d="${HEART_PATH}" fill="${fill}" stroke="${stroke}" stroke-width="2"/></svg>`
  );
}

const GEM_SVG =
  '<svg viewBox="0 0 24 26" width="22" height="24">' +
  '<path d="M12 1 L21 8 L12 25 L3 8 Z" fill="#3ed27a" stroke="#1d7a45" stroke-width="1.6"/>' +
  '<path d="M12 1 L16.5 8 L12 25 L7.5 8 Z" fill="#7beba6" opacity="0.7"/></svg>';

/** DOM hearts + gem counter. */
export class Hud {
  private fills: HTMLElement[] = [];
  private gemCount: HTMLElement;
  private gemBox: HTMLElement;

  constructor() {
    const hud = document.getElementById('hud')!;
    const hearts = document.createElement('div');
    hearts.id = 'hearts';
    for (let i = 0; i < 3; i++) {
      const h = document.createElement('div');
      h.className = 'heart';
      h.innerHTML = heartSvg('#3a2a30', 'rgba(255,255,255,0.75)');
      const fill = document.createElement('div');
      fill.className = 'fill';
      fill.innerHTML = heartSvg('#ff4456', 'rgba(255,255,255,0.9)');
      h.appendChild(fill);
      hearts.appendChild(h);
      this.fills.push(fill);
    }
    this.gemBox = document.createElement('div');
    this.gemBox.id = 'gems';
    this.gemCount = document.createElement('span');
    this.gemCount.textContent = '0';
    this.gemBox.innerHTML = GEM_SVG;
    this.gemBox.appendChild(this.gemCount);
    hud.append(hearts, this.gemBox);
  }

  setHearts(h: number): void {
    for (let i = 0; i < 3; i++) {
      const v = Math.max(0, Math.min(1, h - i));
      const w = v >= 1 ? '100%' : v >= 0.5 ? '50%' : '0%';
      this.fills[i]!.style.width = w;
    }
  }

  setGems(n: number): void {
    this.gemCount.textContent = String(n);
    this.gemBox.classList.remove('bump');
    void this.gemBox.offsetWidth; // restart the bump animation
    this.gemBox.classList.add('bump');
  }
}
