{% 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>

    {# Tab buttons #}
    <div style="display: flex; gap: 0; margin-bottom: 0; border-bottom: 1px solid #e2e8f0; overflow-x: auto; -webkit-overflow-scrolling: touch;">
        <button
            data-tab-target="lobby-chat-tab"
            id="tab-lobby-chat"
            style="
                flex-shrink: 0;
                white-space: nowrap;
                padding: 0.6rem 1.25rem;
                border: 1px solid #3b82f6;
                border-bottom: 1px solid #fff;
                background: #fff;
                color: #1e40af;
                font-size: 0.9rem;
                font-weight: 600;
                cursor: pointer;
                border-radius: 6px 6px 0 0;
                margin-bottom: -1px;
            "
        >Lobby Chat</button>
        {% 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 #e2e8f0;
                    border-bottom: 1px solid #e2e8f0;
                    background: #f8fafc;
                    color: #64748b;
                    font-size: 0.9rem;
                    font-weight: 400;
                    cursor: pointer;
                    border-radius: 6px 6px 0 0;
                    margin-bottom: -1px;
                "
            >{{ playerLog.username }}</button>
        {% endfor %}
    </div>

    {# Tab content #}
    <div id="lobby-chat-tab" class="admin-tab-panel" style="
        display: block;
        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);
    ">
        {% 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>

    {% for playerLog in playersLogs %}
        <div id="player-{{ loop.index }}" class="admin-tab-panel" style="
            display: 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 %}
{% endblock %}