{% extends "base.html" %}

{% block title %}Devices – {{ app_name }}{% endblock %}
{% block page_title %}Device Health{% endblock %}

{% block extra_css %}
<style>
.mac-badge { font-size: 0.75rem; letter-spacing: 0.03em; }
.tbl-sm td, .tbl-sm th { padding: 0.45rem 0.6rem; font-size: 0.88rem; vertical-align: middle; }

/* Sync status pills */
.sync-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.sync-ok       { background: #d4edda; color: #155724; }
.sync-required { background: #fff3cd; color: #856404; }
.sync-pending  { background: #cce5ff; color: #004085; }
.sync-never    { background: #e2e3e5; color: #495057; }

body.dark-mode .sync-ok       { background: #1a3a25; color: #6fcf97; }
body.dark-mode .sync-required { background: #3a2e00; color: #f0c040; }
body.dark-mode .sync-pending  { background: #003060; color: #7ec8e3; }
body.dark-mode .sync-never    { background: #2a2a2a; color: #999; }
</style>
{% endblock %}

{% block content %}

<!-- Stats row -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-2">
    <div class="card text-center h-100">
      <div class="card-body py-3">
        <h4 class="mb-0 text-success">{{ devices|selectattr('status','equalto','active')|list|length }}</h4>
        <small class="text-muted">Active</small>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="card text-center h-100">
      <div class="card-body py-3">
        <h4 class="mb-0 text-danger">{{ devices|selectattr('status','equalto','inactive')|list|length }}</h4>
        <small class="text-muted">Offline</small>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="card text-center h-100">
      <div class="card-body py-3">
        <h4 class="mb-0 text-warning">{{ devices|selectattr('status','equalto','maintenance')|list|length }}</h4>
        <small class="text-muted">Maintenance</small>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="card text-center h-100">
      <div class="card-body py-3">
        <h4 class="mb-0 text-primary">{{ devices|length }}</h4>
        <small class="text-muted">Total</small>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="card text-center h-100">
      <div class="card-body py-3">
        <h4 class="mb-0 text-info">{{ devices|selectattr('mac_address')|list|length }}</h4>
        <small class="text-muted">WMT Clients</small>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <a href="{{ url_for('wmt_web.update_requests', status='pending') }}" class="card text-center h-100 text-decoration-none">
      <div class="card-body py-3">
        <h4 class="mb-0 {% if pending_count > 0 %}text-danger{% else %}text-secondary{% endif %}">{{ pending_count }}</h4>
        <small class="text-muted">Pending Approval</small>
      </div>
    </a>
  </div>
</div>

<!-- Toolbar -->
<div class="d-flex flex-wrap gap-2 mb-3 align-items-center">
  <input type="text" id="deviceSearch" class="form-control" style="max-width:340px"
         placeholder="Search hostname, IP, name, MAC…" oninput="filterTable()">
  <button class="btn btn-primary ms-auto" data-bs-toggle="modal" data-bs-target="#addDeviceModal">
    <i class="fas fa-plus me-1"></i>Add Device
  </button>
  <button class="btn btn-outline-secondary" onclick="location.reload()">
    <i class="fas fa-sync-alt me-1"></i>Refresh
  </button>
</div>

<!-- Device table -->
<div class="card">
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover tbl-sm mb-0" id="deviceTable">
        <thead class="table-light">
          <tr>
            <th>Work Place</th>
            <th>Hostname</th>
            <th>IP</th>
            <th>MAC / Type</th>
            <th>Status</th>
            <th>Logs</th>
            <th>Last Seen</th>
            <th>Config Sync</th>
            <th class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for device in devices %}
          {% set is_wmt = device.mac_address is not none and device.mac_address != '' %}
          {% set has_pending = is_wmt and (pending_by_mac.get(device.mac_address, 0) > 0) %}
          <tr class="device-row"
              data-search="{{ device.hostname|lower }} {{ device.device_ip }} {{ (device.nume_masa or '')|lower }} {{ (device.mac_address or '')|lower }}">

            <!-- Work Place -->
            <td>
              <strong>{{ device.nume_masa or '—' }}</strong>
              {% if is_wmt %}
                <br><small class="text-muted"><i class="fas fa-tablet-alt me-1"></i>WMT</small>
              {% endif %}
            </td>

            <!-- Hostname -->
            <td>{{ device.hostname }}</td>

            <!-- IP -->
            <td><code>{{ device.device_ip }}</code></td>

            <!-- MAC / Type -->
            <td>
              {% if is_wmt %}
                <code class="mac-badge">{{ device.mac_address }}</code>
              {% else %}
                <span class="text-muted">—</span>
              {% endif %}
            </td>

            <!-- Status -->
            <td>
              {% if device.status == 'active' %}
                <span class="badge bg-success">Active</span>
              {% elif device.status == 'maintenance' %}
                <span class="badge bg-warning text-dark">Maintenance</span>
              {% else %}
                <span class="badge bg-danger">Offline</span>
              {% endif %}
            </td>

            <!-- Logs -->
            <td>{{ device_log_counts.get(device.id, 0) }}</td>

            <!-- Last Seen -->
            <td class="text-muted">
              {% if device.last_seen %}
                {{ device.last_seen | local_dt }}
              {% else %}—{% endif %}
            </td>

            <!-- Config Sync status -->
            <td>
              {% if not is_wmt %}
                <span class="text-muted">—</span>

              {% elif has_pending %}
                {# Unknown device waiting for admin approval #}
                <a href="{{ url_for('wmt_web.update_requests', status='pending') }}"
                   class="sync-pill sync-pending text-decoration-none"
                   title="Admin approval required for this device">
                  <i class="fas fa-user-clock"></i> Pending Approval
                </a>

              {% elif device.config_synced_at %}
                {# Device checked in and server confirmed configs match #}
                <span class="sync-pill sync-ok"
                      title="Last confirmed in-sync: {{ device.config_synced_at | local_dt('%Y-%m-%d %H:%M:%S') }}">
                  <i class="fas fa-check-circle"></i>
                  OK · {{ device.config_synced_at | local_dt('%m-%d %H:%M') }}
                </span>

              {% elif device.config_updated_at %}
                {# Admin pushed config but client hasn't confirmed sync yet #}
                <span class="sync-pill sync-required"
                      title="Config updated {{ device.config_updated_at | local_dt('%Y-%m-%d %H:%M:%S') }} – awaiting client check-in">
                  <i class="fas fa-arrow-circle-down"></i> Awaiting client
                </span>

              {% else %}
                {# WMT device registered but never checked in #}
                <span class="sync-pill sync-never"
                      title="Client has not checked in yet">
                  <i class="fas fa-question-circle"></i> Never synced
                </span>
              {% endif %}
            </td>

            <!-- Actions -->
            <td class="text-end text-nowrap">
              <a href="{{ url_for('main.device_detail', device_id=device.id) }}"
                 class="btn btn-sm btn-outline-primary py-0" title="View Details">
                <i class="fas fa-eye"></i>
              </a>
              <a href="{{ url_for('main.logs', device_id=device.id) }}"
                 class="btn btn-sm btn-outline-info py-0" title="View Logs">
                <i class="fas fa-list"></i>
              </a>
              <a href="{{ url_for('main.device_edit', device_id=device.id) }}"
                 class="btn btn-sm btn-outline-secondary py-0" title="Edit">
                <i class="fas fa-edit"></i>
              </a>
              <form method="post" action="{{ url_for('main.device_delete', device_id=device.id) }}"
                    class="d-inline"
                    onsubmit="return confirm('Delete device {{ device.hostname }}?  This also removes all its logs.')">
                <button type="submit" class="btn btn-sm btn-outline-danger py-0" title="Delete">
                  <i class="fas fa-trash"></i>
                </button>
              </form>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="9" class="text-center text-muted py-5">
              <i class="fas fa-desktop fa-2x mb-2 d-block"></i>
              No devices registered yet.
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Sync legend -->
<div class="d-flex flex-wrap gap-3 mt-3 ms-1">
  <small class="text-muted"><strong>Config Sync legend:</strong></small>
  <small><span class="sync-pill sync-ok"><i class="fas fa-check-circle"></i> OK</span> — client confirmed configs match</small>
  <small><span class="sync-pill sync-required"><i class="fas fa-arrow-circle-down"></i> Awaiting client</span> — server pushed new config, waiting for client check-in</small>
  <small><span class="sync-pill sync-pending"><i class="fas fa-user-clock"></i> Pending Approval</span> — new/unknown device waiting for admin</small>
  <small><span class="sync-pill sync-never"><i class="fas fa-question-circle"></i> Never synced</span> — registered but hasn't checked in</small>
</div>

<!-- Add Device Modal -->
<div class="modal fade" id="addDeviceModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="fas fa-plus-circle me-2"></i>Add Device</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="addDeviceForm" onsubmit="submitAddDevice(event)">
        <div class="modal-body">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Hostname <span class="text-danger">*</span></label>
              <input type="text" class="form-control" name="hostname" required placeholder="RPI-Masa-01">
            </div>
            <div class="col-md-6">
              <label class="form-label">IP Address <span class="text-danger">*</span></label>
              <input type="text" class="form-control" name="device_ip" required placeholder="192.168.1.100">
            </div>
            <div class="col-md-6">
              <label class="form-label">Work Place <span class="text-danger">*</span></label>
              <input type="text" class="form-control" name="nume_masa" required placeholder="Masa-01">
            </div>
            <div class="col-md-6">
              <label class="form-label">MAC Address
                <small class="text-muted">(WMT clients only)</small>
              </label>
              <input type="text" class="form-control" name="mac_address"
                     placeholder="b8:27:eb:aa:bb:cc"
                     pattern="^([0-9a-fA-F]{2}:){5}[0-9a-fA-F]{2}$">
            </div>
            <div class="col-md-6">
              <label class="form-label">Device Type</label>
              <select class="form-select" name="device_type">
                <option value="Raspberry Pi">Raspberry Pi</option>
                <option value="PC">PC/Workstation</option>
                <option value="Server">Server</option>
                <option value="unknown" selected>Unknown</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">Status</label>
              <select class="form-select" name="status">
                <option value="active" selected>Active</option>
                <option value="inactive">Inactive</option>
                <option value="maintenance">Maintenance</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">Physical Location</label>
              <input type="text" class="form-control" name="location" placeholder="Floor 2, Room 201">
            </div>
            <div class="col-md-6">
              <label class="form-label">OS Version</label>
              <input type="text" class="form-control" name="os_version" placeholder="Raspberry Pi OS 11">
            </div>
            <div class="col-12">
              <label class="form-label">Description</label>
              <textarea class="form-control" name="description" rows="2"></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary"><i class="fas fa-save me-1"></i>Add Device</button>
        </div>
      </form>
    </div>
  </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
function filterTable() {
  const q = document.getElementById('deviceSearch').value.toLowerCase();
  document.querySelectorAll('.device-row').forEach(row => {
    row.style.display = row.dataset.search.includes(q) ? '' : 'none';
  });
}

async function submitAddDevice(event) {
  event.preventDefault();
  const data = Object.fromEntries(new FormData(event.target).entries());
  const btn = event.target.querySelector('[type=submit]');
  btn.disabled = true;
  try {
    const resp = await fetch('/api/devices/add', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(data)
    });
    const result = await resp.json();
    if (resp.ok) { location.reload(); }
    else { alert('Error: ' + (result.message || 'Unknown error')); }
  } catch(e) { alert('Error: ' + e.message); }
  finally { btn.disabled = false; }
}
</script>
{% endblock %}