<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Endurance Test Bench</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .status-indicator {
            display: inline-block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
        }
        .status-unknown {
            background-color: gray;
        }
        .valve-table-wrapper {
            max-height: 500px;
            overflow-y: auto;
        }
    </style>
</head>
<body class="bg-light text-dark">
<div class="container-fluid p-4">
    <div class="row mb-4">
        <div class="col-12 d-flex justify-content-between align-items-center flex-wrap">
            <div class="mb-2 mb-md-0">
                <button id="startTest" class="btn btn-outline-success me-2">✅ Start Test</button>
                <button id="stopTest" class="btn btn-outline-danger">❌ Stop Test</button>
            </div>
            <button id="showGraphs" class="btn btn-outline-info">🖥 Show Graphs</button>
        </div>
    </div>

    <div class="row gx-4">
        <div class="col-lg-9 col-md-12 mb-4">
            <h4 class="fw-bold mb-3">Valve Overview</h4>
            <div class="table-responsive valve-table-wrapper">
                <table class="table table-bordered align-middle text-center">
                    <thead class="table-primary text-white">
                        <tr>
                            <th>Status</th>
                            <th>Node ID</th>
                            <th>Serial No.</th>
                            <th>Setpoint</th>
                            <th>Feedback</th>
                            <th>Drift</th>
                        </tr>
                    </thead>
                    <tbody id="valve-table-body">
                        <!-- JS will populate this -->
                    </tbody>
                </table>
            </div>
        </div>

        <div class="col-lg-3 col-md-12">
            <h5 class="fw-bold mb-3">System Feedback</h5>

            <div class="card mb-3">
                <div class="card-header bg-primary text-white fw-bold">Pressure Sensor</div>
                <ul class="list-group list-group-flush" id="pressureList">
                    <li class="list-group-item">Pressure 1: 0 bar</li>
                    <li class="list-group-item">Pressure 2: 0 bar</li>
                    <li class="list-group-item">Pressure 3: 0 bar</li>
                    <li class="list-group-item">Pressure 4: 0 bar</li>
                </ul>
            </div>

            <div class="card mb-3">
                <div class="card-header bg-primary text-white fw-bold">Flowmeter</div>
                <ul class="list-group list-group-flush" id="flowList">
                    <li class="list-group-item">Flowmeter 1: 0 L/h</li>
                    <li class="list-group-item">Flowmeter 2: 0 L/h</li>
                    <li class="list-group-item">Flowmeter 3: 0 L/h</li>
                    <li class="list-group-item">Flowmeter 4: 0 L/h</li>
                </ul>
            </div>

            <div class="card">
                <div class="card-header bg-primary text-white fw-bold">Pump RPM</div>
                <div class="card-body">
                    <h3 class="card-title text-center" id="pumpRPM">0</h3>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function fetchAllData() {
    fetch("/data")
        .then(res => res.json())
        .then(data => {
            const tbody = document.getElementById("valve-table-body");
            tbody.innerHTML = "";
            for (let i = 5; i <= 24; i++) {
                const valve = data.valves?.[i.toString()] || {
                    node_id: "--", serial: "--", setpoint: "--",
                    feedback: "--", drift: "--", status: "UNKNOWN"
                };
                const row = document.createElement("tr");
                row.innerHTML = `
                    <td><span class="status-indicator status-${valve.status?.toLowerCase() || 'unknown'}"></span></td>
                    <td>${valve.node_id}</td>
                    <td>${valve.serial ?? "--"}</td>
                    <td>${valve.setpoint}</td>
                    <td>${valve.feedback}</td>
                    <td>${valve.drift}</td>
                `;
                tbody.appendChild(row);
            }

            const flowEls = document.querySelectorAll("#flowList li");
            Object.values(data.flow || {}).forEach((val, i) => {
                if (flowEls[i]) flowEls[i].textContent = `Flowmeter ${i + 1}: ${val} L/h`;
            });

            const pressureEls = document.querySelectorAll("#pressureList li");
            Object.values(data.pressure || {}).forEach((val, i) => {
                if (pressureEls[i]) pressureEls[i].textContent = `Pressure ${i + 1}: ${val} bar`;
            });

            document.getElementById("pumpRPM").textContent = data.pump ?? "0";
        })
        .catch(err => console.error("Failed to fetch /data", err));
}

setInterval(fetchAllData, 1000);
</script>

<script>
document.getElementById("showGraphs").addEventListener("click", () => {
    window.open("/graphs", "_blank");
});
</script>

</body>
</html>
