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

{% block title %}Analisi domande — {{ bot.name }}{% endblock %}

{% block backend %}
<div style="max-width:900px">
    <div class="page-head page-head--row">
        <div>
            <h1>Analisi delle domande</h1>
            <p class="muted">Cosa chiedono di più i clienti a <b>{{ bot.name }}</b>, raggruppato per argomento.</p>
        </div>
        <a href="{{ path('bot_show', {id: bot.id}) }}" class="btn btn--sm btn--ghost"><i class="fa-solid fa-arrow-left"></i> Torna all'assistente</a>
    </div>

    {# Riepilogo numeri + pulsante analisi #}
    <div class="stat-row" style="display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:1.5rem">
        <div class="card" style="padding:1.1rem 1.25rem">
            <div class="muted" style="font-size:.8rem; text-transform:uppercase; letter-spacing:.04em">Domande raccolte</div>
            <div style="font-size:1.8rem; font-weight:800">{{ totale }}</div>
        </div>
        <div class="card" style="padding:1.1rem 1.25rem">
            <div class="muted" style="font-size:.8rem; text-transform:uppercase; letter-spacing:.04em">Argomenti trovati</div>
            <div style="font-size:1.8rem; font-weight:800">{{ breakdown|length }}</div>
        </div>
        <div class="card" style="padding:1.1rem 1.25rem">
            <div class="muted" style="font-size:.8rem; text-transform:uppercase; letter-spacing:.04em">Da analizzare</div>
            <div style="font-size:1.8rem; font-weight:800">{{ daClassificare }}</div>
        </div>
    </div>

    <div class="card" style="padding:1.25rem 1.5rem; margin-bottom:1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap">
        <p class="muted" style="margin:0; font-size:var(--fs-md); flex:1; min-width:220px">
            L'analisi raggruppa le domande per argomento con l'AI. Lanciala quando vuoi:
            classifica le domande nuove {% if daClassificare > 0 %}(<b>{{ daClassificare }}</b> in attesa){% endif %}.
        </p>
        <form method="post" action="{{ path('bot_analytics_run', {id: bot.id}) }}" class="inline-form">
            <input type="hidden" name="_token" value="{{ csrf_token('analytics_run_' ~ bot.id) }}">
            <button type="submit" class="btn" {{ daClassificare == 0 ? 'disabled' : '' }}>
                <i class="fa-solid fa-wand-magic-sparkles"></i> Aggiorna analisi
            </button>
        </form>
    </div>

    {# Grafico a barre per argomento #}
    {% if breakdown is not empty %}
        <div class="card" style="padding:1.5rem; margin-bottom:1.5rem">
            <h3 style="font-weight:800; margin-bottom:1rem">Domande per argomento</h3>
            {% set maxc = breakdown|first.cnt %}
            <div style="display:flex; flex-direction:column; gap:.7rem">
                {% for row in breakdown %}
                    <div>
                        <div style="display:flex; justify-content:space-between; font-size:.9rem; margin-bottom:.25rem">
                            <span style="font-weight:600">{{ row.category }}</span>
                            <span class="muted">{{ row.cnt }} · {{ (row.cnt / totaleClassificate * 100)|round }}%</span>
                        </div>
                        <div class="bar-track"><div class="bar-fill" style="width:{{ (row.cnt / maxc * 100)|round }}%"></div></div>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% else %}
        <div class="card empty-state" style="margin-bottom:1.5rem">
            <p class="muted">Ancora nessun argomento.</p>
            <p class="muted" style="font-size:.9rem">
                {% if totale > 0 %}Premi "Aggiorna analisi" per raggruppare le {{ totale }} domande raccolte.
                {% else %}Comparirà qui appena i clienti inizieranno a scrivere al tuo assistente.{% endif %}
            </p>
        </div>
    {% endif %}

    {# Ultime domande #}
    {% if recenti is not empty %}
        <div class="card table-wrap" style="padding:0">
            <table class="data-table">
                <thead>
                    <tr><th>Quando</th><th>Domanda</th><th>Argomento</th><th>Canale</th></tr>
                </thead>
                <tbody>
                    {% for q in recenti %}
                        <tr>
                            <td class="muted" style="white-space:nowrap">{{ q.createdAt|date('d/m H:i') }}</td>
                            <td>{{ q.text }}</td>
                            <td>{% if q.category %}<span class="pill pill--on">{{ q.category }}</span>{% else %}<span class="muted">—</span>{% endif %}</td>
                            <td class="muted">{{ q.channel }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
</div>
{% endblock %}