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

{% block title %}{{ '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">
    <h1 class="h2">
        <i class="fas fa-envelope me-2"></i>
        {{ 'messages.title'|trans({}, 'dashboard') }}
        {% if hasUnread %}
            <span class="badge bg-danger ms-2">{{ 'messages.new'|trans({}, 'dashboard') }}</span>
        {% endif %}
    </h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <small class="text-muted">
                {{ 'messages.total_count'|trans({'%count%': total}, 'dashboard') }}
            </small>
        </div>
    </div>
</div>

<!-- Filtres et recherche -->
<div class="row mb-4">
    <div class="col-md-8">
        <form method="GET" class="d-flex">
            <div class="input-group me-3">
                <span class="input-group-text">
                    <i class="fas fa-search"></i>
                </span>
                <input type="text" 
                       name="search" 
                       class="form-control" 
                       placeholder="{{ 'messages.search_placeholder'|trans({}, 'dashboard') }}"
                       value="{{ search }}">
            </div>
            
            <select name="status" class="form-select me-3" style="max-width: 200px;">
                <option value="all" {{ status == 'all' ? 'selected' : '' }}>
                    {{ 'messages.filter.all'|trans({}, 'dashboard') }}
                </option>
                <option value="open" {{ status == 'open' ? 'selected' : '' }}>
                    {{ 'messages.filter.open'|trans({}, 'dashboard') }}
                </option>
                <option value="closed" {{ status == 'closed' ? 'selected' : '' }}>
                    {{ 'messages.filter.closed'|trans({}, 'dashboard') }}
                </option>
            </select>
            
            <button type="submit" class="btn btn-outline-primary">
                <i class="fas fa-filter"></i>
                {{ 'messages.filter.apply'|trans({}, 'dashboard') }}
            </button>
        </form>
    </div>
    
    <div class="col-md-4 text-end">
        <a href="{{ path('member_dashboard_messages') }}" class="btn btn-outline-secondary">
            <i class="fas fa-sync-alt"></i>
            {{ 'messages.refresh'|trans({}, 'dashboard') }}
        </a>
    </div>
</div>

{% if threads|length > 0 %}
    <!-- Liste des conversations -->
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th width="40"></th>
                            <th>{{ 'messages.table.subject'|trans({}, 'dashboard') }}</th>
                            <th>{{ 'messages.table.sender'|trans({}, 'dashboard') }}</th>
                            <th>{{ 'messages.table.status'|trans({}, 'dashboard') }}</th>
                            <th>{{ 'messages.table.messages'|trans({}, 'dashboard') }}</th>
                            <th>{{ 'messages.table.last_activity'|trans({}, 'dashboard') }}</th>
                            <th width="120">{{ 'messages.table.actions'|trans({}, 'dashboard') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for thread in threads %}
                            <tr class="{{ thread.unreadMessagesCount > 0 ? 'table-primary' : '' }}">
                                <td class="text-center">
                                    {% if thread.unreadMessagesCount > 0 %}
                                        <i class="fas fa-envelope text-primary" title="{{ 'messages.unread'|trans({}, 'dashboard') }}"></i>
                                    {% else %}
                                        <i class="fas fa-envelope-open text-muted" title="{{ 'messages.read'|trans({}, 'dashboard') }}"></i>
                                    {% endif %}
                                </td>
                                <td>
                                    <a href="{{ path('member_dashboard_message_show', {id: thread.id}) }}" 
                                       class="text-decoration-none fw-{{ thread.unreadMessagesCount > 0 ? 'bold' : 'normal' }}">
                                        {{ thread.subject }}
                                    </a>
                                    {% if thread.unreadMessagesCount > 0 %}
                                        <span class="badge bg-primary ms-1">{{ thread.unreadMessagesCount }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div>
                                        <strong>{{ thread.senderName }}</strong>
                                        {% if thread.isFromMember %}
                                            <span class="badge bg-info ms-1">{{ 'messages.member'|trans({}, 'dashboard') }}</span>
                                        {% endif %}
                                    </div>
                                    <small class="text-muted">{{ thread.senderEmail }}</small>
                                </td>
                                <td>
                                    {% 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 %}
                                </td>
                                <td>
                                    <span class="badge bg-light text-dark">{{ thread.messagesCount }}</span>
                                </td>
                                <td>
                                    <small class="text-muted">
                                        {{ thread.lastMessageAt ? thread.lastMessageAt|date('d/m/Y H:i') : thread.updatedAt|date('d/m/Y H:i') }}
                                    </small>
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <a href="{{ path('member_dashboard_message_show', {id: thread.id}) }}" 
                                           class="btn btn-outline-primary" 
                                           title="{{ 'messages.actions.view'|trans({}, 'dashboard') }}">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        {% if thread.status == 'open' %}
                                            <button type="button" 
                                                    class="btn btn-outline-secondary" 
                                                    onclick="changeStatus({{ thread.id }}, 'closed')"
                                                    title="{{ 'messages.actions.close'|trans({}, 'dashboard') }}">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        {% else %}
                                            <button type="button" 
                                                    class="btn btn-outline-success" 
                                                    onclick="changeStatus({{ thread.id }}, 'open')"
                                                    title="{{ 'messages.actions.reopen'|trans({}, 'dashboard') }}">
                                                <i class="fas fa-redo"></i>
                                            </button>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Pagination -->
    {% if totalPages > 1 %}
        <nav aria-label="Pagination des messages" class="mt-4">
            <ul class="pagination justify-content-center">
                {% if page > 1 %}
                    <li class="page-item">
                        <a class="page-link" href="{{ path('member_dashboard_messages', {page: page - 1, status: status, search: search}) }}">
                            <i class="fas fa-chevron-left"></i>
                        </a>
                    </li>
                {% endif %}
                
                {% for p in 1..totalPages %}
                    {% if p == page %}
                        <li class="page-item active">
                            <span class="page-link">{{ p }}</span>
                        </li>
                    {% elseif p <= 3 or p >= totalPages - 2 or (p >= page - 1 and p <= page + 1) %}
                        <li class="page-item">
                            <a class="page-link" href="{{ path('member_dashboard_messages', {page: p, status: status, search: search}) }}">{{ p }}</a>
                        </li>
                    {% elseif p == 4 or p == totalPages - 3 %}
                        <li class="page-item disabled">
                            <span class="page-link">...</span>
                        </li>
                    {% endif %}
                {% endfor %}
                
                {% if page < totalPages %}
                    <li class="page-item">
                        <a class="page-link" href="{{ path('member_dashboard_messages', {page: page + 1, status: status, search: search}) }}">
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    {% endif %}

{% else %}
    <!-- État vide -->
    <div class="text-center py-5">
        <div class="display-1 text-muted mb-3">
            <i class="fas fa-inbox"></i>
        </div>
        <h3>{{ 'messages.empty.title'|trans({}, 'dashboard') }}</h3>
        <p class="text-muted mb-4">
            {% if search or status != 'all' %}
                {{ 'messages.empty.no_results'|trans({}, 'dashboard') }}
                <br>
                <a href="{{ path('member_dashboard_messages') }}" class="btn btn-link">
                    {{ 'messages.empty.clear_filters'|trans({}, 'dashboard') }}
                </a>
            {% else %}
                {{ 'messages.empty.description'|trans({}, 'dashboard') }}
            {% endif %}
        </p>
        
        {% if not search and status == 'all' %}
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="card border-light">
                        <div class="card-body">
                            <h5 class="card-title">
                                <i class="fas fa-info-circle text-info me-2"></i>
                                {{ 'messages.empty.tip_title'|trans({}, 'dashboard') }}
                            </h5>
                            <p class="card-text">
                                {{ 'messages.empty.tip_description'|trans({}, 'dashboard') }}
                            </p>
                            {% if app.user.slug %}
                                <a href="{{ path('app_store_show', {slug: app.user.slug, locale: 'fr'}) }}" class="btn btn-primary">
                                    <i class="fas fa-user me-2"></i>
                                    {{ 'messages.empty.view_profile'|trans({}, 'dashboard') }}
                                </a>
                            {% else %}
                                <span class="btn btn-secondary disabled">
                                    <i class="fas fa-user me-2"></i>
                                    Profil en préparation
                                </span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
{% endif %}

<!-- Formulaire caché pour changer le statut -->
<form id="statusForm" method="POST" style="display: none;">
    <input type="hidden" name="status" id="statusInput">
</form>

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
function changeStatus(threadId, newStatus) {
    if (confirm('{{ 'messages.confirm_status_change'|trans({}, 'dashboard') }}')) {
        const form = document.getElementById('statusForm');
        const baseUrl = '{{ path('member_dashboard_messages')|raw }}';
        form.action = baseUrl + '/' + threadId + '/status';
        document.getElementById('statusInput').value = newStatus;
        form.submit();
    }
}
</script>
{% endblock %}