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

{% block title %}{{ episode.title }}{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener("turbo:load", function() {
            // Gestion des vues et likes de l'épisode
            const setupEpisodeInteractions = function() {
                console.log("Initializing episode interactions");
                let audioPlayer = document.getElementById("audioPlayer");
                let viewed = false;

                if (audioPlayer) {
                    audioPlayer.addEventListener("play", function() {
                        if (!viewed) {
                            fetch("{{ path('app_episode_view', {id: episode.id}) }}", {
                                method: "POST",
                                headers: { "X-Requested-With": "XMLHttpRequest" }
                            })
                            .then(response => response.json())
                            .then(data => {
                                document.getElementById("viewCount").textContent = data.views;
                            })
                            .catch(error => console.error("Error incrementing view count:", error));
                            viewed = true;
                        }
                    });
                }

                let likeButton = document.getElementById("likeButton");
                if (likeButton) {
                    likeButton.addEventListener("click", function() {
                        fetch("{{ path('app_episode_like', {id: episode.id}) }}", {
                            method: "POST",
                            headers: { "X-Requested-With": "XMLHttpRequest" }
                        })
                        .then(response => response.json())
                        .then(data => {
                            document.getElementById("likeCount").textContent = data.likes;
                        })
                        .catch(error => console.error("Error incrementing like count:", error));
                    });
                }
            };

            // Initialiser les interactions
            setupEpisodeInteractions();
            
            // Initialisation des boutons de suppression de commentaires
            initDeleteCommentButtons();
            
            // Initialiser les tooltips Bootstrap si Bootstrap est disponible
            if (typeof bootstrap !== 'undefined') {
                const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                tooltipTriggerList.map(function (tooltipTriggerEl) {
                    return new bootstrap.Tooltip(tooltipTriggerEl);
                });
            } else {
                console.warn("Bootstrap n'est pas chargé, les tooltips ne seront pas initialisés");
            }
        });
        
        // Fonction de suppression avec vérification de l'existence de Bootstrap
        function initDeleteCommentButtons() {
            document.querySelectorAll('.delete-comment-btn').forEach(button => {
                // Supprimer d'abord les gestionnaires existants pour éviter les duplications
                button.removeEventListener('click', handleDeleteComment);
                button.addEventListener('click', handleDeleteComment);
            });
        }
        
        function handleDeleteComment() {
            if (confirm('Es-tu sûr de vouloir supprimer ce commentaire ?')) {
                const commentId = this.getAttribute('data-comment-id');
                
                // Utilisation de l'API Fetch pour envoyer une requête DELETE
                fetch(`/comment/delete/${commentId}`, {
                    method: 'DELETE',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => {
                    if (response.ok) {
                        // Si la suppression a réussi, supprimer l'élément du DOM
                        const commentElement = document.getElementById(`comment-${commentId}`);
                        if (commentElement) {
                            commentElement.remove();
                            
                            // Afficher un message si tous les commentaires sont supprimés
                            const commentsList = document.querySelector('.comments-list');
                            if (commentsList && commentsList.querySelectorAll('.comment-item').length === 0) {
                                commentsList.innerHTML = '<p class="text-muted">Aucun commentaire pour cet épisode.</p>';
                            }
                        }
                        
                        // Afficher un toast ou une notification avec vérification de Bootstrap
                        safeShowNotification('Commentaire supprimé avec succès', 'success');
                    } else {
                        safeShowNotification('Erreur lors de la suppression du commentaire', 'danger');
                    }
                })
                .catch(error => {
                    console.error('Erreur:', error);
                    safeShowNotification('Erreur lors de la suppression du commentaire', 'danger');
                });
            }
        }

        // Fonction pour afficher des notifications de manière sécurisée
        function safeShowNotification(message, type = 'info') {
            // Vérifier si Bootstrap est chargé
            if (typeof bootstrap === 'undefined') {
                console.warn("Bootstrap n'est pas chargé, utilisation d'une alerte standard");
                alert(message);
                return;
            }
            
            // Créer un élément toast
            const toast = document.createElement('div');
            toast.className = `toast align-items-center text-white bg-${type} border-0`;
            toast.setAttribute('role', 'alert');
            toast.setAttribute('aria-live', 'assertive');
            toast.setAttribute('aria-atomic', 'true');
            
            toast.innerHTML = `
                <div class="d-flex">
                    <div class="toast-body">
                        ${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            `;
            
            // Ajouter le toast au container
            let toastContainer = document.querySelector('.toast-container');
            if (!toastContainer) {
                toastContainer = document.createElement('div');
                toastContainer.className = 'toast-container position-fixed bottom-0 end-0 p-3';
                document.body.appendChild(toastContainer);
            }
            
            toastContainer.appendChild(toast);
            
            try {
                // Initialiser le toast Bootstrap
                const bsToast = new bootstrap.Toast(toast);
                bsToast.show();
                
                // Supprimer le toast après qu'il soit caché
                toast.addEventListener('hidden.bs.toast', function () {
                    toast.remove();
                });
            } catch (e) {
                console.error("Erreur lors de l'initialisation du toast:", e);
                alert(message);
                toast.remove();
            }
        }
        
        // Pour les chargements sans Turbo
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof Turbo === 'undefined') {
                console.log('DOMContentLoaded - Initialisation sans Turbo');
                setupEpisodeInteractions();
                initDeleteCommentButtons();
                
                if (typeof bootstrap !== 'undefined') {
                    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                    tooltipTriggerList.map(function (tooltipTriggerEl) {
                        return new bootstrap.Tooltip(tooltipTriggerEl);
                    });
                }
            }
        });
    </script>
{% endblock %}

