{% extends "base.html" %}
{% block title %}仪表盘{% endblock %}
{% block page_title %}仪表盘{% endblock %}
{% block page_desc %}账号概览与最近动态{% endblock %}
{% block content %}
<div class="grid g4" style="margin-bottom:16px">
  <div class="card hover-lift" onclick="location.href='/subdomains'">
    <div class="card-b">
      <div style="display:flex;justify-content:space-between;align-items:center">
        <span class="stat-lbl">子域名</span>
        <div class="stat-ic" style="background:rgba(16,185,129,.1);color:#10b981">🌐</div>
      </div>
      <div class="stat-num" id="subCount">—</div>
      <div class="stat-lbl" id="subHint">获取中…</div>
    </div>
  </div>
  <div class="card hover-lift" onclick="location.href='/accounts'">
    <div class="card-b">
      <div style="display:flex;justify-content:space-between;align-items:center">
        <span class="stat-lbl">本地账号</span>
        <div class="stat-ic" style="background:rgba(14,165,233,.1);color:#0ea5e9">🔑</div>
      </div>
      <div class="stat-num">{{ stats.account_count }}</div>
      <div class="stat-lbl">已本地存储</div>
    </div>
  </div>
  <div class="card hover-lift" onclick="location.href='/logs'">
    <div class="card-b">
      <div style="display:flex;justify-content:space-between;align-items:center">
        <span class="stat-lbl">API 调用</span>
        <div class="stat-ic" style="background:rgba(139,92,246,.1);color:#8b5cf6">⚡</div>
      </div>
      <div class="stat-num">{{ stats.total }}</div>
      <div class="stat-lbl">24h 内 {{ stats.last24h }} 次</div>
    </div>
  </div>
  <div class="card hover-lift" onclick="location.href='/logs'">
    <div class="card-b">
      <div style="display:flex;justify-content:space-between;align-items:center">
        <span class="stat-lbl">失败调用</span>
        <div class="stat-ic" style="background:rgba(239,68,68,.1);color:#ef4444">⚠</div>
      </div>
      <div class="stat-num">{{ stats.failed }}</div>
      <div class="stat-lbl">成功 {{ stats.success }} 次</div>
    </div>
  </div>
</div>

<div class="grid g3">
  <div class="card" style="grid-column:1">
    <div class="card-h"><h3>📊 子域名配额</h3></div>
    <div class="card-b">
      <div id="quotaBox">加载中…</div>
    </div>
  </div>
  <div class="card" style="grid-column:span 2">
    <div class="card-h">
      <h3>🕐 最近动态</h3>
      <a class="btn sm" href="/logs">查看全部</a>
    </div>
    <div class="card-b" style="padding:0">
      {% if stats.recent %}
      <div class="scroll" style="max-height:320px">
        <table>
          {% for r in stats.recent %}
          <tr>
            <td style="width:24px">{{ '✓' if r.success else '✗' }}</td>
            <td>
              <div><span class="badge mono" style="font-size:10px">{{ r.method }}</span> <strong>{{ r.endpoint }}</strong> / {{ r.action }}</div>
              <div class="stat-lbl">{{ r.created_at|fmt_date }} · {{ r.duration_ms|fmt_dur }} · {{ r.account_name or '—' }}</div>
              {% if r.error %}<div style="font-size:11px;color:var(--danger)">{{ r.error }}</div>{% endif %}
            </td>
          </tr>
          {% endfor %}
        </table>
      </div>
      {% else %}
      <div class="empty">暂无动态，执行操作后将显示在这里。</div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
loadQuota();
loadSubs();
function loadQuota(){
  dnshe({endpoint:'quota',method:'GET'}).then(function(r){
    var box=document.getElementById('quotaBox');
    if(r.success && r.data && r.data.quota){
      var q=r.data.quota;
      var pct=q.total?(q.used/q.total*100):0;
      var cls=pct>=95?'danger':pct>=80?'warn':'';
      box='<div style="font-size:28px;font-weight:700">'+q.used+' <span style="font-size:14px;color:var(--muted)">/ '+q.total+'</span></div>'
         +'<div class="progress" style="margin:8px 0"><div class="progress-bar '+cls+'" style="width:'+pct+'%"></div></div>'
         +'<div class="grid g2" style="font-size:12px">'
         +'<div><div class="stat-lbl">基础</div><strong>'+q.base+'</strong></div>'
         +'<div><div class="stat-lbl">邀请加成</div><strong>'+q.invite_bonus+'</strong></div>'
         +'<div><div class="stat-lbl">可用</div><strong style="color:var(--primary)">'+q.available+'</strong></div>'
         +'</div>';
    }else{
      box='<div class="empty">无法获取配额，请确认账号凭证有效。</div>';
    }
    document.getElementById('quotaBox').innerHTML=box;
  });
}
function loadSubs(){
  dnshe({endpoint:'subdomains',action:'list',method:'GET',query:{page:1,per_page:1,include_total:1}}).then(function(r){
    // DNSHE 把总数放在 pagination.total，旧版兼容顶层 total
    var total=null;
    if(r.success && r.data){
      if(r.data.pagination && r.data.pagination.total!==undefined) total=r.data.pagination.total;
      else if(r.data.total!==undefined) total=r.data.total;
      else if(r.data.subdomains) total=r.data.subdomains.length;
    }
    if(total!==null){
      document.getElementById('subCount').textContent=total;
      document.getElementById('subHint').textContent='已注册';
    }else{
      document.getElementById('subCount').textContent='—';
      document.getElementById('subHint').textContent='获取失败';
    }
  });
}
</script>
{% endblock %}