{% extends 'admin/base_admin.html.twig' %}
{% block title %}Conversation #{{ c.id }}{% endblock %}
{% block breadcrumb %}Assistant IA / #{{ c.id }}{% endblock %}
{% block content %}
    <div class="head-row">
        <h1 class="page-title" style="font-size:24px">{{ c.visitorName ?? 'Visiteur anonyme' }} <span style="color:var(--muted);font-size:15px;text-transform:capitalize">· {{ c.sector }}</span></h1>
        <a class="btn btn--ghost" href="{{ path('admin_chatbot_index') }}">← Retour</a>
    </div>

    <div class="grid-2">
        <div class="card card--pad">
            <h2 style="font-family:var(--title);font-size:16px;margin:0 0 16px">Fil de discussion</h2>
            <div style="display:flex;flex-direction:column;gap:12px">
                {% for m in c.messages %}
                    {% set me = m.role == 'user' %}
                    <div style="align-self:{{ me ? 'flex-start' : 'flex-end' }};max-width:82%;background:{{ me ? 'var(--surface-2)' : '#1C4F1C' }};border:1px solid {{ me ? 'var(--border-2)' : '#327632' }};border-radius:10px;padding:10px 13px">
                        <div style="font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:{{ me ? 'var(--muted)' : '#A9E5A0' }};margin-bottom:3px">{{ me ? 'Visiteur' : 'Assistant' }}{% if m.at is defined %} · {{ m.at|date('d/m H:i') }}{% endif %}</div>
                        <div style="font-size:13.5px;line-height:1.5;color:var(--text);white-space:pre-wrap">{{ m.content }}</div>
                    </div>
                {% else %}
                    <p style="color:var(--muted)">Aucun message.</p>
                {% endfor %}
            </div>
        </div>

        <div class="card card--pad">
            <h2 style="font-family:var(--title);font-size:16px;margin:0 0 14px">Suivi</h2>
            <table class="data" style="min-width:auto;margin-bottom:16px"><tbody>
                <tr><td style="color:var(--muted);width:130px">Secteur</td><td style="text-transform:capitalize">{{ c.sector }}</td></tr>
                <tr><td style="color:var(--muted)">Prénom détecté</td><td>{{ c.visitorName ?? '—' }}</td></tr>
                <tr><td style="color:var(--muted)">Messages</td><td>{{ c.messages|length }}</td></tr>
                <tr><td style="color:var(--muted)">Démarrée</td><td>{{ c.createdAt|date('d/m/Y H:i') }}</td></tr>
                <tr><td style="color:var(--muted)">Dernier message</td><td>{{ c.updatedAt|date('d/m/Y H:i') }}</td></tr>
            </tbody></table>

            <form method="post" action="{{ path('admin_chatbot_status', {id: c.id}) }}">
                <label class="field"><span>Statut</span>
                    <select name="status">
                        {% for s in ['en_cours', 'resolu', 'escalade'] %}
                            <option value="{{ s }}" {{ c.status.value == s ? 'selected' }}>{{ s|replace({'_': ' '})|capitalize }}</option>
                        {% endfor %}
                    </select>
                </label>
                <button class="btn btn--primary" type="submit" style="width:100%;justify-content:center">Enregistrer</button>
            </form>

            <form method="post" action="{{ path('admin_chatbot_delete', {id: c.id}) }}" style="margin-top:10px" onsubmit="return confirm('Supprimer définitivement cette conversation ?')">
                <button class="btn btn--ghost" type="submit" style="width:100%;justify-content:center;color:var(--red)">Supprimer la conversation</button>
            </form>
        </div>
    </div>
{% endblock %}