/**
 * Wiederverwendbares Meldungs-Modul.
 * Bietet openMeldungDialog(zielTyp, zielId) und renderMeldenBtn(zielTyp, zielId).
 */
(function () {
    // Dialog einmalig in den DOM einfügen
    if (!document.getElementById('meldungDialog')) {
        document.body.insertAdjacentHTML('beforeend', `
            <div id="meldungDialog" style="
                display:none; position:fixed; inset:0; z-index:9999;
                background:rgba(0,0,0,0.6); align-items:center; justify-content:center;">
                <div style="background:var(--color-card);border:1px solid var(--color-secondary);
                            border-radius:12px;padding:1.5rem;width:min(420px,90vw);position:relative;">
                    <h3 style="margin:0 0 1rem 0;color:var(--color-primary)">Inhalt melden</h3>
                    <p id="meldungDialogLabel" style="color:var(--color-muted);font-size:0.9rem;margin:0 0 0.75rem 0;"></p>
                    <textarea id="meldungGrund" placeholder="Grund (optional)"
                        style="width:100%;box-sizing:border-box;padding:0.5rem;border-radius:6px;
                               border:1px solid var(--color-secondary);background:var(--color-card);
                               color:var(--color-text);resize:vertical;min-height:80px;font-family:inherit;"></textarea>
                    <div style="display:flex;gap:0.5rem;justify-content:flex-end;margin-top:1rem;">
                        <button id="meldungAbbrechen" style="padding:0.45rem 1rem;border-radius:6px;
                            border:1px solid var(--color-secondary);background:transparent;
                            color:var(--color-text);cursor:pointer;">Abbrechen</button>
                        <button id="meldungSenden" style="padding:0.45rem 1rem;border-radius:6px;
                            border:none;background:var(--color-primary);color:#fff;cursor:pointer;font-weight:600;">
                            Melden</button>
                    </div>
                    <p id="meldungMsg" style="margin:0.5rem 0 0 0;font-size:0.85rem;color:var(--color-primary);display:none;"></p>
                </div>
            </div>
        `);

        document.getElementById('meldungAbbrechen').addEventListener('click', () => closeMeldungDialog());
        document.getElementById('meldungDialog').addEventListener('click', function (e) {
            if (e.target === this) closeMeldungDialog();
        });
    }

    let _zielTyp = null, _zielId = null;

    window.openMeldungDialog = function (zielTyp, zielId) {
        _zielTyp = zielTyp;
        _zielId  = zielId;
        document.getElementById('meldungGrund').value = '';
        document.getElementById('meldungMsg').style.display = 'none';
        document.getElementById('meldungDialogLabel').textContent =
            zielTyp === 'PROFIL' ? 'Profil melden' : 'Post melden';
        document.getElementById('meldungDialog').style.display = 'flex';

        document.getElementById('meldungSenden').onclick = async function () {
            const grund = document.getElementById('meldungGrund').value.trim();
            const r = await fetch('/meldung', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ zielTyp: _zielTyp, zielId: _zielId, grund: grund || null })
            });
            const msg = document.getElementById('meldungMsg');
            msg.style.display = 'block';
            if (r.status === 201) {
                msg.style.color = 'var(--color-success, #2ecc71)';
                msg.textContent = 'Meldung wurde übermittelt.';
                setTimeout(closeMeldungDialog, 1500);
            } else if (r.status === 409) {
                msg.style.color = 'var(--color-primary)';
                msg.textContent = 'Du hast diesen Inhalt bereits gemeldet.';
            } else {
                msg.style.color = 'var(--color-primary)';
                msg.textContent = 'Fehler beim Senden.';
            }
        };
    };

    window.closeMeldungDialog = function () {
        document.getElementById('meldungDialog').style.display = 'none';
    };

    /**
     * Erzeugt einen kleinen "Melden"-Button-HTML-String.
     * Verwendung: in innerHTML-Templates, wo onclick genutzt werden kann.
     */
    window.renderMeldenBtn = function (zielTyp, zielId) {
        return `<button onclick="openMeldungDialog('${zielTyp}','${zielId}')"
            style="background:none;border:none;color:var(--color-muted,#888);
                   font-size:0.8rem;cursor:pointer;padding:0.2rem 0.4rem;border-radius:4px;"
            title="Melden">⚑ Melden</button>`;
    };
})();
