{% extends 'game/admin/base.html.twig' %}

{% block title %}Session #{{ session.id }} logs — Admin{% endblock %}

{% block admin_body %}
    <div style="margin-bottom: 1.5rem;">
        <a href="{{ path('game_admin_sessions') }}" style="color: #64748b; text-decoration: none; font-size: 0.9rem;">← Sessions</a>
    </div>

    <h1 style="margin: 0 0 0.25rem; font-size: 1.5rem; color: #0f172a;">{{ session.game.name }} — Session #{{ session.id }}</h1>
    <p style="margin: 0 0 1.5rem; color: #64748b; font-size: 0.9rem;">{{ session.status.value }} · {{ session.players|length }} player(s) · Created {{ session.created|date('Y-m-d H:i') }}</p>

    <div style="background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.07); padding: 1.25rem; margin-bottom: 1.5rem;">
        <h2 style="margin: 0 0 1rem; font-size: 1.1rem; color: #0f172a;">Pregame lobby chat</h2>

        {% if lobbyMessages is empty %}
            <p style="margin: 0; color: #94a3b8;">No lobby chat messages for this session.</p>
        {% else %}
            <div style="max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem;">
                {% for message in lobbyMessages %}
                    <div style="font-size: 0.9rem;">
                        <strong style="color: #0f172a;">{{ message.player.user.username }}</strong>
                        <span style="color: #94a3b8; font-size: 0.8rem;">{{ message.createdAt|date('Y-m-d H:i') }}</span>
                        <div style="color: #334155;">{{ message.content }}</div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    </div>

    {% if playersLogs is empty %}
        <div style="background: #fff; border-radius: 8px; padding: 2rem; text-align: center; color: #94a3b8; box-shadow: 0 1px 3px rgba(0,0,0,.07);">
            No players in this session.
        </div>
    {% else %}
        {# Tab buttons #}
        <div style="display: flex; gap: 0; margin-bottom: 0; border-bottom: 1px solid #e2e8f0; overflow-x: auto; -webkit-overflow-scrolling: touch;">
            {% for playerLog in playersLogs %}
                <button
                    data-tab-target="player-{{ loop.index }}"
                    id="tab-{{ loop.index }}"
                    style="
                        flex-shrink: 0;
                        white-space: nowrap;
                        padding: 0.6rem 1.25rem;
                        border: 1px solid {{ loop.first ? '#3b82f6' : '#e2e8f0' }};
                        border-bottom: {{ loop.first ? '1px solid #fff' : '1px solid #e2e8f0' }};
                        background: {{ loop.first ? '#fff' : '#f8fafc' }};
                        color: {{ loop.first ? '#1e40af' : '#64748b' }};
                        font-size: 0.9rem;
                        font-weight: {{ loop.first ? '600' : '400' }};
                        cursor: pointer;
                        border-radius: 6px 6px 0 0;
                        margin-bottom: -1px;
                    "
                >{{ playerLog.username }}</button>
            {% endfor %}
        </div>

        {# Tab content #}
        {% for playerLog in playersLogs %}
            <div id="player-{{ loop.index }}" style="
                display: {{ loop.first ? 'block' : 'none' }};
                background: #fff;
                border: 1px solid #e2e8f0;
                border-top: none;
                border-radius: 0 0 8px 8px;
                padding: 1.25rem;
                box-shadow: 0 1px 3px rgba(0,0,0,.07);
            ">
                <pre style="
                    background: #1e293b;
                    color: #e2e8f0;
                    padding: 1rem;
                    border-radius: 6px;
                    overflow-x: auto;
                    white-space: pre-wrap;
                    word-break: break-word;
                    font-size: 0.85rem;
                    line-height: 1.5;
                    margin: 0;
                ">{{ playerLog.logs ?: 'No logs found for this player.' }}</pre>
            </div>
        {% endfor %}
    {% endif %}
{% endblock %}