(function() {
  const API_URL = window.PHANTOM_API_URL || 'api/status.json';
  
  async function loadStatus() {
    try {
      const res = await fetch(API_URL, { cache: 'no-store' });
      if (!res.ok) throw new Error('Status unavailable');
      const data = await res.json();
      renderStatus(data);
    } catch (e) {
      renderStatus({ status: 'offline', commit: '-', issues: '-', ci: 'unknown' });
    }
  }

  function renderStatus(data) {
    const el = document.getElementById('project-status');
    if (!el) return;
    const statusClass = data.status === 'ok' ? 'status-online' : 'status-offline';
    const ciClass = data.ci === 'passing' ? 'ci-passing' : 'ci-failing';
    el.innerHTML = `
      <div class="status-badge ${statusClass}">
        <span class="status-dot"></span>
        <span class="status-label">${data.status === 'ok' ? 'Online' : 'Offline'}</span>
      </div>
      <div class="status-details">
        <span class="ci-badge ${ciClass}">${data.ci || 'unknown'}</span>
        <span class="commit-sha">${data.commit ? data.commit.slice(0,7) : '-'}</span>
        <span class="issues-count">Issues: ${data.issues ?? '-'}</span>
      </div>
    `;
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', loadStatus);
  } else {
    loadStatus();
  }
})();