// retoor <retoor@molodetz.nl>

import { Http } from "./Http.js";
import { DeepsearchProgressSocket } from "./DeepsearchProgressSocket.js";

const PHASE_ORDER = [
    "planning",
    "searching",
    "crawling",
    "indexing",
    "analysis",
    "synthesis",
];

const AGENT_LABELS = {
    summarizer: "Report writer",
    extractor: "Findings extractor",
    linker: "Linker",
};

export class DeepsearchTool {
    constructor() {
        this.root = document.querySelector("[data-deepsearch-tool]");
        if (!this.root) return;
        this.form = this.root.querySelector("[data-deepsearch-form]");
        this.errorBox = this.root.querySelector("[data-deepsearch-error]");
        this.live = this.root.querySelector("[data-deepsearch-live]");
        this.statusText = this.root.querySelector("[data-deepsearch-status]");
        this.countText = this.root.querySelector("[data-deepsearch-count]");
        this.bar = this.root.querySelector("[data-deepsearch-bar]");
        this.timeline = this.root.querySelector("[data-deepsearch-timeline]");
        this.details = this.root.querySelector("[data-deepsearch-details]");
        this.log = this.root.querySelector("[data-deepsearch-log]");
        this.done = this.root.querySelector("[data-deepsearch-done]");
        this.openLink = this.root.querySelector("[data-deepsearch-open]");
        this.pauseBtn = this.root.querySelector("[data-deepsearch-pause]");
        this.resumeBtn = this.root.querySelector("[data-deepsearch-resume]");
        this.cancelBtn = this.root.querySelector("[data-deepsearch-cancel]");
        this.runBtn = this.form.querySelector("[data-deepsearch-run]");
        this.phaseNodes = {};
        if (this.timeline) {
            this.timeline.querySelectorAll("[data-deepsearch-phase]").forEach((node) => {
                this.phaseNodes[node.getAttribute("data-deepsearch-phase")] = node;
            });
        }
        this.socket = null;
        this.uid = null;
        this.currentPhase = null;
        this._bind();
    }

    _bind() {
        this.form.addEventListener("submit", (event) => {
            event.preventDefault();
            this._start();
        });
        this.pauseBtn.addEventListener("click", () => this._control("pause"));
        this.resumeBtn.addEventListener("click", () => this._control("resume"));
        this.cancelBtn.addEventListener("click", () => this._control("cancel"));
    }

    async _start() {
        this._setError("");
        const query = this.form.query.value.trim();
        if (!query) return;
        const params = {
            query,
            depth: this.form.depth ? this.form.depth.value : 2,
            max_pages: this.form.max_pages ? this.form.max_pages.value : 12,
        };
        this._resetLive();
        try {
            const data = await Http.send("/tools/deepsearch/run", params);
            this.uid = data.uid;
            this._watch(data.uid);
        } catch (error) {
            this._setError(error.message || "Could not start the research.");
            this.live.hidden = true;
            this.runBtn.disabled = false;
        }
    }

    _resetLive() {
        if (this.socket) this.socket.close();
        this.done.hidden = true;
        this.live.hidden = false;
        this.log.innerHTML = "";
        if (this.details) this.details.innerHTML = "";
        this.bar.style.width = "0%";
        this.bar.classList.remove("is-indeterminate");
        this.countText.textContent = "";
        this.statusText.textContent = "Starting…";
        this.runBtn.disabled = true;
        this.pauseBtn.hidden = false;
        this.resumeBtn.hidden = true;
        this.cancelBtn.hidden = false;
        this.currentPhase = null;
        Object.values(this.phaseNodes).forEach((node) => {
            node.classList.remove("is-active", "is-done");
            node.classList.add("is-pending");
            node.removeAttribute("aria-current");
        });
    }

