<?php
require_once __DIR__ . '/bootstrap.php';
Auth::requireLogin();
require_once __DIR__ . '/../modules/registry.php';

$connectors = getActiveConnectors();
$csrfToken = Auth::csrfToken();
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="<?= e($csrfToken) ?>">
<title>Dashboard · Panel</title>
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
<div class="shell" style="max-width:1000px;">
  <div class="topbar" style="margin-bottom:1.25rem;">
    <div class="brand">
      <div class="brand-mark"><?= icon('grid') ?></div>
      <div><div class="brand-name">dehari.de Panel</div><div class="brand-sub">Zentrale Übersicht</div></div>
    </div>
    <div style="display:flex; align-items:center; gap:0.75rem;">
      <span class="live-indicator"><span class="live-dot"></span> Live <span id="lastUpdate"></span></span>
      <a href="/settings.php" class="btn btn-sm"><?= icon('settings') ?> Verbindungen</a>
      <a href="/logout.php" class="btn btn-sm"><?= icon('log-out') ?></a>
    </div>
  </div>

  <div class="module-grid" id="moduleGrid">
    <?php foreach ($connectors as $key => $connector): ?>
      <a href="<?= e($connector->externalUrl()) ?>" target="_blank" class="card module-tile" data-connector="<?= e($key) ?>">
        <div class="module-tile-header">
          <div class="module-icon offline" data-icon-el><?= icon($connector->icon()) ?></div>
          <div>
            <div style="font-weight:600;"><?= e($connector->label()) ?></div>
            <span class="status-badge unknown" data-status-el>…</span>
          </div>
        </div>
        <div data-body-el>
          <div class="text-sm text-muted">Lade...</div>
        </div>
      </a>
    <?php endforeach; ?>
  </div>
</div>

<script>
const CSRF = document.querySelector('meta[name="csrf-token"]').content;

function statusBadge(online) {
  return online
    ? '<span class="status-badge up">Online</span>'
    : '<span class="status-badge down">Offline</span>';
}

function renderHaushaltsbuch(data) {
  if (!data.online) return `<div class="text-sm" style="color:#FCA5A5;">${data.error || 'Nicht erreichbar'}</div>`;
  const sign = data.available_money >= 0 ? '' : '-';
  return `
    <div class="module-metric">${data.available_money.toLocaleString('de-DE',{minimumFractionDigits:2,maximumFractionDigits:2})} €</div>
    <div class="module-sub">Verfügbar diesen Monat</div>
    <div class="module-mini-stats">
      <div class="module-mini-stat"><div class="label">Sparquote</div><div class="value">${data.savings_rate.toFixed(1)}%</div></div>
      <div class="module-mini-stat"><div class="label">Überfällig</div><div class="value">${data.overdue_count}</div></div>
    </div>`;
}

function renderServerStatus(data) {
  if (!data.online) return `<div class="text-sm" style="color:#FCA5A5;">${data.error || 'Nicht erreichbar'}</div>`;
  return `
    <div class="module-metric">${data.services_up}/${data.services_total}</div>
    <div class="module-sub">Dienste online</div>
    <div class="module-mini-stats">
      <div class="module-mini-stat"><div class="label">CPU</div><div class="value">${data.cpu_percent.toFixed(0)}%</div></div>
      <div class="module-mini-stat"><div class="label">RAM</div><div class="value">${data.memory_percent.toFixed(0)}%</div></div>
      <div class="module-mini-stat"><div class="label">Disk</div><div class="value">${data.disk_percent.toFixed(0)}%</div></div>
    </div>`;
}

function renderTs3(data) {
  if (!data.online) return `<div class="text-sm" style="color:#FCA5A5;">${data.error || 'Nicht erreichbar'}</div>`;
  return `
    <div class="module-metric">${data.clients_online}/${data.clients_max}</div>
    <div class="module-sub">${data.server_name}</div>`;
}

const RENDERERS = { haushaltsbuch: renderHaushaltsbuch, server_status: renderServerStatus, ts3: renderTs3 };

async function poll() {
  try {
    const res = await fetch('/api/dashboard_data.php', { credentials: 'same-origin' });
    if (!res.ok) return;
    const data = await res.json();

    for (const [key, moduleData] of Object.entries(data.modules)) {
      const tile = document.querySelector(`[data-connector="${key}"]`);
      if (!tile) continue;
      tile.querySelector('[data-status-el]').outerHTML = statusBadge(moduleData.online);
      tile.querySelector('[data-icon-el]').classList.toggle('offline', !moduleData.online);
      const renderer = RENDERERS[key];
      if (renderer) {
        tile.querySelector('[data-body-el]').innerHTML = renderer(moduleData);
      }
    }
    document.getElementById('lastUpdate').textContent = '· ' + new Date().toLocaleTimeString('de-DE');
  } catch (e) { console.error(e); }
}

poll();
setInterval(poll, 15000);
</script>
</body>
</html>
