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

{% block title %}Messages de contact{% endblock %}

{% block breadcrumb %}Messages reçus{% endblock %}

{% block description %}Consultez tous les messages reçus via les formulaires de contact{% endblock %}

{% block stylesheets %}
    <style>
        .message-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

        .message-card:hover {
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            transform: translateY(-2px);
        }

        .message-header {
            padding: 1.5rem;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .message-body {
            padding: 1.5rem;
        }

        .badge-count {
            background: var(--primary-gradient);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 600;
        }

        .message-row {
            transition: all 0.2s ease;
        }

        .message-row:hover {
            background-color: #f8fafc !important;
        }

        /* Empêcher les interactions quand une modal est ouverte */
        body.modal-open .message-row {
            pointer-events: none;
        }

        .message-excerpt {
            max-width: 400px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .action-btn {
            margin: 0 2px;
        }

        .modal-header {
            background: var(--primary-gradient);
            color: white;
            border-radius: 12px 12px 0 0;
        }

        .modal-content {
            border-radius: 12px;
            border: none;
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
        }

        .info-box {
            background: #f8fafc;
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1.5rem;
        }

        .message-content-box {
            background: white;
            padding: 1.5rem;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            white-space: pre-wrap;
            line-height: 1.6;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="message-card">
        <div class="message-header">
            <div>
                <h2 class="mb-0" style="font-size: 1.5rem; font-weight: 700; color: #1e293b;">
                    <i class="fas fa-inbox" style="color: var(--colorTheme);"></i>
                    Messages de contact reçus
                </h2>
                <p class="mb-0 mt-1" style="color: #64748b; font-size: 0.875rem;">
                    Consultez et gérez les messages envoyés depuis vos formulaires
                </p>
            </div>
            {% if messages|length > 0 %}
                <span class="badge-count">{{ messages|length }}</span>
            {% endif %}
        </div>

        <div class="message-body">
            {% if messages|length > 0 %}
                <!-- Barre d'actions en masse -->
                <div class="mb-3 d-flex justify-content-between align-items-center">
                    <div>
                        <button type="button" id="selectAll" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-check-square"></i> Tout sélectionner
                        </button>
                        <button type="button" id="deselectAll" class="btn btn-sm btn-outline-secondary" style="display: none;">
                            <i class="far fa-square"></i> Tout désélectionner
                        </button>
                    </div>
                    <div id="bulkActionsBar" style="display: none;">
                        <span class="me-2" style="color: #64748b;">
                            <strong id="selectedCount">0</strong> message(s) sélectionné(s)
                        </span>
                        <button type="button" id="deleteSelectedBtn" class="btn btn-sm btn-danger">
                            <i class="fas fa-trash"></i> Supprimer la sélection
                        </button>
                    </div>
                </div>

                <form id="bulkDeleteForm" method="post" action="{{ path('bo-contact-messages-bulk-delete') }}">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead style="background-color: #f8fafc;">
                                <tr>
                                    <th style="font-weight: 600; color: #475569; padding: 1rem; width: 40px;">
                                        <input type="checkbox" id="selectAllCheckbox" class="form-check-input" style="cursor: pointer;">
                                    </th>
                                    <th style="font-weight: 600; color: #475569; padding: 1rem;">Nom</th>
                                    <th style="font-weight: 600; color: #475569; padding: 1rem;">Email</th>
                                    <th style="font-weight: 600; color: #475569; padding: 1rem;">Message</th>
                                    <th style="font-weight: 600; color: #475569; padding: 1rem;">Date</th>
                                    <th style="font-weight: 600; color: #475569; padding: 1rem; text-align: center;">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for message in messages %}
                                    <tr class="message-row">
                                        <td style="padding: 1rem;">
                                            <input type="checkbox" name="messages[]" value="{{ message.id }}" class="form-check-input message-checkbox" style="cursor: pointer;">
                                        </td>
                                        <td style="padding: 1rem;">
                                            <strong style="color: #1e293b;">{{ message.name }}</strong>
                                        </td>
                                    <td style="padding: 1rem;">
                                        <a href="mailto:{{ message.email }}" style="color: var(--colorTheme); text-decoration: none;">
                                            <i class="fas fa-envelope"></i> {{ message.email }}
                                        </a>
                                    </td>
                                    <td style="padding: 1rem;">
                                        <div class="message-excerpt" style="color: #64748b;">
                                            {{ message.content|length > 80 ? message.content|slice(0, 80) ~ '...' : message.content }}
                                        </div>
                                    </td>
                                    <td style="padding: 1rem;">
                                        <small style="color: #94a3b8;">
                                            <i class="far fa-calendar-alt"></i>
                                            {{ message.creationDate|date('d/m/Y') }}<br>
                                            <i class="far fa-clock"></i>
                                            {{ message.creationDate|date('H:i') }}
                                        </small>
                                    </td>
                                    <td style="padding: 1rem; text-align: center;">
                                        <a href="{{ path('bo-contact-message-view', {id: message.id}) }}"
                                            class="btn btn-sm btn-primary action-btn"
                                            style="background: var(--primary-gradient); border: none;">
                                            <i class="fas fa-eye"></i> Voir
                                        </a>

                                        <form method="post" action="{{ path('bo-contact-message-delete', {id: message.id}) }}" style="display: inline;">
                                            <button class="btn btn-sm btn-danger action-btn" type="button" onclick="showConfirmModal({
                                                title: 'Supprimer le message',
                                                message: 'Êtes-vous sûr de vouloir supprimer ce message ?',
                                                actionText: 'Supprimer',
                                                onConfirm: () => this.closest('form').submit()
                                            })">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </form>

                <!-- Modals pour chaque message (en dehors du tableau) -->
                {% for message in messages %}
                    <div class="modal fade" id="messageModal{{ message.id }}" tabindex="-1" aria-labelledby="messageModalLabel{{ message.id }}" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="messageModalLabel{{ message.id }}">
                                        <i class="fas fa-envelope"></i> Message de {{ message.name }}
                                    </h5>
                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="info-box">
                                        <div class="row">
                                            <div class="col-md-6 mb-2">
                                                <strong style="color: #475569;">De :</strong>
                                                <span style="color: #1e293b;">{{ message.name }}</span>
                                            </div>
                                            <div class="col-md-6 mb-2">
                                                <strong style="color: #475569;">Email :</strong>
                                                <a href="mailto:{{ message.email }}" style="color: var(--colorTheme);">{{ message.email }}</a>
                                            </div>
                                            <div class="col-md-12">
                                                <strong style="color: #475569;">Date :</strong>
                                                <span style="color: #64748b;">{{ message.creationDate|date('d/m/Y à H:i') }}</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="message-content-box">
                                        {{ message.content }}
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <a href="mailto:{{ message.email }}?subject=Re: Votre message" class="btn btn-primary" style="background: var(--primary-gradient); border: none;">
                                        <i class="fas fa-reply"></i> Répondre par email
                                    </a>
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-inbox" style="font-size: 4rem; color: #cbd5e1; margin-bottom: 1rem;"></i>
                    <h3 style="color: #94a3b8; font-size: 1.25rem; font-weight: 600;">Aucun message reçu</h3>
                    <p style="color: #cbd5e1; margin-bottom: 0;">Les messages envoyés via vos formulaires de contact apparaîtront ici</p>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Empêcher tout événement click sur les lignes de tableau
            document.querySelectorAll('.message-row').forEach(row => {
                row.style.cursor = 'default';
                row.addEventListener('click', function(e) {
                    // Ne rien faire - empêcher toute action par défaut
                    e.stopPropagation();
                });
            });

            // Gérer l'ouverture des modals manuellement
            const viewButtons = document.querySelectorAll('.view-message-btn');
            console.log('Nombre de boutons "Voir" trouvés:', viewButtons.length);

            viewButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    e.stopImmediatePropagation();

                    const messageId = this.getAttribute('data-message-id');
                    const modalElement = document.getElementById('messageModal' + messageId);

                    console.log('Ouverture de la modal pour le message ID:', messageId);
                    console.log('Modal element:', modalElement);

                    if (modalElement) {
                        // Détruire toute instance existante de la modal
                        const existingModal = bootstrap.Modal.getInstance(modalElement);
                        if (existingModal) {
                            existingModal.dispose();
                        }

                        // Créer une nouvelle instance
                        const modal = new bootstrap.Modal(modalElement, {
                            backdrop: 'static',
                            keyboard: true,
                            focus: true
                        });

                        // Écouter les événements de la modal
                        modalElement.addEventListener('show.bs.modal', function() {
                            console.log('Modal show event triggered');
                        }, { once: true });

                        modalElement.addEventListener('shown.bs.modal', function() {
                            console.log('Modal shown event triggered (fully displayed)');
                        }, { once: true });

                        modalElement.addEventListener('hide.bs.modal', function(event) {
                            console.log('Modal hide event triggered');
                            console.log('Event type:', event.type);
                            console.log('Event target:', event.target);
                            console.log('Relat target:', event.relatedTarget);

                            // Vérifier si la fermeture est légitime (bouton close ou backdrop)
                            const isLegitimateClose =
                                event.target.classList.contains('btn-close') ||
                                event.target.classList.contains('btn-secondary') ||
                                event.target.hasAttribute('data-bs-dismiss');

                            // Si ce n'est pas une fermeture légitime ET qu'il n'y a pas de relatedTarget
                            // c'est probablement un bug - on empêche
                            if (!isLegitimateClose && !event.relatedTarget) {
                                console.warn('Fermeture non légitime détectée - PREVENTION!');
                                event.preventDefault();
                                event.stopPropagation();
                                return false;
                            }
                        });

                        modal.show();
                    } else {
                        console.error('Modal element not found for ID:', messageId);
                    }
                });
            });

            const selectAllCheckbox = document.getElementById('selectAllCheckbox');
            const selectAllBtn = document.getElementById('selectAll');
            const deselectAllBtn = document.getElementById('deselectAll');
            const messageCheckboxes = document.querySelectorAll('.message-checkbox');
            const bulkActionsBar = document.getElementById('bulkActionsBar');
            const selectedCount = document.getElementById('selectedCount');
            const deleteSelectedBtn = document.getElementById('deleteSelectedBtn');
            const bulkDeleteForm = document.getElementById('bulkDeleteForm');

            // Fonction pour mettre à jour l'affichage
            function updateBulkActions() {
                const checkedCount = document.querySelectorAll('.message-checkbox:checked').length;
                selectedCount.textContent = checkedCount;

                if (checkedCount > 0) {
                    bulkActionsBar.style.display = 'block';
                    deselectAllBtn.style.display = 'inline-block';
                    selectAllBtn.style.display = 'none';
                } else {
                    bulkActionsBar.style.display = 'none';
                    deselectAllBtn.style.display = 'none';
                    selectAllBtn.style.display = 'inline-block';
                }

                // Mettre à jour la checkbox "Tout sélectionner"
                const allChecked = checkedCount === messageCheckboxes.length;
                const someChecked = checkedCount > 0 && checkedCount < messageCheckboxes.length;
                selectAllCheckbox.checked = allChecked;
                selectAllCheckbox.indeterminate = someChecked;
            }

            // Checkbox "Tout sélectionner" dans le header
            selectAllCheckbox.addEventListener('change', function() {
                messageCheckboxes.forEach(checkbox => {
                    checkbox.checked = this.checked;
                });
                updateBulkActions();
            });

            // Bouton "Tout sélectionner"
            selectAllBtn.addEventListener('click', function() {
                messageCheckboxes.forEach(checkbox => {
                    checkbox.checked = true;
                });
                updateBulkActions();
            });

            // Bouton "Tout désélectionner"
            deselectAllBtn.addEventListener('click', function() {
                messageCheckboxes.forEach(checkbox => {
                    checkbox.checked = false;
                });
                updateBulkActions();
            });

            // Écouter les changements sur chaque checkbox
            messageCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', updateBulkActions);
            });

            // Bouton supprimer la sélection
            deleteSelectedBtn.addEventListener('click', function() {
                const checkedCount = document.querySelectorAll('.message-checkbox:checked').length;

                if (checkedCount === 0) {
                    alert('Veuillez sélectionner au moins un message à supprimer');
                    return;
                }

                const confirmMessage = checkedCount === 1
                    ? 'Êtes-vous sûr de vouloir supprimer ce message ?'
                    : `Êtes-vous sûr de vouloir supprimer ces ${checkedCount} messages ?`;

                showConfirmModal({
                    title: 'Suppression en masse',
                    message: confirmMessage,
                    actionText: 'Supprimer',
                    onConfirm: () => bulkDeleteForm.submit()
                });
            });
        });
    </script>
{% endblock %}