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

{% block title %}La tua prova gratuita — Mostry{% endblock %}

{% block body %}
    <header class="topbar">
        <div class="topbar__inner">
            <a href="{{ path('home') }}" class="brand">
                <img src="{{ asset('img/logo.png') }}" alt="" class="brand__logo"> Most<span>ry</span>
            </a>
            <div class="topbar__actions" style="margin-left:auto">
                <a href="{{ path('login') }}" class="btn btn--ghost btn--sm">
                    <i class="fa-solid fa-arrow-right-to-bracket"></i> Accedi
                </a>
                <a href="{{ path('register') }}" class="btn btn--sm">Crea un account</a>
            </div>
        </div>
    </header>

    <main class="trial">
        <div class="head head--center" style="margin-bottom:28px">
            <span class="eyebrow">Prova gratuita</span>
            <h1 class="head__title">Fai una domanda, come farebbe un tuo cliente</h1>
            <p class="head__sub">
                Questo è un assistente Mostry configurato per raccontare Mostry stesso.
                Il tuo funzionerebbe allo stesso modo, ma sulla tua attività.
            </p>
        </div>

        <div class="trial__chat">
            <div class="trial__head">
                <img src="{{ asset('img/logo.png') }}" alt="" class="mock__avatar">
                <div class="mock__name">Mostry</div>
                <span class="mock__status">Assistente attivo</span>
            </div>

            <div class="trial__log" id="log" aria-live="polite">
                <div class="bubble bubble--bot">Ciao! Sono l'assistente di Mostry. Raccontami che lavoro fai e ti dico, in concreto, cosa potrei fare per i tuoi clienti.</div>
            </div>

            <div class="suggests" id="suggests">
                <button type="button">Ho un ristorante, cosa fai per me?</button>
                <button type="button">Funziona anche su WhatsApp?</button>
                <button type="button">Quanto costa?</button>
                <button type="button">Devo saper programmare?</button>
            </div>

            <form class="trial__form" id="form">
                <input type="text" id="input" placeholder="Scrivi la tua domanda…" autocomplete="off" maxlength="500" required>
                <button type="submit" id="send" aria-label="Invia">
                    <i class="fa-solid fa-paper-plane"></i>
                </button>
            </form>
        </div>

        <p class="trial__hint" id="hint">
            Stai provando con <b>{{ email }}</b> · La prova è limitata a qualche domanda.
            <a href="{{ path('register') }}" style="color:var(--blue)">Crea un account gratuito</a> per costruire il tuo.
        </p>
    </main>

    <footer class="footer">
        <div class="footer__inner">
            <div class="footer__meta" style="margin-top:0;border-top:0;padding-top:0">
                <span>© {{ 'now'|date('Y') }} Mostry</span>
                <a href="{{ path('home') }}">← Torna al sito</a>
            </div>
        </div>
    </footer>
{% endblock %}

{% block javascripts %}
    <script>
        (function () {
            var URL_MSG = {{ path('trial_message')|json_encode|raw }};
            var log = document.getElementById('log');
            var form = document.getElementById('form');
            var input = document.getElementById('input');
            var send = document.getElementById('send');
            var suggests = document.getElementById('suggests');
            var hint = document.getElementById('hint');

            // Cronologia inviata al server a ogni richiesta
            var history = [];
            var busy = false;

            function bubble(text, mine) {
                var el = document.createElement('div');
                el.className = 'bubble ' + (mine ? 'bubble--user' : 'bubble--bot');
                el.textContent = text;
                log.appendChild(el);
                log.scrollTop = log.scrollHeight;
                return el;
            }

            function typing() {
                var el = document.createElement('div');
                el.className = 'bubble bubble--bot';
                el.innerHTML = '<span class="typing"><span></span><span></span><span></span></span>';
                log.appendChild(el);
                log.scrollTop = log.scrollHeight;
                return el;
            }

            function lock(state) {
                busy = state;
                send.disabled = state;
                input.disabled = state;
            }

            function chiudi(messaggio) {
                lock(true);
                input.placeholder = 'Prova terminata';
                hint.innerHTML = messaggio +
                    ' <a href="{{ path('register') }}" style="color:var(--blue)">Crea un account gratuito →</a>';
            }

            function invia(testo) {
                if (busy || !testo.trim()) return;

                bubble(testo, true);
                history.push({ role: 'user', content: testo });
                input.value = '';
                suggests.style.display = 'none';
                lock(true);

                var attesa = typing();

                fetch(URL_MSG, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ history: history })
                })
                    .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); })
                    .then(function (res) {
                        attesa.remove();
                        if (!res.ok || res.d.error) {
                            bubble(res.d.error || 'Si è verificato un errore. Riprova.', false);
                            if (res.d.limite) { chiudi('Hai finito i messaggi di prova.'); return; }
                            lock(false);
                            input.focus();
                            return;
                        }

                        bubble(res.d.reply, false);
                        history.push({ role: 'assistant', content: res.d.reply });
                        lock(false);
                        input.focus();

                        if (typeof res.d.rimasti === 'number' && res.d.rimasti <= 3) {
                            hint.innerHTML = 'Ti restano <b>' + res.d.rimasti + '</b> messaggi di prova. ' +
                                '<a href="{{ path('register') }}" style="color:var(--blue)">Crea un account gratuito →</a>';
                        }
                    })
                    .catch(function () {
                        attesa.remove();
                        bubble('Connessione non riuscita. Controlla la rete e riprova.', false);
                        lock(false);
                    });
            }

            form.addEventListener('submit', function (e) {
                e.preventDefault();
                invia(input.value);
            });

            suggests.addEventListener('click', function (e) {
                if (e.target.tagName === 'BUTTON') invia(e.target.textContent.trim());
            });

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