/**
 * Version Footer Utility
 * Fetches version information and adds it to page footers
 */

class VersionFooter {
  constructor() {
    this.versionData = null;
    this.init();
  }

  async init() {
    try {
      await this.fetchVersionData();
      this.addVersionToFooter();
    } catch (error) {
      console.warn('Could not load version information:', error);
      this.addFallbackVersion();
    }
  }

  async fetchVersionData() {
    const response = await fetch('/api/version');
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
    this.versionData = await response.json();
  }

  addVersionToFooter() {
    const footers = document.querySelectorAll('footer');
    
    footers.forEach(footer => {
      // Check if version info already exists
      if (footer.querySelector('.version-info')) {
        return;
      }

      const versionDiv = document.createElement('div');
      versionDiv.className = 'version-info';
      versionDiv.style.cssText = `
        margin-top: 12px;
        padding-top: 8px;
        border-top: 1px solid #e0e0e0;
        font-size: 11px;
        color: #666;
        text-align: center;
      `;

      if (this.versionData) {
        const commitUrl = `${this.versionData.gitUrl}/commit/${this.versionData.sha}`;
        const commitDate = new Date(this.versionData.commitDate).toLocaleDateString();
        
        versionDiv.innerHTML = `
          <span>Version: <a href="${commitUrl}" target="_blank" rel="noopener noreferrer" 
                style="color: #666; text-decoration: none; font-family: monospace;"
                title="View commit: ${this.versionData.commitMessage}">${this.versionData.shortSha}</a></span>
          <span style="margin-left: 8px;">• ${commitDate}</span>
          <span style="margin-left: 8px;">• Branch: ${this.versionData.branch}</span>
        `;
      } else {
        versionDiv.innerHTML = '<span>Version information unavailable</span>';
      }

      footer.appendChild(versionDiv);
    });
  }

  addFallbackVersion() {
    const footers = document.querySelectorAll('footer');
    
    footers.forEach(footer => {
      if (footer.querySelector('.version-info')) {
        return;
      }

      const versionDiv = document.createElement('div');
      versionDiv.className = 'version-info';
      versionDiv.style.cssText = `
        margin-top: 12px;
        padding-top: 8px;
        border-top: 1px solid #e0e0e0;
        font-size: 11px;
        color: #666;
        text-align: center;
      `;
      versionDiv.innerHTML = '<span>Version information unavailable</span>';
      
      footer.appendChild(versionDiv);
    });
  }
}

// Auto-initialize when DOM is ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {
    new VersionFooter();
  });
} else {
  new VersionFooter();
}