<?php
declare(strict_types=1);

ob_start();
?>

<div id="successBanner">
<?= $message ?>
</div>


<link rel="stylesheet" href="js/spectrum/spectrum.min.css">
<script src="js/spectrum/jquery.min.js"></script>
<script src="js/spectrum/spectrum.min.js"></script>

<form method="post">
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken) ?>">

<div class="kachel-grid">

<?php foreach ($groupedVariables as $category => $items): ?>

    <div class="section">
        <h3><?= htmlspecialchars($category) ?></h3>

        <?php foreach ($items as $item): 
            $key   = $item['key'];
            $value = $item['value'];
            $label = $item['label'];
        ?>

        <div class="label-container">

            <label><?= htmlspecialchars($label) ?></label>

            <?php if ($key === '--img'): ?>

                <?php
                $cleanValue = basename(preg_replace('/^url\((["\']?)(.*?)\1\)$/', '$2', $value));
                ?>

                <select name="<?= $key ?>" class="img-select">
                    <option value="">— Kein Hintergrundbild —</option>
                    <?php foreach ($backgroundFiles as $file): ?>
                        <option value="<?= htmlspecialchars($file) ?>" <?= $file === $cleanValue ? 'selected' : '' ?>>
                            <?= htmlspecialchars($file) ?>
                        </option>
                    <?php endforeach; ?>
                </select>

				<small>Weitere Hintergründe hochladen <a href="?AdminImgManager" class="inline-link">Icon/Bild Manager</a></small>

                <div class="img-preview-wrapper">

                    <?php if (!empty($cleanValue) && file_exists("styles/{$style}/hintergrund/{$cleanValue}")): ?>
                        <div class="img-box">
                            <span>Aktuelles</span>
                            <img src="styles/<?= htmlspecialchars($style) ?>/hintergrund/<?= htmlspecialchars($cleanValue) ?>">
                        </div>
                    <?php endif; ?>

                    <div class="img-box preview-box">
                        <span>Vorschau</span>
                        <img class="live-preview" style="display:none;">
                    </div>

                </div>

            <?php elseif (array_key_exists($key, $onOffVars)): ?>

                <select name="<?= $key ?>">
                    <option value="" <?= $value === '' ? 'selected' : '' ?>>Anzeigen</option>
                    <option value="none" <?= $value === 'none' ? 'selected' : '' ?>>Ausblenden</option>
                </select>

            <?php else: ?>

                <?php
                $colorCheck = $value;

                if (in_array($key, ['--Textfarbe', '--Systemfarbe'], true)) {
                    $colorCheck = '#' . $value;
                }
                ?>

                <?php if ($isColor($colorCheck)): ?>

                    <?php
                    $uiValue = in_array($key, ['--Textfarbe', '--Systemfarbe'], true)
                        ? '#' . $value
                        : $value;
                    ?>

                    <input
                        type="text"
                        class="color-picker"
                        name="<?= $key ?>"
                        value="<?= htmlspecialchars($uiValue) ?>"
                    >

                <?php else: ?>

                    <input 
                        type="text" 
                        name="<?= $key ?>" 
                        value="<?= htmlspecialchars($value) ?>"
                    >

                <?php endif; ?>

            <?php endif; ?>

        </div>

        <?php endforeach; ?>

    </div>

<?php endforeach; ?>

</div>

<button type="submit">Speichern</button>
</form>

<script>
document.querySelectorAll(".img-select").forEach(select => {

    const style = "<?= $style ?>";
    const preview = select.parentElement.querySelector(".live-preview");

    function updatePreview() {
        const file = select.value;

        if (!file) {
            preview.style.display = "none";
            return;
        }

        preview.src = `styles/${style}/hintergrund/${file}`;
        preview.style.display = "block";
    }

    select.addEventListener("change", updatePreview);
    updatePreview();
});

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

    $(".color-picker").spectrum({
        type: "component",
        showInput: true,
        showAlpha: true,
        preferredFormat: "rgb",
        allowEmpty: false,
        showInitial: true,
        cancelText: "Abbrechen",
        chooseText: "Übernehmen"
    });

});
</script>

<script>
window.addEventListener('DOMContentLoaded', () => {
    const banner = document.getElementById("successBanner");
    if (banner) {
        setTimeout(() => {
            banner.style.display = "none";
        }, 5000);
    }
});

function closeSuccessBanner() {
    const banner = document.getElementById("successBanner");
    if (banner) banner.style.display = "none";
}
</script>

<?php
$content = ob_get_clean();

$pageTitle  = 'Chat Styler';
$backLink   = './?AdminIndex';
$footerNote = 'Beachte, dass Änderungen im Chat etwas verzögert ankommen bzw. ein Reload (Strg + F5) nötig ist.';

include __DIR__ . '/admin_master_template.php';