<?php
declare(strict_types=1);

/**
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();

function e(string $v): string {
    return htmlspecialchars($v, ENT_QUOTES, 'UTF-8');
}

$pageTitle = ($print_css_list3 ?? 'CSS') . ' bearbeiten';
?>

<?php if (isset($_GET['saved']) && $_GET['saved'] == 1): ?>
<div id="successBanner">
    <div class="success-banner">    
        <span>Änderungen wurden erfolgreich gespeichert!</span>
        <span class="close-btn" onclick="closeSuccessBanner()">✖</span>
    </div>
</div>
<?php endif; ?>

<div class="admin-form-box">

    <!-- TOOLBAR (ALLE 8 BUTTONS WIEDER DA) -->
    <div class="codemirror-menu" id="editor-menu">
        <button type="button" onclick="editor.undo()">⟲ Rückgängig</button>
        <button type="button" onclick="editor.redo()">⟳ Wiederholen</button>
		<button id="comment-btn">💬 Auskommentieren</button>
        <button type="button" onclick="editor.execCommand('find')">🔍 Suchen</button>
        <button type="button" onclick="editor.execCommand('replace')">✏️ Ersetzen</button>
        <button type="button" onclick="editor.execCommand('findNext')">↓ Nächstes</button>
        <button type="button" onclick="editor.execCommand('findPrev')">↑ Vorheriges</button>
        <button type="button" onclick="editor.execCommand('jumpToLine')"># Gehe zu Zeile</button>
        <button type="button" id="fullscreen-btn" onclick="toggleFullscreen()">⛶ Fullscreen</button>
    </div>

    <?php
    // WICHTIG: Muss ein <textarea id="b"> enthalten!
    echo $print_css_list1 ?? '';
    echo $print_css_list ?? '';
    echo $print_css_list2 ?? '';
    ?>
</div>

<style>
.codemirror-menu, .codemirror-save {
    background:#1f2430;
    padding:8px;
    border-radius:6px 6px 0 0;
    z-index:1000;
}

.codemirror-menu button, .codemirror-save button
.admin-form-box input[type="submit"] {
    background:#3a4050;
    color:#fff;
    border:none;
    padding:6px 10px;
    margin-right:5px;
    border-radius:4px;
    cursor:pointer;
}

.codemirror-menu button:hover, .codemirror-save button:hover {
    background:#4a5060;
}

/* EDITOR */
.CodeMirror {
    width:100%;
    height:400px;
}

/* FULLSCREEN EDITOR */
.CodeMirror-fullscreen {
    position:fixed !important;
    top:50px;
    left:0;
    right:0;
    bottom:0;
    z-index:9999;
}

/* 🔥 WICHTIG → TOOLBAR BLEIBT SICHTBAR */
.codemirror-menu.fullscreen {
    position:fixed !important;
    top:0;
    left:0;
    right:0;
    z-index:10000;
}

.codemirror-save.fullscreen {
	position: fixed;
	bottom: 5px;
	left: 0;
	right: 0;
	z-index: 100000;
	background: #1f2430;
	padding: 8px;
}

</style>

<!-- CodeMirror -->
<link rel="stylesheet" href="js/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="js/codemirror/theme/ayu-mirage.css">
<link rel="stylesheet" href="js/codemirror/addon/display/fullscreen.css">
<link rel="stylesheet" href="js/codemirror/addon/colorpicker/codemirror-colorpicker.css">

<script src="js/codemirror/lib/codemirror.js"></script>
<script src="js/codemirror/mode/css/css.js"></script>
<script src="js/codemirror/addon/search/search.js"></script>
<script src="js/codemirror/addon/search/searchcursor.js"></script>
<script src="js/codemirror/addon/display/fullscreen.js"></script>
<script src="js/codemirror/addon/colorpicker/codemirror-colorpicker.js"></script>
<script src="js/codemirror/addon/comment/comment.js"></script>

<script>
let editor;

// 🔹 GLOBALE Funktion (MUSS außerhalb von DOMContentLoaded sein)
function closeSuccessBanner() {
    const banner = document.getElementById("successBanner");
    if (banner) banner.style.display = "none";
}

document.addEventListener("DOMContentLoaded", function() {

    const textarea = document.getElementById("b");

    if (!textarea) {
        console.error("Textarea #b fehlt!");
        return;
    }

    editor = CodeMirror.fromTextArea(textarea, {
        mode: "css",
        lineNumbers: true,
        theme: "ayu-mirage",
        lineWrapping: true,
        colorpicker: true
    });

    // Comment-Button
    const commentBtn = document.getElementById("comment-btn");
    if (commentBtn) {
        commentBtn.onclick = function() {
            if (editor) {
                editor.execCommand("toggleComment");
            }
        };
    }

    // Auto-Close nach 5 Sekunden
    setTimeout(() => {
        const banner = document.getElementById("successBanner");
        if (banner && banner.style.display !== "none") {
            banner.style.display = "none";
        }
    }, 5000);

    // DIRTY CHECK
    let isDirty = false;
    let isSaving = false;

    editor.on("change", () => isDirty = true);

    const saveBtn = document.querySelector('input[type="submit"]');
    if (saveBtn) {
        saveBtn.addEventListener("click", () => isSaving = true);
    }

    window.addEventListener("beforeunload", function(e) {
        if (isDirty && !isSaving) {
            e.preventDefault();
            e.returnValue = '';
        }
    });

});

// FULLSCREEN FIX
function toggleFullscreen() {
    const cm = document.querySelector('.CodeMirror');
    const menu = document.getElementById('editor-menu');
    const save = document.getElementById('editor-save');
    const btn = document.getElementById('fullscreen-btn');

    if (!cm.classList.contains('CodeMirror-fullscreen')) {
        cm.classList.add('CodeMirror-fullscreen');
        menu.classList.add('fullscreen');
        save.classList.add('fullscreen');

        cm.style.top = '50px';
        cm.style.height = 'calc(100vh - 120px)';

        btn.textContent = '⛿ Exit';
    } else {
        cm.classList.remove('CodeMirror-fullscreen');
        menu.classList.remove('fullscreen');
        save.classList.remove('fullscreen');

        cm.style.top = '';
        cm.style.height = '';

        btn.textContent = '⛶ Fullscreen';
    }

    editor.refresh();
}
</script>

<?php
$content = ob_get_clean();
include 'admin_master_template.php';