import { APP_VERSION } from '../engine/version.js';

/**
 * Persistent banner asking the user to reload when a newer version is deployed.
 * Progress is saved to localStorage continuously, so reloading is safe.
 */
export function createUpdateBanner() {
  const element = document.createElement('div');
  element.className = 'update-banner';
  element.id = 'update-banner';
  element.setAttribute('role', 'status');
  element.setAttribute('aria-live', 'polite');
  element.hidden = true;

  function show(latestVersion) {
    element.innerHTML = `
      <div class="update-banner-text">
        <strong>New version available</strong>
        <span>v${APP_VERSION} → v${latestVersion}</span>
      </div>
      <button class="update-banner-reload" id="btn-update-reload">Reload</button>
      <button class="update-banner-dismiss" id="btn-update-dismiss" aria-label="Dismiss">✕</button>
    `;
    element.hidden = false;
    requestAnimationFrame(() => element.classList.add('visible'));

    element.querySelector('#btn-update-reload').addEventListener('click', () => {
      window.location.reload();
    });
    element.querySelector('#btn-update-dismiss').addEventListener('click', () => {
      element.classList.remove('visible');
      setTimeout(() => { element.hidden = true; }, 250);
    });
  }

  return { element, show };
}