{% extends "base.html" %}
{% block title %}子域名{% endblock %}
{% block page_title %}子域名{% endblock %}
{% block page_desc %}列表 / 注册 / 续期 / 删除{% endblock %}
{% block content %}
<div class="card" style="margin-bottom:16px">
  <div class="card-b">
    <div class="filters">
      <div><label>关键字</label><input class="input" id="fSearch" placeholder="子域名或根域名…"></div>
      <div><label>根域名</label><input class="input" id="fRoot" placeholder="example.com"></div>
      <div><label>状态</label><select id="fStatus"><option value="">全部</option><option value="active">正常</option><option value="suspended">已暂停</option><option value="pending">待处理</option><option value="expired">已过期</option></select></div>
      <div><label>每页</label><select id="fPerPage"><option>10</option><option selected>20</option><option>50</option><option>100</option></select></div>
    </div>
  </div>
</div>
<div class="toolbar">
  <span class="stat-lbl" id="countInfo">—</span>
  <div>
    <button class="btn" onclick="load()">↻ 刷新</button>
    <button class="btn" onclick="exportCSV()">⬇ 导出 CSV</button>
    <button class="btn primary" onclick="document.getElementById('regModal').style.display='flex'">+ 注册子域名</button>
  </div>
</div>
<div class="card">
  <div id="tableArea" class="scroll" style="max-height:60vh"><div class="empty">点击刷新加载</div></div>
</div>

<div class="modal-bg" id="regModal" style="display:none">
  <div class="modal">
    <div class="modal-h"><h3>注册子域名</h3><button class="btn sm" onclick="this.closest('.modal-bg').style.display='none'">✕</button></div>
    <div class="modal-b">
      <div class="field"><label>子域名前缀</label><input class="input" id="regSub" placeholder="myapp"></div>
      <div class="field"><label>根域名</label><input class="input" id="regRoot" placeholder="example.com"></div>
      <div style="background:var(--accent);padding:8px 12px;border-radius:6px;font-size:12px;color:var(--muted)">完整域名：<span class="code" id="regFull">myapp.example.com</span></div>
    </div>
    <div class="modal-f"><button class="btn" onclick="this.closest('.modal-bg').style.display='none'">取消</button><button class="btn primary" onclick="doRegister()">确认注册</button></div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
var items=[],total=0,page=1;
document.getElementById('regSub').oninput=updateFull;document.getElementById('regRoot').oninput=updateFull;
function updateFull(){document.getElementById('regFull').textContent=(document.getElementById('regSub').value||'myapp')+'.'+(document.getElementById('regRoot').value||'example.com');}
function load(){
  var q={page:page,per_page:parseInt(document.getElementById('fPerPage').value),include_total:1};
  var s=document.getElementById('fSearch').value;if(s)q.search=s;
  var r=document.getElementById('fRoot').value;if(r)q.rootdomain=r;
  var st=document.getElementById('fStatus').value;if(st)q.status=st;
  document.getElementById('tableArea').innerHTML='<div class="empty">加载中…</div>';
  dnshe({endpoint:'subdomains',action:'list',method:'GET',query:q}).then(function(r){
    if(r.success){
      items=r.data.subdomains||[];total=r.data.total||items.length;
      document.getElementById('countInfo').textContent=total+' 条 · 第 '+page+' 页';
      renderTable();
    }else{toast(r.data&&r.data.message||'加载失败','err');document.getElementById('tableArea').innerHTML='<div class="empty">加载失败：'+(r.data&&r.data.message||'')+'</div>';}
  });
}
function renderTable(){
  if(!items.length){document.getElementById('tableArea').innerHTML='<div class="empty">暂无子域名</div>';return;}
  var h='<table><thead><tr><th>ID</th><th>完整域名</th><th>状态</th><th>创建时间</th><th>到期</th><th style="text-align:right">操作</th></tr></thead><tbody>';
  items.forEach(function(s){
    var exp=s.never_expires?'<span class="badge ok">永久</span>':esc(s.expires_at||'—');
    h+='<tr><td class="code">'+s.id+'</td><td><strong>'+esc(s.full_domain)+'</strong><div class="stat-lbl">'+esc(s.subdomain)+' · '+esc(s.rootdomain)+'</div></td>'
      +'<td><span class="badge '+(s.status==='active'?'ok':'')+'">'+esc(s.status)+'</span></td>'
      +'<td class="stat-lbl">'+esc(s.created_at||'—')+'</td><td>'+exp+'</td>'
      +'<td style="text-align:right"><button class="btn sm" onclick="detail('+s.id+')">👁</button> <button class="btn sm" onclick="renew('+s.id+')">↻</button> <button class="btn sm danger" onclick="del('+s.id+')">✕</button></td></tr>';
  });
  document.getElementById('tableArea').innerHTML=h+'</tbody></table>';
}
function detail(id){dnshe({endpoint:'subdomains',action:'get',method:'GET',query:{subdomain_id:id}}).then(function(r){alert(JSON.stringify(r.data,null,2));});}
function renew(id){if(!confirm('确认续期 #'+id+'？'))return;dnshe({endpoint:'subdomains',action:'renew',method:'POST',body:{subdomain_id:id}}).then(function(r){r.success?toast('续期成功','ok'):toast(r.data&&r.data.message||'续期失败','err');load();});}
function del(id){if(!confirm('确认删除 #'+id+'？将同时删除所有 DNS 记录。'))return;dnshe({endpoint:'subdomains',action:'delete',method:'POST',body:{subdomain_id:id}}).then(function(r){r.success?toast('删除成功','ok'):toast(r.data&&r.data.message||'删除失败','err');load();});}
function doRegister(){
  var sub=document.getElementById('regSub').value.trim(),root=document.getElementById('regRoot').value.trim();
  if(!sub||!root)return toast('请填写完整','err');
  dnshe({endpoint:'subdomains',action:'register',method:'POST',body:{subdomain:sub,rootdomain:root}}).then(function(r){
    if(r.success){toast('注册成功：'+sub+'.'+root,'ok');document.getElementById('regModal').style.display='none';document.getElementById('regSub').value='';document.getElementById('regRoot').value='';load();}
    else toast(r.data&&r.data.message||'注册失败','err');
  });
}
function exportCSV(){
  if(!items.length)return toast('无数据','err');
  var csv='\uFEFFid,subdomain,rootdomain,full_domain,status,created_at,expires_at\n';
  items.forEach(function(s){csv+=[s.id,esc(s.subdomain),esc(s.rootdomain),esc(s.full_domain),esc(s.status),esc(s.created_at),esc(s.expires_at||'')].join(',')+'\n';});
  var b=new Blob([csv],{type:'text/csv'});var a=document.createElement('a');a.href=URL.createObjectURL(b);a.download='subdomains.csv';a.click();toast('已导出 '+items.length+' 条','ok');
}
document.getElementById('fSearch').onkeydown=function(e){if(e.key==='Enter'){page=1;load();}};
document.getElementById('fRoot').onkeydown=function(e){if(e.key==='Enter'){page=1;load();}};
document.getElementById('fStatus').onchange=function(){page=1;load();};
document.getElementById('fPerPage').onchange=function(){page=1;load();};
load();
</script>
{% endblock %}