const API_BASE = typeof window !== 'undefined' && window.API_BASE ? window.API_BASE : 'http://127.0.0.1:3001';
/** API 取得失敗時は別バージョンを表示しない（誤解を防ぐため） */
const FALLBACK_VERSION = '?';

class SiteFooter extends HTMLElement {
  connectedCallback() {
    if (this._initialized) return;
    this._initialized = true;
    this.className = 'site-footer';
    this.innerHTML = `
      <div class="footer-inner">
        <span class="footer-version" aria-label="アプリバージョン">v${FALLBACK_VERSION}</span>
        <span>&copy; 2026 DtmOjaji</span>
      </div>
    `;
    this._fetchVersion();
  }

  async _fetchVersion() {
    const el = this.querySelector('.footer-version');
    if (!el) return;
    const maxAttempts = 35;
    const delayMs = 1000;
    for (let attempt = 1; attempt <= maxAttempts; attempt++) {
      try {
        const res = await fetch(`${API_BASE}/version`);
        if (!res.ok) throw new Error(`version ${res.status}`);
        const data = await res.json();
        if (data && typeof data.version === 'string') {
          el.textContent = `v${data.version}`;
          return;
        }
      } catch (_) {
        // ネットワークエラーまたは res.ok でない
      }
      // 有効な version が取れなかった（無効なレスポンス or 例外）→ 遅延してリトライ。最終試行ならフォールバック表示
      if (attempt === maxAttempts) el.textContent = `v${FALLBACK_VERSION}`;
      else await new Promise((r) => setTimeout(r, delayMs));
    }
  }
}

customElements.define('site-footer', SiteFooter);