async function loadFleet() {
    try {
        const response = await fetch("/api/fleet");
        const data = await response.json();

        // ===== KPI METRICS =====
        document.getElementById("kpi_cost_day").innerText =
            data.fleet_total_cost_per_day.toFixed(2);

        document.getElementById("kpi_30d").innerText =
            (data.fleet_total_cost_per_day * 30).toFixed(2);

        document.getElementById("kpi_residual").innerText =
            data.fleet_average_residual_percent.toFixed(1) + "%";

        const healthScore = Math.max(
            0,
            100 - data.fleet_average_residual_percent
        );

        document.getElementById("kpi_health").innerText =
            healthScore.toFixed(0) + " / 100";

        document.getElementById("sys_drift").innerText =
            data.systemic_drift_detected ? "YES" : "NO";

        // ===== TABLE =====
        const tableBody = document.querySelector("#fleetTable tbody");
        tableBody.innerHTML = "";

        data.all_pumps_ranked.forEach(pump => {
            const row = document.createElement("tr");

            row.innerHTML = `
                <td>${pump.pump_id}</td>
                <td>${pump.state}</td>
                <td>${pump.hours_to_alert ? pump.hours_to_alert.toFixed(1) + "h" : "--"}</td>
                <td>${pump.hours_to_critical ? pump.hours_to_critical.toFixed(1) + "h" : "--"}</td>
                <td>$${pump.estimated_cost_per_hour.toFixed(2)}</td>
                <td>$${(pump.estimated_cost_per_day * 30).toFixed(2)}</td>
            `;

            tableBody.appendChild(row);
        });

    } catch (err) {
        console.error("Dashboard error:", err);
    }
}

loadFleet();
setInterval(loadFleet, 10000);