import { api } from './api.js';
import { escHtml } from './utils.js';

export async function renderAdminStatus() {
  const outlet = document.getElementById('router-outlet');
  outlet.innerHTML = `<div class="empty-state"><div class="spinner"></div></div>`;

  try {
    const data = await api.admin.status();
    const session = data.session || {};
    const env = data.environment || {};

    outlet.innerHTML = `
      <div class="page-header">
        <div>
          <div class="page-title">Admin Status</div>
          <div class="page-subtitle">Lightweight deploy, environment, and current-session status for admins.</div>
        </div>
      </div>

      <div class="card">
        <div class="card-header"><span class="card-title">Application</span></div>
        <div class="card-body admin-status-grid">
          ${statusRow('Version', data.version)}
          ${statusRow('Build ID', data.build_id, true)}
          ${statusRow('Asset Version', data.asset_version, true)}
          ${statusRow('Server Time (UTC)', data.timestamp_utc, true)}
        </div>
      </div>

      <div class="card">
        <div class="card-header"><span class="card-title">Current Session</span></div>
        <div class="card-body admin-status-grid">
          ${statusRow('Session ID', session.session_id, true)}
          ${statusRow('Adobe', session.adobe ? 'Connected' : 'Disconnected')}
          ${statusRow('DocuSign', session.docusign ? 'Connected' : 'Disconnected')}
          ${statusRow('Adobe Auth Mode', session.adobe_auth_mode, true)}
          ${statusRow('DocuSign Auth Mode', session.docusign_auth_mode, true)}
          ${statusRow('Adobe Account', session.adobe_account_name || session.adobe_user_email || '—')}
          ${statusRow('DocuSign Account', session.docusign_selected_account_name || session.docusign_user_email || '—')}
        </div>
      </div>

      <div class="card">
        <div class="card-header"><span class="card-title">Environment</span></div>
        <div class="card-body admin-status-grid">
          ${statusRow('DocuSign Base URL', env.docusign_base_url, true)}
          ${statusRow('DocuSign Auth Server', env.docusign_auth_server, true)}
          ${statusRow('DocuSign Redirect URI', env.docusign_redirect_uri, true)}
          ${statusRow('Adobe Base URL', env.adobe_sign_base_url, true)}
          ${statusRow('Adobe Redirect URI', env.adobe_redirect_uri, true)}
          ${statusRow('Session Store', env.session_store_dir, true)}
          ${statusRow('Audit Log', env.audit_log_file, true)}
        </div>
      </div>
    `;
  } catch (e) {
    outlet.innerHTML = `<div class="callout error"><span class="callout-icon">❌</span>Failed to load admin status: ${escHtml(e.message)}</div>`;
  }
}

function statusRow(label, value, mono = false) {
  return `
    <div class="admin-status-row">
      <div class="admin-status-label">${escHtml(label)}</div>
      <div class="admin-status-value ${mono ? 'mono' : ''}">${escHtml(value || '—')}</div>
    </div>
  `;
}