{% extends "base.html" %}
{% block title %}Szczegóły urządzenia - RouterOS Update{% endblock %}

{% block extra_head %}
<style>
/* ========================
   Tryb ciemny i styl kart
======================== */
body.dark-mode .card {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border-color: #444;
}
body.dark-mode .card .card-header.bg-primary,
body.dark-mode .card .card-header.bg-secondary {
  background-color: #333 !important;
  border-bottom: 1px solid #444;
}
  
/* Blok logów – przewijalny, zachowanie białych znaków, 
   jasne/dark tło zgodnie z kartą */
.log-block {
  background-color: inherit; 
  color: inherit;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* Overlays (system-update / reboot) */
#system-update-overlay, 
#reboot-progress-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
  color: white;
  text-align: center;
  padding-top: 200px;
}

#system-update-overlay h3, 
#reboot-progress-overlay h3 {
  margin-bottom: 20px;
}

.progress-container {
  width: 50%;
  margin: 20px auto;
  background: #444;
  border-radius: 5px;
  overflow: hidden;
}
.progress-bar {
  width: 0%;
  height: 30px;
  background: #4caf50;
  border-radius: 5px;
  transition: width 0.5s linear;
}

/* Div do firmware restart (informacja i przycisk) */
#firmware-restart-div {
  display: none; 
  margin-top: 20px;
}
</style>
{% endblock %}

{% block content %}
<div class="container my-4">
  
  <!-- Nagłówek strony z nawigacją breadcrumb -->
  <h2 class="mb-3">Szczegóły urządzenia</h2>
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="{{ url_for('devices') }}">Urządzenia</a></li>
      <li class="breadcrumb-item active" aria-current="page">{{ device.ip }}</li>
    </ol>
  </nav>
  
  <!-- Dwukolumnowy układ: kolumna z danymi urządzenia, kolumna z info systemu -->
  <div class="row">
    <div class="col-md-6">
      <div class="card border-0 shadow mb-3">
        <div class="card-header bg-primary text-white">
          Dane urządzenia
        </div>
        <div class="card-body">
          <p><strong>Adres IP:</strong> {{ device.ip }}</p>
          <p><strong>Port:</strong> {{ device.port }}</p>
          <p>
            <strong>Ostatnie sprawdzenie:</strong>
            {% if device.last_check %}
              {{ device.last_check.strftime('%Y-%m-%d %H:%M:%S') }}
            {% else %}
              Brak
            {% endif %}
          </p>
          <p>
            <strong>System:</strong> {{ device.current_version or 'Brak' }}<br>
            <strong>Firmware:</strong> {{ device.current_firmware or 'N/A' }}<br>
            <strong>Upgrade Firmware:</strong> {{ device.upgrade_firmware or 'N/A' }}
          </p>
          <p>
            <strong>Branch aktualizacji:</strong> {{ device.branch|capitalize }}
          </p>
          
          <!-- Formularz szybkiej zmiany branch -->
          <form method="POST" action="{{ url_for('edit_device', device_id=device.id) }}" class="mt-3">
            <div class="input-group">
              <select class="form-select" name="branch">
                <option value="stable" {% if device.branch == 'stable' %}selected{% endif %}>Stable</option>
                <option value="dev" {% if device.branch == 'dev' %}selected{% endif %}>Dev</option>
                <option value="beta" {% if device.branch == 'beta' %}selected{% endif %}>Beta</option>
              </select>
              <button type="submit" class="btn btn-primary">Zmień branch</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    
    <div class="col-md-6">
      <div class="card border-0 shadow mb-3">
        <div class="card-header bg-primary text-white">
          Informacje o systemie
        </div>
        <div class="card-body">
          {% if resource.error %}
            <div class="alert alert-danger" role="alert">
              Błąd pobierania danych: {{ resource.error }}
            </div>
          {% else %}
            <p><strong>Wersja systemu:</strong> {{ resource.version or 'Brak danych' }}</p>
            <p><strong>Czas pracy (uptime):</strong> {{ resource.uptime or 'Brak danych' }}</p>
            <p><strong>Obciążenie CPU:</strong> 
              {% if resource['cpu-load'] is defined %}
                {{ resource['cpu-load'] }}%
              {% else %}
                Brak danych
              {% endif %}
            </p>
            <p>
              <strong>Pamięć:</strong>
              {% if resource['free-memory'] and resource['total-memory'] %}
                {{ resource['free-memory'] }} wolnej / {{ resource['total-memory'] }} całkowita
              {% else %}
                Brak danych
              {% endif %}
            </p>
            <p>
              <strong>Wolne miejsce na dysku:</strong>
              {% if resource['free-hdd-space'] %}
                {{ resource['free-hdd-space'] }}
              {% else %}
                Brak danych
              {% endif %}
            </p>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  
  <!-- Logi urządzenia -->
  <div class="card border-0 shadow mb-3">
    <div class="card-header bg-secondary text-white">Logi urządzenia</div>
    <div class="card-body">
      {% if device.last_log %}
        <div class="log-block">
          {{ device.last_log }}
        </div>
      {% else %}
        <p>Brak logów</p>
      {% endif %}
    </div>
  </div>
  
  <!-- Akcje urządzenia: aktualizacje, wymuszenie sprawdzenia -->
  <div class="mb-4 d-flex flex-wrap gap-2">
    <!-- Aktualizacja systemu -->
    <form id="system-update-form" method="POST" action="{{ url_for('update_device', device_id=device.id) }}">
      <button type="submit" class="btn btn-warning">Aktualizuj system</button>
    </form>
    <!-- Aktualizacja firmware -->
    <form id="firmware-update-form" method="POST" action="{{ url_for('update_firmware', device_id=device.id) }}">
      <button type="submit" class="btn btn-danger">Aktualizuj firmware</button>
    </form>
    <!-- Wymuszenie sprawdzenia -->
    <a href="{{ url_for('force_check', device_id=device.id) }}" class="btn btn-secondary">Wymuś sprawdzenie</a>
    <!-- Link powrotny do listy -->
    <a href="{{ url_for('devices') }}" class="btn btn-outline-secondary ms-auto">Powrót</a>
  </div>
  
  <!-- Miejsce na komunikat o konieczności rebootu po firmware update -->
  <div id="firmware-restart-div">
    <div class="alert alert-warning mb-3">
      Urządzenie wymaga restartu po aktualizacji firmware.
    </div>
    <button id="restart-device-btn" class="btn btn-danger">Restart urządzenia</button>
  </div>
  
  <!-- Overlay: system update (4 min. można dać 5 min) -->
  <div id="system-update-overlay">
    <h3>Aktualizacja systemu rozpoczęta...</h3>
    <div class="progress-container">
      <div id="system-update-progress" class="progress-bar"></div>
    </div>
    <p id="system-update-timer">240 sekund</p>
  </div>

  <!-- Overlay: reboot po restarcie (2 min) -->
  <div id="reboot-progress-overlay">
    <h3>Restart urządzenia...</h3>
    <div class="progress-container">
      <div id="reboot-progress-bar" class="progress-bar"></div>
    </div>
    <p id="reboot-timer">120 sekund</p>
  </div>
