class RunningModelsPage {
    constructor() {
        this.activeServer = getActiveServer();
        this.worker = null;
        this.lastRunningData = null;
        this.init();
    }

    init() {
        this.updateServerContextUI();

        if (!this.activeServer) {
            this.renderNoServerState();
            return;
        }

        this.loadFromLocalStorage();

        if (typeof Worker !== "undefined") {
            this.worker = new Worker("/static/js/data-sync.worker.js");
            this.worker.onmessage = (event) => this.handleWorkerMessage(event);
            this.worker.onerror = (error) => {
                console.error("Worker error:", error);
                this.loadRunningModels(true);
            };
            const shouldSyncImmediately = this.shouldSyncImmediately();
            this.worker.postMessage({
                type: "SET_SERVER",
                serverId: this.activeServer.id,
                host: this.activeServer.host,
                syncImmediately: shouldSyncImmediately,
                lastSyncTimestamp: this.getLatestCacheTimestamp()
            });
            if (shouldSyncImmediately && !this.lastRunningData) {
                this.renderLoadingState();
            }
        } else if (this.shouldSyncImmediately()) {
            this.loadRunningModels(true);
        }

        document.getElementById("refresh-btn")?.addEventListener("click", () => {
            if (this.worker) {
                this.worker.postMessage({ type: "SYNC_NOW" });
            } else {
                this.loadRunningModels(true);
            }
        });
    }

    loadFromLocalStorage() {
        const runningData = readServerCache(this.activeServer.id, "running");
        if (!runningData) {
            return;
        }

        this.lastRunningData = runningData;
        this.renderStats(runningData.models || [], runningData.timestamp);
        this.renderRunningModels(runningData.models || []);
    }

    handleWorkerMessage(event) {
        const { type, health, modelsData, runningData, serverId } = event.data;

        if (type !== "DATA_UPDATED") {
            return;
        }

        if (serverId && serverId !== this.activeServer.id) {
            return;
        }

        if (health) {
            try {
                writeServerCache(this.activeServer.id, "health", health);
            } catch (error) {
                console.warn("Cannot persist health in localStorage:", error);
            }
        }

        if (modelsData) {
            try {
                writeServerCache(this.activeServer.id, "models", modelsData);
            } catch (error) {
                console.warn("Cannot persist models in localStorage:", error);
            }
        }

        if (!runningData) {
            return;
        }

        this.lastRunningData = runningData;
        try {
            writeServerCache(this.activeServer.id, "running", runningData);
        } catch (error) {
            console.warn("Cannot persist running models in localStorage:", error);
        }

        this.renderStats(runningData.models || [], runningData.timestamp);
        this.renderRunningModels(runningData.models || []);
    }

    async loadRunningModels(forceNetwork = false) {
        const container = document.getElementById("running-models");
        if (!container) {
            return;
        }

        if (!forceNetwork && this.lastRunningData) {
            this.renderStats(this.lastRunningData.models || [], this.lastRunningData.timestamp);
            this.renderRunningModels(this.lastRunningData.models || []);
            return;
        }

        this.renderLoadingState();

        try {
            const response = await fetch(this.buildApiUrl("/api/v1/models/running"));
            if (!response.ok) {
                throw new Error("Failed to load running models");
            }

            const data = await response.json();
            const models = data.models || [];
            const runningData = {
                models,
                total: data.total || models.length,
                timestamp: new Date().toISOString(),
                serverId: this.activeServer.id
            };

            this.lastRunningData = runningData;
            writeServerCache(this.activeServer.id, "running", runningData);
            this.renderStats(models, runningData.timestamp);
            this.renderRunningModels(models);
        } catch (error) {
            container.innerHTML = `
                <div class="text-center py-8 text-red-400">
                    <p>Failed to load ollama ps output</p>
                </div>
            `;
            this.renderStats([], null);
            console.error(error);
        }
    }

    shouldSyncImmediately() {
        const running = readServerCache(this.activeServer.id, "running");
        if (!running) {
            return true;
        }

        return isCacheStale(this.getLatestCacheTimestamp());
    }

    getLatestCacheTimestamp() {
        return getLatestServerCacheTimestamp(this.activeServer.id, ["health", "models", "running"]);
    }

    buildApiUrl(path) {
        const url = new URL(path, window.location.origin);
        url.searchParams.set("host", this.activeServer.host);
        return `${url.pathname}${url.search}`;
    }

    updateServerContextUI() {
        if (!this.activeServer) {
            return;
        }

        const serverLabel = document.getElementById("active-server-label");
        if (serverLabel) {
            serverLabel.textContent = `Server: ${this.activeServer.name}`;
            serverLabel.classList.remove("hidden");
        }

        const availableLink = document.getElementById("available-link");
        if (availableLink) {
            availableLink.href = buildServerUrl("/models-available", this.activeServer.id);
        }

        const serversLink = document.getElementById("servers-link");
        if (serversLink) {
            serversLink.href = "/servers";
        }
    }

