{% extends "base.html" %}
{% block title %}Painel de Monitoramento{% endblock %}
{% set active = "monitor" %}
{% block content %}
<style>
.monitor-controls { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.monitor-controls input { flex: 1; min-width: 200px; padding: 10px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; outline: none; }
.monitor-controls input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.filter-btn { padding: 8px 18px; border: none; border-radius: 20px; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.15s; }
.filter-btn.active { box-shadow: 0 0 0 2px #1e293b; }
.filter-all { background: #e0e7ff; color: #4338ca; }
.filter-online { background: #dcfce7; color: #166534; }
.filter-offline { background: #fee2e2; color: #991b1b; }

.setor-header { display: flex; align-items: center; gap: 10px; margin: 24px 0 12px; padding-bottom: 6px; border-bottom: 2px solid #6366f1; }
.setor-header h5 { margin: 0; color: #334155; }
.setor-count { background: #6366f1; color: #fff; font-size: 11px; padding: 2px 10px; border-radius: 10px; font-weight: 600; }

.ramal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.ramal-card { background: #fff; border-radius: 10px; padding: 16px; border-left: 5px solid #22c55e; box-shadow: 0 1px 4px rgba(0,0,0,0.08); transition: all 0.15s; }
.ramal-card.offline { border-left-color: #ef4444; }
.ramal-card.busy { border-left-color: #3b82f6; }
.ramal-card.dnd { border-left-color: #f59e0b; }
.ramal-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); transform: translateY(-1px); }
.card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.card-ext { font-weight: 700; font-size: 17px; color: #0f172a; }
.card-icon { font-size: 22px; }
.card-icon.online { color: #22c55e; }
.card-icon.offline { color: #ef4444; }
.card-icon.busy { color: #3b82f6; }
.card-icon.dnd { color: #f59e0b; }
.card-name { font-size: 13px; color: #64748b; margin-bottom: 6px; }
.card-latency { display: inline-block; background: #f0fdf4; color: #166534; font-size: 11px; padding: 2px 8px; border-radius: 8px; font-weight: 600; }
.card-last { font-size: 11px; color: #ef4444; margin-top: 6px; font-weight: 500; }
</style>

<div class="container-fluid">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">🖥️ Painel de Monitoramento</h4>
    <span class="text-muted small">Auto-refresh a cada <strong id="refreshCounter">10</strong>s</span>
  </div>

  <div class="card mb-3">
    <div class="card-body py-3">
      <div class="monitor-controls">
        <input type="text" id="searchInput" placeholder="🔍 Buscar por ramal ou nome..." oninput="filterCards()">
        <button class="filter-btn filter-all active" data-filter="all" onclick="setFilter('all', this)">Todos</button>
        <button class="filter-btn filter-online" data-filter="online" onclick="setFilter('online', this)">📶 Online</button>
        <button class="filter-btn filter-offline" data-filter="offline" onclick="setFilter('offline', this)">📵 Offline</button>
        <button class="btn btn-sm btn-outline-secondary ms-auto" onclick="refreshData()">🔄</button>
      </div>
    </div>
  </div>

  <div id="monitorContainer">
    <div class="text-center text-muted py-5">Carregando...</div>
  </div>
</div>

<script>
let currentFilter = 'all';
let searchQuery = '';
let refreshTimer = null;
let countdown = 10;

function setFilter(filter, btn) {
  currentFilter = filter;
  document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  filterCards();
}

function filterCards() {
  searchQuery = document.getElementById('searchInput').value.toLowerCase();
  const cards = document.querySelectorAll('.ramal-card');
  cards.forEach(card => {
    const isOnline = !card.classList.contains('offline');
    const matchFilter = currentFilter === 'all' ||
      (currentFilter === 'online' && isOnline) ||
      (currentFilter === 'offline' && !isOnline);
    const ext = (card.dataset.ext || '').toLowerCase();
    const name = (card.dataset.name || '').toLowerCase();
    const matchSearch = !searchQuery || ext.includes(searchQuery) || name.includes(searchQuery);
    card.style.display = (matchFilter && matchSearch) ? '' : 'none';
  });
  // Esconder setores vazios
  document.querySelectorAll('.setor-header').forEach(h => {
    const grid = h.nextElementSibling;
    if (grid && grid.classList.contains('ramal-grid')) {
      const visible = Array.from(grid.querySelectorAll('.ramal-card')).some(c => c.style.display !== 'none');
      h.style.display = visible ? '' : 'none';
      grid.style.display = visible ? '' : 'none';
    }
  });
}

async function refreshData() {
  countdown = 10;
  document.getElementById('monitorContainer').innerHTML = '<div class="text-center text-muted py-5">Atualizando...</div>';
  try {
    const resp = await fetch('/app/pbx/monitor/data');
    const data = await resp.json();
    renderMonitor(data);
  } catch(e) {
    document.getElementById('monitorContainer').innerHTML = `<div class="alert alert-danger">Erro: ${e.message}</div>`;
  }
}

function renderMonitor(data) {
  const container = document.getElementById('monitorContainer');
  if (!data || !data.groups || !Object.keys(data.groups).length) {
    container.innerHTML = '<div class="text-center text-muted py-5">Nenhum ramal encontrado.</div>';
    return;
  }
  let html = '';
  for (const [setor, ramais] of Object.entries(data.groups)) {
    if (!ramais || !ramais.length) continue;
    const label = setor === 'LINHAS TELEFÔNICAS' ? 'linhas' : 'ramais';
    html += `<div class="setor-header"><h5>${escHtml(setor)}</h5><span class="setor-count">${ramais.length} ${label}</span></div>`;
    html += '<div class="ramal-grid">';
    for (const r of ramais) {
      const online = r.status === 'Online';
      const queda = r.last_seen || '';
      // Determinar icone e classe
      let iconClass = online ? 'online' : 'offline';
      let iconEmoji = online ? '📶' : '📵';
      let extraClass = '';
      if (r.dnd) {
        iconEmoji = '🔇';
        iconClass = 'dnd';
        extraClass = 'dnd';
      } else if (r.busy) {
        iconEmoji = '📞';
        iconClass = 'busy';
        extraClass = 'busy';
      }
      html += `<div class="ramal-card ${online ? 'online' : 'offline'} ${extraClass}" data-ext="${escHtml(r.ramal)}" data-name="${escHtml(r.name || '')}">
        <div class="card-top">
          <span class="card-ext">${escHtml(r.ramal)}</span>
          <span class="card-icon ${iconClass}">${iconEmoji}</span>
        </div>
        <div class="card-name">${escHtml(r.name || 'Sem nome')}</div>
        <div style="margin-top:4px;">
          ${r.dnd ? '<span style="background:#fef3c7;color:#92400e;font-size:11px;padding:2px 8px;border-radius:8px;font-weight:600;">🔇 Não perturbe</span>' : ''}
          ${r.busy ? '<span style="background:#dbeafe;color:#1e40af;font-size:11px;padding:2px 8px;border-radius:8px;font-weight:600;">📞 Em chamada</span>' : ''}
          ${!r.dnd && !r.busy && online ? `<span class="card-latency">${escHtml(r.latency || '0 ms')}</span>` : ''}
        </div>
        ${!online ? `<div class="card-last">${queda ? 'Queda: ' + escHtml(queda) : 'Offline'}</div>` : ''}
      </div>`;
    }
    html += '</div>';
  }
  container.innerHTML = html;
  filterCards();
}

function escHtml(s) {
  if (!s) return '';
  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

// Refresh a cada 10s
function startRefresh() {
  if (refreshTimer) clearInterval(refreshTimer);
  refreshTimer = setInterval(() => {
    countdown--;
    document.getElementById('refreshCounter').textContent = countdown;
    if (countdown <= 0) refreshData();
  }, 1000);
}

// Carregar dados iniciais
refreshData();
startRefresh();
</script>
{% endblock %}