(() => {
    if (window.AppFactoryOperationsLive) {
        return;
    }

    const state = {
        socket: null,
        reconnectTimer: null,
        reconnectDelay: 1500,
    };

    const escapeHtml = (value) => String(value ?? "")
        .replaceAll("&", "&")
        .replaceAll("<", "&lt;")
        .replaceAll(">", "&gt;")
        .replaceAll('"', "&quot;")
        .replaceAll("'", "&#39;");

    const statusBadge = (status) => {
        const value = String(status || "");
        const normalized = value.toLowerCase();
        let className = "pill pill-muted";
        if (["success", "ok", "succeeded", "done", "deployed", "completed"].includes(normalized)) {
            className = "pill pill-success";
        } else if (["queued", "running", "pending", "in_progress", "starting", "cancelled_requested"].includes(normalized)) {
            className = "pill pill-warning";
        } else if (["failed", "failure", "error", "cancelled", "canceled"].includes(normalized)) {
            className = "pill pill-danger";
        }
        return `<span class="${className}">${escapeHtml(value)}</span>`;
    };

    const workerBadge = (online) => online
        ? '<span class="pill pill-success">ONLINE</span>'
        : '<span class="pill pill-danger">OFFLINE</span>';

    const setText = (selector, value) => {
        document.querySelectorAll(selector).forEach((el) => {
            el.textContent = value ?? 0;
        });
    };

    const renderJobs = (jobs) => {
        const rows = (jobs || []).map((job) => `
            <tr>
                <td><strong><a href="/portal/jobs/${escapeHtml(job.id)}">#${escapeHtml(job.id)}</a></strong></td>
                <td>${statusBadge(job.status)}</td>
                <td>${escapeHtml(job.type)}</td>
                <td>${escapeHtml(job.target_type)}: <strong>${escapeHtml(job.target_id)}</strong></td>
                <td>${escapeHtml(job.source)}</td>
                <td>${escapeHtml(job.created_at)}</td>
            </tr>
        `).join("");
        return rows || '<tr><td colspan="6">Zatím nejsou evidované žádné joby.</td></tr>';
    };

    const renderWorkers = (workers) => {
        const rows = (workers || []).map((worker) => {
            const currentJob = worker.current_job_id === null || worker.current_job_id === undefined
                ? ""
                : `<a href="/portal/jobs/${escapeHtml(worker.current_job_id)}">#${escapeHtml(worker.current_job_id)}</a>`;
            return `
                <tr data-worker-id="${escapeHtml(worker.id)}">
                    <td><strong><a href="/portal/workers/${encodeURIComponent(worker.id || "")}">${escapeHtml(worker.id)}</a></strong></td>
                    <td data-worker-field="status">${workerBadge(Boolean(worker.online))}<br><span class="muted">${escapeHtml(worker.status)}</span></td>
                    <td data-worker-field="last_seen_at">${escapeHtml(worker.last_seen_at)}</td>
                    <td data-worker-field="current_job">${currentJob}</td>
                    <td>${escapeHtml(worker.started_at)}</td>
                    <td class="actions-cell"><a class="btn" href="/portal/workers/${encodeURIComponent(worker.id || "")}">Detail</a></td>
                </tr>
            `;
        }).join("");
        return rows || '<tr><td colspan="6">Zatím nejsou evidovaní žádní workeři.</td></tr>';
    };

    const renderDeployments = (deployments) => {
        const rows = (deployments || []).map((deployment) => `
            <tr>
                <td><strong><a href="/portal/deployments/${escapeHtml(deployment.id)}">#${escapeHtml(deployment.id)}</a></strong></td>
                <td><a href="/portal/apps/${encodeURIComponent(deployment.app_id || "")}">${escapeHtml(deployment.app_id)}</a></td>
                <td>${escapeHtml(deployment.kind)}</td>
                <td>${statusBadge(deployment.status)}</td>
                <td>${escapeHtml(deployment.trigger_source)}</td>
                <td>${escapeHtml(deployment.started_at)}</td>
                <td>${escapeHtml(deployment.finished_at)}</td>
            </tr>
        `).join("");
        return rows || '<tr><td colspan="7">Zatím nejsou evidovaná žádná nasazení.</td></tr>';
    };

    const renderAudit = (events) => {
        const rows = (events || []).map((event) => `
            <tr>
                <td>${escapeHtml(event.created_at)}</td>
                <td>${escapeHtml(event.username)}</td>
                <td><span class="pill pill-muted">${escapeHtml(event.action)}</span></td>
                <td>${escapeHtml(event.target_type)}</td>
                <td>${escapeHtml(event.target_id)}</td>
                <td>${escapeHtml(event.source)}</td>
            </tr>
        `).join("");
        return rows || '<tr><td colspan="6">Zatím nejsou evidované žádné auditní události.</td></tr>';
    };

    const renderSnapshot = (snapshot) => {
        setText("[data-live-count='jobs.queued']", snapshot.jobs?.queued);
        setText("[data-live-count='jobs.running']", snapshot.jobs?.running);
        setText("[data-live-count='jobs.failed_24h']", snapshot.jobs?.failed_24h);
        setText("[data-live-count='jobs.success_24h']", snapshot.jobs?.success_24h);
        setText("[data-live-count='workers.online']", snapshot.workers?.online);
        setText("[data-live-count='workers.offline']", snapshot.workers?.offline);
        setText("[data-live-count='workers.total']", (snapshot.workers?.online || 0) + (snapshot.workers?.offline || 0));
        setText("[data-live-count='deployments.running']", snapshot.deployments?.running);
        setText("[data-live-count='deployments.failed_24h']", snapshot.deployments?.failed_24h);
        setText("[data-live-count='deployments.success_24h']", snapshot.deployments?.success_24h);

        document.querySelectorAll("[data-live-table='jobs.recent']").forEach((el) => { el.innerHTML = renderJobs(snapshot.jobs?.recent); });
        document.querySelectorAll("[data-live-table='workers.recent']").forEach((el) => { el.innerHTML = renderWorkers(snapshot.workers?.recent); });
        document.querySelectorAll("[data-live-table='deployments.recent']").forEach((el) => { el.innerHTML = renderDeployments(snapshot.deployments?.recent); });
        document.querySelectorAll("[data-live-table='audit.recent']").forEach((el) => { el.innerHTML = renderAudit(snapshot.audit?.recent); });

        (snapshot.workers?.recent || []).forEach((worker) => {
            const row = Array.from(document.querySelectorAll("tr[data-worker-id]"))
                .find((item) => item.dataset.workerId === String(worker.id || ""));
            if (!row) {
                return;
            }
            const currentJob = worker.current_job_id === null || worker.current_job_id === undefined
                ? ""
                : `<a href="/portal/jobs/${escapeHtml(worker.current_job_id)}">#${escapeHtml(worker.current_job_id)}</a>`;
            const statusCell = row.querySelector("[data-worker-field='status']");
            const lastSeenCell = row.querySelector("[data-worker-field='last_seen_at']");
            const currentJobCell = row.querySelector("[data-worker-field='current_job']");
            if (statusCell) statusCell.innerHTML = `${workerBadge(Boolean(worker.online))}<br><span class="muted">${escapeHtml(worker.status)}</span>`;
            if (lastSeenCell) lastSeenCell.textContent = worker.last_seen_at || "";
            if (currentJobCell) currentJobCell.innerHTML = currentJob;
        });
    };

    const connect = () => {
        clearTimeout(state.reconnectTimer);
        const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
        state.socket = new WebSocket(`${protocol}//${window.location.host}/portal/ws/operations`);

        state.socket.addEventListener("message", (event) => {
            const snapshot = JSON.parse(event.data);
            if (snapshot.type !== "operations.snapshot") {
                return;
            }
            window.dispatchEvent(new CustomEvent("operations:snapshot", { detail: snapshot }));
            renderSnapshot(snapshot);
        });

        state.socket.addEventListener("close", () => {
            state.reconnectTimer = setTimeout(connect, state.reconnectDelay);
        });
        state.socket.addEventListener("error", () => {
            state.socket.close();
        });
    };

    window.AppFactoryOperationsLive = { connect };
    connect();
})();