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

{% block title %}{{ page_title }}{% endblock %}

{% block body %}
<div class="container mx-auto py-8">
    <div class="mb-6">
        <a href="{{ path('app_onboarding_index') }}" class="text-blue-500 hover:text-blue-700">← Retour</a>
        <h1 class="text-3xl font-bold mt-2">{{ page_title }}</h1>
    </div>

    <div class="grid grid-cols-2 gap-6">
        <!-- Session Info -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-2xl font-bold mb-4 border-b pb-2">Informations de session</h2>
            <div class="space-y-3">
                <div>
                    <p class="text-sm text-gray-600">ID</p>
                    <p class="text-lg font-semibold">{{ session.id }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-600">Statut</p>
                    <span class="inline-block px-3 py-1 rounded-full text-sm font-semibold {% if session.status == 'completed' %}bg-green-100 text-green-800{% elseif session.status == 'in_progress' %}bg-blue-100 text-blue-800{% else %}bg-gray-100 text-gray-800{% endif %}">
                        {% if session.status == 'in_progress' %}En cours{% elseif session.status == 'completed' %}Complété{% else %}{{ session.status }}{% endif %}
                    </span>
                </div>
                <div>
                    <p class="text-sm text-gray-600">Créée le</p>
                    <p class="text-lg">{{ session.createdAt|date('d/m/Y à H:i:s') }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-600">Dernière mise à jour</p>
                    <p class="text-lg">{{ session.updatedAt|date('d/m/Y à H:i:s') }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-600">Messages</p>
                    <p class="text-lg font-semibold">{{ displayMessages|length }}</p>
                </div>
            </div>
        </div>

        <!-- Extracted Data Summary -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-2xl font-bold mb-4 border-b pb-2">Données Extraites</h2>
            <div class="space-y-3">
                {% set data = session.extractedData %}
                {% if data|length > 0 %}
                    {% for key, value in data %}
                        <div>
                            <p class="text-sm text-gray-600 capitalize">{{ key|replace('_', ' ') }}</p>
                            <p class="text-lg text-gray-800">
                                {% if value is iterable %}
                                    {{ value|json_encode(constant('JSON_UNESCAPED_UNICODE')) }}
                                {% else %}
                                    {{ value }}
                                {% endif %}
                            </p>
                        </div>
                    {% endfor %}
                {% else %}
                    <p class="text-gray-500">Aucune donnée extraite</p>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Messages History -->
    <div class="bg-white rounded-lg shadow-md p-6 mt-6">
        <h2 class="text-2xl font-bold mb-4 border-b pb-2">Historique complet</h2>
        
        <div class="space-y-4 max-h-96 overflow-y-auto">
            {% if displayMessages|length > 0 %}
                {% for message in displayMessages %}
                    <div class="{% if message.role == 'user' %}bg-blue-50 border-l-4 border-blue-500{% else %}bg-gray-50 border-l-4 border-gray-300{% endif %} p-4 rounded">
                        <p class="font-semibold text-sm text-gray-600 mb-1">
                            {% if message.role == 'user' %}Utilisateur{% else %}Assistant{% endif %}
                            <span class="text-xs text-gray-500">{{ message.timestamp or 'N/A' }}</span>
                        </p>
                        <p class="text-gray-800">{{ message.content }}</p>
                    </div>
                {% endfor %}
            {% else %}
                <p class="text-gray-500 text-center py-8">Aucun message</p>
            {% endif %}
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="flex gap-4 mt-6">
        {% if session.status == 'in_progress' %}
            <a href="{{ path('app_onboarding_chat', {id: session.id}) }}" class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
                Continuer le chat
            </a>
            <a href="{{ path('app_onboarding_review', {id: session.id}) }}" class="px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition">
                Valider le profil
            </a>
        {% elseif session.status == 'completed' %}
            {% if session.account %}
                <a href="{{ path('app_account_show', {id: session.account.id}) }}" class="px-6 py-3 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition">
                    Voir le compte créé
                </a>
            {% endif %}
        {% endif %}
    </div>
</div>
{% endblock %}