{% extends "shared/frontend/base.html" %}

{% block title %}ESET Test - Hardware - BMC Hub{% endblock %}

{% block extra_css %}
<style>
    .page-header {
        margin-bottom: 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .section-card {
        background: var(--bg-card);
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,0.1);
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .result-box {
        background: var(--bg-body);
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: 10px;
        padding: 1rem;
        max-height: 420px;
        overflow: auto;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 0.85rem;
        white-space: pre-wrap;
        word-break: break-word;
    }

    .btn-wide {
        min-width: 160px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid" style="margin-top: 2rem; max-width: 1200px;">
    <div class="page-header">
        <h1>🧪 ESET Test</h1>
        <div class="d-flex gap-2">
            <a href="/hardware/eset" class="btn btn-outline-secondary">ESET Oversigt</a>
            <a href="/hardware" class="btn btn-outline-secondary">Tilbage til hardware</a>
        </div>
    </div>

    <div class="section-card">
        <h5 class="mb-3">Test device list (raw)</h5>
        <div class="d-flex gap-2 flex-wrap mb-3">
            <button class="btn btn-primary btn-wide" onclick="loadDevices()">Hent devices</button>
            <button class="btn btn-outline-secondary btn-wide" onclick="clearOutput()">Ryd</button>
        </div>
        <div id="devicesOutput" class="result-box">Tryk "Hent devices" for at teste forbindelsen.</div>
    </div>

    <div class="section-card">
        <h5 class="mb-3">Test single device</h5>
        <div class="input-group mb-3">
            <input type="text" class="form-control" id="deviceUuid" placeholder="Device UUID">
            <button class="btn btn-primary" onclick="loadDevice()">Hent device</button>
        </div>
        <div id="deviceOutput" class="result-box">Indtast en UUID og klik "Hent device".</div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function setOutput(el, content) {
        el.textContent = content;
    }

    function clearOutput() {
        setOutput(document.getElementById('devicesOutput'), 'Rykket.');
        setOutput(document.getElementById('deviceOutput'), 'Rykket.');
    }

    async function loadDevices() {
        const output = document.getElementById('devicesOutput');
        setOutput(output, 'Henter devices...');
        try {
            const response = await fetch('/api/v1/hardware/eset/devices');
            if (!response.ok) {
                const err = await response.text();
                throw new Error(err || 'Request failed');
            }
            const data = await response.json();
            setOutput(output, JSON.stringify(data, null, 2));
        } catch (err) {
            setOutput(output, `Fejl: ${err.message}`);
        }
    }

    async function loadDevice() {
        const output = document.getElementById('deviceOutput');
        const uuid = (document.getElementById('deviceUuid').value || '').trim();
        if (!uuid) {
            setOutput(output, 'Indtast en device UUID.');
            return;
        }
        setOutput(output, 'Henter device...');
        try {
            const response = await fetch(`/api/v1/hardware/eset/test?device_uuid=${encodeURIComponent(uuid)}`);
            if (!response.ok) {
                const err = await response.text();
                throw new Error(err || 'Request failed');
            }
            const data = await response.json();
            setOutput(output, JSON.stringify(data, null, 2));
        } catch (err) {
            setOutput(output, `Fejl: ${err.message}`);
        }
    }
</script>
{% endblock %}