<?php require_once "auth.php"; ?>
<!DOCTYPE html>
<html>
<head>
<title>Telegram Broadcast</title>
<style>
body{background:#eef2f7;font-family:Segoe UI,Arial}
.box{
  width:680px;margin:50px auto;background:#fff;
  padding:25px;border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.15)
}
h2{text-align:center;margin-bottom:10px}
textarea{
  width:100%;height:140px;padding:12px;
  border-radius:10px;border:1px solid #ccc;font-size:15px
}
.btn{
  width:100%;padding:14px;border-radius:10px;
  border:none;font-size:16px;cursor:pointer
}
.btn-primary{background:#4e73df;color:#fff;margin-top:12px}
.btn-danger{background:#e74a3b;color:#fff}
.btn-secondary{background:#6c757d;color:#fff}
.row{display:flex;gap:10px;margin-top:10px}
#log{
  margin-top:15px;background:#0f1220;color:#c7ffd8;
  padding:12px;border-radius:10px;height:260px;overflow:auto;
  font-size:13px;line-height:1.5
}
.badge{padding:3px 8px;border-radius:6px;font-size:12px}
.green{color:#1cc88a}
.red{color:#e74a3b}
.blue{color:#4e73df}
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:none;align-items:center;justify-content:center
}
.modal .card{
  background:#fff;padding:20px;border-radius:12px;width:420px
}
.countdown{font-size:28px;text-align:center;margin:10px 0}
</style>
</head>

<body>
<div class="box">
  <h2>📢 Telegram Broadcast</h2>
  <textarea id="msg" placeholder="Type your broadcast message (HTML allowed)"></textarea>

  <button class="btn btn-primary" onclick="confirmBroadcast()">Start Broadcast</button>

  <pre id="log"></pre>
</div>

<!-- CONFIRM MODAL -->
<div class="modal" id="confirmModal">
  <div class="card">
    <h3>Are you sure?</h3>
    <p>This will send message to <b>ALL ACTIVE USERS</b>.</p>
    <div class="countdown" id="countdown">3</div>
    <div class="row">
      <button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
      <button class="btn btn-danger" onclick="startCountdown()">Yes, Send</button>
    </div>
  </div>
</div>

<script>
let offset=0, totalSent=0, totalFailed=0, batch=0, totalBatches=0;
let messageText="";

const logBox = document.getElementById("log");
function log(t){
  logBox.textContent += t + "\n";
  logBox.scrollTop = logBox.scrollHeight;
}

function confirmBroadcast(){
  messageText = document.getElementById("msg").value.trim();
  if(!messageText){ alert("Message empty"); return; }
  document.getElementById("countdown").textContent = "3";
  document.getElementById("confirmModal").style.display="flex";
}

function closeModal(){
  document.getElementById("confirmModal").style.display="none";
}

function startCountdown(){
  let c = 3;
  const el = document.getElementById("countdown");
  const t = setInterval(()=>{
    c--;
    el.textContent = c;
    if(c<=0){
      clearInterval(t);
      closeModal();
      startBroadcast();
    }
  },1000);
}

function startBroadcast(){
  offset=0; totalSent=0; totalFailed=0; batch=0; totalBatches=0;
  logBox.textContent="";
  log("Broadcast started");
  sendBatch();
}

function sendBatch(){
  const f = new FormData();
  f.append("message", messageText);
  f.append("offset", offset);

  fetch("broadcast_send.php",{method:"POST",body:f})
  .then(r=>r.json())
  .then(d=>{
    if(d.error){
      log("ERROR: "+d.error);
      return;
    }
    batch++;
    if(!totalBatches && d.total_batches){ totalBatches = d.total_batches; }

    totalSent += d.sent;
    totalFailed += d.failed;

    log(
      `Batch ${batch}${totalBatches?"/"+totalBatches:""} `+
      `→ Sent:${d.sent} Failed:${d.failed} `+
      `| Total Sent:${totalSent} Failed:${totalFailed}`
    );

    // DEBUG (future)
    if(d.debug){ log("DEBUG: "+d.debug); }

    if(d.has_more){
      offset = d.next_offset;
      setTimeout(sendBatch, 800); // safe delay
    }else{
      log("DONE ✔");
    }
  })
  .catch(e=>log("JS ERROR: "+e));
}
</script>
</body>
</html>
