<?php
// /esp32/dashboard/site.php
// Disclaimer: This example code is part of a research prototype.
// It is provided “as is”, without any warranty of any kind.
// Please review, adapt, and test carefully before using it in production.

require_once __DIR__ . '/auth.php';
require_login();

$slug = $_GET['site'] ?? '';
if ($slug === '') {
    http_response_code(400);
    exit('Missing site parameter');
}

// Look up the selected site.
$stmt = pdo()->prepare('SELECT * FROM sites WHERE slug = ? LIMIT 1');
$stmt->execute([$slug]);
$activeSite = $stmt->fetch();

if (!$activeSite) {
    http_response_code(404);
    exit('Site not found');
}

// Load the nodes belonging to this site.
$stmt = pdo()->prepare('SELECT id, name, device_id, device_type FROM nodes WHERE site_id = ? ORDER BY name');
$stmt->execute([$activeSite['id']]);
$nodes = $stmt->fetchAll();

// Used in header.php
$page_title = $activeSite['name'] . ' · ESP32 Dashboard';

include __DIR__ . '/header.php';
?>
<section class="section">
  <div class="section-header">
    <h2 class="section-title"><?= htmlspecialchars($activeSite['name']) ?></h2>
    <div class="controls">
      <div class="controls__left">
        <span class="muted">Showing recent data</span>
      </div>
      <div class="controls__right">
        <label>Range
          <select id="range">
            <option value="12h">Last 12 h</option>
            <option value="24h" selected>Last 24 h</option>
            <option value="3d">Last 3 days</option>
            <option value="7d">Last 7 days</option>
            <option value="30d">Last 30 days</option>
            <option value="90d">Last 3 months</option>
          </select>
        </label>
        <button id="refresh" class="btn ghost">Refresh</button>
      </div>
    </div>
  </div>

  <div class="node-grid">
    <?php foreach ($nodes as $n): ?>
      <?php
        // Determine a device type label. In this example only "EVE-NODE" is used.
        $type = strtolower($n['device_type'] ?? '');

        // If the type is not set in the database, auto-detect from the device_id prefix.
        if ($type === '' && stripos($n['device_id'], 'EVE-NODE') === 0) {
            $type = 'eve-node';
        }

        // Optional icon per device type (svg/png/jpg).
        $iconPath = null;
        if ($type !== '') {
            $basePath = __DIR__ . '/assets/img/devices/' . $type;
            foreach (['.svg', '.png', '.jpg'] as $ext) {
                if (file_exists($basePath . $ext)) {
                    $iconPath = BASE_URL . '/assets/img/devices/' . $type . $ext;
                    break;
                }
            }
        }

        $nodeId = (int)$n['id'];
      ?>
      <div class="node-card glass" data-node-id="<?= $nodeId ?>">
        <div class="node-card__header">
          <div class="node-card__title">
            <?php if ($iconPath): ?>
              <img src="<?= htmlspecialchars($iconPath) ?>" alt="" class="node-card__icon">
            <?php endif; ?>
            <div>
              <h3><?= htmlspecialchars($n['name']) ?></h3>
              <p class="muted">Device ID: <?= htmlspecialchars($n['device_id']) ?></p>
            </div>
          </div>
          <div class="node-card__tools">
            <a class="btn ghost small"
               href="<?= BASE_URL ?>/download.php?node_id=<?= $nodeId ?>&amp;range=24h">
              CSV (24 h)
            </a>
          </div>
        </div>

        <div class="charts">
          <div class="chart">
            <canvas data-sensor="temperature"></canvas>
            <div class="chart-title">Temperature (SHT + BMP)</div>
          </div>
          <div class="chart">
            <canvas data-sensor="humidity"></canvas>
            <div class="chart-title">Humidity</div>
          </div>
          <div class="chart">
            <canvas data-sensor="pressure"></canvas>
            <div class="chart-title">Pressure</div>
          </div>
          <div class="chart">
            <canvas data-sensor="par"></canvas>
            <div class="chart-title">PAR</div>
          </div>
          <div class="chart">
            <canvas data-sensor="battery"></canvas>
            <div class="chart-title">Battery</div>
          </div>
        </div>
      </div>
    <?php endforeach; ?>
  </div>
</section>
<?php include __DIR__ . '/footer.php'; ?>
