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

{% block title %}{{ thread.subject }} - {{ 'messages.title'|trans({}, 'dashboard') }}{% endblock %}

{% block dashboard_content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ path('member_dashboard_messages') }}" class="text-decoration-none">
                        <i class="fas fa-envelope me-1"></i>
                        {{ 'messages.title'|trans({}, 'dashboard') }}
                    </a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">{{ thread.subject }}</li>
            </ol>
        </nav>
        
        <h1 class="h2 mb-0">
            <i class="fas fa-comments me-2"></i>
            {{ thread.subject }}
        </h1>
    </div>
    
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            {% if thread.status == 'open' %}
                <form method="POST" action="{{ path('member_dashboard_message_status', {id: thread.id}) }}" class="d-inline">
                    <input type="hidden" name="status" value="closed">
                    <button type="submit" class="btn btn-outline-secondary" title="{{ 'messages.actions.close'|trans({}, 'dashboard') }}">
                        <i class="fas fa-times me-1"></i>
                        {{ 'messages.actions.close'|trans({}, 'dashboard') }}
                    </button>
                </form>
            {% else %}
                <form method="POST" action="{{ path('member_dashboard_message_status', {id: thread.id}) }}" class="d-inline">
                    <input type="hidden" name="status" value="open">
                    <button type="submit" class="btn btn-outline-success" title="{{ 'messages.actions.reopen'|trans({}, 'dashboard') }}">
                        <i class="fas fa-redo me-1"></i>
                        {{ 'messages.actions.reopen'|trans({}, 'dashboard') }}
                    </button>
                </form>
            {% endif %}
        </div>
    </div>
</div>

<!-- Informations sur la conversation -->
<div class="row mb-4">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-info-circle me-2"></i>
                    {{ 'messages.conversation.info'|trans({}, 'dashboard') }}
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <strong>{{ 'messages.conversation.sender'|trans({}, 'dashboard') }} :</strong><br>
                        {{ thread.senderName }}
                        {% if thread.isFromMember %}
                            <span class="badge bg-info ms-1">{{ 'messages.member'|trans({}, 'dashboard') }}</span>
                        {% endif %}
                        <br>
                        <small class="text-muted">{{ thread.senderEmail }}</small>
                    </div>
                    <div class="col-md-6">
                        <strong>{{ 'messages.conversation.status'|trans({}, 'dashboard') }} :</strong><br>
                        {% if thread.status == 'open' %}
                            <span class="badge bg-success">{{ 'messages.status.open'|trans({}, 'dashboard') }}</span>
                        {% elseif thread.status == 'closed' %}
                            <span class="badge bg-secondary">{{ 'messages.status.closed'|trans({}, 'dashboard') }}</span>
                        {% elseif thread.status == 'spam' %}
                            <span class="badge bg-danger">{{ 'messages.status.spam'|trans({}, 'dashboard') }}</span>
                        {% endif %}
                        <br>
                        <small class="text-muted">
                            {{ 'messages.conversation.created'|trans({}, 'dashboard') }} {{ thread.createdAt|date('d/m/Y H:i') }}
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body text-center">
                <h6 class="card-title">{{ 'messages.conversation.stats'|trans({}, 'dashboard') }}</h6>
                <div class="row">
                    <div class="col-6">
                        <div class="text-primary">
                            <i class="fas fa-comments fa-2x mb-2"></i>
                            <div class="fs-4 fw-bold">{{ thread.messagesCount }}</div>
                            <small>{{ 'messages.conversation.total_messages'|trans({}, 'dashboard') }}</small>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-info">
                            <i class="fas fa-envelope fa-2x mb-2"></i>
                            <div class="fs-4 fw-bold">{{ thread.unreadMessagesCount }}</div>
                            <small>{{ 'messages.conversation.unread'|trans({}, 'dashboard') }}</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Messages de la conversation -->
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">
            <i class="fas fa-comments me-2"></i>
            {{ 'messages.conversation.messages'|trans({}, 'dashboard') }}
        </h5>
    </div>
    <div class="card-body p-0">
        <div class="message-container" style="max-height: 600px; overflow-y: auto;">
            {% for message in messages %}
                <div class="message p-3 border-bottom {{ message.isFromRecipient ? 'bg-light' : '' }}">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div class="message-author">
                            {% if message.isFromRecipient %}
                                <strong class="text-primary">
                                    <i class="fas fa-user-circle me-1"></i>
                                    {{ 'messages.conversation.you'|trans({}, 'dashboard') }}
                                </strong>
                            {% else %}
                                <strong class="text-secondary">
                                    <i class="fas fa-user me-1"></i>
                                    {{ thread.senderName }}
                                </strong>
                            {% endif %}
                        </div>
                        <div class="message-meta text-muted">
                            <small>
                                {{ message.createdAt|date('d/m/Y H:i') }}
                                {% if not message.isRead and not message.isFromRecipient %}
                                    <span class="badge bg-primary ms-1">{{ 'messages.unread'|trans({}, 'dashboard') }}</span>
                                {% endif %}
                            </small>
                        </div>
                    </div>
                    <div class="message-content">
                        {{ message.content|nl2br }}
                    </div>
                    {% if message.spamScore > 0 %}
                        <div class="mt-2">
                            <small class="text-warning">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                {{ 'messages.conversation.spam_score'|trans({'%score%': message.spamScore}, 'dashboard') }}
                            </small>
                        </div>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
    </div>