    async _control(action) {
        if (!this.uid) return;
        try {
            await Http.send(`/tools/deepsearch/${this.uid}/${action}`, {});
        } catch (error) {
            this._setError(error.message || "Control failed.");
            return;
        }
        if (action === "pause") {
            this.pauseBtn.hidden = true;
            this.resumeBtn.hidden = false;
            this.statusText.textContent = "Paused";
        } else if (action === "resume") {
            this.pauseBtn.hidden = false;
            this.resumeBtn.hidden = true;
        } else if (action === "cancel") {
            this.pauseBtn.hidden = true;
            this.resumeBtn.hidden = true;
            this.cancelBtn.hidden = true;
            this.statusText.textContent = "Cancelling…";
        }
    }

    _watch(uid) {
        this.socket = new DeepsearchProgressSocket(uid, {
            onMessage: (frame) => this._frame(frame),
            onClose: () => {},
        });
        this.socket.connect();
    }

    _setPhase(phase) {
        if (!(phase in this.phaseNodes)) return;
        this.currentPhase = phase;
        const target = PHASE_ORDER.indexOf(phase);
        PHASE_ORDER.forEach((name, index) => {
            const node = this.phaseNodes[name];
            if (!node) return;
            node.classList.remove("is-active", "is-done", "is-pending");
            node.removeAttribute("aria-current");
            if (index < target) {
                node.classList.add("is-done");
            } else if (index === target) {
                node.classList.add("is-active");
                node.setAttribute("aria-current", "step");
            } else {
                node.classList.add("is-pending");
            }
        });
        this.bar.classList.add("is-indeterminate");
    }

    _frame(frame) {
        const type = frame.type;
        if (type === "phase") {
            this._setPhase(frame.phase);
            if (frame.label) this.statusText.textContent = frame.label;
        } else if (type === "stage") {
            this.statusText.textContent = frame.message || "Working…";
            this._appendLog(frame.message || frame.stage);
        } else if (type === "substep") {
            this._appendLog(frame.message);
        } else if (type === "queries") {
            this._appendLog(`Planned ${frame.queries.length} queries`);
        } else if (type === "candidates") {
            this._appendLog(`Found ${frame.count} candidate sources`);
        } else if (type === "rsearch") {
            this._appendLog(
                `Web search ${frame.endpoint || ""} ${frame.success ? "ok" : "failed"}`,
            );
        } else if (type === "progress") {
            this._setBar(frame.done, frame.total);
            this.countText.textContent = `${frame.done || 0} / ${frame.total || 0} sources`;
            if (frame.message) this.statusText.textContent = frame.message;
        } else if (type === "page_loaded") {
            this.bar.classList.remove("is-indeterminate");
            this._setBar(frame.done, frame.total);
            this.countText.textContent = `${frame.done} / ${frame.total} sources`;
            const tag = frame.render ? "rendered" : frame.source;
            const ms = frame.elapsed_ms ? ` (${frame.elapsed_ms}ms)` : "";
            this._appendLog(`${tag} ${frame.title || frame.url}${ms}`);
        } else if (type === "page_cached") {
            this._appendLog(`Cached ${frame.url}`);
        } else if (type === "page_skipped") {
            this._appendLog(`Skipped ${frame.url} - ${frame.reason || "no content"}`);
        } else if (type === "page_duplicate") {
            this._appendLog(`Duplicate ${frame.url}`);
        } else if (type === "embed_batch") {
            this.bar.classList.remove("is-indeterminate");
            this._setBar(frame.done, frame.total);
            this.statusText.textContent = frame.message || "Embedding";
            this._embedCard(frame);
        } else if (type === "embed_done") {
            this._embedDone(frame);
            this._appendLog(`Indexed ${frame.chunk_count} chunks (${frame.backend})`);
        } else if (type === "agent") {
            this._agentCard(frame);
        } else if (type === "report_ready") {
            this.bar.classList.remove("is-indeterminate");
            this.statusText.textContent = "Compiling report…";
        } else if (type === "done") {
            this.bar.classList.remove("is-indeterminate");
            this.bar.style.width = "100%";
            PHASE_ORDER.forEach((name) => {
                const node = this.phaseNodes[name];
                if (node) {
                    node.classList.remove("is-active", "is-pending");
                    node.classList.add("is-done");
                }
            });
            this.statusText.textContent = "Done";
            this._finish(frame.session_url || `/tools/deepsearch/${this.uid}/session`);
        } else if (type === "failed") {
            this.bar.classList.remove("is-indeterminate");
            this.statusText.textContent = "Failed";
            this._setError(frame.message || frame.error || "The research failed.");
            this.runBtn.disabled = false;
            this.pauseBtn.hidden = true;
            this.cancelBtn.hidden = true;
        }
    }

