{% extends "base.html" %}

{% block title %}Devices Submitted{% endblock %}

{% block content %}
<h1>Devices Submitted Successfully!</h1>

<button id="toggle-raw-btn" class="secondary-btn">Show Raw JSON</button>

<div id="devices-container" class="submitted-devices"></div>

<pre id="raw-json" class="raw-json" style="display:none;"></pre>

<p id="raw-json-msg" class="raw-json-msg" style="display:none;">
    You are viewing the raw JSON. You can copy it for backup or import.
</p>

<div class="json-buttons">
    <button id="copy-json-btn" class="secondary-btn danger">Copy JSON</button>
    <button id="download-json-btn" class="secondary-btn">Download JSON</button>
</div>

<a href="{{ url_for('setup.setup_log') }}" class="back-link">← Back to setup</a>

{% if config.QUICK_START %}
<script>
setInterval(() => {
    fetch('/heartbeat', {
        method: 'POST',
        keepalive: true
    });
}, 2000);
</script>
{% endif %}
{% endblock %}

{% block scripts %}
{{ super() }}

<script id="devices-data" type="application/json">{{ data | safe }}</script>

<script>
const data = JSON.parse(document.getElementById("devices-data").textContent);

/* =====================================================
   HELPERS
===================================================== */

// Keys that are rendered as sub-sections, not scalar fields
const SUB_KEYS = new Set(["sensors", "controls"]);

/**
 * Build a <ul> of key: value items from an object,
 * skipping any keys in the exclusion set.
 */
function buildFieldList(obj, skip = new Set()) {
    const ul = document.createElement("ul");
    for (const [key, val] of Object.entries(obj)) {
        if (skip.has(key)) continue;
        const li = document.createElement("li");
        li.textContent = `${key}: ${val}`;
        ul.appendChild(li);
    }
    return ul;
}

/**
 * Build a collapsible sub-section (sensor or control).
 *
 * @param {string} label     - heading text e.g. "Sensor 1: temp"
 * @param {object} obj       - the sensor/control data object
 * @param {string} headerCls - CSS class for the toggle button
 * @param {string} wrapperCls
 * @param {string} detailsCls
 */
function buildSubSection(label, obj, headerCls, wrapperCls, detailsCls) {
    const wrapper = document.createElement("div");
    wrapper.className = wrapperCls;

    const header = document.createElement("button");
    header.className = headerCls;
    header.textContent = label;

    const details = document.createElement("div");
    details.className = detailsCls;
    details.style.display = "none";
    details.appendChild(buildFieldList(obj));

    header.addEventListener("click", () => {
        details.style.display = details.style.display === "none" ? "block" : "none";
    });

    wrapper.appendChild(header);
    wrapper.appendChild(details);
    return wrapper;
}

/* =====================================================
   DEVICE SECTION
===================================================== */
function createDeviceSection(device, index) {
    const container = document.createElement("div");
    container.className = "submitted-device";

    const header = document.createElement("button");
    header.className = "device-header";
    header.textContent = `Device ${index + 1}: ${device.device_name}`;

    const details = document.createElement("div");
    details.className = "submitted-device-details";
    details.style.display = "block";

    // Scalar device fields — skip sub-arrays and device_name (shown in header)
    const scalarSkip = new Set([...SUB_KEYS, "device_name"]);
    details.appendChild(buildFieldList(device, scalarSkip));

    // Sensors
    if (device.sensors?.length) {
        const sensorsHeading = document.createElement("h4");
        sensorsHeading.textContent = `Sensors (${device.sensors.length})`;
        details.appendChild(sensorsHeading);

        device.sensors.forEach((sensor, idx) => {
            const label = `Sensor ${idx + 1}: ${sensor.sens_name ?? ""}`;
            details.appendChild(
                buildSubSection(label, sensor,
                    "sensor-header", "submitted-sensor", "submitted-sensor-details")
            );
        });
    }

    // Controls
    if (device.controls?.length) {
        const controlsHeading = document.createElement("h4");
        controlsHeading.textContent = `Controls (${device.controls.length})`;
        details.appendChild(controlsHeading);

        device.controls.forEach((control, idx) => {
            const label = `Control ${idx + 1}: ${control.ctl_name ?? ""}`;
            details.appendChild(
                buildSubSection(label, control,
                    "sensor-header", "submitted-sensor", "submitted-sensor-details")
            );
        });
    }

    header.addEventListener("click", () => {
        details.style.display = details.style.display === "none" ? "block" : "none";
    });

    container.appendChild(header);
    container.appendChild(details);
    return container;
}

