{# Widget « Livre d'or » — messages des visiteurs, enregistrés côté serveur
   (WidgetGuestbookController) avec honeypot et limitation de taux.

   Seuls les messages approuvés sont rendus ici ; un message soumis n'apparaît
   immédiatement que si le widget est en publication immédiate (le contrôleur
   relit ce réglage côté serveur, jamais depuis le formulaire). #}

<div class="izi-guestbook" style="--izi-gb-accent: {{ accentColor }};">
    {% if title %}<h3 class="izi-guestbook__title">{{ title }}</h3>{% endif %}
    {% if subtitle %}<p class="izi-guestbook__subtitle">{{ subtitle }}</p>{% endif %}

    <form class="izi-guestbook__form" method="post" action="{{ path('widget_guestbook_submit') }}">
        {# Honeypot : champ invisible qu'un humain ne remplit jamais #}
        <input type="text" name="guestbook[website_url]" value="" tabindex="-1" autocomplete="off" aria-hidden="true"
               style="position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;">

        <div class="izi-guestbook__row">
            <input class="izi-guestbook__input" type="text" name="guestbook[name]" required
                   minlength="2" maxlength="100" placeholder="Votre nom" aria-label="Votre nom">
        </div>
        <div class="izi-guestbook__row">
            <textarea class="izi-guestbook__input izi-guestbook__textarea" name="guestbook[message]" required
                      minlength="3" maxlength="2000" rows="3" placeholder="Votre message"
                      aria-label="Votre message"></textarea>
        </div>
        <button class="izi-guestbook__button" type="submit">{{ buttonText }}</button>
    </form>

    <p class="izi-guestbook__feedback" role="status" aria-live="polite" hidden></p>

    <div class="izi-guestbook__wall">
        {% if messages is empty %}
            <p class="izi-guestbook__empty">Soyez la première personne à laisser un message !</p>
        {% endif %}
        {% for entry in messages %}
            <blockquote class="izi-guestbook__card">
                <p class="izi-guestbook__message">{{ entry.message|nl2br }}</p>
                <footer class="izi-guestbook__meta">
                    <span class="izi-guestbook__author">{{ entry.authorName }}</span>
                    {% if showDates and entry.createdAt %}
                        <time datetime="{{ entry.createdAt|date('Y-m-d') }}">{{ entry.createdAt|date('d/m/Y') }}</time>
                    {% endif %}
                </footer>
            </blockquote>
        {% endfor %}
    </div>
</div>

<style>
    .izi-guestbook {
        max-width: 860px;
        margin: 0 auto;
        padding: 40px 20px;
    }

    .izi-guestbook__title {
        margin: 0 0 8px 0;
        font-size: 26px;
        font-weight: 700;
        text-align: center;
        color: var(--color-text, #1e293b);
    }

    .izi-guestbook__subtitle {
        margin: 0 0 22px 0;
        font-size: 15px;
        text-align: center;
        color: var(--color-text-light, #64748b);
    }

    .izi-guestbook__form {
        max-width: 560px;
        margin: 0 auto 10px auto;
    }

    .izi-guestbook__row { margin-bottom: 10px; }

    .izi-guestbook__input {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid var(--color-border, #e2e8f0);
        border-radius: var(--radius-md, 8px);
        font-size: 15px;
        font-family: inherit;
        box-sizing: border-box;
    }

    .izi-guestbook__textarea { resize: vertical; }

    .izi-guestbook__input:focus {
        outline: none;
        border-color: var(--izi-gb-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--izi-gb-accent) 20%, transparent);
    }

    .izi-guestbook__button {
        display: block;
        margin: 0 auto;
        padding: 12px 30px;
        border: none;
        border-radius: var(--radius-md, 8px);
        background: var(--izi-gb-accent);
        color: #ffffff;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: filter 0.2s;
    }

    .izi-guestbook__button:hover { filter: brightness(0.92); }
    .izi-guestbook__button:disabled { opacity: 0.6; cursor: wait; }

    .izi-guestbook__feedback {
        margin: 12px 0 0 0;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
    }

    .izi-guestbook__feedback--success { color: #16a34a; }
    .izi-guestbook__feedback--error { color: #dc2626; }

    .izi-guestbook__wall {
        margin-top: 30px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 14px;
    }

    .izi-guestbook__empty {
        grid-column: 1 / -1;
        text-align: center;
        color: var(--color-text-light, #64748b);
        font-size: 14.5px;
    }

    .izi-guestbook__card {
        margin: 0;
        padding: 16px 18px;
        background: var(--color-surface, #f8fafc);
        border: 1px solid var(--color-border, #e2e8f0);
        border-left: 4px solid var(--izi-gb-accent);
        border-radius: var(--radius-md, 10px);
    }

    .izi-guestbook__message {
        margin: 0 0 10px 0;
        font-size: 14.5px;
        line-height: 1.55;
        color: var(--color-text, #1e293b);
        overflow-wrap: anywhere;
    }

    .izi-guestbook__meta {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        font-size: 12.5px;
        color: var(--color-text-light, #64748b);
    }

    .izi-guestbook__author { font-weight: 700; }

    .container-on-dark .izi-guestbook__title { color: #ffffff; }
    .container-on-dark .izi-guestbook__subtitle { color: var(--primitive-gray-200, #e2e8f0); }
</style>

<script>
    (function () {
        document.querySelectorAll('.izi-guestbook__form').forEach(function (form) {
            if (form.dataset.iziGbBound) return;
            form.dataset.iziGbBound = '1';

            form.addEventListener('submit', function (e) {
                e.preventDefault();
                var widget = form.closest('.izi-guestbook');
                var button = form.querySelector('.izi-guestbook__button');
                var feedback = widget.querySelector('.izi-guestbook__feedback');
                button.disabled = true;

                fetch(form.action, {
                    method: 'POST',
                    body: new FormData(form),
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                })
                    .then(function (response) { return response.json(); })
                    .then(function (result) {
                        feedback.hidden = false;
                        feedback.textContent = result.message || 'Une erreur est survenue.';
                        feedback.className = 'izi-guestbook__feedback izi-guestbook__feedback--' +
                            (result.success ? 'success' : 'error');

                        if (result.success) {
                            // Publication immédiate : le message rejoint le mur sans rechargement.
                            if (result.published) {
                                var wall = widget.querySelector('.izi-guestbook__wall');
                                var empty = wall.querySelector('.izi-guestbook__empty');
                                if (empty) empty.remove();

                                var card = document.createElement('blockquote');
                                card.className = 'izi-guestbook__card';
                                var msg = document.createElement('p');
                                msg.className = 'izi-guestbook__message';
                                msg.textContent = form.querySelector('[name="guestbook[message]"]').value;
                                var meta = document.createElement('footer');
                                meta.className = 'izi-guestbook__meta';
                                var author = document.createElement('span');
                                author.className = 'izi-guestbook__author';
                                author.textContent = result.authorName || '';
                                meta.appendChild(author);
                                card.appendChild(msg);
                                card.appendChild(meta);
                                wall.prepend(card);
                            }
                            form.reset();
                        }
                    })
                    .catch(function () {
                        feedback.hidden = false;
                        feedback.textContent = 'Une erreur est survenue. Veuillez réessayer.';
                        feedback.className = 'izi-guestbook__feedback izi-guestbook__feedback--error';
                    })
                    .finally(function () { button.disabled = false; });
            });
        });
    })();
</script>