<?php
/**
ET-Chat Copyright by SEDesign | ET-Chat v3.x.x Lizenz: CCPL | Autor: Evgeni Tcherkasski (info@s-e-d.de)
ET-Chat_T-FISH-MOD Weiterentwicklungen, Optimierungen und Ergänzungen am Code sind das geistige Eigentum von Tommy (Thomas Kuhn) und Harlekin (Bernd Witte).

Die darauf folgende Optimierungen und Ergänzungen am Code sind das Geistige Eigentum von Powermen (Christian K.)
und wird unter der Namenserweiterung M.C.v.x.x.x. geführt. 
PHP 8/9 Ready, XML Parser, PDO Prepared Statements Get Set sicherheit usw.
 */

ob_start();
?>

<style>
/* Nur die spezifischen Styles für die Wort-Tags */
.word-tag {
    display: inline-block;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #444;
    border-radius: 20px;
    padding: 5px 12px;
    margin: 5px;
    font-size: 14px;
    transition: all 0.2s;
}

.word-tag:hover {
    background: #4a6cf7;
    border-color: #4a6cf7;
    color: white;
}

.word-tag:hover .delete-word {
    color: #fff;
}

.word-tag .delete-word {
    margin-left: 8px;
    cursor: pointer;
    color: #ff3333;
    font-weight: bold;
    font-size: 16px;
}

.word-tag .delete-word:hover {
    color: #cc0000;
}

#newWordInput {
    width: auto;
    display: inline-block;
    margin-right: 10px;
}

#addWordBtn {
    margin-top: 0;
    display: inline-block;
}

/* Fehlerbanner - überschreibt die normale success-banner Klasse */
.success-banner.error {
    background-color: #dc3545;
    border-color: #bd2130;
}
</style>

<div id="successBanner"></div>

<div class="section">
    <strong>ℹ️ Info:</strong> Diese Wörter dürfen Benutzer nicht in ihrem Namen verwenden.<br>
    Die Prüfung erfolgt Groß-/Kleinschreibung- und wort-unabhängig. Änderungen wirken sofort.<br>
    <strong style="color: #ff8888;">⚠️ Achtung:</strong> Achten Sie darauf, dass Sie keine User oder sich selbst aussperren für den Login(z.B. "Admin").
</div>

<div class="kachel-grid">
<!-- Schnell-Hinzufügen Bereich -->
<div class="section">
    <strong>➕ Einzelnes Wort hinzufügen:</strong><br><br>
    <input type="text" id="newWordInput" placeholder="z.B. spam" maxlength="30" class="text" style="width: 200px;">
    <button id="addWordBtn" class="admin-button">Hinzufügen</button>
</div>

<!-- Aktuelle Wörter als Tags anzeigen -->
<div class="section">
    <strong>📝 Aktuelle verbotene Wörter:</strong>
    <div class="word-count" id="wordCount" style="font-size: 12px; color: #aaa; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #444;"></div>
    <div id="tagsContainer"></div>
</div>
</div>

<script>
// Globale Variable für die aktuelle Wortliste
let currentWordsList = [];

// HTML escapen
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Banner anzeigen (oben)
function showBanner(message, isError = false) {
    const bannerContainer = document.getElementById('successBanner');
    if (!bannerContainer) return;
    
    // Banner erstellen
    const banner = document.createElement('div');
    banner.className = 'success-banner';
    if (isError) banner.classList.add('error');
    
    banner.innerHTML = `
        <span>${message}</span>
        <span class="close-btn" onclick="closeBanner()">✖</span>
    `;
    
    // Alten Banner ersetzen
    bannerContainer.innerHTML = '';
    bannerContainer.appendChild(banner);
    bannerContainer.style.display = 'block';
    
    // Nach 5 Sekunden automatisch ausblenden
    setTimeout(() => {
        if (bannerContainer) {
            bannerContainer.style.display = 'none';
        }
    }, 5000);
}

// Banner schließen
function closeBanner() {
    const bannerContainer = document.getElementById("successBanner");
    if (bannerContainer) {
        bannerContainer.style.display = "none";
    }
}

