{% extends "base.html" %}
{% block title %}{{ t.logs_title }}{% endblock %}
{% block page_title %}{{ t.logs_title }}{% endblock %}
{% block page_desc %}{{ t.logs_desc }}{% endblock %}
{% block content %}
<div class="card" style="margin-bottom:16px">
  <div class="card-b">
    <div class="filters">
      <div><label>端点</label><select id="fEndpoint"><option value="">全部</option><option>subdomains</option><option>dns_records</option><option>keys</option><option>quota</option><option>whois</option><option>permanent_upgrade</option></select></div>
      <div><label>来源</label><select id="fSource"><option value="">全部</option><option value="web">界面</option><option value="cli">终端</option></select></div>
      <div><label>状态</label><select id="fSuccess"><option value="">全部</option><option value="true">成功</option><option value="false">失败</option></select></div>
      <div><label>关键字</label><input class="input" id="fSearch" placeholder="搜索…"></div>
    </div>
  </div>
</div>
<div class="toolbar">
  <span class="stat-lbl" id="countInfo">—</span>
  <div><button class="btn" onclick="load()">↻ {{ t.refresh }}</button><button class="btn" onclick="exportCSV()">⬇ {{ t.export }}</button><button class="btn danger" onclick="clear_()">🗑 {{ t.clear }}</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="detailModal" style="display:none">
  <div class="modal" style="max-width:720px">
    <div class="modal-h"><h3>{{ t.log_detail }}</h3><button class="btn sm" onclick="this.closest('.modal-bg').style.display='none'">✕</button></div>
    <div class="modal-b" id="detailBox">—</div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
var page=1,perPage=50,total=0;
function load(){
  var p=new URLSearchParams();p.set('page',page);p.set('perPage',perPage);
  var e=document.getElementById('fEndpoint').value;if(e)p.set('endpoint',e);
  var s=document.getElementById('fSource').value;if(s)p.set('source',s);
  var su=document.getElementById('fSuccess').value;if(su)p.set('success',su);
  var se=document.getElementById('fSearch').value;if(se)p.set('search',se);
  document.getElementById('tableArea').innerHTML='<div class="empty">加载中…</div>';
  fetch('/api/logs?'+p.toString()).then(function(r){return r.json()}).then(function(r){
    total=r.total;var items=r.items;
    document.getElementById('countInfo').textContent=total+' 条 · 第 '+page+' 页';
    if(!items.length){document.getElementById('tableArea').innerHTML='<div class="empty">暂无日志</div>';return;}
    var h='<table><thead><tr><th>时间</th><th>账号</th><th>来源</th><th>方法</th><th>端点</th><th>状态</th><th>耗时</th><th>详情</th></tr></thead><tbody>';
    items.forEach(function(it){
      var mk=it.success?'<span style="color:var(--ok)">✓</span>':'<span style="color:var(--danger)">✗</span>';
      h+='<tr style="cursor:pointer" onclick="showDetail(\''+it.id+'\')"><td class="stat-lbl">'+fmtDate(it.created_at)+'</td><td>'+esc(it.account_name||'—')+'</td><td><span class="badge mono">'+esc(it.source)+'</span></td><td><span class="badge mono">'+esc(it.method)+'</span></td><td class="code">'+esc(it.endpoint)+'</td><td>'+mk+' '+esc(it.status_code||'')+'</td><td>'+fmtDur(it.duration_ms)+'</td><td>👁</td></tr>';
    });
    document.getElementById('tableArea').innerHTML=h+'</tbody></table>';
  });
}
function showDetail(id){
  var p=new URLSearchParams();p.set('page','1');p.set('perPage','1000');
  fetch('/api/logs?'+p.toString()).then(function(r){return r.json()}).then(function(r){
    var it=r.items.find(function(x){return x.id===id});if(!it)return;
    var h='<div class="grid g2" style="font-size:12px">';
    h+='<div><span class="stat-lbl">时间</span><div>'+fmtDate(it.created_at)+'</div></div>';
    h+='<div><span class="stat-lbl">耗时</span><div>'+fmtDur(it.duration_ms)+'</div></div>';
    h+='<div><span class="stat-lbl">账号</span><div>'+esc(it.account_name||'—')+'</div></div>';
    h+='<div><span class="stat-lbl">来源</span><div>'+esc(it.source)+'</div></div>';
    h+='<div><span class="stat-lbl">方法</span><div class="code">'+esc(it.method)+'</div></div>';
    h+='<div><span class="stat-lbl">端点</span><div class="code">'+esc(it.endpoint)+' / '+esc(it.action)+'</div></div>';
    h+='</div>';
    if(it.error)h+='<div style="margin-top:8px;padding:8px;background:rgba(239,68,68,.1);border-radius:6px"><strong>错误：</strong>'+esc(it.error)+'</div>';
    if(it.params)h+='<div style="margin-top:8px"><span class="stat-lbl">请求参数</span>'+jsonView(JSON.parse(it.params))+'</div>';
    if(it.response)h+='<div style="margin-top:8px"><span class="stat-lbl">响应</span>'+jsonView(JSON.parse(it.response))+'</div>';
    document.getElementById('detailBox').innerHTML=h;
    document.getElementById('detailModal').style.display='flex';
  });
}
function exportCSV(){
  var p=new URLSearchParams();p.set('page','1');p.set('perPage','1000');
  fetch('/api/logs?'+p.toString()).then(function(r){return r.json()}).then(function(r){
    var csv='\uFEFFtime,account,source,method,endpoint,action,status,success,duration_ms,error\n';
    r.items.forEach(function(it){csv+=[fmtDate(it.created_at),esc(it.account_name||''),esc(it.source),esc(it.method),esc(it.endpoint),esc(it.action||''),esc(it.status_code||''),it.success?'成功':'失败',esc(it.duration_ms||''),esc(it.error||'')].join(',')+'\n';});
    var b=new Blob([csv],{type:'text/csv'});var a=document.createElement('a');a.href=URL.createObjectURL(b);a.download='logs.csv';a.click();toast('已导出 '+r.items.length+' 条','ok');
  });
}
function clear_(){if(!confirm('确认清空全部日志？'))return;fetch('/api/logs/clear',{method:'DELETE'}).then(function(r){return r.json()}).then(function(r){toast('已清空 '+r.deleted+' 条','ok');load();});}
['fEndpoint','fSource','fSuccess'].forEach(function(id){document.getElementById(id).onchange=function(){page=1;load();};});
document.getElementById('fSearch').onkeydown=function(e){if(e.key==='Enter'){page=1;load();}};
load();
</script>
{% endblock %}