import { app } from "../../../scripts/app.js";
import { api } from "../../../scripts/api.js";

app.registerExtension({
    name: "AudioCraft.AudioManager",
    async beforeRegisterNodeDef(nodeType, nodeData, app) {
        if (nodeData.name === "AudioManager") {
            const onExecuted = nodeType.prototype.onExecuted;
            nodeType.prototype.onExecuted = function (message) {
                onExecuted?.apply(this, arguments);

                if (!message?.text) return;

                const summary = message.text[0]?.content || "";
                const files = message.files || [];

                if (this._managerWidget) {
                    this._managerContainer.innerHTML = "";
                    buildContent(this._managerContainer, summary, files);
                } else {
                    const container = document.createElement("div");
                    container.style.cssText = "padding:4px;overflow-y:auto;";
                    buildContent(container, summary, files);

                    this._managerContainer = container;
                    this._managerWidget = this.addDOMWidget("audio_manager", "dom", container, {
                        serialize: false,
                        hideOnZoom: false,
                    });
                }

                // Resize node to fit all files (26px per row + header + padding)
                const listHeight = Math.min(40 + files.length * 26, 800);
                this._managerWidget.computeSize = () => [this.size[0], listHeight];
                this.setSize([Math.max(this.size[0], 500), listHeight + 80]);
                app.graph.setDirtyCanvas(true);
            };
        }
    },
});

function buildContent(container, summary, files) {
    const header = document.createElement("div");
    header.textContent = summary;
    header.style.cssText = "font-weight:bold;margin-bottom:8px;color:#fff;font-size:13px;padding:4px;background:#333;border-radius:4px;";
    container.appendChild(header);

    if (files.length === 0) return;

    for (const f of files) {
        const row = document.createElement("div");
        row.style.cssText = "display:flex;align-items:center;padding:3px 2px;font-size:11px;color:#ccc;border-bottom:1px solid #333;min-height:22px;";

        const name = document.createElement("span");
        name.textContent = f.name;
        name.style.cssText = "overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;margin-right:6px;";

        const size = document.createElement("span");
        size.textContent = f.size_mb + " MB";
        size.style.cssText = "color:#8cf;min-width:55px;text-align:right;margin-right:6px;font-size:10px;";

        const playBtn = document.createElement("button");
        playBtn.textContent = "\u25B6";
        playBtn.title = "Abspielen";
        playBtn.style.cssText = "background:#444;border:none;color:#8f8;cursor:pointer;padding:2px 8px;border-radius:3px;font-size:11px;margin-right:4px;";

        const dlBtn = document.createElement("a");
        const audioSrc = api.apiURL(
            `/view?filename=${encodeURIComponent(f.name)}&subfolder=audio&type=output`
        );
        dlBtn.href = audioSrc;
        dlBtn.download = f.name;
        dlBtn.textContent = "\u2B07";
        dlBtn.title = "Download";
        dlBtn.style.cssText = "color:#8cf;text-decoration:none;font-size:13px;padding:0 4px;";

        let currentAudio = null;
        playBtn.onclick = () => {
            if (currentAudio) {
                currentAudio.pause();
                currentAudio = null;
                playBtn.textContent = "\u25B6";
                playBtn.style.color = "#8f8";
                return;
            }
            currentAudio = new Audio(audioSrc);
            currentAudio.play();
            playBtn.textContent = "\u25A0";
            playBtn.style.color = "#f88";
            currentAudio.onended = () => {
                playBtn.textContent = "\u25B6";
                playBtn.style.color = "#8f8";
                currentAudio = null;
            };
        };

        row.appendChild(name);
        row.appendChild(size);
        row.appendChild(playBtn);
        row.appendChild(dlBtn);
        container.appendChild(row);
    }
}