// Tags anzeigen
function renderTags() {
    const container = document.getElementById('tagsContainer');
    const countSpan = document.getElementById('wordCount');
    
    if (!currentWordsList || currentWordsList.length === 0) {
        countSpan.innerHTML = 'Insgesamt: 0 Wort(e)';
        container.innerHTML = '<em style="color: #999;">Keine verbotenen Wörter definiert.</em>';
        return;
    }
    
    countSpan.innerHTML = `Insgesamt: ${currentWordsList.length} Wort(e) — <span style="color: #ff6666;">✖</span> = löschen (oder auf das Wort klicken)`;
    
    let html = '';
    currentWordsList.forEach(word => {
        const escapedWord = escapeHtml(word);
        html += `
            <div class="word-tag" onclick="deleteWord('${escapedWord}')" style="cursor: pointer;">
                ${escapedWord}
                <span class="delete-word" onclick="event.stopPropagation(); deleteWord('${escapedWord}')" title="Löschen">✖</span>
            </div>
        `;
    });
    container.innerHTML = html;
}

// Wörter vom Server laden (initial)
function loadWordsFromServer() {
    fetch(window.location.href, {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.words) {
            currentWordsList = data.words;
            renderTags();
        }
    })
    .catch(error => {
        console.error('Fehler beim Laden:', error);
        currentWordsList = [];
        renderTags();
        showBanner('❌ Fehler beim Laden der Wortliste', true);
    });
}

// Einzelnes Wort löschen
function deleteWord(word) {
    if (confirm(`Möchtest du "${word}" wirklich aus der Liste entfernen?`)) {
        fetch(window.location.href, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'delete_single_word=1&delete_word=' + encodeURIComponent(word)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                currentWordsList = data.words;
                renderTags();
                showBanner('✅ Wort "' + word + '" wurde gelöscht!');
            } else {
                showBanner('❌ Fehler: ' + data.error, true);
            }
        })
        .catch(error => {
            showBanner('❌ Fehler beim Löschen', true);
        });
    }
}

// Einzelnes Wort hinzufügen
function addSingleWord() {
    const input = document.getElementById('newWordInput');
    const word = input.value.trim().toLowerCase();
    
    if (word === '') {
        showBanner('⚠️ Bitte ein Wort eingeben!', true);
        return;
    }
    
    if (word.length < 2) {
        showBanner('⚠️ Wort muss mindestens 2 Zeichen haben!', true);
        return;
    }
    
    if (currentWordsList.includes(word)) {
        showBanner('❌ Dieses Wort existiert bereits!', true);
        return;
    }
    
    const addBtn = document.getElementById('addWordBtn');
    addBtn.disabled = true;
    addBtn.textContent = 'Wird hinzugefügt...';
    
    fetch(window.location.href, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'add_single_word=1&new_word=' + encodeURIComponent(word)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            currentWordsList = data.words;
            renderTags();
            input.value = '';
            showBanner('✅ "' + word + '" wurde hinzugefügt!');
        } else {
            showBanner('❌ ' + data.error, true);
        }
    })
    .catch(error => {
        showBanner('❌ Fehler beim Hinzufügen', true);
    })
    .finally(() => {
        addBtn.disabled = false;
        addBtn.textContent = 'Hinzufügen';
    });
}

// Initialisierung
document.addEventListener('DOMContentLoaded', () => {
    loadWordsFromServer();
    
    const addBtn = document.getElementById('addWordBtn');
    if (addBtn) addBtn.addEventListener('click', addSingleWord);
    
    const newWordInput = document.getElementById('newWordInput');
    if (newWordInput) {
        newWordInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
                addSingleWord();
            }
        });
        newWordInput.focus();
    }
});
</script>

<?php
$content = ob_get_clean();

$pageTitle  = 'Verbotene Benutzernamen verwalten';
$backLink   = './?AdminIndex';
$footerNote = 'Diese Liste wird in cache/verbotene_user_namen.json gespeichert.';

include __DIR__ . '/admin_master_template.php';
?>