{% extends "base.html" %}
{% block title %}Devices – Location Management{% endblock %}

{% block content %}

{# ── Collect grouped data ─────────────────────────────────────────────────── #}
{% set named_areas = [] %}
{% for d in devices %}
  {% if d.area and d.area != '' and d.area not in named_areas %}
    {% set _ = named_areas.append(d.area) %}
  {% endif %}
{% endfor %}

{% set bound_count   = devices | selectattr('board') | list | length %}
{% set unbound_count = devices | length - bound_count %}

{# ── Page header ──────────────────────────────────────────────────────────── #}
<div class="d-flex align-items-center justify-content-between mb-3">
  <div>
    <h2 class="fw-bold mb-0">
      <i class="bi bi-hdd-stack me-2 text-info"></i>Devices
    </h2>
    <p class="text-secondary small mb-0 mt-1">
      Virtual devices are independent app entities — bind them to hardware when needed.
    </p>
  </div>
  {% if current_user.is_admin() %}
  <a href="{{ url_for('devices.add_device') }}" class="btn btn-primary">
    <i class="bi bi-plus-circle me-1"></i> Add Device
  </a>
  {% endif %}
</div>

{# ── Stats bar ─────────────────────────────────────────────────────────────── #}
{% if devices %}
<div class="row g-2 mb-4">
  <div class="col-4 col-md-3 col-lg-2">
    <div class="card border-0 rounded-3 text-center py-2 px-1" style="background:var(--bs-secondary-bg)">
      <div class="fw-bold fs-5 mb-0">{{ devices | length }}</div>
      <div class="text-secondary" style="font-size:.72rem">Total</div>
    </div>
  </div>
  <div class="col-4 col-md-3 col-lg-2">
    <div class="card border-0 rounded-3 text-center py-2 px-1" style="background:var(--bs-secondary-bg)">
      <div class="fw-bold fs-5 mb-0 text-success">{{ bound_count }}</div>
      <div class="text-secondary" style="font-size:.72rem">Bound</div>
    </div>
  </div>
  <div class="col-4 col-md-3 col-lg-2">
    <div class="card border-0 rounded-3 text-center py-2 px-1" style="background:var(--bs-secondary-bg)">
      <div class="fw-bold fs-5 mb-0 text-warning">{{ unbound_count }}</div>
      <div class="text-secondary" style="font-size:.72rem">Unbound</div>
    </div>
  </div>
</div>

{# ── Search ────────────────────────────────────────────────────────────────── #}
<div class="mb-4">
  <div class="input-group input-group-sm" style="max-width:340px">
    <span class="input-group-text"><i class="bi bi-search"></i></span>
    <input type="text" class="form-control" id="deviceSearch"
           placeholder="Filter by name, area or app id…">
    <button class="btn btn-outline-secondary" type="button" id="deviceSearchClear">
      <i class="bi bi-x"></i>
    </button>
  </div>
</div>

{# ── Area groups ──────────────────────────────────────────────────────────── #}
{% for area in named_areas %}
<h5 class="text-secondary fw-semibold mb-3 mt-3 area-heading">
  <i class="bi bi-geo-alt me-1"></i>{{ area }}
</h5>
<div class="row g-3 mb-2">
  {% for device in devices %}
  {% if device.area == area %}
  <div class="col-md-6 col-xl-4 device-row" id="device-card-{{ device.id }}"
       data-name="{{ device.name | lower }}"
       data-area="{{ (device.area or '') | lower }}"
       data-appid="{{ (device.app_id or '') | lower }}">
    {% include "devices/_card.html" %}
  </div>
  {% endif %}
  {% endfor %}
</div>
{% endfor %}

{# ── Unbound / no-area devices ─────────────────────────────────────────────── #}
{% set ungrouped = [] %}
{% for d in devices %}
  {% if not d.area or d.area == '' %}
    {% set _ = ungrouped.append(d) %}
  {% endif %}
{% endfor %}

{% if ungrouped %}
  {% if named_areas %}
  <h5 class="text-secondary fw-semibold mb-3 mt-3 area-heading">
    <i class="bi bi-three-dots me-1"></i>Other
  </h5>
  {% endif %}
  <div class="row g-3 mb-2">
    {% for device in ungrouped %}
    <div class="col-md-6 col-xl-4 device-row" id="device-card-{{ device.id }}"
         data-name="{{ device.name | lower }}"
         data-area=""
         data-appid="{{ (device.app_id or '') | lower }}">
      {% include "devices/_card.html" %}
    </div>
    {% endfor %}
  </div>
{% endif %}

{% else %}
<div class="text-center py-5 text-secondary">
  <i class="bi bi-hdd-stack display-4 d-block mb-3 opacity-25"></i>
  <p class="mb-1">No devices defined yet.</p>
  {% if current_user.is_admin() %}
  <a href="{{ url_for('devices.add_device') }}" class="btn btn-sm btn-outline-primary mt-2">
    <i class="bi bi-plus-circle me-1"></i> Add your first device
  </a>
  {% endif %}
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
// ── toggle relay / Tuya / Sonoff ──────────────────────────────────────────────
function deviceToggle(btn, deviceId) {
  btn.disabled = true;
  fetch(`/devices/${deviceId}/toggle`, {
    method: "POST",
    headers: {"X-Requested-With": "XMLHttpRequest"}
  })
  .then(r => r.json())
  .then(data => {
    if (!data.ok) {
      btn.disabled = false;
      showToast(data.error || "Toggle failed.", "danger");
      return;
    }
    const card = document.getElementById("device-card-" + deviceId);
    const badge = card.querySelector(".device-state-badge");
    if (badge) {
      badge.className = "badge device-state-badge text-bg-" + data.state_color;
      badge.textContent = data.state_label;
    }
    btn.className = btn.className.replace(/btn-(outline-)?[a-z]+/, "btn-" + data.state_color);
    btn.innerHTML = data.state
      ? '<i class="bi bi-power me-1"></i>ON'
      : '<i class="bi bi-power me-1"></i>OFF';
    // Update left border colour
    const cardEl = card.querySelector(".card");
    if (cardEl) {
      cardEl.classList.remove("border-success", "border-secondary", "border-warning",
                              "border-danger", "border-info", "border-primary");
      cardEl.classList.add("border-" + data.state_color);
    }
    btn.disabled = false;
  })
  .catch(() => { btn.disabled = false; showToast("Network error.", "danger"); });
}

function showToast(msg, type) {
  let container = document.getElementById("toast-container");
  if (!container) {
    container = document.createElement("div");
    container.id = "toast-container";
    container.className = "toast-container position-fixed bottom-0 end-0 p-3";
    container.style.zIndex = 1100;
    document.body.appendChild(container);
  }
  const id = "t" + Date.now();
  container.insertAdjacentHTML("beforeend",
    `<div id="${id}" class="toast align-items-center text-bg-${type} border-0" role="alert">
      <div class="d-flex">
        <div class="toast-body">${msg}</div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
      </div>
    </div>`);
  const el = document.getElementById(id);
  const t = new bootstrap.Toast(el, {delay: 4000});
  t.show();
  el.addEventListener("hidden.bs.toast", () => el.remove());
}

// ── app_id copy ───────────────────────────────────────────────────────────────
document.addEventListener("click", e => {
  const btn = e.target.closest(".copy-app-id");
  if (!btn) return;
  const txt = btn.dataset.appid;
  navigator.clipboard.writeText(txt).then(() => {
    const orig = btn.innerHTML;
    btn.innerHTML = '<i class="bi bi-check2"></i>';
    setTimeout(() => { btn.innerHTML = orig; }, 1200);
  });
});

// ── search / filter ────────────────────────────────────────────────────────────
const searchInput = document.getElementById("deviceSearch");
const searchClear = document.getElementById("deviceSearchClear");
if (searchInput) {
  function applyFilter() {
    const q = searchInput.value.toLowerCase().trim();
    let anyVisible = {};
    document.querySelectorAll(".device-row").forEach(row => {
      const match = !q
        || row.dataset.name.includes(q)
        || row.dataset.area.includes(q)
        || row.dataset.appid.includes(q);
      row.style.display = match ? "" : "none";
      const heading = row.closest(".row")?.previousElementSibling;
      if (heading && heading.classList.contains("area-heading")) {
        anyVisible[heading.dataset.id || heading.textContent] = (anyVisible[heading.dataset.id || heading.textContent] || false) || match;
      }
    });
    // Hide area headings whose entire group is filtered out
    document.querySelectorAll(".area-heading").forEach(h => {
      const nextRow = h.nextElementSibling;
      if (!nextRow) return;
      const visCount = nextRow.querySelectorAll(".device-row:not([style*='none'])").length;
      h.style.display = visCount ? "" : "none";
    });
  }
  searchInput.addEventListener("input", applyFilter);
  searchClear.addEventListener("click", () => { searchInput.value = ""; applyFilter(); });
}
</script>
{% endblock %}