async function loadResources(){

    const resources = await api(API + "/resources/active");
    const mappings = await api(API + "/domainmap");

    const table = document.getElementById("resources");
    table.innerHTML = "";

    resources.forEach(r => {

        let ips = "";

        if(Array.isArray(r.ips)){
            ips = r.ips.map(ip =>
                "<span class='ip'>" + (ip.type || "") + " " + ip.ip + "</span>"
            ).join("");
        }

        let domains = mappings
            .filter(m => m.resource_id == r.id)
            .map(m => "<span class='ip'>🌐 " + m.domain_name + "</span>")
            .join("");

        const tr = document.createElement("tr");

        tr.innerHTML = `
        <td>${r.name}</td>
        <td>${r.produkt || ""}</td>
        <td><span class="provider">${r.provider || ""}</span></td>
        <td id="status-${r.id}">...</td>

        <td>
        <div class="system">
        ${r.cpu ? r.cpu + " CPU" : ""}
        ${r.ram ? " • " + r.ram + " RAM" : ""}
        ${r.disk ? " • " + r.disk : ""}
        ${r.os ? " • " + r.os : ""}
        </div>
        </td>

        <td>${domains}</td>

        <td>
        ${ips}
        </td>

        <td>
        <button onclick="deleteResource(${r.id})">Delete</button>
        </td>
        `;

        table.appendChild(tr);

    });

}

async function loadDomains(){

    const domains = await api(API + "/domains");

    const table = document.getElementById("domains");
    table.innerHTML = "";

    domains.forEach(d => {

        const tr = document.createElement("tr");

        tr.innerHTML = `
            <td>${d.domain_name}</td>

            <td>
                <span class="provider">${d.provider || ""}</span>
            </td>

            <td>${d.ip_address || ""}</td>

            <td>
                ${d.resource_name ? 
                d.resource_name :
                "<span style='color:red'>⚠ no server</span>"}
            </td>

            <td id="dns-${d.id}">...</td>

            <td>${d.yearly_cost || ""}</td>

            <td>
                <button onclick="deleteDomain(${d.id})">Delete</button>
            </td>
        `;

        table.appendChild(tr);

    });

}

async function deleteDomain(id){

    if(!confirm("Domain löschen?")) return;

    await api(API + "/domains/" + id, {
        method: "DELETE"
    });

    loadDomains();
}

async function loadMapping(){

    const data = await api(API + "/domainmap");

    const table = document.getElementById("mapping");
    table.innerHTML = "";

    data.forEach(m => {

        const tr = document.createElement("tr");

        tr.innerHTML = `
            <td>${m.domain_name}</td>
            <td>${m.ip_address}</td>
            <td>${m.server_name || ""}</td>
        `;

        table.appendChild(tr);

    });

}



loadResources();
loadDomains();
loadMapping();