{% extends "base.html" %}

{% block title %}Select Devices — Dashboard{% endblock %}

{% block content %}
<h1>Dashboard</h1>
<h2>Select devices to plot</h2>

{% if error %}
    <div class="flash danger">{{ error }}</div>
{% endif %}

<form method="POST">
    <div id="device-list">
        {% for device in devices %}
        <div class="device-option" data-device-id="{{ device.id }}">
            <label>
                <input
                    type="checkbox"
                    name="device_ids"
                    value="{{ device.id }}"
                    {% if device.id in saved_ids %}checked{% endif %}
                >
                <strong>{{ device.name }}</strong>
                <span class="status-indicator">—</span>
                <span>
                    {% if device.type %}<span class="tag">{{ device.type }}</span>{% endif %}
                    {% if device.location %}<span class="tag">{{ device.location }}</span>{% endif %}
                </span>
                {% if device.info %}<p class="device-meta">{{ device.info }}</p>{% endif %}
            </label>
            <button type="button" class="expand-btn" data-id="{{ device.id }}">▶ Details</button>
            <div class="device-details" id="details-{{ device.id }}" style="display:none;"></div>
        </div>
        {% endfor %}
    </div>

    <div class="form-actions">
        <button type="submit" class="primary-btn">View Plots →</button>
    </div>
</form>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>

/* =====================================================
   STATUS
===================================================== */
const WARN_SECONDS  = 5  * 60;   // amber  — no response for 5 min
const STALE_SECONDS = 30 * 60;   // red    — no response for 30 min

async function loadStatuses() {
    try {
        const resp = await fetch("/dash/devices/status");
        const statuses = await resp.json();

        for (const [id, status] of Object.entries(statuses)) {
            const card = document.querySelector(`.device-option[data-device-id="${id}"]`);
            if (!card) continue;

            const indicator = card.querySelector(".status-indicator");
            const age = status.age_seconds;

            if (age === null) {
                indicator.textContent = "NO DATA";
                indicator.className = "status-indicator status-nodata";
            } else if (age > STALE_SECONDS) {
                indicator.textContent = `STALE — ${formatAge(age)}`;
                indicator.className = "status-indicator status-stale";
                card.classList.add("card-stale");
            } else if (age > WARN_SECONDS) {
                indicator.textContent = `SLOW — ${formatAge(age)}`;
                indicator.className = "status-indicator status-warn";
                card.classList.add("card-warn");
            } else {
                indicator.textContent = `OK — ${formatAge(age)}`;
                indicator.className = "status-indicator status-ok";
            }
        }
    } catch (err) {
        console.error("Status fetch failed:", err);
    }
}

function formatAge(seconds) {
    if (seconds < 60)   return `${seconds}s ago`;
    if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
    return `${Math.floor(seconds / 3600)}h ago`;
}

loadStatuses();

/* =====================================================
   EXPAND DETAILS
===================================================== */
function buildDetails(data) {
    const { device, sensors, controls } = data;

    const deviceFields = ["guid", "type", "location", "info", "active", "num_sensors"];
    let html = `<div class="detail-section">`;
    html += `<table class="detail-table">`;
    deviceFields.forEach(key => {
        if (device[key] !== undefined && device[key] !== "") {
            html += `<tr><td class="detail-key">${key}</td><td>${device[key]}</td></tr>`;
        }
    });
    html += `</table>`;

    if (sensors.length) {
        html += `<p class="detail-heading">Sensors</p>`;
        sensors.forEach(s => {
            html += `<div class="detail-sub">`;
            html += `<p class="detail-sub-title">${s.sens_name}</p>`;
            html += `<table class="detail-table">`;
            Object.entries(s).filter(([k]) => k !== "sens_name").forEach(([k, v]) => {
                if (v) html += `<tr><td class="detail-key">${k}</td><td>${v}</td></tr>`;
            });
            html += `</table></div>`;
        });
    }

    if (controls.length) {
        html += `<p class="detail-heading">Controls</p>`;
        controls.forEach(c => {
            html += `<div class="detail-sub">`;
            html += `<p class="detail-sub-title">${c.ctl_name}</p>`;
            html += `<table class="detail-table">`;
            Object.entries(c).filter(([k]) => k !== "ctl_name").forEach(([k, v]) => {
                if (v) html += `<tr><td class="detail-key">${k}</td><td>${v}</td></tr>`;
            });
            html += `</table></div>`;
        });
    }

    html += `</div>`;
    return html;
}

document.querySelectorAll(".expand-btn").forEach(btn => {
    btn.addEventListener("click", async (e) => {
        e.preventDefault();
        const id = btn.dataset.id;
        const detailsDiv = document.getElementById(`details-${id}`);
        const isOpen = detailsDiv.style.display === "block";

        if (isOpen) {
            detailsDiv.style.display = "none";
            btn.textContent = "▶ Details";
            return;
        }

        if (!detailsDiv.dataset.loaded) {
            btn.textContent = "Loading...";
            try {
                const resp = await fetch(`/dash/device/${id}`);
                const data = await resp.json();
                detailsDiv.innerHTML = buildDetails(data);
                detailsDiv.dataset.loaded = "true";
            } catch (err) {
                detailsDiv.innerHTML = `<p class="device-meta">Failed to load details.</p>`;
            }
        }

        detailsDiv.style.display = "block";
        btn.textContent = "▼ Details";
    });
});
</script>
{% endblock %}