{% extends "base.html" %}

{% block title %}Grok Status — Timmy Time{% endblock %}

{% block content %}
<div class="container-fluid py-4">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h1 class="h3 mb-0">Grok Status</h1>
      <p class="text-muted small mb-0">xAI frontier reasoning — premium cloud augmentation</p>
    </div>
  </div>

  <!-- Status Cards -->
  <div class="row g-3 mb-4">
    <div class="col-md-3">
      <div class="card border-0 shadow-sm">
        <div class="card-body text-center py-3">
          <div class="h5 mb-1 {{ 'text-success' if status.enabled else 'text-muted' }}">
            {{ 'Enabled' if status.enabled else 'Disabled' }}
          </div>
          <small class="text-muted">Status</small>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card border-0 shadow-sm">
        <div class="card-body text-center py-3">
          <div class="h5 mb-1 {{ 'text-success' if status.available else 'text-danger' }}">
            {{ 'Available' if status.available else 'Unavailable' }}
          </div>
          <small class="text-muted">Backend</small>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card border-0 shadow-sm">
        <div class="card-body text-center py-3">
          <div class="h5 mb-1">{{ status.model }}</div>
          <small class="text-muted">Model</small>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card border-0 shadow-sm">
        <div class="card-body text-center py-3">
          <div class="h5 mb-1">{{ 'Free' if status.free_mode else (status.max_sats_per_query|string + ' sats') }}</div>
          <small class="text-muted">Cost Cap</small>
        </div>
      </div>
    </div>
  </div>

  <!-- Configuration -->
  <div class="row g-4">
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-transparent border-secondary">
          <h5 class="mb-0">Configuration</h5>
        </div>
        <div class="card-body">
          <table class="table table-sm table-borderless mb-0">
            <tr>
              <td class="text-muted">API Key Set</td>
              <td>{{ 'Yes' if status.api_key_set else 'No' }}</td>
            </tr>
            <tr>
              <td class="text-muted">Free Mode</td>
              <td>{{ 'Yes' if status.free_mode else 'No' }}</td>
            </tr>
            <tr>
              <td class="text-muted">Active</td>
              <td>{{ 'Yes' if status.active else 'No' }}</td>
            </tr>
            <tr>
              <td class="text-muted">Max Sats/Query</td>
              <td>{{ status.max_sats_per_query }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-transparent border-secondary">
          <h5 class="mb-0">Usage Stats</h5>
        </div>
        <div class="card-body">
          {% if stats %}
          <table class="table table-sm table-borderless mb-0">
            <tr>
              <td class="text-muted">Total Requests</td>
              <td>{{ stats.total_requests }}</td>
            </tr>
            <tr>
              <td class="text-muted">Prompt Tokens</td>
              <td>{{ stats.total_prompt_tokens }}</td>
            </tr>
            <tr>
              <td class="text-muted">Completion Tokens</td>
              <td>{{ stats.total_completion_tokens }}</td>
            </tr>
            <tr>
              <td class="text-muted">Estimated Cost</td>
              <td>{{ stats.estimated_cost_sats }} sats</td>
            </tr>
            <tr>
              <td class="text-muted">Errors</td>
              <td>{{ stats.errors }}</td>
            </tr>
          </table>
          {% else %}
          <p class="text-muted mb-0">No usage data available.</p>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}