    renderNoServerState() {
        const container = document.getElementById("running-models");
        const runningCountEl = document.getElementById("running-count");
        const vramTotalEl = document.getElementById("vram-total");
        const lastRefreshEl = document.getElementById("last-refresh");

        if (runningCountEl) runningCountEl.textContent = "0";
        if (vramTotalEl) vramTotalEl.textContent = "0 B";
        if (lastRefreshEl) lastRefreshEl.textContent = "-";

        if (container) {
            container.innerHTML = `
                <div class="text-center py-10 text-gray-300">
                    <p class="text-lg font-semibold">No server selected</p>
                    <p class="text-sm text-gray-400 mt-2">Select a server in the control panel to load ollama ps data.</p>
                    <a href="/servers" class="inline-block mt-4 bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded">Open Servers Control Panel</a>
                </div>
            `;
        }
    }

    renderStats(models, timestamp = null) {
        const runningCountEl = document.getElementById("running-count");
        const vramTotalEl = document.getElementById("vram-total");
        const lastRefreshEl = document.getElementById("last-refresh");

        const totalVram = models.reduce((sum, model) => sum + (model.size_vram || 0), 0);

        if (runningCountEl) {
            runningCountEl.textContent = String(models.length);
        }
        if (vramTotalEl) {
            vramTotalEl.textContent = this.formatBytes(totalVram);
        }
        if (lastRefreshEl) {
            lastRefreshEl.textContent = timestamp ? this.formatDateTime(timestamp) : "-";
        }
    }

    renderRunningModels(models) {
        const container = document.getElementById("running-models");
        if (!container) {
            return;
        }

        if (models.length === 0) {
            container.innerHTML = `
                <div class="text-center py-8 text-gray-400">
                    <p>No models are currently loaded in memory.</p>
                </div>
            `;
            return;
        }

        container.innerHTML = models
            .map((model) => this.renderModelCard(model))
            .join("");
    }

    renderModelCard(model) {
        const name = this.escapeHtml(model.name || "unknown");
        const modelId = this.escapeHtml(model.model || "-");
        const size = this.formatBytes(model.size || 0);
        const sizeVram = this.formatBytes(model.size_vram || 0);
        const processor = this.escapeHtml(model.details?.processor || "-");
        const expiresAt = model.expires_at ? this.formatDateTime(model.expires_at) : "-";

        return `
            <div class="bg-gray-700 rounded-lg p-4 border border-gray-600">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <h3 class="text-lg font-semibold">${name}</h3>
                        <p class="text-xs text-gray-400 mt-1">${modelId}</p>
                    </div>
                    <span class="bg-green-700 text-green-100 text-xs px-2 py-1 rounded">Ready</span>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-4 text-sm">
                    <div class="bg-gray-800 rounded p-3">
                        <p class="text-gray-400 text-xs">Model Size</p>
                        <p class="font-semibold mt-1">${size}</p>
                    </div>
                    <div class="bg-gray-800 rounded p-3">
                        <p class="text-gray-400 text-xs">VRAM Used</p>
                        <p class="font-semibold mt-1">${sizeVram}</p>
                    </div>
                    <div class="bg-gray-800 rounded p-3">
                        <p class="text-gray-400 text-xs">Processor</p>
                        <p class="font-semibold mt-1">${processor}</p>
                    </div>
                    <div class="bg-gray-800 rounded p-3">
                        <p class="text-gray-400 text-xs">Unload Time</p>
                        <p class="font-semibold mt-1">${expiresAt}</p>
                    </div>
                </div>
            </div>
        `;
    }

    formatBytes(bytes) {
        if (!bytes || bytes <= 0) {
            return "0 B";
        }
        const units = ["B", "KB", "MB", "GB", "TB"];
        const index = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
        const value = bytes / Math.pow(1024, index);
        return `${value.toFixed(2)} ${units[index]}`;
    }

    formatDateTime(isoDate) {
        const date = new Date(isoDate);
        if (Number.isNaN(date.getTime())) {
            return "-";
        }

        return date.toLocaleString("en-US", {
            year: "numeric",
            month: "short",
            day: "2-digit",
            hour: "2-digit",
            minute: "2-digit"
        });
    }

    escapeHtml(text) {
        const div = document.createElement("div");
        div.textContent = String(text);
        return div.innerHTML;
    }

    renderLoadingState() {
        const container = document.getElementById("running-models");
        if (!container || this.lastRunningData) {
            return;
        }

        container.innerHTML = `
            <div class="text-center py-8">
                <div class="inline-block w-8 h-8 border-4 border-gray-600 border-t-purple-500 rounded-full animate-spin"></div>
                <p class="text-gray-400 mt-4">Refreshing data...</p>
            </div>
        `;
    }
}

document.addEventListener("DOMContentLoaded", () => {
    window.runningModelsPage = new RunningModelsPage();
});