/* Render devices */
const devicesContainer = document.getElementById("devices-container");
data.devices.forEach((device, idx) => {
    devicesContainer.appendChild(createDeviceSection(device, idx));
});

/* =====================================================
   RAW JSON VIEW
===================================================== */
function syntaxHighlight(json) {
    if (typeof json !== "string") json = JSON.stringify(json, null, 2);
    json = json.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    return json.replace(
        /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(?:\s*:)?|\b(true|false|null)\b|\b\d+\.?\d*\b)/g,
        match => {
            let cls = "number";
            if (/^"/.test(match)) cls = /:$/.test(match) ? "key" : "string";
            else if (/true|false/.test(match)) cls = "boolean";
            else if (/null/.test(match)) cls = "null";
            return `<span style="${getStyle(cls)}">${match}</span>`;
        }
    );
}

function getStyle(cls) {
    switch (cls) {
        case "key":     return "color:#fca5a5;font-weight:bold;";
        case "string":  return "color:#86efac;";
        case "number":  return "color:#93c5fd;";
        case "boolean": return "color:#c4b5fd;font-weight:bold;";
        case "null":    return "color:#f87171;font-style:italic;";
        default:        return "";
    }
}

const toggleBtn   = document.getElementById("toggle-raw-btn");
const rawJsonPre  = document.getElementById("raw-json");
const rawJsonMsg  = document.getElementById("raw-json-msg");
const copyBtn     = document.getElementById("copy-json-btn");
const downloadBtn = document.getElementById("download-json-btn");

rawJsonPre.innerHTML = syntaxHighlight(data);

toggleBtn.addEventListener("click", () => {
    const showingRaw = rawJsonPre.style.display === "block";
    rawJsonPre.style.display      = showingRaw ? "none"  : "block";
    rawJsonMsg.style.display      = showingRaw ? "none"  : "block";
    devicesContainer.style.display = showingRaw ? "block" : "none";
    toggleBtn.textContent = showingRaw ? "Show Raw JSON" : "Show Collapsible View";
});

/* =====================================================
   COPY / DOWNLOAD
===================================================== */
copyBtn.addEventListener("click", () => {
    const jsonStr = JSON.stringify(data, null, 2);
    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(jsonStr)
            .then(() => copyBtn.textContent = "Copied ✓")
            .catch(() => fallbackCopy(jsonStr));
    } else {
        fallbackCopy(jsonStr);
    }
    setTimeout(() => copyBtn.textContent = "Copy JSON", 1500);
});

function fallbackCopy(text) {
    const textarea = document.createElement("textarea");
    textarea.value = text;
    textarea.style.cssText = "position:fixed;opacity:0;";
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    document.body.removeChild(textarea);
}

downloadBtn.addEventListener("click", () => {
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
    const url  = URL.createObjectURL(blob);
    const a    = Object.assign(document.createElement("a"), { href: url, download: "device_info.json" });
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
});
</script>

<style>
.submitted-device, .submitted-sensor {
    border: 1px solid #ddd;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
}

.device-header, .sensor-header {
    display: block;
    width: 100%;
    text-align: left;
    background: #f3f3f3;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    margin-bottom: 0.25rem;
}

.submitted-device-details, .submitted-sensor-details {
    padding-left: 1rem;
}
</style>
{% endblock %}