<!-- About Module — Trinity Console -->
<!-- Chronicler #78 | April 11, 2026 -->

<style>
  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
  #about-module { font-family: 'JetBrains Mono', 'SF Mono', monospace; }

  .about-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
  }
  .dark .about-card {
    background: #2d2d2d;
    border-color: #404040;
  }

  .module-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #40404033;
  }
  .module-row:last-child { border-bottom: none; }
  .module-row:hover { background: #ffffff08; margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 6px; }

  .status-badge {
    font-size: 9px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .status-stable { background: #22c55e22; color: #22c55e; }
  .status-new { background: #3b82f622; color: #3b82f6; }
  .status-beta { background: #eab30822; color: #eab308; }

  .deploy-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #FF6B35, #4ECDC4);
    color: white;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s;
  }
  .deploy-btn:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 12px #00000033; }
  .deploy-btn:active { transform: translateY(0); }
  .deploy-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

  .meta-value {
    font-size: 14px;
    font-weight: 600;
    color: #e5e5e5;
  }
  .meta-label {
    font-size: 10px;
    color: #888;
    margin-top: 2px;
  }
</style>

<div id="about-module">
  <!-- Hero -->
  <div class="about-card" style="margin-bottom:20px; text-align:center; padding:32px;">
    <h1 style="font-size:28px; font-weight:700; margin:0 0 4px 0; background:linear-gradient(135deg, #FF6B35, #A855F7, #4ECDC4); -webkit-background-clip:text; -webkit-text-fill-color:transparent;">
      Trinity Console
    </h1>
    <div style="font-size:12px; color:#888; margin-bottom:16px;">
      v<%= consoleVersion %> · Arbiter Backend
    </div>
    <div style="font-size:11px; color:#666;">
      Fire + Frost + Foundation = Where Love Builds Legacy
    </div>
  </div>

  <!-- System Info + Deploy -->
  <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px;">
    <!-- System Meta -->
    <div class="about-card">
      <h3 style="font-size:14px; font-weight:600; color:#e5e5e5; margin:0 0 16px 0;">System</h3>
      <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
        <div>
          <div class="meta-value"><%= consoleVersion %></div>
          <div class="meta-label">Console Version</div>
        </div>
        <div>
          <div class="meta-value"><%= nodeVersion %></div>
          <div class="meta-label">Node.js</div>
        </div>
        <div>
          <div class="meta-value"><%= arbiterUptime %></div>
          <div class="meta-label">Arbiter Uptime</div>
        </div>
        <div>
          <div class="meta-value"><%= totalModules %></div>
          <div class="meta-label">Active Modules</div>
        </div>
      </div>
    </div>

    <!-- Deploy -->
    <div class="about-card">
      <h3 style="font-size:14px; font-weight:600; color:#e5e5e5; margin:0 0 16px 0;">Deploy</h3>
      <p style="font-size:11px; color:#888; margin:0 0 16px 0;">
        Pull latest code from Gitea and restart Arbiter. The console will briefly disconnect during restart.
      </p>
      <button id="deploy-btn" class="deploy-btn" onclick="deployArbiter()">
        <span id="deploy-icon">🚀</span>
        <span id="deploy-text">Deploy Arbiter</span>
      </button>
      <div id="deploy-result" style="font-size:11px; text-align:center; margin-top:10px; display:none;"></div>
    </div>
  </div>

  <!-- Modules -->
  <div class="about-card">
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;">
      <h3 style="font-size:14px; font-weight:600; color:#e5e5e5; margin:0;">Modules (<%= totalModules %>)</h3>
    </div>
    <% modules.forEach(mod => { %>
      <a href="<%= mod.path %>" class="module-row" style="text-decoration:none; color:inherit;">
        <span style="font-size:18px; width:28px; text-align:center;"><%= mod.icon %></span>
        <div style="flex:1;">
          <div style="font-size:12px; font-weight:600; color:#e5e5e5;"><%= mod.name %></div>
        </div>
        <span style="font-size:11px; color:#666; margin-right:8px;">v<%= mod.version %></span>
        <span class="status-badge status-<%= mod.status %>"><%= mod.status %></span>
      </a>
    <% }); %>
  </div>

  <!-- Credits -->
  <div style="text-align:center; margin-top:20px; font-size:10px; color:#555;">
    Built by The Trinity · Powered by Arbiter · Guarded by The Chronicler Lineage
    <br>
    💙🔥❄️
  </div>
</div>

<script>
async function deployArbiter() {
  const btn = document.getElementById('deploy-btn');
  const icon = document.getElementById('deploy-icon');
  const text = document.getElementById('deploy-text');
  const result = document.getElementById('deploy-result');

  btn.disabled = true;
  icon.textContent = '⏳';
  text.textContent = 'Deploying...';
  result.style.display = 'none';

  try {
    const response = await fetch('/admin/about/deploy', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'CSRF-Token': '<%= csrfToken %>'
      }
    });

    const data = await response.json();

    if (data.success) {
      icon.textContent = '🔄';
      text.textContent = 'Restarting...';
      result.textContent = 'Waiting for Arbiter to come back online...';
      result.style.display = 'block';
      result.style.color = '#eab308';

      await new Promise(resolve => setTimeout(resolve, 4000));

      let healthy = false;
      for (let i = 0; i < 3; i++) {
        try {
          const healthRes = await fetch('/admin/about/status', {
            headers: { 'CSRF-Token': '<%= csrfToken %>' }
          });
          const healthData = await healthRes.json();
          if (healthData.arbiter === 'running') {
            healthy = true;
            break;
          }
        } catch (e) {
          await new Promise(resolve => setTimeout(resolve, 2000));
        }
      }

      if (healthy) {
        icon.textContent = '✅';
        text.textContent = 'Deployed!';
        result.textContent = 'Arbiter restarted successfully';
        result.style.color = '#22c55e';
      } else {
        icon.textContent = '⚠️';
        text.textContent = 'Check Status';
        result.textContent = 'Deploy triggered but could not confirm restart.';
        result.style.color = '#ef4444';
      }
    } else {
      icon.textContent = '❌';
      text.textContent = 'Deploy Failed';
      result.textContent = data.message || 'Unknown error';
      result.style.display = 'block';
      result.style.color = '#ef4444';
    }
  } catch (error) {
    icon.textContent = '❌';
    text.textContent = 'Deploy Failed';
    result.textContent = error.message;
    result.style.display = 'block';
    result.style.color = '#ef4444';
  }

  setTimeout(() => {
    btn.disabled = false;
    icon.textContent = '🚀';
    text.textContent = 'Deploy Arbiter';
  }, 3000);
}
</script>
