{% extends '@EasyAdmin/page/content.html.twig' %}

{% block page_title %}
    <span class="badge badge-{{ thread.theme == 'bug' ? 'danger' : (thread.theme == 'suggestion' ? 'success' : (thread.theme == 'announcement' ? 'primary' : 'secondary')) }}">
        {{ themes[thread.theme] ?? thread.theme }}
    </span>
    Feedback de {{ thread.user.email }}
{% endblock %}

{% block main %}
<div class="feedback-conversation">
    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <strong>{{ thread.user.email }}</strong>
                <span class="text-muted ms-2">{{ thread.createdAt|date('d/m/Y H:i') }}</span>
            </div>
            <div>
                <span class="badge bg-{{ thread.status == 'open' ? 'warning' : (thread.status == 'answered' ? 'info' : 'secondary') }}">
                    {{ statuses[thread.status] ?? thread.status }}
                </span>
                {% if thread.isAnnouncement %}
                    <span class="badge bg-primary ms-1">Annonce</span>
                {% endif %}
            </div>
        </div>
        <div class="card-body">
            <div class="messages-container" style="max-height: 500px; overflow-y: auto;">
                {% for message in messages %}
                    <div class="message mb-3 p-3 rounded {{ message.isAdminMessage ? 'bg-primary text-white ms-5' : 'bg-light me-5' }}">
                        <div class="d-flex justify-content-between mb-2">
                            <strong>
                                {% if message.isAdminMessage %}
                                    <i class="fa fa-user-shield me-1"></i> Admin
                                {% else %}
                                    <i class="fa fa-user me-1"></i> {{ thread.user.email }}
                                {% endif %}
                            </strong>
                            <small class="{{ message.isAdminMessage ? 'text-white-50' : 'text-muted' }}">
                                {{ message.createdAt|date('d/m/Y H:i') }}
                            </small>
                        </div>
                        <div class="message-content" style="white-space: pre-wrap;">{{ message.content }}</div>
                        {% if message.hasScreenshot %}
                            <div class="mt-2">
                                <img
                                    src="{{ message.screenshot }}"
                                    alt="Capture d'écran"
                                    class="screenshot-thumbnail"
                                    onclick="openScreenshotModal(this.src)"
                                    title="Cliquer pour agrandir"
                                />
                            </div>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    {% if thread.status != 'closed' %}
    <div class="card">
        <div class="card-header">
            <strong><i class="fa fa-reply me-1"></i> Répondre</strong>
        </div>
        <div class="card-body">
            <form action="{{ ea_url().setController('App\\Controller\\Admin\\FeedbackCrudController').setAction('reply').setEntityId(thread.id) }}" method="post">
                <div class="mb-3">
                    <textarea name="message" class="form-control" rows="4" placeholder="Votre réponse..." required></textarea>
                </div>
                <div class="d-flex justify-content-between">
                    <a href="{{ ea_url().setController('App\\Controller\\Admin\\FeedbackCrudController').setAction('index') }}" class="btn btn-secondary">
                        <i class="fa fa-arrow-left me-1"></i> Retour à la liste
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-paper-plane me-1"></i> Envoyer
                    </button>
                </div>
            </form>
        </div>
    </div>
    {% else %}
    <div class="alert alert-secondary">
        <i class="fa fa-lock me-1"></i> Ce thread est fermé. Aucune réponse possible.
        <a href="{{ ea_url().setController('App\\Controller\\Admin\\FeedbackCrudController').setAction('index') }}" class="btn btn-sm btn-secondary ms-3">
            <i class="fa fa-arrow-left me-1"></i> Retour à la liste
        </a>
    </div>
    {% endif %}
</div>

<!-- Modal pour affichage plein écran -->
<div id="screenshotModal" class="screenshot-modal" onclick="closeScreenshotModal()">
    <span class="screenshot-modal-close">&times;</span>
    <img id="screenshotModalImg" class="screenshot-modal-content" alt="Capture d'écran agrandie">
</div>

<style>
.messages-container {
    display: flex;
    flex-direction: column;
}
.message {
    max-width: 85%;
}
.message.bg-light {
    align-self: flex-start;
}
.message.bg-primary {
    align-self: flex-end;
}

/* Miniature de capture d'écran */
.screenshot-thumbnail {
    max-width: 300px;
    max-height: 200px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.1);
}
.screenshot-thumbnail:hover {
    transform: scale(1.02);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.message.bg-light .screenshot-thumbnail {
    border-color: rgba(0, 0, 0, 0.1);
}
.message.bg-light .screenshot-thumbnail:hover {
    border-color: rgba(0, 0, 0, 0.3);
}

/* Modal plein écran */
.screenshot-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    cursor: pointer;
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.screenshot-modal-content {
    display: block;
    max-width: 95%;
    max-height: 95%;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}
.screenshot-modal-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 10000;
}
.screenshot-modal-close:hover {
    color: #ccc;
}
</style>

<script>
function openScreenshotModal(src) {
    const modal = document.getElementById('screenshotModal');
    const modalImg = document.getElementById('screenshotModalImg');
    modal.style.display = 'block';
    modalImg.src = src;
    document.body.style.overflow = 'hidden';
}

function closeScreenshotModal() {
    const modal = document.getElementById('screenshotModal');
    modal.style.display = 'none';
    document.body.style.overflow = 'auto';
}

// Fermer avec Escape
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeScreenshotModal();
    }
});
</script>
{% endblock %}