{% block body %}
    <div class="container py-5">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="card shadow-sm">
                    <img src="{{ episode.coverImage }}" alt="{{ episode.title }}" class="card-img-top" style="max-height: 400px; object-fit: cover;">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <h1 class="card-title h2">
                                {{ episode.title }}
                            </h1>
                            <button id="likeButton" class="btn border-0 bg-transparent">
                                ❤️ <span id="likeCount">{{ episode.likeCount }}</span>
                            </button>
                        </div>

                        <p class="text-muted">Publié le {{ episode.createdAt|date('d/m/Y') }}</p>
                        
                        <div class="my-4">
                            <audio controls class="w-100" id="audioPlayer">
                                <source src="{{ episode.audio }}" type="audio/mpeg">
                                Votre navigateur ne supporte pas la lecture audio.
                            </audio>
                            <p>Nombre de lectures : <span id="viewCount">{{ episode.viewCount }}</span></p>
                        </div>

                        <div class="my-4">
                            <h2 class="h4">Description</h2>
                            <p class="card-text">{{ episode.description | raw }}</p>
                        </div>

                        {# Partie commentaires dans show.html.twig #}
                        <div class="mt-5">
                            <h2 class="h4 mb-4">Commentaires</h2>
                            
                            {# Liste des commentaires #}
                            <div id="comments-list-{{ episode.id }}" class="comments-list mb-4">
                                {% if episode.commantaire|length > 0 %}
                                    {% for comment in episode.commantaire %}
                                        <div id="comment-{{ comment.id }}" class="comment-item mb-3 p-3 border rounded">
                                            <div class="d-flex justify-content-between">
                                                <strong>{{ comment.pseudo }}</strong>
                                                <div>
                                                    <small class="text-muted">{{ comment.date|date('d/m/Y H:i') }}</small>
                                                    {% if is_granted('ROLE_ADMIN') %}
                                                        <button type="button" 
                                                                class="btn btn-sm btn-danger ms-2 delete-comment-btn"
                                                                data-comment-id="{{ comment.id }}"
                                                                data-episode-id="{{ episode.id }}"
                                                                data-bs-toggle="tooltip"
                                                                title="Supprimer ce commentaire">
                                                            <i class="bi bi-trash"></i>
                                                        </button>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            <p class="mt-2 mb-0">{{ comment.message }}</p>
                                        </div>
                                    {% endfor %}
                                {% else %}
                                    <p class="text-muted">Aucun commentaire pour cet épisode.</p>
                                {% endif %}
                            </div>

                            {# Formulaire de commentaire #}
                            <turbo-frame id="comment-form-{{ episode.id }}">
                                {{ form_start(commentForm, {
                                    attr: {
                                        'data-turbo-frame': 'comment-form-' ~ episode.id,
                                        'class': 'comment-form'
                                    }
                                }) }}
                                    <div class="mb-3">
                                        {{ form_row(commentForm.pseudo) }}
                                    </div>
                                    <div class="mb-3">
                                        {{ form_row(commentForm.message, {'attr': {'class': 'form-control ckeditor'}}) }}
                                    </div>
                                    <button type="submit" class="btn btn-primary">Envoyer</button>
                                {{ form_end(commentForm) }}
                            </turbo-frame>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="text-center">
        {% if is_granted('ROLE_ADMIN') %}
            <a href="{{ path('app_edit', {'id': episode.id}) }}" class="btn btn-warning mt-3 me-2">
                <i class="bi bi-pencil"></i> Modifier l'épisode
            </a>
        {% endif %}
        <a href="{{ path('app_home') }}" class="btn btn-primary mt-3">Retour à l'accueil</a>
    </div>
    
    {# Container pour les toasts #}
    <div class="toast-container position-fixed bottom-0 end-0 p-3"></div>
{% endblock %}