    _setBar(done, total) {
        const safeTotal = total || 1;
        const pct = Math.min(100, Math.round(((done || 0) / safeTotal) * 100));
        this.bar.style.width = `${pct}%`;
    }

    _embedCard(frame) {
        if (!this.details) return;
        let card = this.details.querySelector("[data-ds-card='embed']");
        if (!card) {
            card = document.createElement("div");
            card.className = "ds-detail-card";
            card.setAttribute("data-ds-card", "embed");
            this.details.appendChild(card);
        }
        const badge = `<span class="ds-backend-badge ds-backend-${frame.backend}">${frame.backend}</span>`;
        card.innerHTML =
            `<div class="ds-detail-title">Embedding ${badge}</div>` +
            `<div class="ds-detail-body">Batch ${frame.batch} / ${frame.total_batches} - ${frame.done} / ${frame.total} chunks</div>`;
    }

    _embedDone(frame) {
        if (!this.details) return;
        let card = this.details.querySelector("[data-ds-card='embed']");
        if (!card) {
            card = document.createElement("div");
            card.className = "ds-detail-card";
            card.setAttribute("data-ds-card", "embed");
            this.details.appendChild(card);
        }
        const badge = `<span class="ds-backend-badge ds-backend-${frame.backend}">${frame.backend}</span>`;
        card.innerHTML =
            `<div class="ds-detail-title">Indexing complete ${badge}</div>` +
            `<div class="ds-detail-body">${frame.chunk_count} chunks embedded</div>`;
    }

    _agentCard(frame) {
        if (!this.details) return;
        const label = AGENT_LABELS[frame.agent] || frame.agent;
        let card = this.details.querySelector(`[data-ds-card='agent-${frame.agent}']`);
        if (!card) {
            card = document.createElement("div");
            card.className = "ds-detail-card";
            card.setAttribute("data-ds-card", `agent-${frame.agent}`);
            this.details.appendChild(card);
        }
        if (frame.status === "done") {
            card.classList.remove("is-running");
            const tokens = `${frame.tokens_in || 0} in / ${frame.tokens_out || 0} out tok`;
            card.innerHTML =
                `<div class="ds-detail-title">${label} done</div>` +
                `<div class="ds-detail-body">${frame.elapsed_ms || 0}ms - ${tokens}</div>`;
        } else {
            card.classList.add("is-running");
            card.innerHTML =
                `<div class="ds-detail-title">${label}</div>` +
                `<div class="ds-detail-body">${frame.message || "Working"}</div>`;
            this.statusText.textContent = frame.message || label;
            this._appendLog(`Agent: ${label}`);
        }
    }

    _finish(sessionUrl) {
        this.runBtn.disabled = false;
        this.pauseBtn.hidden = true;
        this.resumeBtn.hidden = true;
        this.cancelBtn.hidden = true;
        this.done.hidden = false;
        this.openLink.href = sessionUrl;
        window.location.assign(sessionUrl);
    }

    _appendLog(text) {
        if (!text) return;
        const item = document.createElement("li");
        const stamp = document.createElement("span");
        stamp.className = "ds-log-time";
        stamp.textContent = new Date().toLocaleTimeString();
        const body = document.createElement("span");
        body.className = "ds-log-text";
        body.textContent = text;
        item.appendChild(stamp);
        item.appendChild(body);
        this.log.prepend(item);
    }

    _setError(message) {
        if (!this.errorBox) return;
        this.errorBox.textContent = message;
        this.errorBox.hidden = !message;
    }
}