</div>

<!-- Formulaire de réponse -->
{% if thread.status == 'open' %}
    <div class="card mt-4">
        <div class="card-header">
            <h5 class="mb-0">
                <i class="fas fa-reply me-2"></i>
                {{ 'messages.reply.title'|trans({}, 'dashboard') }}
            </h5>
        </div>
        <div class="card-body">
            <form method="POST">
                <div class="mb-3">
                    <label for="reply_content" class="form-label">
                        {{ 'messages.reply.content'|trans({}, 'dashboard') }}
                    </label>
                    <textarea name="reply_content" 
                              id="reply_content" 
                              class="form-control" 
                              rows="5" 
                              placeholder="{{ 'messages.reply.placeholder'|trans({}, 'dashboard') }}"
                              required
                              minlength="10"></textarea>
                    <div class="form-text">
                        {{ 'messages.reply.minimum_length'|trans({}, 'dashboard') }}
                    </div>
                </div>
                
                <div class="d-flex justify-content-between">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-paper-plane me-1"></i>
                        {{ 'messages.reply.send'|trans({}, 'dashboard') }}
                    </button>
                    
                    <a href="{{ path('member_dashboard_messages') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-1"></i>
                        {{ 'messages.reply.back_to_list'|trans({}, 'dashboard') }}
                    </a>
                </div>
            </form>
        </div>
    </div>
{% else %}
    <div class="card mt-4">
        <div class="card-body text-center">
            <div class="text-muted">
                <i class="fas fa-lock fa-2x mb-3"></i>
                <h5>{{ 'messages.reply.conversation_closed'|trans({}, 'dashboard') }}</h5>
                <p>{{ 'messages.reply.reopen_to_reply'|trans({}, 'dashboard') }}</p>
                
                <form method="POST" action="{{ path('member_dashboard_message_status', {id: thread.id}) }}" class="d-inline">
                    <input type="hidden" name="status" value="open">
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-redo me-1"></i>
                        {{ 'messages.actions.reopen'|trans({}, 'dashboard') }}
                    </button>
                </form>
                
                <a href="{{ path('member_dashboard_messages') }}" class="btn btn-outline-secondary ms-2">
                    <i class="fas fa-arrow-left me-1"></i>
                    {{ 'messages.reply.back_to_list'|trans({}, 'dashboard') }}
                </a>
            </div>
        </div>
    </div>
{% endif %}

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
// Faire défiler vers le bas de la conversation
document.addEventListener('DOMContentLoaded', function() {
    const messageContainer = document.querySelector('.message-container');
    if (messageContainer) {
        messageContainer.scrollTop = messageContainer.scrollHeight;
    }
});

// Auto-réajuster la hauteur du textarea
document.getElementById('reply_content')?.addEventListener('input', function() {
    this.style.height = 'auto';
    this.style.height = Math.min(this.scrollHeight, 200) + 'px';
});
</script>
{% endblock %}