{% extends "base.html" %}
{% block title %}{{ t.subdomains_title }}{% endblock %}
{% block page_title %}{{ t.subdomains_title }}{% endblock %}
{% block page_desc %}{{ t.subdomains_desc }}{% endblock %}
{% block content %}
<div class="card" style="margin-bottom:16px">
  <div class="card-b">
    <div class="filters">
      <div><label>{{ t.filter_keyword }}</label><input class="input" id="fSearch" placeholder="{{ t.filter_keyword }}…"></div>
      <div><label>{{ t.filter_root }}</label><input class="input" id="fRoot" placeholder="example.com"></div>
      <div><label>{{ t.filter_status }}</label><select id="fStatus"><option value="">{{ t.status_all }}</option><option value="active">{{ t.status_active }}</option><option value="Registered">{{ t.status_registered }}</option><option value="suspended">{{ t.status_suspended }}</option><option value="expired">{{ t.status_expired }}</option></select></div>
      <div><label>{{ t.filter_per_page }}</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()">↻ {{ t.refresh }}</button>
    <button class="btn" onclick="exportCSV()">⬇ {{ t.export_csv }}</button>
    <button class="btn primary" onclick="document.getElementById('regModal').style.display='flex'">+ {{ t.register_subdomain }}</button>
  </div>
</div>
<div class="card">
  <div id="tableArea" class="scroll" style="max-height:70vh"><div class="empty">{{ t.no_subdomains }}</div></div>
</div>

<div class="modal-bg" id="regModal" style="display:none">
  <div class="modal">
    <div class="modal-h"><h3>{{ t.register_subdomain }}</h3><button class="btn sm" onclick="this.closest('.modal-bg').style.display='none'">✕</button></div>
    <div class="modal-b">
      <div class="field"><label>{{ t.subdomain_prefix }}</label><input class="input" id="regSub" placeholder="myapp"></div>
      <div class="field"><label>{{ t.root_domain }}</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)">{{ t.full_domain_preview }}：<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'">{{ t.cancel }}</button><button class="btn primary" onclick="doRegister()">{{ t.confirm_register }}</button></div>
  </div>
</div>

<!-- DNS 记录创建对话框 -->
<div class="modal-bg" id="dnsCreateModal" style="display:none">
  <div class="modal">
    <div class="modal-h"><h3>{{ t.new_record }} — <span id="dnsCreateDomain"></span></h3><button class="btn sm" onclick="this.closest('.modal-bg').style.display='none'">✕</button></div>
    <div class="modal-b">
      <div class="tabs" id="typeTabs">
        <button class="tab active" data-type="A">A</button><button class="tab" data-type="AAAA">AAAA</button>
        <button class="tab" data-type="CNAME">CNAME</button><button class="tab" data-type="MX">MX</button>
        <button class="tab" data-type="TXT">TXT</button><button class="tab" data-type="NS">NS</button>
        <button class="tab" data-type="SRV">SRV</button><button class="tab" data-type="CAA">CAA</button>
      </div>
      <div class="grid g2">
        <div class="field"><label>{{ t.record_name }}</label><input class="input" id="rName" placeholder="@ 或子域名"></div>
        <div class="field"><label>{{ t.record_ttl }}</label><input class="input" id="rTtl" type="number" value="600"></div>
      </div>
      <div class="field"><label>{{ t.record_value }}</label><input class="input" id="rContent" placeholder="192.168.1.1"></div>
      <div class="field" id="rPriorityBox" style="display:none"><label>{{ t.record_priority }}</label><input class="input" id="rPriority" type="number" value="10"></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="doCreateDns()">{{ t.create }}</button></div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
