{% extends "base.html" %}
{% block title %}{{ t.keys_title }}{% endblock %}
{% block page_title %}{{ t.keys_title }}{% endblock %}
{% block page_desc %}{{ t.keys_desc }}{% endblock %}
{% block content %}
<div class="toolbar">
  <span class="stat-lbl" id="countInfo">—</span>
  <div><button class="btn" onclick="load()">↻ {{ t.refresh }}</button><button class="btn primary" onclick="document.getElementById('createModal').style.display='flex'">+ {{ t.create_key }}</button></div>
</div>
<div class="card"><div id="tableArea" class="scroll" style="max-height:65vh"><div class="empty">点击刷新加载</div></div></div>

<div class="modal-bg" id="createModal" style="display:none">
  <div class="modal">
    <div class="modal-h"><h3>{{ t.create_key }}</h3><button class="btn sm" onclick="this.closest('.modal-bg').style.display='none'">✕</button></div>
    <div class="modal-b">
      <div class="field"><label>{{ t.key_name }}</label><input class="input" id="kName" placeholder="生产环境密钥"></div>
      <div class="field"><label>{{ t.ip_whitelist }}</label><input class="input" id="kIp" placeholder="192.168.1.1, 10.0.0.0/8"></div>
      <div style="background:rgba(245,158,11,.1);padding:8px 12px;border-radius:6px;font-size:12px;color:var(--warn)">{{ t.secret_warning }}</div>
    </div>
    <div class="modal-f"><button class="btn" onclick="this.closest('.modal-bg').style.display='none'">{{ t.cancel }}</button><button class="btn primary" onclick="doCreate()">{{ t.create }}</button></div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
function load(){
  dnshe({endpoint:'keys',action:'list',method:'GET'}).then(function(r){
    if(r.success){var keys=r.data.keys||[];document.getElementById('countInfo').textContent=keys.length+' 个密钥';renderTable(keys);}
    else{toast('加载失败','err');document.getElementById('tableArea').innerHTML='<div class="empty">加载失败</div>';}
  });
}
function renderTable(keys){
  if(!keys.length){document.getElementById('tableArea').innerHTML='<div class="empty">暂无 API 密钥</div>';return;}
  var h='<table><thead><tr><th>ID</th><th>名称</th><th>API Key</th><th>状态</th><th>调用次数</th><th>最后使用</th><th style="text-align:right">操作</th></tr></thead><tbody>';
  keys.forEach(function(k){h+='<tr><td class="code">'+k.id+'</td><td>'+esc(k.key_name)+'</td><td class="code">'+esc(k.api_key)+'</td><td><span class="badge '+(k.status==='active'?'ok':'')+'">'+esc(k.status)+'</span></td><td>'+(k.request_count||0).toLocaleString()+'</td><td class="stat-lbl">'+esc(k.last_used_at||'—')+'</td><td style="text-align:right"><button class="btn sm" onclick="regen('+k.id+')">↻</button> <button class="btn sm danger" onclick="del('+k.id+')">✕</button></td></tr>';});
  document.getElementById('tableArea').innerHTML=h+'</tbody></table>';
}
function doCreate(){
  var name=document.getElementById('kName').value.trim();if(!name)return toast('请输入名称','err');
  var ip=document.getElementById('kIp').value.trim();
  dnshe({endpoint:'keys',action:'create',method:'POST',body:{key_name:name,ip_whitelist:ip||undefined}}).then(function(r){
    if(r.success&&r.data.api_secret){alert('API Secret 仅显示一次，请保存：\n\nKey: '+r.data.api_key+'\nSecret: '+r.data.api_secret);document.getElementById('createModal').style.display='none';document.getElementById('kName').value='';document.getElementById('kIp').value='';load();}
    else toast(r.data&&r.data.message||'创建失败','err');
  });
}
function regen(id){if(!confirm('确认重置 #'+id+' 的 Secret？旧 Secret 将失效。'))return;dnshe({endpoint:'keys',action:'regenerate',method:'POST',body:{key_id:id}}).then(function(r){if(r.success&&r.data.api_secret){alert('新 Secret：\n\n'+r.data.api_secret);load();}else toast('重置失败','err');});}
function del(id){if(!confirm('确认删除密钥 #'+id+'？'))return;dnshe({endpoint:'keys',action:'delete',method:'POST',body:{key_id:id}}).then(function(r){r.success?toast('已删除','ok'):toast('删除失败','err');load();});}
load();
</script>
{% endblock %}