<?php
/**
 * لوحة التنبيهات
 */
// التحقق من أن الجلسة نشطة و user_id موجود
if (isset($_SESSION['user_id']) && isset($conn)) {
    if (!class_exists('AlertService')) {
        require_once __DIR__ . '/alerts_service.php';
    }
    try {
        $alertService = new AlertService($conn, $_SESSION['user_id']);
        $alerts = $alertService->getUnreadAlerts(100);
    } catch (Exception $e) {
        error_log("❌ خطأ في جلب التنبيهات: " . $e->getMessage());
        $alerts = [];
    }
} else {
    $alerts = [];
}
?>

<div id="alertsPanel" class="modal-panel" style="display:none;">
  <div class="modal-content">
    <div class="modal-header">
      <h2>🔔 التنبيهات والإنذارات</h2>
      <div style="display: flex; gap: 10px; align-items: center;">
        <?php if (!empty($alerts)): ?>
          <button onclick="markAllAlertsAsRead()" class="btn-mark-all-read" title="قراءة الكل">
            ✓ قراءة الكل
          </button>
        <?php endif; ?>
        <button onclick="closeAlertsPanel()" class="close-btn">✕</button>
      </div>
    </div>
    <div class="modal-body">
      <div id="alertsList">
        <?php if (empty($alerts)): ?>
          <p style="text-align:center; padding:20px; color:#666;">لا توجد تنبيهات جديدة</p>
        <?php else: ?>
          <?php foreach ($alerts as $alert): ?>
            <div class="alert-item" data-alert-id="<?= $alert['id'] ?>">
              <div class="alert-header">
                <span class="alert-type-icon">
                  <?php
                  $icons = [
                    'connection_lost' => '📡',
                    'low_battery' => '🔋',
                    'geofence_enter' => '📍',
                    'geofence_exit' => '🚪',
                    'high_speed' => '⚡',
                    'gps_disabled' => '📡❌',
                    'gps_enabled' => '📡✅',
                    'internet_disconnected' => '🌐❌',
                    'internet_connected' => '🌐✅',
                    'internet_manually_disabled' => '🔌',
                    'device_shutdown' => '🔄',
                    'permission_denied' => '🔒',
                    'permission_granted' => '🔓',
                    'custom' => '📢'
                  ];
                  echo $icons[$alert['alert_type']] ?? '📢';
                  ?>
                </span>
                <strong><?= htmlspecialchars($alert['title'], ENT_QUOTES, 'UTF-8') ?></strong>
                <span class="alert-time"><?= date('Y-m-d H:i', strtotime($alert['created_at'])) ?></span>
              </div>
              <div class="alert-message">
                <?= htmlspecialchars($alert['message'], ENT_QUOTES, 'UTF-8') ?>
              </div>
              <div class="alert-device">
                الجهاز: <?= htmlspecialchars($alert['device_name'] ?? $alert['device_id'], ENT_QUOTES, 'UTF-8') ?>
              </div>
              <button onclick="markAlertAsRead(<?= $alert['id'] ?>)" class="btn-mark-read">✓ تم القراءة</button>
            </div>
          <?php endforeach; ?>
        <?php endif; ?>
      </div>
    </div>
  </div>
</div>

<style>
.modal-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: white;
  border-radius: 10px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.alert-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  background: #f9f9f9;
}

.alert-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.alert-type-icon {
  font-size: 20px;
}

.alert-time {
  margin-left: auto;
  color: #666;
  font-size: 12px;
}

.alert-message {
  color: #333;
  margin-bottom: 8px;
}

.alert-device {
  color: #666;
  font-size: 12px;
  margin-bottom: 10px;
}

.btn-mark-read {
  background: #28a745;
  color: white;
  border: none;
  padding: 5px 15px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-mark-all-read {
  background: #007bff;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.3s;
}

.btn-mark-all-read:hover {
  background: #0056b3;
}

.btn-mark-all-read:active {
  background: #004085;
}

.badge {
  background: #dc3545;
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 11px;
  margin-left: 5px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}
</style>

<script>
// هذه الدالة موجودة في dashboard_scripts.js
// function showAlerts() { ... }

function closeAlertsPanel() {
  const panel = document.getElementById('alertsPanel');
  if (panel) {
    panel.style.display = 'none';
  }
}

function markAlertAsRead(alertId) {
  fetch('mark_alert_read.php?id=' + alertId, {
    method: 'POST'
  })
  .then(res => res.json())
  .then(data => {
    if (data.status === 'success') {
      const alertItem = document.querySelector(`.alert-item[data-alert-id="${alertId}"]`);
      if (alertItem) {
        alertItem.remove();
      }
      if (typeof updateAlertsBadge === 'function') {
        updateAlertsBadge();
      }
    } else {
      alert('خطأ: ' + (data.message || 'فشل تحديث التنبيه'));
    }
  })
  .catch(err => {
    console.error('❌ خطأ في تحديث التنبيه:', err);
    alert('حدث خطأ أثناء تحديث التنبيه');
  });
}

function markAllAlertsAsRead() {
  if (!confirm('هل تريد تحديد جميع التنبيهات كمقروءة؟')) {
    return;
  }
  
  const btn = document.querySelector('.btn-mark-all-read');
  if (btn) {
    btn.disabled = true;
    btn.textContent = 'جاري المعالجة...';
  }
  
  fetch('mark_all_alerts_read.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(res => res.json())
  .then(data => {
    if (data.status === 'success') {
      // إزالة جميع التنبيهات من القائمة
      const alertsList = document.getElementById('alertsList');
      if (alertsList) {
        alertsList.innerHTML = '<p style="text-align:center; padding:20px; color:#666;">لا توجد تنبيهات جديدة</p>';
      }
      
      // تحديث عداد التنبيهات
      if (typeof updateAlertsBadge === 'function') {
        updateAlertsBadge();
      }
      
      // إخفاء زر "قراءة الكل"
      if (btn) {
        btn.style.display = 'none';
      }
      
      alert('تم تحديد ' + (data.count || 0) + ' تنبيه كمقروء بنجاح');
    } else {
      alert('خطأ: ' + (data.message || 'فشل تحديث التنبيهات'));
      if (btn) {
        btn.disabled = false;
        btn.textContent = '✓ قراءة الكل';
      }
    }
  })
  .catch(err => {
    console.error('❌ خطأ في تحديث جميع التنبيهات:', err);
    alert('حدث خطأ أثناء تحديث التنبيهات');
    if (btn) {
      btn.disabled = false;
      btn.textContent = '✓ قراءة الكل';
    }
  });
}

// تحديث عدد التنبيهات كل 30 ثانية
if (typeof updateAlertsBadge === 'function') {
  setInterval(updateAlertsBadge, 30000);
}
</script>

