const tbody = document.getElementById("content-display");

async function init() {
    try {
        const response = await fetch("/api/url");

        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }

        const urls = await response.json();

        urls.forEach((url) => {

            const id = url.replace(/[^a-zA-Z0-9]/g, "_");

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

            row.innerHTML = `
                <td>${url}</td>
                <td class="status">Waiting...</td>
                <td class="statusCode">-</td>
                <td class="responseTime">-</td>
                <td class="error">-</td>
            `;

            tbody.appendChild(row);
        });

    } catch (err) {
        console.error(err);
    }
}

document.addEventListener("DOMContentLoaded", init);

const protocol = window.location.protocol === "https:" ? "wss" : "ws";

const socket = new WebSocket(`${protocol}://${window.location.host}`);
console.log(socket);
// const socket = new WebSocket("ws://localhost:3000");
const websocket_status = document.getElementById("websocket_status");

socket.onopen = () => {
    websocket_status.textContent = "Connected";
};
let counter = 0
socket.onmessage = (event) => {
    // console.log(counter)
    const data = JSON.parse(event.data);
    if (data.type === "checking") {
        counter = counter + 1
        console.log(counter)
        document.getElementById("status").textContent = "Refreshed " + counter + " Times";
        return;
    }


    const id = data.url.replace(/[^a-zA-Z0-9]/g, "_");
    const row = document.getElementById(id);
    if (!row) return;

    row.querySelector(".status").textContent = data.status;
    row.querySelector(".statusCode").textContent = data.statusCode;
    row.querySelector(".responseTime").textContent = data.responseTime != null ? `${data.responseTime} ms` : "-";
    row.querySelector(".error").textContent = data.error || "-";
};


socket.onclose = () => {
    websocket_status.textContent = "Disconnected";
};

document.getElementById("addBtn").addEventListener("click", async () => {
    const url = document.getElementById("urlInput").value.trim();
    if (!url) return;

    const response = await fetch("/api/url/register", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ url })
    });

    if (response.ok) {
        document.getElementById("urlInput").value = "";

        const id = url.replace(/[^a-zA-Z0-9]/g, "_");
        if (!document.getElementById(id)) {
            const row = document.createElement("tr");
            row.id = id;
            row.innerHTML = `
                <td>${url}</td>
                <td class="status">Waiting...</td>
                <td class="statusCode">-</td>
                <td class="responseTime">-</td>
                <td class="error">-</td>
            `;
            tbody.appendChild(row);
        }
    }
});