<?php
// admin/widgets/speed_gauges.php
// Renders gauges ALWAYS. When offline, needles stay at 0 and label shows Offline.

if (session_status() === PHP_SESSION_NONE) { @session_start(); }
?>
<section class="ua-card ua-speed-gauges">
  <div class="ua-u-d-flex ua-u-ai-center ua-u-jc-between ua-u-gap-10 ua-u-flex-wrap">
    <div>
      <div class="ua-u-fw-800 ua-u-fs-18">عداد السرعة (حقيقي من MikroTik)</div>
      <div id="uaSpeedSub" class="ua-u-op-75 ua-u-fs-12">لا يوجد اتصال MikroTik — العدادات ثابتة على 0</div>
    </div>
    <div id="uaSpeedStatus" class="ua-u-status-pill">
      Offline
    </div>
  </div>

  <div class="ua-u-grid-2-gap18">
    <div class="ua-gauge-wrap ua-u-minh-240 ua-u-flex-center">
      <?php echo ua_render_gauge('RX (Down)', 'تحميل', 'uaRxVal', 'uaRxNeedle'); ?>
    </div>
    <div class="ua-gauge-wrap ua-u-minh-240 ua-u-flex-center">
      <?php echo ua_render_gauge('TX (Up)', 'رفع', 'uaTxVal', 'uaTxNeedle'); ?>
    </div>
  </div>
</section>

<?php
function ua_render_gauge($en, $ar, $valId, $needleId){
  ob_start(); ?>
  <div class="ua-speed-gauge-card">
    <div class="ua-speed-gauge-row">
      <div class="ua-u-text-right">
        <div class="ua-u-fw-800"><?php echo htmlspecialchars($ar); ?></div>
        <div class="ua-u-fs-12 ua-u-op-70"><?php echo htmlspecialchars($en); ?></div>
      </div>
      <div class="ua-u-text-left">
        <div id="<?php echo htmlspecialchars($valId); ?>" class="ua-speed-gauge-value">0</div>
        <div class="ua-u-fs-12 ua-u-op-70">Mbps</div>
      </div>
    </div>

    <svg viewBox="0 0 240 140" width="100%" height="160" aria-hidden="true">
      <path d="M20 120 A100 100 0 0 1 220 120" fill="none" stroke="rgba(0,0,0,.12)" stroke-width="14" stroke-linecap="round"/>
      <path d="M20 120 A100 100 0 0 1 220 120" fill="none" stroke="rgba(0,0,0,.18)" stroke-width="14" stroke-linecap="round" opacity="0.35"/>

      <g id="<?php echo htmlspecialchars($needleId); ?>" transform="translate(120 120) rotate(-90)">
        <line x1="0" y1="0" x2="85" y2="0" stroke="rgba(0,0,0,.55)" stroke-width="4" stroke-linecap="round"/>
        <circle cx="0" cy="0" r="7" fill="rgba(0,0,0,.55)"/>
      </g>

      <text x="24" y="136" font-size="10" fill="rgba(0,0,0,.55)">0</text>
      <text x="206" y="136" font-size="10" fill="rgba(0,0,0,.55)" text-anchor="end">100</text>
    </svg>

    <div class="ua-speed-gauge-scale">
      <span>مقياس: <span class="uaMaxLbl">100</span></span>
      <span></span>
    </div>
  </div>
  <?php return ob_get_clean();
}
?>

<script>
(function(){
  const statusEl = document.getElementById('uaSpeedStatus');
  const subEl = document.getElementById('uaSpeedSub');
  const rxValEl = document.getElementById('uaRxVal');
  const txValEl = document.getElementById('uaTxVal');
  const rxNeedle = document.getElementById('uaRxNeedle');
  const txNeedle = document.getElementById('uaTxNeedle');

  const MAX = 100; // Mbps
  document.querySelectorAll('.uaMaxLbl').forEach(el => el.textContent = String(MAX));

  function bpsToMbps(bps){ return Math.max(0, bps) / 1e6; }

  function setNeedle(needleEl, mbps){
    const pct = Math.max(0, Math.min(1, mbps / MAX));
    const deg = -90 + (pct * 180);
    needleEl.setAttribute('transform', `translate(120 120) rotate(${deg})`);
  }

  function applyData(data){
    const rx = bpsToMbps(data.rx_bps || 0);
    const tx = bpsToMbps(data.tx_bps || 0);

    rxValEl.textContent = rx.toFixed(0);
    txValEl.textContent = tx.toFixed(0);

    setNeedle(rxNeedle, rx);
    setNeedle(txNeedle, tx);

    const offline = (data.status !== 'ok');
    statusEl.textContent = offline ? 'Offline' : 'Online';
    subEl.textContent = data.message || (offline ? 'لا يوجد اتصال MikroTik — العدادات ثابتة على 0' : 'OK');
  }

  async function poll(){
    try{
      const res = await fetch('api/speed_gauges.php', {cache:'no-store'});
      const data = await res.json();
      applyData(data);
    }catch(e){
      applyData({status:'offline', rx_bps:0, tx_bps:0, message:'لا يوجد اتصال MikroTik — العدادات ثابتة على 0'});
    }
  }

  poll();
  setInterval(poll, 2000);
})();
</script>
