{% extends "page.html" %}
{% block title %}LiteLLM Admin{% endblock %}

{% block main %}
<div class="container" style="max-width: 1100px;">
  <h2>LiteLLM Key Admin</h2>

  {% set success = success %}
  {% set error = error %}
  {% if success %}
  <div class="alert alert-success">{{ success }} ({{ user_query }})</div>
  {% endif %}
  {% if error %}
  <div class="alert alert-danger">{{ error }}</div>
  {% endif %}

  <table class="table table-striped table-sm">
    <thead>
      <tr>
        <th>User</th>
        <th>Spent</th>
        <th>Max Budget</th>
        <th>Budget Duration</th>
        <th>TPM</th>
        <th>RPM</th>
        <th>Blocked</th>
        <th>Expires</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for u in users %}
      <tr>
        <td>{{ u.username }}</td>
        <td>${{ "%.4f"|format(u.spend) if u.has_key else "-" }}</td>
        <td>{{ "$%.2f"|format(u.max_budget) if u.has_key and u.max_budget else "-" }}</td>
        <td>{{ u.budget_duration if u.has_key else "-" }}</td>
        <td>{{ u.last_regenerated_at[:19] if u.last_regenerated_at else "-" }}</td>
        <td>{{ u.tpm_limit if u.has_key and u.tpm_limit else "-" }}</td>
        <td>{{ u.rpm_limit if u.has_key and u.rpm_limit else "-" }}</td>
        <td>{{ "Yes" if u.has_key and u.blocked else "No" if u.has_key else "-" }}</td>
        <td style="font-size: 0.85em;">{{ u.expires[:10] if u.has_key and u.expires else "-" }}</td>
        <td>
          {% if u.has_key %}
          <form method="post" style="display:inline;">
            <input type="hidden" name="username" value="{{ u.username }}">
            <input type="hidden" name="action" value="regenerate">
            <button type="submit" class="btn btn-sm btn-outline-primary" title="Regenerate key">⟳</button>
          </form>
          {% if u.blocked %}
          <form method="post" style="display:inline;">
            <input type="hidden" name="username" value="{{ u.username }}">
            <input type="hidden" name="action" value="unblock">
            <button type="submit" class="btn btn-sm btn-outline-success" title="Unblock">🔓</button>
          </form>
          {% else %}
          <form method="post" style="display:inline;">
            <input type="hidden" name="username" value="{{ u.username }}">
            <input type="hidden" name="action" value="block">
            <button type="submit" class="btn btn-sm btn-outline-danger" title="Block">🔒</button>
          </form>
          {% endif %}
          <button class="btn btn-sm btn-outline-secondary" onclick="openEdit('{{ u.username }}', '{{ u.max_budget or '' }}', '{{ u.budget_duration or '' }}', '{{ u.tpm_limit or '' }}', '{{ u.rpm_limit or '' }}')" title="Edit limits">⚙</button>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <!-- Edit Limits Modal -->
  <div id="editModal" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Edit Limits: <span id="editUser"></span></h5>
          <button type="button" class="btn-close" onclick="closeEdit()"></button>
        </div>
        <form method="post" action="{{ base_url }}litellm-admin">
          <input type="hidden" name="username" id="editUsername" value="">
          <input type="hidden" name="action" value="update_limits">
          <div class="modal-body">
            <div style="margin-bottom:8px;">
              <label>Max Budget ($)</label><br>
              <input type="text" name="max_budget" id="editMaxBudget" class="form-control">
            </div>
            <div style="margin-bottom:8px;">
              <label>Budget Duration (e.g. 24h, 7d, 30d)</label><br>
              <input type="text" name="budget_duration" id="editBudgetDuration" class="form-control">
            </div>
            <div style="margin-bottom:8px;">
              <label>TPM Limit</label><br>
              <input type="text" name="tpm_limit" id="editTpm" class="form-control">
            </div>
            <div style="margin-bottom:8px;">
              <label>RPM Limit</label><br>
              <input type="text" name="rpm_limit" id="editRpm" class="form-control">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeEdit()">Cancel</button>
            <button type="submit" class="btn btn-primary">Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <style>
    .modal { display: none; position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); }
    .modal-dialog { margin: 10% auto; width: 400px; }
    .modal-content { background: #fff; padding: 20px; border-radius: 8px; }
  </style>

  <script>
    function openEdit(username, maxBudget, budgetDuration, tpm, rpm) {
      document.getElementById('editUsername').value = username;
      document.getElementById('editUser').textContent = username;
      document.getElementById('editMaxBudget').value = maxBudget;
      document.getElementById('editBudgetDuration').value = budgetDuration;
      document.getElementById('editTpm').value = tpm;
      document.getElementById('editRpm').value = rpm;
      document.getElementById('editModal').style.display = 'block';
    }
    function closeEdit() {
      document.getElementById('editModal').style.display = 'none';
    }
    window.onclick = function(e) {
      if (e.target.id === 'editModal') closeEdit();
    }
  </script>
</div>
{% endblock %}