{% extends "base.html" %}
{% block title %}自动回复审批 - WeChat Viewer{% endblock %}
{% block body %}
<style>
body{overflow-y:auto!important;height:auto!important;}
.ap-container{max-width:960px;margin:0 auto;padding:20px;}
.ap-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.ap-header h1{font-size:20px;color:#2c3e50;}
.btn-refresh{background:#95a5a6;color:white;padding:6px 14px;border:none;border-radius:6px;cursor:pointer;font-size:13px;}
.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.tab{padding:6px 14px;border-radius:6px;cursor:pointer;font-size:13px;border:1px solid #ddd;background:white;}
.tab.active{background:#2c3e50;color:white;border-color:#2c3e50;}
.ap-card{background:white;border-radius:8px;padding:14px 18px;margin-bottom:10px;box-shadow:0 1px 2px rgba(0,0,0,0.05);}
.ap-card.pending{border-left:3px solid #e67e22;}
.ap-card.sent{border-left:3px solid #27ae60;opacity:.75;}
.ap-card.auto_sent{border-left:3px solid #3498db;opacity:.8;}
.ap-card.cancelled,.ap-card.failed{border-left:3px solid #95a5a6;opacity:.65;}
.ap-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.ap-name{font-weight:600;font-size:14px;}
.kind-badge{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;background:#eef;color:#3a51c6;}
.kind-badge.group_at_me{background:#fdebd0;color:#b9770e}.kind-badge.group_quote_me{background:#e8daef;color:#6c3483}
.status-badge{font-size:10px;padding:2px 8px;border-radius:10px;margin-left:auto;}
.status-badge.sent{background:#d5f5e3;color:#1e8449}.status-badge.auto_sent{background:#d6eaf8;color:#1a5276}
.status-badge.cancelled,.status-badge.failed{background:#f2f3f4;color:#7f8c8d}
.reason{font-size:10px;color:#e67e22;margin-bottom:6px;}
.incoming{background:#f7f7f8;border-radius:6px;padding:8px 10px;font-size:12px;color:#444;margin-bottom:8px;white-space:pre-wrap;word-break:break-word;}
.incoming .lbl{color:#999;font-size:10px;display:block;margin-bottom:2px;}
.draft-box{width:100%;box-sizing:border-box;border:1px solid #cfd8e3;border-radius:6px;padding:8px 10px;font-size:13px;resize:vertical;min-height:44px;font-family:inherit;}
.ap-actions{display:flex;gap:8px;margin-top:8px;}
.ap-actions button{cursor:pointer;padding:7px 16px;border:none;border-radius:6px;font-size:13px;}
.btn-send{background:#27ae60;color:white}.btn-send:hover{background:#219a52}
.btn-cancel{background:#e74c3c;color:white}.btn-cancel:hover{background:#c0392b}
.sent-reply{font-size:13px;color:#1e8449;margin-top:4px;}
.ts{font-size:10px;color:#aaa;}
.empty-state{text-align:center;padding:60px 20px;color:#999;}
.loading{text-align:center;padding:40px;color:#999;}
</style>
<div class="ap-container">
<div class="ap-header">
<h1>✅ 自动回复审批</h1>
<button class="btn-refresh" onclick="load()">🔄 刷新</button>
</div>
<div class="tabs">
<div class="tab active" data-s="pending" onclick="switchTab('pending',this)">待审批</div>
<div class="tab" data-s="" onclick="switchTab('',this)">全部</div>
<div class="tab" data-s="sent" onclick="switchTab('sent',this)">已发送</div>
<div class="tab" data-s="auto_sent" onclick="switchTab('auto_sent',this)">自动已发</div>
<div class="tab" data-s="cancelled" onclick="switchTab('cancelled',this)">已取消</div>
</div>
<div id="list"></div>
</div>
<script>
var curStatus='pending';
function esc(s){return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
var STATUS_CN={pending:'待审批',sent:'已发送',auto_sent:'自动已发',cancelled:'已取消',failed:'发送失败'};
var KIND_CN={private:'私聊',group_at_me:'群@我',group_quote_me:'群引用我'};

function switchTab(s,el){curStatus=s;document.querySelectorAll('.tabs .tab').forEach(function(t){t.classList.remove('active')});el.classList.add('active');load();}

function load(){
  var el=document.getElementById('list');
  el.innerHTML='<div class="loading">加载中...</div>';
  fetch('/api/replies?status='+encodeURIComponent(curStatus)).then(function(r){return r.json()}).then(function(j){
    if(!j.ok){el.innerHTML='<div class="empty-state">加载失败: '+esc(j.error)+'</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];
      var pending=t.status==='pending';
      h+='<div class="ap-card '+t.status+'">';
      h+='<div class="ap-top"><span class="ap-name">'+esc(t.sender_name||t.sender||t.talker)+'</span>';
      h+='<span class="kind-badge '+t.kind+'">'+(KIND_CN[t.kind]||t.kind)+'</span>';
      if(!pending)h+='<span class="status-badge '+t.status+'">'+(STATUS_CN[t.status]||t.status)+'</span>';
      h+='</div>';
      if(pending&&t.reason)h+='<div class="reason">判定：'+esc(t.reason)+'</div>';
      h+='<div class="incoming"><span class="lbl">对方说：</span>'+esc(t.incoming)+'</div>';
      if(pending){
        h+='<textarea class="draft-box" id="d'+t.id+'">'+esc(t.draft)+'</textarea>';
        h+='<div class="ap-actions">';
        h+='<button class="btn-send" onclick="send('+t.id+')">✅ 发送</button>';
        h+='<button class="btn-cancel" onclick="cancel('+t.id+')">🗑 取消</button>';
        h+='</div>';
      }else{
        h+='<div class="sent-reply">回复：'+esc(t.draft)+'</div>';
        h+='<div class="ts">'+esc(t.sent_at||t.created_at)+'</div>';
      }
      h+='</div>';
    }
    el.innerHTML=h;
  }).catch(function(e){el.innerHTML='<div class="empty-state">加载失败: '+e.message+'</div>';});
}

function send(id){
  var txt=document.getElementById('d'+id).value;
  if(!txt.trim()){alert('回复内容为空');return;}
  fetch('/api/reply/'+id+'/send',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({text:txt})})
    .then(function(r){return r.json()}).then(function(j){
      if(j.ok){load();}else{alert('发送失败: '+(j.error||JSON.stringify(j.data||{})));load();}
    });
}
function cancel(id){
  fetch('/api/reply/'+id+'/cancel',{method:'POST'}).then(function(r){return r.json()}).then(function(j){
    if(j.ok){load();}else{alert('失败: '+(j.error||''));}
  });
}
load();
</script>
{% endblock %}