{% extends "base.html" %}
{% block title %}管理看板 · AlphaX Agent{% endblock %}

{% block extra_head_css %}
<style>
main { max-width: 1280px; margin: 0 auto; width: 100%; padding: 24px; display: flex; flex-direction: column; gap: 24px; }
.page-title { font-size: 22px; font-weight: 700; }
.page-title .sub { font-size: 13px; color: var(--stone); font-weight: 400; margin-left: 8px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.stat-card { background: var(--canvas); border: 1px solid var(--hairline-soft); border-radius: var(--radius-xl); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.stat-card .label { font-size: 11px; color: var(--stone); text-transform: uppercase; letter-spacing: .5px; }
.stat-card .value { font-size: 34px; font-weight: 700; letter-spacing: -1px; line-height: 1; color: var(--ink); }
.stat-card .sub { font-size: 11px; color: var(--stone); margin-top: 2px; }
.section { display: flex; flex-direction: column; gap: 12px; }
.section-title { font-size: 13px; font-weight: 600; color: var(--stone); text-transform: uppercase; letter-spacing: .5px; }
.card { background: var(--canvas); border: 1px solid var(--hairline-soft); border-radius: var(--radius-xl); padding: 20px; overflow: hidden; }
.card.no-pad { padding: 0; }
.chart-wrap { min-height: 160px; position: relative; }
.chart-wrap svg { width: 100%; display: block; }
.toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.toolbar input { flex: 1; padding: 9px 14px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); color: var(--ink); font-size: 13px; outline: none; }
.toolbar input:focus { border-color: var(--blue); }
.toolbar button { padding: 9px 18px; background: var(--blue); color: #fff; border: none; border-radius: var(--radius-md); font-size: 13px; cursor: pointer; font-weight: 500; }
.toolbar button:hover { opacity: .9; }
table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: auto; }
th { text-align: left; padding: 10px 12px; color: var(--stone); font-weight: 500; border-bottom: 1px solid var(--hairline-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid var(--hairline-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
tr:hover td { background: var(--surface); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: 1.5; }
.badge-green { background: rgba(0,180,115,.12); color: var(--green); }
.badge-yellow { background: rgba(255,208,47,.15); color: var(--yellow-dark); }
.badge-red { background: rgba(229,62,62,.12); color: var(--red); }
.badge-gray { background: var(--hairline-soft); color: var(--stone); }
.admin-tabs { display:flex; gap:6px; padding:4px; background:var(--surface); border:1px solid var(--hairline-soft); border-radius:var(--radius-full); width:fit-content; }
.admin-tab-btn { border:1px solid transparent; background:var(--canvas); color:var(--steel); padding:9px 20px; border-radius:var(--radius-full); font-weight:700; font-size:14px; cursor:pointer; transition:.15s; box-shadow:0 1px 2px rgba(5,0,56,.03); }
.admin-tab-btn.active { background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
.admin-panel { display:none; }
.admin-panel.active { display:block; }
.user-tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.tab-btn { padding: 6px 16px; border: 1px solid var(--hairline); border-radius: var(--radius-full); background: transparent; color: var(--stone); font-size: 13px; cursor: pointer; transition: .15s; font-weight: 500; white-space: nowrap; }
.tab-btn:hover { border-color: var(--hairline-strong); color: var(--ink); }
.tab-btn.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; font-size: 13px; color: var(--stone); }
.pagination button { padding: 6px 14px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); color: var(--ink); font-size: 13px; cursor: pointer; }
.pagination button:disabled { opacity: .4; cursor: default; }
@media(max-width:600px){main{padding:16px}.page-title{font-size:18px}.stats-grid{grid-template-columns:1fr 1fr}.stat-card{padding:14px 16px}.stat-card .value{font-size:26px}}
</style>
{% endblock %}

{% block content %}
<main>
  <div class="page-title">管理看板<div class="sub">PV · 用户 · 订阅 · 订单</div></div>

  <div class="stats-grid" id="stats">
    <div class="stat-card"><div class="label">今日 PV</div><div class="value">--</div></div>
    <div class="stat-card"><div class="label">累计 PV</div><div class="value">--</div></div>
    <div class="stat-card"><div class="label">总用户</div><div class="value">--</div></div>
    <div class="stat-card"><div class="label">今日新增用户</div><div class="value">--</div></div>
    <div class="stat-card"><div class="label">活跃订阅</div><div class="value">--</div></div>
    <div class="stat-card"><div class="label">订单记录</div><div class="value">--</div></div>
  </div>

  <div class="section">
    <div class="section-title">PV 趋势 · 近 30 天</div>
    <div class="card chart-wrap" id="dauChart"></div>
  </div>

  <div class="admin-tabs" role="tablist">
    <button class="admin-tab-btn active" data-admin-tab="users" onclick="switchAdminTab('users')">用户管理</button>
    <button class="admin-tab-btn" data-admin-tab="orders" onclick="switchAdminTab('orders')">订阅订单</button>
  </div>

  <div class="section admin-panel active" id="usersPanel">
    <div class="section-title">用户管理</div>
    <div class="card no-pad">
      <div style="padding:16px 20px 0">
        <div class="user-tabs">
          <button class="tab-btn active" data-tab="all" onclick="switchTab('all')">全部用户</button>
          <button class="tab-btn" data-tab="today_active" onclick="switchTab('today_active')">今日活跃</button>
          <button class="tab-btn" data-tab="admin" onclick="switchTab('admin')">管理员</button>
        </div>
        <div class="toolbar">
          <input type="text" id="userSearch" placeholder="搜索邮箱..." onkeydown="if(event.key==='Enter')loadUsers(0)">
          <button onclick="loadUsers(0)">搜索</button>
        </div>
      </div>
      <div style="overflow-x:auto">
        <table>
          <thead><tr>
            <th>邮箱</th><th>注册状态</th><th>订阅状态</th><th>到期时间</th><th>角色</th><th>注册时间</th><th>最后登录</th>
          </tr></thead>
          <tbody id="userTable"></tbody>
        </table>
      </div>
      <div class="pagination" id="pagination" style="padding-bottom:16px"></div>
    </div>
  </div>

  <div class="section admin-panel" id="ordersPanel">
    <div class="section-title">订阅订单管理</div>
    <div class="card no-pad">
      <div style="padding:16px 20px 0">
        <div class="user-tabs">
          <button class="tab-btn order-tab active" data-status="all" onclick="switchOrderStatus('all')">全部订单</button>
          <button class="tab-btn order-tab" data-status="pending" onclick="switchOrderStatus('pending')">待支付</button>
          <button class="tab-btn order-tab" data-status="paid" onclick="switchOrderStatus('paid')">已支付</button>
          <button class="tab-btn order-tab" data-status="confirmed" onclick="switchOrderStatus('confirmed')">已确认</button>
          <button class="tab-btn order-tab" data-status="expired" onclick="switchOrderStatus('expired')">已过期</button>
        </div>
        <div class="toolbar">
          <input type="text" id="orderSearch" placeholder="搜索邮箱 / TXID / 订单号..." onkeydown="if(event.key==='Enter')loadOrders(0)">
          <button onclick="loadOrders(0)">搜索</button>
        </div>
      </div>
      <div style="overflow-x:auto">
        <table>
          <thead><tr>
            <th>订单号</th><th>邮箱</th><th>套餐</th><th>金额</th><th>状态</th><th>链 / TXID</th><th>创建时间</th><th>订阅关联</th>
          </tr></thead>
          <tbody id="orderTable"></tbody>
        </table>
      </div>
      <div class="pagination" id="orderPagination" style="padding-bottom:16px"></div>
    </div>
  </div>

</main>
{% endblock %}

{% block password_modal %}{% endblock %}

{% block extra_script %}
<script>
var API = '';

var PAGE_SIZE=50,userOffset=0,userTotal=0,currentTab='all';
var ORDER_PAGE_SIZE=50,orderOffset=0,orderTotal=0,currentOrderStatus='all';

async function init(){
  try{var chk=await fetch(API+'/api/admin/check');if(!chk.ok){window.location.href='/subscription';return}
  var info=await chk.json();if(!info.is_admin){window.location.href='/subscription';return}}catch(e){window.location.href='/subscription';return}
  loadStats();loadUsers(0);
}

function switchAdminTab(tab){
  document.querySelectorAll('.admin-tab-btn').forEach(function(b){b.classList.toggle('active',b.dataset.adminTab===tab)});
  document.getElementById('usersPanel').classList.toggle('active',tab==='users');
  document.getElementById('ordersPanel').classList.toggle('active',tab==='orders');
  if(tab==='orders' && orderTotal===0) loadOrders(0);
}

function switchTab(tab){
  currentTab=tab;userOffset=0;
  document.querySelectorAll('[data-tab]').forEach(function(b){b.classList.toggle('active',b.dataset.tab===tab)});
  loadUsers(0);
}

async function loadStats(){
  try{var r=await fetch(API+'/api/admin/stats');if(!r.ok)throw new Error('Unauthorized');var d=await r.json();
  document.getElementById('stats').innerHTML=
    '<div class="stat-card"><div class="label">今日 PV</div><div class="value">'+(d.pv_today||0)+'<div class="sub">页面访问次数，不去重</div></div></div>'+
    '<div class="stat-card"><div class="label">累计 PV</div><div class="value">'+(d.pv_total||0)+'<div class="sub">全部页面访问</div></div></div>'+
    '<div class="stat-card"><div class="label">总用户</div><div class="value">'+(d.total_users||0)+'<div class="sub">DAU '+(d.dau_today||0)+' · WAU '+(d.wau_7d||0)+'</div></div></div>'+
    '<div class="stat-card"><div class="label">今日新增用户</div><div class="value">'+(d.new_users_today||0)+'<div class="sub">新增 / 总用户配对</div></div></div>'+
    '<div class="stat-card"><div class="label">活跃订阅</div><div class="value">'+(d.active_subscriptions||0)+'<div class="sub">当前有效</div></div></div>'+
    '<div class="stat-card"><div class="label">订单记录</div><div class="value">'+(d.total_orders||0)+'<div class="sub">已支付 '+(d.paid_orders||0)+'</div></div></div>';
  renderChart(d.pv_trend||[]);
  }catch(e){}
}
function renderChart(trend){
  var wrap=document.getElementById('dauChart');
  if(!trend.length){wrap.innerHTML='<div style="display:flex;align-items:center;justify-content:center;height:160px;color:var(--stone)">暂无数据</div>';return}
  var W=Math.max(wrap.clientWidth||600,300),H=160,pad={t:10,r:16,b:26,l:38},cw=W-pad.l-pad.r,ch=H-pad.t-pad.b;
  var maxVal=Math.max.apply(null,trend.map(function(d){return d.count}))||1;
  var svg='<svg viewBox="0 0 '+W+' '+H+'">';
  for(var i=0;i<=4;i++){var y=pad.t+ch*i/4;svg+='<line x1="'+pad.l+'" x2="'+(W-pad.r)+'" y1="'+y+'" y2="'+y+'" stroke="var(--hairline-soft)" stroke-width="1"/>'}
  var barW=Math.max(2,cw/trend.length*.7),gap=cw/trend.length;
  for(var i=0;i<trend.length;i++){var d=trend[i],x=pad.l+i*gap+(gap-barW)/2,h=d.count/maxVal*ch,by=pad.t+ch-h;
  svg+='<rect x="'+x+'" y="'+by+'" width="'+barW+'" height="'+h+'" rx="1.5" fill="var(--blue)" opacity=".65"/>';
  if(i%7===0)svg+='<text x="'+(x+barW/2)+'" y="'+(pad.t+ch+15)+'" text-anchor="middle" font-size="9" fill="var(--stone)">'+d.day.slice(5)+'</text>'}
  [0,Math.round(maxVal/2),maxVal].forEach(function(v){var y=pad.t+ch-(v/maxVal*ch);svg+='<text x="'+(pad.l-5)+'" y="'+(y+3)+'" text-anchor="end" font-size="9" fill="var(--stone)">'+v+'</text>'});
  svg+='</svg>';wrap.innerHTML=svg;
}

async function loadUsers(offset){
  userOffset=offset;var q=document.getElementById('userSearch').value.trim();
  document.getElementById('userTable').innerHTML='<tr><td colspan="7" style="text-align:center;padding:32px;color:var(--stone)">加载中...</td></tr>';
  try{
    var r=await fetch(API+'/api/admin/users?search='+encodeURIComponent(q)+'&offset='+offset+'&limit='+PAGE_SIZE+'&tab='+currentTab);
    if(!r.ok)throw new Error(r.status);
    var d=await r.json();userTotal=d.total;renderUsers(d.users);renderPagination();
  }catch(e){
    document.getElementById('userTable').innerHTML='<tr><td colspan="7" style="text-align:center;padding:32px;color:var(--red)">加载失败</td></tr>';
  }
}

function renderUsers(users){
  var tb=document.getElementById('userTable');
  if(!users.length){tb.innerHTML='<tr><td colspan="7" style="text-align:center;padding:32px;color:var(--stone)">无匹配用户</td></tr>';return}
  tb.innerHTML=users.map(function(u){
    return '<tr>'+
      '<td style="font-weight:500">'+esc(u.email)+'</td>'+
      '<td>'+registrationBadge(u)+'</td>'+
      '<td>'+subscriptionBadge(u)+'</td>'+
      '<td style="color:var(--stone);font-size:12px">'+(u.subscription_end_at?fmtDate(u.subscription_end_at):'—')+'</td>'+
      '<td>'+(u.is_admin?'<span class="badge badge-yellow">管理员</span>':'<span class="badge badge-gray">用户</span>')+'</td>'+
      '<td style="color:var(--stone);font-size:12px">'+fmtDate(u.created_at)+'</td>'+
      '<td style="color:var(--stone);font-size:12px">'+(u.last_login_at?fmtDate(u.last_login_at):'—')+'</td>'+
      '</tr>';
  }).join('');
}
function renderPagination(){
  var pg=document.getElementById('pagination'),totalPages=Math.ceil(userTotal/PAGE_SIZE),cur=Math.floor(userOffset/PAGE_SIZE)+1;
  pg.innerHTML='<button '+(userOffset===0?'disabled':'')+' onclick="loadUsers('+(userOffset-PAGE_SIZE)+')">← 上一页</button>'+
    '<span>第 '+cur+' / '+Math.max(1,totalPages)+' 页 · 共 '+userTotal+' 用户</span>'+
    '<button '+((userOffset+PAGE_SIZE>=userTotal)?'disabled':'')+' onclick="loadUsers('+(userOffset+PAGE_SIZE)+')">下一页 →</button>';
}

function registrationBadge(u){
  return'<span class="badge badge-green">已注册</span>';
}
function subscriptionBadge(u){
  var label=u.subscription_status_label||'未开通';
  var plan=u.subscription_plan_name||'未开通';
  var cls=label==='有效'?'badge-green':(label==='已过期'?'badge-red':'badge-gray');
  return '<span class="badge '+cls+'">'+esc(plan)+' · '+esc(label)+'</span>';
}
function switchOrderStatus(status){
  currentOrderStatus=status;orderOffset=0;
  document.querySelectorAll('.order-tab').forEach(function(b){b.classList.toggle('active',b.dataset.status===status)});
  loadOrders(0);
}

async function loadOrders(offset){
  orderOffset=offset;var q=document.getElementById('orderSearch').value.trim();
  document.getElementById('orderTable').innerHTML='<tr><td colspan="8" style="text-align:center;padding:32px;color:var(--stone)">加载中...</td></tr>';
  try{
    var r=await fetch(API+'/api/admin/orders?search='+encodeURIComponent(q)+'&offset='+offset+'&limit='+ORDER_PAGE_SIZE+'&status='+currentOrderStatus);
    if(!r.ok)throw new Error(r.status);
    var d=await r.json();orderTotal=d.total;renderOrders(d.orders);renderOrderPagination();
  }catch(e){
    document.getElementById('orderTable').innerHTML='<tr><td colspan="8" style="text-align:center;padding:32px;color:var(--red)">加载失败</td></tr>';
  }
}

function renderOrders(orders){
  var tb=document.getElementById('orderTable');
  if(!orders.length){tb.innerHTML='<tr><td colspan="8" style="text-align:center;padding:32px;color:var(--stone)">无匹配订单</td></tr>';return}
  tb.innerHTML=orders.map(function(o){
    return '<tr>'+ 
      '<td style="font-weight:700">#'+esc(o.id)+'</td>'+ 
      '<td>'+esc(o.email)+'</td>'+ 
      '<td>'+esc(o.plan_name||o.plan_code)+'</td>'+ 
      '<td style="font-weight:700">'+Number(o.amount_usdt||0).toFixed(0)+' USDT</td>'+ 
      '<td>'+orderStatusBadge(o.status)+'</td>'+ 
      '<td style="color:var(--stone);font-size:12px">'+esc(o.chain||'')+(o.txid?' · '+esc(shortText(o.txid,18)):' · —')+'</td>'+ 
      '<td style="color:var(--stone);font-size:12px">'+fmtDate(o.created_at)+'</td>'+ 
      '<td>'+(o.subscription_id?'<span class="badge badge-green">订阅 #'+esc(o.subscription_id)+'</span>':'<span class="badge badge-gray">未关联</span>')+'</td>'+ 
      '</tr>';
  }).join('');
}

function renderOrderPagination(){
  var pg=document.getElementById('orderPagination'),totalPages=Math.ceil(orderTotal/ORDER_PAGE_SIZE),cur=Math.floor(orderOffset/ORDER_PAGE_SIZE)+1;
  pg.innerHTML='<button '+(orderOffset===0?'disabled':'')+' onclick="loadOrders('+(orderOffset-ORDER_PAGE_SIZE)+')">← 上一页</button>'+ 
    '<span>第 '+cur+' / '+Math.max(1,totalPages)+' 页 · 共 '+orderTotal+' 订单</span>'+ 
    '<button '+((orderOffset+ORDER_PAGE_SIZE>=orderTotal)?'disabled':'')+' onclick="loadOrders('+(orderOffset+ORDER_PAGE_SIZE)+')">下一页 →</button>';
}

function orderStatusBadge(status){
  var cls=(status==='paid'||status==='confirmed')?'badge-green':(status==='pending'?'badge-yellow':(status==='expired'||status==='cancelled'?'badge-red':'badge-gray'));
  var map={pending:'待支付',paid:'已支付',confirmed:'已确认',expired:'已过期',cancelled:'已取消'};
  return '<span class="badge '+cls+'">'+esc(map[status]||status||'—')+'</span>';
}
function shortText(s,n){s=String(s||'');return s.length>n?s.slice(0,n)+'…':s}

function esc(s){return String(s||'').replace(/[&<>"]/g,function(c){return{'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]})}
function fmtDate(ts){if(!ts)return'—';var m=String(ts).match(/^(\d{4})-(\d{2})-(\d{2})/);return m?m[2]+'/'+m[3]:ts.slice(0,10)}
function fmtDateTime(ts){if(!ts)return'—';var d=new Date(ts);if(isNaN(d.getTime()))return String(ts).slice(0,19).replace('T',' ');return (d.getMonth()+1)+'/'+d.getDate()+' '+('0'+d.getHours()).slice(-2)+':'+('0'+d.getMinutes()).slice(-2)+':'+('0'+d.getSeconds()).slice(-2)}

init();
</script>
{% endblock %}