{{define "content"}}
<div class="page-header">
  <h1>API Tokens</h1>
  <button class="btn btn-sm btn-primary" onclick="showCreateTokenModal()">Create Token</button>
</div>

<div id="new-token-display" style="display:none; margin-bottom:16px;">
  <div class="success-msg">Token created! Copy the key below - it won't be shown again.</div>
  <div class="token-key"><code id="new-token-key"></code><button class="copy-btn" onclick="navigator.clipboard.writeText(document.getElementById('new-token-key').textContent)">Copy</button></div>
</div>

<div class="section">
  <h2>Static Tokens <span style="font-size:0.75rem;color:var(--text-muted);font-weight:400;">(from config, managed via environment variables)</span></h2>
  <table>
    <thead><tr><th>Name</th><th>Prefix</th><th>Rate Limit</th><th>Budget</th><th>Today's Spend</th><th></th></tr></thead>
    <tbody>
    {{range .Tokens}}{{if lt .ID 0}}
    <tr>
      <td>{{.Name}}</td>
      <td><code>{{.KeyPrefix}}...</code></td>
      <td>{{if eq .RateLimitRPM 0}}unlimited{{else}}{{.RateLimitRPM}} rpm{{end}}</td>
      <td>{{if gt .DailyBudgetUSD 0.0}}${{printf "%.2f" .DailyBudgetUSD}}{{else}}unlimited{{end}}</td>
      <td>
        {{$spend := index $.TokenSpend .Name}}
        {{if gt .DailyBudgetUSD 0.0}}
          {{$pct := budgetPct $spend .DailyBudgetUSD}}
          <div style="min-width:120px;">
            <div class="progress-bar"><div class="progress-bar-fill" style="width:{{if gt $pct 100.0}}100{{else}}{{printf "%.0f" $pct}}{{end}}%;background:{{budgetColor $pct}};"></div></div>
            <div class="budget-info">${{printf "%.4f" $spend}} / ${{printf "%.2f" .DailyBudgetUSD}} ({{printf "%.1f" $pct}}%)</div>
          </div>
        {{else}}
          {{if gt $spend 0.0}}{{formatCost $spend}}{{else}}-{{end}}
        {{end}}
      </td>
      <td><span class="badge badge-totp">config</span></td>
    </tr>
    {{end}}{{end}}
    </tbody>
  </table>
</div>

<div class="section">
  <h2>Dynamic Tokens <span style="font-size:0.75rem;color:var(--text-muted);font-weight:400;">(created via dashboard)</span></h2>
  <table>
    <thead><tr><th>Name</th><th>Prefix</th><th>Rate Limit</th><th>Budget</th><th>Today's Spend</th><th>Created</th><th>Last Used</th><th></th></tr></thead>
    <tbody id="tokens-tbody">
    {{range .Tokens}}{{if gt .ID 0}}
    <tr>
      <td>{{.Name}}</td>
      <td><code>{{.KeyPrefix}}...</code></td>
      <td>{{if eq .RateLimitRPM 0}}unlimited{{else}}{{.RateLimitRPM}} rpm{{end}}</td>
      <td>{{if gt .DailyBudgetUSD 0.0}}${{printf "%.2f" .DailyBudgetUSD}}{{else}}unlimited{{end}}</td>
      <td>
        {{$spend := index $.TokenSpend .Name}}
        {{if gt .DailyBudgetUSD 0.0}}
          {{$pct := budgetPct $spend .DailyBudgetUSD}}
          <div style="min-width:120px;">
            <div class="progress-bar"><div class="progress-bar-fill" style="width:{{if gt $pct 100.0}}100{{else}}{{printf "%.0f" $pct}}{{end}}%;background:{{budgetColor $pct}};"></div></div>
            <div class="budget-info">${{printf "%.4f" $spend}} / ${{printf "%.2f" .DailyBudgetUSD}} ({{printf "%.1f" $pct}}%)</div>
          </div>
        {{else}}
          {{if gt $spend 0.0}}{{formatCost $spend}}{{else}}-{{end}}
        {{end}}
      </td>
      <td>{{formatTime .CreatedAt}}</td>
      <td>{{if gt .LastUsedAt 0}}{{formatTime .LastUsedAt}}{{else}}never{{end}}</td>
      <td><button class="btn btn-sm btn-danger" onclick="deleteToken({{.ID}})">Revoke</button></td>
    </tr>
    {{end}}{{end}}
    </tbody>
  </table>
</div>

<!-- Create Token Modal -->
<div id="modal-create-token" class="modal-overlay">
  <div class="modal">
    <h2>Create API Token</h2>
    <div id="create-token-error"></div>
    <form onsubmit="doCreateToken(event)">
      <div class="form-group">
        <label>Token Name</label>
        <input type="text" id="token-name" required placeholder="e.g. my-app">
      </div>
      <div class="form-group">
        <label>Rate Limit (requests/min, 0 = unlimited)</label>
        <input type="number" id="token-rpm" value="0" min="0">
      </div>
      <div class="form-group">
        <label>Daily Budget (USD, 0 = unlimited)</label>
        <input type="number" id="token-budget" value="0" min="0" step="0.01">
      </div>
      <div class="modal-actions">
        <button type="button" class="btn btn-outline" onclick="closeModal()">Cancel</button>
        <button type="submit" class="btn btn-primary" style="width:auto">Create</button>
      </div>
    </form>
  </div>
</div>

<script>
function showCreateTokenModal() {
  document.getElementById('new-token-display').style.display = 'none';
  document.getElementById('create-token-error').innerHTML = '';
  document.getElementById('token-name').value = '';
  document.getElementById('token-rpm').value = '0';
  document.getElementById('token-budget').value = '0';
  document.getElementById('modal-create-token').classList.add('show');
}
function closeModal() {
  document.getElementById('modal-create-token').classList.remove('show');
}
document.getElementById('modal-create-token').addEventListener('click', function(e) {
  if (e.target === this) closeModal();
});
async function doCreateToken(e) {
  e.preventDefault();
  try {
    var resp = await fetch('/api/tokens', {
      method: 'POST', credentials: 'same-origin',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        name: document.getElementById('token-name').value,
        rate_limit_rpm: parseInt(document.getElementById('token-rpm').value),
        daily_budget_usd: parseFloat(document.getElementById('token-budget').value)
      })
    });
    var data = await resp.json();
    if (!resp.ok) { document.getElementById('create-token-error').innerHTML = '<div class="error-msg">' + (data.error||'Failed') + '</div>'; return; }
    closeModal();
    document.getElementById('new-token-key').textContent = data.key;
    document.getElementById('new-token-display').style.display = 'block';
    htmx.ajax('GET', '/tokens', {target: '#content', swap: 'innerHTML'});
  } catch (e) { document.getElementById('create-token-error').innerHTML = '<div class="error-msg">' + e.message + '</div>'; }
}
async function deleteToken(id) {
  if (!confirm('Revoke this API token? This cannot be undone.')) return;
  try {
    var resp = await fetch('/api/tokens/' + id, { method: 'DELETE', credentials: 'same-origin' });
    if (!resp.ok) { var d = await resp.json(); alert(d.error||'Failed'); return; }
    htmx.ajax('GET', '/tokens', {target: '#content', swap: 'innerHTML'});
  } catch (e) { alert(e.message); }
}
</script>
{{end}}