// 设备列表页

async function loadDevices() {
    const resp = await fetch("/api/devices");
    const devices = await resp.json();
    renderTable(devices);
}

function renderTable(devices) {
    const tbody = document.querySelector("#device-table tbody");
    tbody.innerHTML = devices.map(d => `
        <tr>
            <td>${d.serial}</td>
            <td class="editable-name" onclick="editName(${d.id}, '${esc(d.name)}', this)">
                ${d.name || '(点击编辑)'}
            </td>
            <td>${d.ip || '-'}</td>
            <td class="${d.state === 1 ? 'status-online' : 'status-offline'}">
                ${d.state === 1 ? '在线' : '离线'}
            </td>
            <td>${d.version || '-'}</td>
            <td>${d.last_login || '-'}</td>
            <td>
                <button class="btn-test" onclick="location.href='/test/${d.id}'">测试</button>
                <button class="btn-config" onclick="location.href='/fixture/${d.id}'">配置</button>
            </td>
        </tr>
    `).join("");
}

function esc(s) { return s.replace(/'/g, "\\'").replace(/"/g, "&quot;"); }

async function editName(id, currentName, td) {
    const input = document.createElement("input");
    input.value = currentName;
    td.innerHTML = "";
    td.appendChild(input);
    input.focus();

    async function save() {
        const name = input.value.trim();
        td.textContent = name || "(点击编辑)";
        await fetch(`/api/devices/${id}/name`, {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ name }),
        });
    }

    input.addEventListener("blur", save);
    input.addEventListener("keydown", e => { if (e.key === "Enter") save(); });
}

loadDevices();