{% extends 'backend.html.twig' %}

{% block title %}Prova {{ bot.name }} — Mostry{% endblock %}

{% block backend %}
    <div class="page-head page-head--row">
        <div>
            <h1>Prova {{ bot.name }}</h1>
            <p class="muted">
                Parla col tuo assistente come farebbe un tuo cliente.
                {% if not stato.allowsEmbed %}
                    Durante la prova gratuita l'assistente funziona solo qui dentro.
                {% endif %}
            </p>
        </div>
        <a href="{{ path('bot_show', {id: bot.id}) }}" class="btn btn--ghost btn--sm">
            <i class="fa-solid fa-arrow-left"></i> Torna all'assistente
        </a>
    </div>

    {% if not stato.allowsEmbed %}
        <div class="alert alert--warn">
            <i class="fa-solid fa-flask"></i>
            <b>Prova gratuita.</b> Puoi provare l'assistente quanto vuoi da questa pagina.
            Per metterlo sul tuo sito o su WhatsApp serve un piano attivo.
            <a href="{{ path('subscription') }}">Vedi i piani</a>
        </div>
    {% endif %}

    <div class="card chatbox"
         id="chatbox"
         data-url="{{ path('bot_preview_message', {id: bot.id}) }}"
         data-token="{{ csrf_token('bot_preview' ~ bot.id) }}">
        <div class="chatbox__head">
            {% if bot.avatar and bot.avatar starts with 'data:' %}<img src="{{ bot.avatar }}" alt="" class="chatbox__avatar">
            {% elseif bot.avatar %}<img src="{{ asset('img/avatars/' ~ bot.avatar ~ '.svg') }}" alt="" class="chatbox__avatar">
            {% else %}<img src="{{ asset('img/logo.png') }}" alt="" class="chatbox__avatar">{% endif %}
            <div>
                <div class="chatbox__name">{{ bot.name }}</div>
                <div class="chatbox__status">Anteprima privata</div>
            </div>
        </div>

        <div class="chatbox__log" id="chatLog" aria-live="polite"></div>

        <form class="chatbox__form" id="chatForm" autocomplete="off">
            <textarea id="chatInput" rows="1" placeholder="Scrivi un messaggio…" maxlength="1000"></textarea>
            <button type="submit" id="chatSend" aria-label="Invia">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="M2.01 21 23 12 2.01 3 2 10l15 2-15 2z"/></svg>
            </button>
        </form>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        (function () {
            var box = document.getElementById('chatbox');
            var log = document.getElementById('chatLog');
            var form = document.getElementById('chatForm');
            var input = document.getElementById('chatInput');
            var send = document.getElementById('chatSend');
            var url = box.getAttribute('data-url');
            var token = box.getAttribute('data-token');
            var history = [];

            function msg(text, cls) {
                var el = document.createElement('div');
                el.className = 'chatbox__msg ' + cls;
                el.textContent = text;
                log.appendChild(el);
                log.scrollTop = log.scrollHeight;
                return el;
            }

            msg('Ciao! Sono {{ bot.name|e('js') }}. Fammi una domanda come farebbe un tuo cliente.', 'chatbox__msg--bot');

            input.addEventListener('input', function () {
                input.style.height = 'auto';
                input.style.height = Math.min(input.scrollHeight, 120) + 'px';
            });
            input.addEventListener('keydown', function (e) {
                if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); form.requestSubmit(); }
            });

            form.addEventListener('submit', function (e) {
                e.preventDefault();
                var text = input.value.trim();
                if (!text) return;

                msg(text, 'chatbox__msg--user');
                history.push({ role: 'user', content: text });
                input.value = '';
                input.style.height = 'auto';
                send.disabled = true;

                var typing = msg('sta scrivendo…', 'chatbox__typing');

                fetch(url, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': token },
                    body: JSON.stringify({ history: history })
                })
                    .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
                    .then(function (res) {
                        typing.remove();
                        if (res.data && res.data.reply) {
                            msg(res.data.reply, 'chatbox__msg--bot');
                            history.push({ role: 'assistant', content: res.data.reply });
                        } else {
                            msg((res.data && res.data.error) || 'Si è verificato un errore.', 'chatbox__msg--error');
                        }
                    })
                    .catch(function () {
                        typing.remove();
                        msg('Impossibile contattare l\'assistente. Riprova.', 'chatbox__msg--error');
                    })
                    .finally(function () { send.disabled = false; input.focus(); });
            });

            input.focus();
        })();
    </script>
{% endblock %}