{% extends "base.html" %}

{% block title %}{{ device.hostname }} – {{ app_name }}{% endblock %}
{% block page_title %}Device: {{ device.hostname }}{% endblock %}

{% block extra_css %}
<style>
.severity-debug    { color: #6c757d; }
.severity-info     { color: #0dcaf0; }
.severity-warning  { color: #ffc107; }
.severity-error    { color: #dc3545; }
.severity-critical { color: #b02a37; font-weight: 600; }
.log-row td        { font-size: 0.83rem; padding: 0.35rem 0.6rem; vertical-align: middle; }
.info-label        { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6c757d; }
</style>
{% endblock %}

{% block content %}

<!-- Breadcrumb -->
<nav aria-label="breadcrumb" class="mb-3">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{ url_for('main.devices') }}">Devices</a></li>
    <li class="breadcrumb-item active">{{ device.hostname }}</li>
  </ol>
</nav>

<!-- Header card -->
<div class="card mb-4">
  <div class="card-body">
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
      <div>
        <h4 class="mb-1">
          {{ device.nume_masa or device.hostname }}
          {% if device.status == 'active' %}
            <span class="badge bg-success ms-2">Active</span>
          {% elif device.status == 'maintenance' %}
            <span class="badge bg-warning text-dark ms-2">Maintenance</span>
          {% else %}
            <span class="badge bg-danger ms-2">Offline</span>
          {% endif %}
          {% if device.mac_address %}
            <span class="badge bg-info ms-1" title="WMT Client">WMT</span>
          {% endif %}
        </h4>
        <div class="text-muted">{{ device.hostname }} &bull; <code>{{ device.device_ip }}</code></div>
      </div>
      <div class="d-flex gap-2">
        <a href="{{ url_for('main.device_edit', device_id=device.id) }}" class="btn btn-outline-secondary btn-sm">
          <i class="fas fa-edit me-1"></i>Edit
        </a>
        <a href="{{ url_for('main.logs') }}?device_id={{ device.id }}" class="btn btn-outline-info btn-sm">
          <i class="fas fa-list me-1"></i>All Logs
        </a>
        <a href="{{ url_for('main.devices') }}" class="btn btn-outline-primary btn-sm">
          <i class="fas fa-arrow-left me-1"></i>Back
        </a>
      </div>
    </div>
  </div>
</div>

<div class="row g-3 mb-4">
  <!-- Device info -->
  <div class="col-lg-5">
    <div class="card h-100">
      <div class="card-header"><i class="fas fa-info-circle me-2"></i>Device Info</div>
      <div class="card-body">
        <table class="table table-sm table-borderless mb-0">
          <tr>
            <td class="info-label">Hostname</td>
            <td>{{ device.hostname }}</td>
          </tr>
          <tr>
            <td class="info-label">IP Address</td>
            <td><code>{{ device.device_ip }}</code></td>
          </tr>
          <tr>
            <td class="info-label">Work Place</td>
            <td>{{ device.nume_masa or '—' }}</td>
          </tr>
          <tr>
            <td class="info-label">Type</td>
            <td>{{ device.device_type or '—' }}</td>
          </tr>
          <tr>
            <td class="info-label">OS</td>
            <td>{{ device.os_version or '—' }}</td>
          </tr>
          <tr>
            <td class="info-label">Location</td>
            <td>{{ device.location or '—' }}</td>
          </tr>
          {% if device.description %}
          <tr>
            <td class="info-label">Description</td>
            <td>{{ device.description }}</td>
          </tr>
          {% endif %}
          <tr>
            <td class="info-label">Last Seen</td>
            <td>{{ device.last_seen | local_dt('%Y-%m-%d %H:%M:%S') if device.last_seen else '—' }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>

  <!-- Stats + WMT -->
  <div class="col-lg-7">
    <div class="row g-3 h-100">
      <!-- Log stats -->
      <div class="col-sm-4">
        <div class="card text-center h-100">
          <div class="card-body py-3">
            <h3 class="mb-0">{{ log_stats.total }}</h3>
            <small class="text-muted">Total Logs</small>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="card text-center h-100">
          <div class="card-body py-3">
            <h3 class="mb-0 text-info">{{ log_stats.last_24h }}</h3>
            <small class="text-muted">Last 24 h</small>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="card text-center h-100">
          <div class="card-body py-3">
            <h3 class="mb-0 text-danger">{{ log_stats.by_severity.get('error', 0) + log_stats.by_severity.get('critical', 0) }}</h3>
            <small class="text-muted">Errors</small>
          </div>
        </div>
      </div>

      {% if device.mac_address %}
      <!-- WMT info -->
      <div class="col-12">
        <div class="card border-info">
          <div class="card-header text-info"><i class="fas fa-sliders-h me-2"></i>WMT Client Info</div>
          <div class="card-body">
            <table class="table table-sm table-borderless mb-0">
              <tr>
                <td class="info-label">MAC Address</td>
                <td><code>{{ device.mac_address }}</code></td>
              </tr>
              <tr>
                <td class="info-label">Config Updated</td>
                <td>{{ device.config_updated_at | local_dt('%Y-%m-%d %H:%M:%S') if device.config_updated_at else 'Never' }}</td>
              </tr>
              <tr>
                <td class="info-label">Info Reviewed</td>
                <td>
                  {% if device.info_reviewed_at and device.info_reviewed_at.year > 1970 %}
                    <span class="text-success">{{ device.info_reviewed_at | local_dt('%Y-%m-%d %H:%M:%S') }}</span>
                  {% else %}
                    <span class="text-muted">Never reviewed</span>
                  {% endif %}
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      {% endif %}

      <!-- Severity breakdown -->
      {% if log_stats.by_severity %}
      <div class="col-12">
        <div class="card">
          <div class="card-header"><i class="fas fa-chart-bar me-2"></i>Severity Breakdown</div>
          <div class="card-body py-2">
            <div class="d-flex flex-wrap gap-2">
              {% for sev, cnt in log_stats.by_severity.items() %}
              <span class="badge bg-secondary">{{ sev }}: {{ cnt }}</span>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</div>

<!-- Recent logs -->
<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span><i class="fas fa-list-alt me-2"></i>Recent Logs <small class="text-muted">(last 100)</small></span>
    <a href="{{ url_for('main.logs') }}?device_id={{ device.id }}" class="btn btn-sm btn-outline-secondary">
      View All
    </a>
  </div>
  <div class="card-body p-0">
    {% if logs %}
    <div class="table-responsive">
      <table class="table table-hover mb-0">
        <thead class="table-light">
          <tr class="log-row">
            <th>Timestamp</th>
            <th>Severity</th>
            <th>Message</th>
          </tr>
        </thead>
        <tbody>
          {% for log in logs %}
          <tr class="log-row">
            <td class="text-nowrap text-muted">{{ log.timestamp | local_dt('%Y-%m-%d %H:%M:%S') if log.timestamp else '—' }}</td>
            <td>
              <span class="severity-{{ log.severity }}">
                <i class="fas fa-circle fa-xs me-1"></i>{{ log.severity }}
              </span>
            </td>
            <td>{{ log.resolved_message or '—' }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="text-muted text-center py-5 mb-0">
      <i class="fas fa-inbox fa-2x d-block mb-2"></i>No logs for this device yet.
    </p>
    {% endif %}
  </div>
</div>

{% endblock %}