</div>

<script>
// ========================
// Obsługa aktualizacji systemu
// ========================
document.getElementById('system-update-form').addEventListener('submit', function(e) {
  e.preventDefault(); // powstrzymujemy normalne przeładowanie
  // Pokaż overlay postępu
  var overlay = document.getElementById('system-update-overlay');
  overlay.style.display = 'block';
  
  var timeLeft = 240; // 4 min
  var progressBar = document.getElementById('system-update-progress');
  var timerDisplay = document.getElementById('system-update-timer');
  
  var interval = setInterval(function(){
    timeLeft--;
    var percent = ((240 - timeLeft) / 240) * 100;
    progressBar.style.width = percent + '%';
    timerDisplay.textContent = timeLeft + ' sekund';
    if(timeLeft <= 0){
      clearInterval(interval);
      // Po zakończeniu: fetch do force_check, potem reload
      fetch('{{ url_for("force_check", device_id=device.id) }}', { method: 'GET' })
        .then(()=> location.reload())
        .catch((err)=> console.error('Błąd force check:', err));
    }
  }, 1000);
  
  // Wyślij POST do update
  fetch(this.action, { method: 'POST' })
    .catch(err => console.error('Błąd aktualizacji systemu:', err));
});

// ========================
// Obsługa aktualizacji firmware
// ========================
document.getElementById('firmware-update-form').addEventListener('submit', function(e) {
  e.preventDefault();
  fetch(this.action, { method: 'POST' })
    .catch(err => console.error('Błąd aktualizacji firmware:', err));
  // Pokazujemy div z przyciskiem do restartu
  document.getElementById('firmware-restart-div').style.display = 'block';
});

// ========================
// Obsługa reboot
// ========================
document.getElementById('restart-device-btn').addEventListener('click', function(){
  fetch('{{ url_for("restart_device", device_id=device.id) }}', { method: 'POST' })
    .then(response => {
      if (response.ok) {
        alert('Komenda reboot wysłana.');
        // Pokaż overlay z 2 min postępu
        var overlay = document.getElementById('reboot-progress-overlay');
        overlay.style.display = 'block';
        
        var timeLeft = 120; // 2 min
        var progressBar = document.getElementById('reboot-progress-bar');
        var timerDisplay = document.getElementById('reboot-timer');
        var interval = setInterval(function(){
          timeLeft--;
          var percent = ((120 - timeLeft) / 120) * 100;
          progressBar.style.width = percent + '%';
          timerDisplay.textContent = timeLeft + ' sekund';
          if(timeLeft <= 0){
            clearInterval(interval);
            // Po zakończeniu: fetch do force_check
            fetch('{{ url_for("force_check", device_id=device.id) }}', { method: 'GET' })
              .then(()=> location.reload())
              .catch(err => console.error('Błąd force check:', err));
          }
        }, 1000);
      } else {
        alert('Błąd podczas wysyłania komendy reboot.');
      }
    })
    .catch(err => alert('Błąd: ' + err));
});
</script>
{% endblock %}