var items=[],total=0,page=1,curType='A',curSubId=null;
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');}
document.querySelectorAll('#typeTabs .tab').forEach(function(t){t.onclick=function(){document.querySelectorAll('#typeTabs .tab').forEach(function(x){x.classList.remove('active')});t.classList.add('active');curType=t.dataset.type;document.getElementById('rPriorityBox').style.display=curType==='MX'?'block':'none';document.getElementById('rContent').placeholder=curType==='A'?'192.168.1.1':curType==='AAAA'?'::1':curType==='CNAME'?'target.example.com':curType==='TXT'?'v=spf1 ...':'记录值';};});

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.pagination && r.data.pagination.total!==undefined)?r.data.pagination.total:(r.data.total!==undefined?r.data.total:items.length);
      document.getElementById('countInfo').textContent=total+' 条 · 第 '+page+' 页';
      renderTable();
      checkExpandHash();
    }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 id="row-'+s.id+'"><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'||s.status==='Registered'?'ok':'')+'">'+esc(s.status)+'</span></td>'
      +'<td class="stat-lbl">'+esc(s.created_at||'—')+'</td><td>'+exp+'</td>'
      +'<td style="text-align:right;white-space:nowrap">'
      +'<button class="btn sm" onclick="toggleDns('+s.id+')" title="查看/管理 DNS 记录">📋 DNS</button> '
      +'<button class="btn sm" onclick="renew('+s.id+')">↻</button> '
      +'<button class="btn sm danger" onclick="del('+s.id+')">✕</button>'
      +'</td></tr>';
    h+='<tr id="dns-'+s.id+'" style="display:none"><td colspan="6" style="padding:0;background:var(--accent)"><div id="dnsArea-'+s.id+'" style="padding:12px">—</div></td></tr>';
  });
  document.getElementById('tableArea').innerHTML=h+'</tbody></table>';
}
function toggleDns(id){
  var row=document.getElementById('dns-'+id);
  if(row.style.display==='none'){
    row.style.display='';
    loadDns(id);
  }else{
    row.style.display='none';
  }
}
function loadDns(id){
  var area=document.getElementById('dnsArea-'+id);
  area.innerHTML='<div class="empty">加载 DNS 记录中…</div>';
  dnshe({endpoint:'dns_records',action:'list',method:'GET',query:{subdomain_id:id}}).then(function(r){
    if(r.success){
      var recs=r.data.records||[];
      var h='<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px"><strong>DNS 记录（'+recs.length+' 条）</strong><button class="btn sm primary" onclick="openCreateDns('+id+')">+ 新建记录</button></div>';
      if(!recs.length){h+='<div class="empty">暂无 DNS 记录</div>';}
      else{
        h+='<table style="background:var(--card)"><thead><tr><th>ID</th><th>类型</th><th>名称</th><th>记录值</th><th>TTL</th><th style="text-align:right">操作</th></tr></thead><tbody>';
        recs.forEach(function(r){h+='<tr><td class="code">'+r.id+'</td><td><span class="badge mono">'+r.type+'</span></td><td class="code">'+esc(r.name||'@')+'</td><td class="code" style="max-width:240px;overflow:hidden;text-overflow:ellipsis">'+esc(r.content)+'</td><td>'+r.ttl+'</td><td style="text-align:right"><button class="btn sm danger" onclick="delDns('+id+','+r.id+')">✕</button></td></tr>';});
        h+='</tbody></table>';
      }
      area.innerHTML=h;
    }else{area.innerHTML='<div class="empty">加载失败</div>';}
  });
}
function openCreateDns(subId){
  curSubId=subId;
  var sub=items.find(function(x){return x.id===subId});
  document.getElementById('dnsCreateDomain').textContent=sub?sub.full_domain:'#'+subId;
  document.getElementById('dnsCreateModal').style.display='flex';
}
function doCreateDns(){
  var body={subdomain_id:curSubId,type:curType,content:document.getElementById('rContent').value,name:document.getElementById('rName').value||'@',ttl:parseInt(document.getElementById('rTtl').value)||600};
  if(curType==='MX')body.priority=parseInt(document.getElementById('rPriority').value)||10;
  dnshe({endpoint:'dns_records',action:'create',method:'POST',body:body}).then(function(r){
    if(r.success){toast('记录已创建','ok');document.getElementById('dnsCreateModal').style.display='none';document.getElementById('rContent').value='';loadDns(curSubId);}
    else toast(r.data&&r.data.message||'创建失败','err');
  });
}
function delDns(subId,recId){if(!confirm('确认删除记录 #'+recId+'？'))return;dnshe({endpoint:'dns_records',action:'delete',method:'POST',body:{id:recId}}).then(function(r){r.success?(toast('已删除','ok'),loadDns(subId)):toast('删除失败','err');});}
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');
}
// 检查 URL hash（跨账号搜索跳转过来时自动展开）
function checkExpandHash(){
  var m=location.hash.match(/expand=(\d+)/);
  if(m){
    var id=parseInt(m[1]);
    // 等待表格行渲染完成后再展开（轮询最多 3 秒）
    var tries=0;
    function tryExpand(){
      var row=document.getElementById('row-'+id);
      if(row){toggleDns(id);location.hash='';}
      else if(tries++<15){setTimeout(tryExpand,200);}
      else{location.hash='';}
    }
    tryExpand();
  }
}
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 %}