{% extends "base.html" %}
{% block title %}DNS 记录{% endblock %}
{% block page_title %}DNS 记录{% endblock %}
{% block page_desc %}管理 A / AAAA / CNAME / MX / TXT / NS / SRV / CAA{% endblock %}
{% block content %}
<div class="card" style="margin-bottom:16px">
  <div class="card-b">
    <label>选择子域名</label>
    <select class="input" id="subSelect" style="max-width:400px" onchange="load()">
      <option value="">选择子域名…</option>
    </select>
  </div>
</div>
<div class="toolbar">
  <span class="stat-lbl" id="countInfo">—</span>
  <div><button class="btn" onclick="load()">↻ 刷新</button><button class="btn primary" onclick="openCreate()">+ 新建记录</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="createModal" style="display:none">
  <div class="modal">
    <div class="modal-h"><h3>新建 DNS 记录</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>名称</label><input class="input" id="rName" placeholder="@ 或子域名"></div>
        <div class="field"><label>TTL</label><input class="input" id="rTtl" type="number" value="600"></div>
      </div>
      <div class="field"><label>记录值</label><input class="input" id="rContent" placeholder="192.168.1.1"></div>
      <div class="field" id="rPriorityBox" style="display:none"><label>优先级（MX）</label><input class="input" id="rPriority" type="number" value="10"></div>
      <div class="field"><label>线路（可选）</label><input class="input" id="rLine" placeholder="default"></div>
    </div>
    <div class="modal-f"><button class="btn" onclick="this.closest('.modal-bg').style.display='none'">取消</button><button class="btn primary" onclick="doCreate()">创建</button></div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
var curType='A',subId=null;
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 ...':'记录值';};});
dnshe({endpoint:'subdomains',action:'list',method:'GET',query:{page:1,per_page:200}}).then(function(r){
  if(r.success){var sel=document.getElementById('subSelect');(r.data.subdomains||[]).forEach(function(s){var o=document.createElement('option');o.value=s.id;o.textContent=s.full_domain+' (#'+s.id+')';sel.appendChild(o);});}
});
function load(){
  subId=parseInt(document.getElementById('subSelect').value);if(!subId){document.getElementById('tableArea').innerHTML='<div class="empty">请先选择子域名</div>';return;}
  dnshe({endpoint:'dns_records',action:'list',method:'GET',query:{subdomain_id:subId}}).then(function(r){
    if(r.success){var recs=r.data.records||[];document.getElementById('countInfo').textContent=recs.length+' 条记录';renderTable(recs);}
    else{document.getElementById('tableArea').innerHTML='<div class="empty">加载失败</div>';}
  });
}
function renderTable(recs){
  if(!recs.length){document.getElementById('tableArea').innerHTML='<div class="empty">暂无 DNS 记录</div>';return;}
  var h='<table><thead><tr><th>ID</th><th>类型</th><th>名称</th><th>记录值</th><th>TTL</th><th>优先级</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>'+(r.priority||'—')+'</td><td style="text-align:right"><button class="btn sm danger" onclick="del('+r.id+')">✕</button></td></tr>';});
  document.getElementById('tableArea').innerHTML=h+'</tbody></table>';
}
function del(id){if(!confirm('确认删除记录 #'+id+'？'))return;dnshe({endpoint:'dns_records',action:'delete',method:'POST',body:{id:id}}).then(function(r){r.success?toast('已删除','ok'):toast('删除失败','err');load();});}
function openCreate(){if(!subId)return toast('请先选择子域名','err');document.getElementById('createModal').style.display='flex';}
function doCreate(){
  var body={subdomain_id:subId,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;
  var line=document.getElementById('rLine').value;if(line)body.line=line;
  dnshe({endpoint:'dns_records',action:'create',method:'POST',body:body}).then(function(r){
    if(r.success){toast('记录已创建','ok');document.getElementById('createModal').style.display='none';document.getElementById('rContent').value='';load();}
    else toast(r.data&&r.data.message||'创建失败','err');
  });
}
</script>
{% endblock %}