<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Rise Monitor Panel</title>
  <style>
    body{font-family:Arial; padding:20px;}
    .box{border:1px solid #ddd; padding:12px; margin:10px 0; border-radius:10px;}
    .red{color:#b00020; font-weight:bold;}
    .green{color:#0a7a0a; font-weight:bold;}
    table{border-collapse:collapse; width:100%;}
    td,th{border:1px solid #eee; padding:8px;}
  </style>
</head>
<body>
  <h2>Canlı Durum</h2>
  <div id="clients"></div>

  <h2>Son Uyarılar (DC / Düşüş)</h2>
  <div id="alerts"></div>

<script>
async function load(){
  const st = await fetch('api/get_status.php').then(r=>r.json());
  const al = await fetch('api/get_alerts.php').then(r=>r.json());

  // Clients
  let html = '';
  if(st.ok){
    st.clients.forEach(c=>{
      const ok = (parseInt(c.party_count,10) === 8);
      html += `<div class="box">
        <div><b>${c.client_id}</b> — Party: ${ok ? `<span class="green">${c.party_count}/8</span>` : `<span class="red">${c.party_count}/8 (DÜŞTÜ!)</span>`}</div>
        <div>Gold: ${c.gold}</div>
        <div>Dropped Slots: ${c.dropped_slots || '-'}</div>
        <div>Last Seen: ${c.last_seen}</div>
      </div>`;
    });
  }
  document.getElementById('clients').innerHTML = html || '<i>Veri yok</i>';

  // Alerts
  let ahtml = '<table><tr><th>Zaman</th><th>Client</th><th>Önce</th><th>Sonra</th><th>Slot</th></tr>';
  if(al.ok){
    al.alerts.forEach(a=>{
      ahtml += `<tr>
        <td>${a.created_at}</td>
        <td>${a.client_id}</td>
        <td>${a.prev_count}</td>
        <td class="red">${a.new_count}</td>
        <td>${a.dropped_slots}</td>
      </tr>`;
    });
  }
  ahtml += '</table>';
  document.getElementById('alerts').innerHTML = ahtml;
}
load();
setInterval(load, 2000);
</script>
</body>
</html>
