{% extends "base.html" %}
{% block title %}回复白名单 - WeChat Viewer{% endblock %}
{% block body %}
<style>
body{overflow-y:auto!important;height:auto!important;}
.wl-container{max-width:760px;margin:0 auto;padding:20px;}
.wl-header h1{font-size:20px;color:#2c3e50;margin-bottom:6px;}
.wl-hint{font-size:12px;color:#888;margin-bottom:16px;line-height:1.5;}
.add-box{background:white;border-radius:8px;padding:14px 16px;margin-bottom:18px;box-shadow:0 1px 2px rgba(0,0,0,0.05);display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.add-box input{border:1px solid #cfd8e3;border-radius:6px;padding:8px 10px;font-size:13px;}
.add-box input.wxid{flex:1;min-width:180px;}
.add-box input.name{width:140px;}
.btn-add{background:#27ae60;color:white;border:none;border-radius:6px;padding:8px 16px;font-size:13px;cursor:pointer;}
.wl-card{background:white;border-radius:8px;padding:12px 16px;margin-bottom:8px;box-shadow:0 1px 2px rgba(0,0,0,0.05);display:flex;align-items:center;gap:10px;}
.kb{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;}
.kb.contact{background:#d6eaf8;color:#1a5276}.kb.group{background:#fdebd0;color:#b9770e}
.wl-name{font-weight:600;font-size:14px;}
.wl-wxid{font-size:11px;color:#999;}
.btn-del{margin-left:auto;background:#e74c3c;color:white;border:none;border-radius:6px;padding:6px 12px;font-size:12px;cursor:pointer;}
.empty-state{text-align:center;padding:50px 20px;color:#999;}
</style>
<div class="wl-container">
<div class="wl-header"><h1>⭐ 回复白名单</h1></div>
<div class="wl-hint">在白名单里的联系人 / 群，其消息可被<b>自动回复</b>（仍受敏感词等安全规则拦截，命中会转人工审批）。不在名单里的一律进「自动回复审批」等你手动发。<br>群 id 以 <code>@chatroom</code> 结尾会自动识别为群。</div>
<div class="add-box">
<input class="wxid" id="wxid" placeholder="wxid 或 群id(xxx@chatroom)">
<input class="name" id="name" placeholder="备注名(可选)">
<button class="btn-add" onclick="add()">➕ 添加</button>
</div>
<div id="list"></div>
</div>
<script>
function esc(s){return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
function load(){
  var el=document.getElementById('list');
  fetch('/api/whitelist').then(function(r){return r.json()}).then(function(j){
    if(!j.ok){el.innerHTML='<div class="empty-state">加载失败</div>';return;}
    if(!j.data.length){el.innerHTML='<div class="empty-state"><p>白名单为空 — 当前所有回复都会进人工审批</p></div>';return;}
    var h='';
    for(var i=0;i<j.data.length;i++){
      var t=j.data[i];
      h+='<div class="wl-card">';
      h+='<span class="kb '+t.kind+'">'+(t.kind==='group'?'群':'联系人')+'</span>';
      h+='<span class="wl-name">'+esc(t.name||'(未命名)')+'</span>';
      h+='<span class="wl-wxid">'+esc(t.wxid)+'</span>';
      h+='<button class="btn-del" onclick="del('+t.id+')">删除</button>';
      h+='</div>';
    }
    el.innerHTML=h;
  });
}
function add(){
  var wxid=document.getElementById('wxid').value.trim();
  var name=document.getElementById('name').value.trim();
  if(!wxid){alert('请输入 wxid 或群id');return;}
  fetch('/api/whitelist',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({wxid:wxid,name:name})})
    .then(function(r){return r.json()}).then(function(j){
      if(j.ok){document.getElementById('wxid').value='';document.getElementById('name').value='';load();}
      else{alert('失败: '+(j.error||''));}
    });
}
function del(id){
  fetch('/api/whitelist/'+id+'/delete',{method:'POST'}).then(function(r){return r.json()}).then(function(j){
    if(j.ok){load();}else{alert('失败: '+(j.error||''));}
  });
}
load();
</script>
{% endblock %}