document.addEventListener('DOMContentLoaded', () => {
    // Drawflow initialisieren
    const container = document.getElementById('drawflow');
    const editor = new Drawflow(container);
    editor.start();

    // Zentrale Funktion, um Bausteine auf das Feld zu werfen
    // Parameter: name, inputs, outputs, htmlContent
    function addFupNode(name, inputs, outputs, htmlContent) {
        // Wir spawnen die Boxen immer grob in der Mitte (X: 300, Y: 200)
        editor.addNode(name, inputs, outputs, 300, 200, name, {}, htmlContent);
    }

    // --- Definition der Bausteine ---
    const nodeDefinitions = {
        'input': {
            in: 0, out: 1,
            html: `
                <div class="fup-title">Eingang</div>
                <div class="fup-body">
                    Pin <input type="number" df-pin class="fup-input-field" value="2">
                </div>`
        },
        'output': {
            in: 1, out: 0,
            html: `
                <div class="fup-title">Ausgang</div>
                <div class="fup-body">
                    Pin <input type="number" df-pin class="fup-input-field" value="4">
                </div>`
        },
        'and': {
            in: 2, out: 1,
            html: `<div class="fup-title">&amp;</div><div class="fup-body" style="text-align:center;">UND</div>`
        },
        'or': {
            in: 2, out: 1,
            html: `<div class="fup-title">≥1</div><div class="fup-body" style="text-align:center;">ODER</div>`
        },
        'rs': {
            in: 2, out: 1,
            html: `
                <div class="fup-title">RS</div>
                <div class="fup-body">
                    <div>S</div>
                    <div style="margin-top: 15px;">R1 (Dom)</div>
                </div>`
        },
        'sr': {
            in: 2, out: 1,
            html: `
                <div class="fup-title">SR</div>
                <div class="fup-body">
                    <div>S1 (Dom)</div>
                    <div style="margin-top: 15px;">R</div>
                </div>`
        },
        'counter': {
            in: 3, out: 1, // CNT, DIR, RES
            html: `
                <div class="fup-title">Zähler</div>
                <div class="fup-body" style="font-size: 10px;">
                    <div>CNT</div>
                    <div style="margin-top: 4px;">DIR</div>
                    <div style="margin-top: 5px;">RES</div>
                    <hr style="margin: 5px 0;">
                    Grenzwert:
                    <input type="number" df-limit class="fup-input-field" value="10">
                </div>`
        },
        'p_edge': {
            in: 1, out: 1,
            html: `<div class="fup-title">|P|</div><div class="fup-body" style="text-align:center;">Pos. Flanke</div>`
        },
        'n_edge': {
            in: 1, out: 1,
            html: `<div class="fup-title">|N|</div><div class="fup-body" style="text-align:center;">Neg. Flanke</div>`
        }
    };

    // --- Buttons in der Toolbar mit Funktion belegen ---
    const buttons = document.querySelectorAll('.toolbar .menu-btn');
    buttons.forEach(btn => {
        btn.addEventListener('click', (e) => {
            const nodeType = e.target.getAttribute('data-node');
            const def = nodeDefinitions[nodeType];
            if (def) {
                addFupNode(nodeType, def.in, def.out, def.html);
            }
        });
    });

    // --- JSON Export Test ---
    document.getElementById('btn-export').addEventListener('click', () => {
        const data = editor.export();
        console.log("Das generierte FUP-Netzwerk:", JSON.stringify(data, null, 2));
        alert("JSON wurde erzeugt! Drücke F12, um die Datenstruktur in der Konsole zu sehen.");
    });
});