{{--
    ! ==========================================================================
    ! PAGE DE DETAIL D'UNE CONFESSION - Interface moderne Alpine.js
    ! ==========================================================================
    !
    ! * Cette page affiche le détail complet d'une confession avec :
    ! ? - Affichage de la confession (titre, description, catégorie)
    ! ? - Système de commentaires hiérarchique (commentaires + réponses)
    ! ? - Système de signalement pour confession et commentaires
    ! ? - Gestion des likes/soutiens avec Alpine.js
    ! ? - Interface responsive et moderne
    !
    ! TODO: Ajouter système de partage social
    ! TODO: Implémenter notifications temps réel
    !
    ! @@param Confession $confession - L'objet confession à afficher
    ! @@uses Alpine.js - Pour l'interactivité frontend
    ! @@uses Tailwind CSS - Pour le styling
    ! ==========================================================================
--}}

@extends("layouts.base")
@php
    use Illuminate\Support\Str;
@endphp

{{--
    * =======================================================================
    * CONFIGURATION DE LA PAGE
    * =======================================================================
--}}

{{-- ! Titre dynamique basé sur le titre de la confession --}}
@section("title", $confession->title)
@section(
    "meta_description",
    Str::limit(
        preg_replace("/\s+/", " ", strip_tags($confession->description)),
        155,
    )
)

@push("styles")
    {{--
        * Métadonnées OG/Twitter pour le partage social des confessions
    --}}
    {{-- Open Graph Meta Tags --}}
    <meta property="og:title" content="{{ $confession->title }}">
    <meta property="og:description" content="{{ Str::limit(strip_tags($confession->description), 120) }}">
    <meta property="og:image" content="{{ route('share.image', $confession) }}">
    <meta property="og:type" content="article">
    <meta property="og:site_name" content="Confess">
    <meta property="og:url" content="{{ route('confession.show', $confession) }}">
    <meta property="og:locale" content="{{ app()->getLocale() }}">

    {{-- Twitter Card Meta Tags --}}
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ $confession->title }}">
    <meta name="twitter:description" content="{{ Str::limit(strip_tags($confession->description), 120) }}">
    <meta name="twitter:image" content="{{ route('share.image', $confession) }}">
@endpush

{{--
    * =======================================================================
    * CONTENU PRINCIPAL DE LA PAGE
    * =======================================================================
--}}

@section("content")
    {{--
        ! ===================================================================
        ! CONTAINER PRINCIPAL AVEC ALPINE.JS
        ! ===================================================================
        !
        ! * Configuration Alpine.js pour toute l'interactivité :
        ! ? - x-data="confessionData(id)" : Initialise le state Alpine.js
        ! ? - x-init="initializeData()" : Lance le chargement initial des données
        ! ? - @scroll.window="handleScroll()" : Gère le scroll infini pour commentaires
        !
        ! * Classes Tailwind pour layout responsive :
        ! ? - max-w-4xl : Largeur maximale du container
        ! ? - mx-auto : Centrage horizontal
        ! ? - px-4 sm:px-6 lg:px-8 : Padding responsive
        ! ===================================================================
    --}}
    <div
        class="min-h-screen bg-[#f9f9fb] px-4 sm:px-6 lg:px-8 py-8"
        x-data="confessionData({{ $confession->id }})"
        x-init="initializeData()"
        @scroll.window="handleScroll()"
    >
        <div class="max-w-2xl mx-auto space-y-8">
            {{--
                ! ===============================================================
                ! CARTE PRINCIPALE DE LA CONFESSION
                ! ===============================================================
                !
                ! * Design moderne avec :
                ! ? - Coins arrondis (rounded-2xl)
                ! ? - Ombre élégante (shadow-xl)
                ! ? - Bordure subtile (border-gray-100)
                ! ? - Espacement en bas pour séparer des commentaires (mb-8)
                ! ===============================================================
            --}}
            <div
                class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden"
            >
                {{--
                    ! ===========================================================
                    ! INTRO CONFESSION - Badge de catégorie léger
                    ! ===========================================================
                    !
                    ! * Affichage discret de la catégorie :
                    ! ? - Badge arrondi inspiré du design Quora mobile
                    ! ? - Couleurs dynamiques via getTailwindCategoryClass()
                    ! ? - Fallback si pas de catégorie : "category-default"
                    ! ===========================================================
                --}}
                {{--
                    ! ===========================================================
                    ! CORPS PRINCIPAL DE LA CONFESSION
                    ! ===========================================================
                    !
                    ! * Structure du contenu :
                    ! ? - Titre de la confession (H1 responsive)
                    ! ? - Description complète avec mise en forme prose
                    !
                    ! * Responsive design :
                    ! ? - text-2xl md:text-3xl : Taille titre adaptive
                    ! ? - prose prose-lg : Mise en forme typographique élégante
                    ! ===========================================================
                --}}
                <div class="px-6 py-6">
                    @if ($confession->category)
                        <div class="mb-3">
                            <span
                                class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-semibold {{ $confession->category?->getTailwindCategoryClass() ?? "category-default" }}"
                            >
                                {{ $confession->category->translatedName ?? __("confession.no_category") }}
                            </span>
                        </div>
                    @endif

                    {{-- ! Titre principal de la confession - Responsive --}}
                    <h1
                        class="text-3xl font-semibold text-gray-900 leading-snug mb-4"
                    >
                        {{ $confession->title }}
                    </h1>

                    {{-- ! Description avec mise en forme prose Tailwind --}}
                    <div class="space-y-4">
                    <p class="text-gray-800 leading-relaxed text-base" style="text-align: justify;">
                            {{ $confession->description }}
                        </p>
                    </div>
                </div>

                {{--
                    ! ===========================================================
                    ! FOOTER AVEC METADONNEES TEMPORELLES
                    ! ===========================================================
                    !
                    ! * Affiche les méta :
                    ! ? - Catégorie (si disponible)
                    ! ? - Dates de création / mise à jour
                    !
                    ! * Style :
                    ! ? - Texte compact en gris, séparé par des puces
                    ! ? - Fond gris clair pour isoler de la description
                    !
                    ! * Format des dates : d/m/Y H:i (ex: 15/03/2025 14:30)
                    ! ===========================================================
                --}}
                <div class="px-6 py-4 bg-gray-50 border-t border-gray-100">
                    <div
                        class="flex flex-wrap items-center gap-2 text-[11px] text-gray-500"
                    >
                        @if ($confession->category)
                            <span class="font-medium text-gray-600">
                                {{ $confession->category->translatedName ?? __("confession.no_category") }}
                            </span>
                            <span class="text-gray-300">&bull;</span>
                        @endif

                        <span>
                            {{ __("confession.created_at") }}
                            {{ $confession->created_at->format("d/m/Y H:i") }}
                        </span>
                        @if ($confession->created_at != $confession->updated_at)
                            <span class="text-gray-300">&bull;</span>
                            <span>
                                {{ __("confession.updated_at") }}
                                {{ $confession->updated_at->format("d/m/Y H:i") }}
                            </span>
                        @endif
                    </div>
                </div>
            </div>

            {{--
                ! ===============================================================
                ! SECTION DE SOUTIEN ET SIGNALEMENT
                ! ===============================================================
                !
                ! * Boutons d'interaction utilisateur :
                ! ? - Bouton "Soutenir" (toggle like/unlike)
                ! ? - Bouton "Signaler" pour modération
                !
                ! * Fonctionnalités Alpine.js :
                ! ? - toggleSupport() : Gère le like/unlike
                ! ? - openConfessionReportModal() : Ouvre modal signalement
                ! ? - Variables reactives : isSupported, supportLoading
                !
                ! * Authentification requise (@auth)
                ! ===============================================================
            --}}
            <div
                class="bg-white rounded-2xl shadow-sm border border-gray-200 p-4"
            >
                <div class="flex flex-col sm:flex-row gap-3">
                    @auth
                        {{--
                            ! =======================================================
                            ! BOUTON SOUTENIR - Like/Unlike dynamique
                            ! =======================================================
                            !
                            ! * Comportement Alpine.js :
                            ! ? - @click="toggleSupport()" : Toggle état soutien
                            ! ? - :disabled="supportLoading" : Désactivé pendant requête
                            ! ? - :class binding dynamique selon état isSupported
                            !
                            ! * États visuels :
                            ! ? - Soutenu : fond vert, texte blanc
                            ! ? - Non soutenu : fond blanc, bordure verte
                            ! ? - Loading : spinner + désactivé
                            !
                            ! * Animations :
                            ! ? - Transitions douces sur les couleurs
                            ! =======================================================
                        --}}
                        <button
                            @click="toggleSupport()"
                            :disabled="supportLoading"
                            :class="isSupported ?
                            'bg-green-600 text-white border border-green-600 hover:bg-green-700' :
                            'bg-white text-green-600 border border-green-600 hover:bg-green-50'"
                            class="inline-flex items-center justify-center flex-1 px-4 py-3 text-sm font-medium rounded-xl transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-0 disabled:opacity-60 disabled:cursor-not-allowed"
                        >
                            {{-- ! Emoji soutien (masqué pendant loading) --}}
                            <span
                                class="text-xl mr-2"
                                x-show="!supportLoading"
                            >
                                ✊
                            </span>
                            {{-- ! Spinner de chargement (affiché pendant loading) --}}
                            <svg
                                x-show="supportLoading"
                                class="animate-spin -ml-1 mr-2 h-5 w-5"
                                fill="none"
                                viewBox="0 0 24 24"
                            >
                                <circle
                                    class="opacity-25"
                                    cx="12"
                                    cy="12"
                                    r="10"
                                    stroke="currentColor"
                                    stroke-width="4"
                                ></circle>
                                <path
                                    class="opacity-75"
                                    fill="currentColor"
                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                                ></path>
                            </svg>
                            <span
                                x-text="
                                    isSupported
                                        ? '{{ __("confession.supported") }}'
                                        : '{{ __("confession.support") }}'
                                "
                            ></span>
                            <span
                                class="ml-2 px-2 py-1 bg-green-100 text-green-800 rounded-full text-sm font-bold"
                                x-text="confession.likes"
                            ></span>
                        </button>

                        <button
                            x-show="currentUserId !== confession.user_id"
                            @click="openConfessionReportModal()"
                            class="inline-flex items-center justify-center flex-1 px-4 py-3 text-sm font-medium rounded-xl border border-red-200 bg-white text-red-600 transition-colors duration-200 hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-0"
                        >
                            <span class="mr-2">🚩</span>
                            {{ __("app.report") }}
                        </button>
                    @else
                        <div
                            class="inline-flex items-center justify-center flex-1 px-4 py-3 bg-gray-100 text-gray-500 text-sm font-medium rounded-xl cursor-not-allowed"
                        >
                            <span class="text-xl mr-2">✊</span>
                            {{ __("confession.support") }}
                            <span
                                class="ml-2 px-2 py-1 bg-gray-200 text-gray-600 rounded-full text-sm font-bold"
                                x-text="confession.likes"
                            ></span>
                        </div>
                    @endauth

                    @php
                        $shareUrl = route('confession.show', $confession);
                        $shareTitle = $confession->title;
                        $shareDescription = Str::limit(strip_tags($confession->description), 120);
                        $encodedShareUrl = urlencode($shareUrl);
                        $encodedShareText = urlencode($shareTitle . ' - ' . $shareDescription);
                    @endphp

                    <div
                        class="relative flex-1"
                        x-data="{
                            openShare: false,
                            shareUrl: @js($shareUrl),
                            shareTitle: @js($shareTitle),
                            shareText: @js($shareDescription),
                            async handleShare() {
                                if (navigator.share) {
                                    try {
                                        await navigator.share({
                                            title: this.shareTitle,
                                            text: this.shareText,
                                            url: this.shareUrl,
                                        });
                                        return;
                                    } catch (error) {
                                        if (error && error.name === 'AbortError') {
                                            return;
                                        }
                                        console.warn('Native share failed, falling back to menu.', error);
                                    }
                                }
                                this.openShare = !this.openShare;
                            },
                            async copyLink() {
                                try {
                                    await navigator.clipboard.writeText(this.shareUrl);
                                    this.openShare = false;
                                } catch (error) {
                                    console.error('Clipboard copy failed.', error);
                                }
                            },
                            async shareDiscord() {
                                await this.copyLink();
                                window.open('https://discord.com/channels/@me', '_blank');
                            }
                        }"
                    >
                        <button
                            type="button"
                            @click="handleShare()"
                            class="inline-flex items-center justify-center w-full px-6 py-3 text-sm font-medium rounded-xl border-2 border-blue-200 bg-white text-blue-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 shadow-lg hover:bg-blue-50 hover:shadow-xl transform hover:-translate-y-0.5"
                        >
                            <span class="mr-2">🔗</span>
                            {{ __("app.share") }}
                        </button>

                        <div
                            x-show="openShare"
                            x-transition
                            @click.away="openShare = false"
                            @keydown.escape.window="openShare = false"
                            class="absolute right-0 mt-2 w-56 bg-white border border-gray-200 rounded-lg shadow-lg z-20"
                            style="display: none"
                        >
                            {{--
                                * Options de partage social (fallback desktop)
                            --}}
                            <a
                                href="https://twitter.com/intent/tweet?url={{ $encodedShareUrl }}&text={{ $encodedShareText }}"
                                target="_blank"
                                rel="noopener noreferrer"
                                @click="openShare = false"
                                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 transition-colors duration-150"
                            >
                                <span class="flex items-center justify-center w-6 h-6 mr-3 rounded-full bg-black text-white text-xs font-semibold">
                                    X
                                </span>
                                {{ __("app.share_x") }}
                            </a>
                            <a
                                href="https://api.whatsapp.com/send?text={{ $encodedShareText }}"
                                target="_blank"
                                rel="noopener noreferrer"
                                @click="openShare = false"
                                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-green-50 transition-colors duration-150"
                            >
                                <span class="flex items-center justify-center w-6 h-6 mr-3 rounded-full bg-green-500 text-white text-xs font-semibold">
                                    WA
                                </span>
                                {{ __("app.share_whatsapp") }}
                            </a>
                            <button
                                type="button"
                                @click="shareDiscord()"
                                class="w-full text-left flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 transition-colors duration-150"
                            >
                                <span class="flex items-center justify-center w-6 h-6 mr-3 rounded-full bg-indigo-500 text-white text-xs font-semibold">
                                    DC
                                </span>
                                {{ __("app.share_discord") }}
                            </button>
                            <a
                                href="https://www.facebook.com/sharer/sharer.php?u={{ $encodedShareUrl }}"
                                target="_blank"
                                rel="noopener noreferrer"
                                @click="openShare = false"
                                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-100 transition-colors duration-150"
                            >
                                <span class="flex items-center justify-center w-6 h-6 mr-3 rounded-full bg-blue-600 text-white text-xs font-semibold">
                                    f
                                </span>
                                {{ __("app.share_facebook") }}
                            </a>
                            <button
                                type="button"
                                @click="copyLink()"
                                class="w-full text-left flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors duration-150 border-t border-gray-100"
                            >
                                <img
                                    src="{{ asset('images/social/link-icon.svg') }}"
                                    alt="{{ __('app.share_copy_link') }}"
                                    class="w-4 h-4 mr-3"
                                />
                                {{ __("app.share_copy_link") }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            @auth
                <div
                    x-cloak
                    x-show="!confessionReportModalHidden && confessionReportModalOpen === true"
                    x-transition.opacity
                    style="display: none"
                    class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4"
                    @keydown.escape.window="closeConfessionReportModal()"
                    @click.self="closeConfessionReportModal()"
                >
                    <div
                        class="w-full max-w-lg bg-white rounded-2xl shadow-2xl border border-gray-200 overflow-hidden"
                    >
                        <div
                            class="px-6 py-4 border-b border-gray-100 flex items-center justify-between"
                        >
                            <h3
                                class="text-lg font-semibold text-gray-900 flex items-center"
                            >
                                <span class="mr-2">🚩</span>
                                {{ __("app.report") }}
                            </h3>
                            <button
                                type="button"
                                class="text-gray-400 hover:text-gray-600"
                                @click="closeConfessionReportModal()"
                            >
                                <span class="sr-only">
                                    {{ __("confession.cancel") }}
                                </span>
                                ✕
                            </button>
                        </div>

                        <form
                            @submit.prevent="submitConfessionReport()"
                            class="px-6 py-5 space-y-4"
                        >
                            <div>
                                <label
                                    class="block text-sm font-medium text-gray-700 mb-2"
                                >
                                    {{ __("app.report") }}
                                </label>
                                <select
                                    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-red-500 focus:border-transparent"
                                    x-model="confessionReportForm.reason"
                                    required
                                >
                                    <template
                                        x-for="[value, label] in Object.entries(reportReasons)"
                                        :key="value"
                                    >
                                        <option
                                            :value="value"
                                            x-text="label"
                                        ></option>
                                    </template>
                                </select>
                            </div>

                            <div>
                                <label
                                    class="block text-sm font-medium text-gray-700 mb-2"
                                >
                                    {{ __("confession.message") }}
                                </label>
                                <textarea
                                    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-red-500 focus:border-transparent resize-none"
                                    rows="4"
                                    x-model="confessionReportForm.description"
                                    maxlength="2000"
                                    placeholder="{{ __("confession.share_reflection") }}"
                                ></textarea>
                                <p
                                    class="text-xs text-gray-400 mt-1"
                                    x-text="`${(confessionReportForm.description || '').length}/2000`"
                                ></p>
                            </div>

                            <div
                                x-show="confessionReportError"
                                class="bg-red-50 border border-red-200 text-red-700 px-4 py-2 rounded-lg text-sm"
                                x-text="confessionReportError"
                            ></div>

                            <div
                                class="flex items-center justify-end gap-2 pt-2"
                            >
                                <button
                                    type="button"
                                    class="px-4 py-2 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-100"
                                    @click="closeConfessionReportModal()"
                                >
                                    {{ __("confession.cancel") }}
                                </button>
                                <button
                                    type="submit"
                                    :disabled="confessionReportLoading || !confessionReportForm.reason"
                                    class="inline-flex items-center px-5 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50"
                                >
                                    <svg
                                        x-show="confessionReportLoading"
                                        class="animate-spin -ml-1 mr-2 h-4 w-4"
                                        fill="none"
                                        viewBox="0 0 24 24"
                                    >
                                        <circle
                                            class="opacity-25"
                                            cx="12"
                                            cy="12"
                                            r="10"
                                            stroke="currentColor"
                                            stroke-width="4"
                                        ></circle>
                                        <path
                                            class="opacity-75"
                                            fill="currentColor"
                                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                                        ></path>
                                    </svg>
                                    <span>{{ __("app.report") }}</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            @endauth

            {{--
                ! ===============================================================
                ! SECTION DES COMMENTAIRES - Système hiérarchique complet
                ! ===============================================================
                !
                ! * Fonctionnalités principales :
                ! ? - Affichage commentaires avec pagination infinie
                ! ? - Système de réponses (1 niveau de hiérarchie)
                ! ? - Votes up/down pour chaque commentaire
                ! ? - Signalement de commentaires
                ! ? - Ajout de nouveaux commentaires
                !
                ! * Structure :
                ! ? - Header avec titre et compteur dynamique
                ! ? - Zone d'alerte pour messages utilisateur
                ! ? - Formulaire d'ajout commentaire (si connecté)
                ! ? - Liste des commentaires avec Alpine.js
                ! ? - Chargement infini au scroll
                !
                ! * Variables Alpine.js utilisées :
                ! ? - displayedComments : Liste des commentaires affichés
                ! ? - totalComments : Nombre total (affiché dans header)
                ! ? - loading : État de chargement
                ! ? - alertMessage : Messages d'erreur/succès
                ! ===============================================================
            --}}
            <div class="bg-white rounded-2xl shadow-sm border border-gray-200">
                {{--
                    ! =======================================================
                    ! HEADER DE LA SECTION COMMENTAIRES
                    ! =======================================================
                    !
                    ! * Design avec gradient bleu
                    ! * Titre avec emoji et compteur dynamique
                    ! * Compteur mis à jour en temps réel via Alpine.js
                    ! =======================================================
                --}}
                <div class="px-6 py-5 border-b border-gray-200 bg-white">
                    <h2
                        class="text-lg font-semibold text-gray-900 flex items-center gap-3"
                    >
                        {{-- ! Emoji et titre --}}
                        <span class="text-xl">💬</span>
                        {{ __("confession.comments") }}
                        {{-- ! Badge compteur dynamique Alpine.js --}}
                        <span
                            class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium"
                            x-text="`${totalComments} {{ __("confession.comments_count") }}`"
                        ></span>
                    </h2>
                </div>

                {{--
                    ! =======================================================
                    ! ZONE D'ALERTE DYNAMIQUE
                    ! =======================================================
                    !
                    ! * Affichage conditionnel des messages :
                    ! ? - Messages d'erreur (rouge)
                    ! ? - Messages de succès (vert)
                    ! ? - Messages d'info (bleu)
                    !
                    ! * Contrôlée par Alpine.js :
                    ! ? - x-show="alertMessage" : Affichage conditionnel
                    ! ? - x-text="alertMessage" : Contenu du message
                    ! ? - :class binding pour couleurs selon type
                    ! =======================================================
                --}}
                <div
                    x-show="alertMessage"
                    x-transition:enter="transition ease-out duration-300"
                    x-transition:enter-start="opacity-0 transform scale-95"
                    x-transition:enter-end="opacity-100 transform scale-100"
                    x-transition:leave="transition ease-in duration-200"
                    x-transition:leave-start="opacity-100 transform scale-100"
                    x-transition:leave-end="opacity-0 transform scale-95"
                    class="px-6 py-4 border-b border-gray-200 bg-white"
                >
                    <div
                        :class="alertType === 'success' ? 'bg-green-50 border-green-200 text-green-800' : 'bg-red-50 border-red-200 text-red-800'"
                        class="p-4 border rounded-xl text-sm"
                    >
                        <div class="flex items-center">
                            <svg
                                x-show="alertType === 'success'"
                                class="w-5 h-5 mr-2"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M5 13l4 4L19 7"
                                ></path>
                            </svg>
                            <svg
                                x-show="alertType === 'error'"
                                class="w-5 h-5 mr-2"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                                ></path>
                            </svg>
                            <span x-text="alertMessage"></span>
                        </div>
                    </div>
                </div>

                {{-- * Formulaire add comment --}}

                @auth
                    <div class="px-6 py-5 border-b border-gray-200 bg-white">
                        <h3 class="text-base font-semibold text-gray-900 mb-4">
                            {{ __("confession.add_comment") }}
                        </h3>

                        <form
                            @submit.prevent="submitComment()"
                            class="space-y-4"
                        >
                            <div>
                                <label
                                    for="content"
                                    class="block text-xs font-semibold text-gray-600 mb-2 uppercase tracking-wide"
                                >
                                    {{ __("confession.message") }}
                                </label>
                                <textarea
                                    class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none transition-all duration-200 text-sm"
                                    id="content"
                                    x-model="newComment"
                                    rows="4"
                                    placeholder="{{ __("confession.share_reflection") }}"
                                    required
                                    :disabled="commentLoading"
                                ></textarea>
                                <div
                                    class="flex justify-between text-xs text-gray-500 mt-1"
                                >
                                    <span
                                        x-text="`${(newComment || '').length}/1000 {{ __("confession.characters_count") }}`"
                                    ></span>
                                    <span
                                        x-show="(newComment || '').length < 10"
                                        class="text-red-500"
                                    >
                                        {{ __("confession.min_characters_required") }}
                                    </span>
                                </div>
                            </div>

                            <button
                                type="submit"
                                :disabled="commentLoading || !newComment.trim() || newComment.length < 10"
                                class="inline-flex items-center px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-0 disabled:opacity-60 disabled:cursor-not-allowed"
                            >
                                <svg
                                    x-show="!commentLoading"
                                    class="w-4 h-4 mr-2"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M12 6v6m0 0v6m0-6h6m-6 0H6"
                                    ></path>
                                </svg>
                                <svg
                                    x-show="commentLoading"
                                    class="animate-spin w-4 h-4 mr-2"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                >
                                    <circle
                                        class="opacity-25"
                                        cx="12"
                                        cy="12"
                                        r="10"
                                        stroke="currentColor"
                                        stroke-width="4"
                                    ></circle>
                                    <path
                                        class="opacity-75"
                                        fill="currentColor"
                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                                    ></path>
                                </svg>
                                <span
                                    x-text="
                                        commentLoading
                                            ? '{{ __("confession.publishing") }}'
                                            : '{{ __("confession.submit") }}'
                                    "
                                ></span>
                            </button>
                        </form>
                    </div>
                @else
                    {{-- * Message pour les non connectés --}}
                    <div class="px-6 py-5 border-b border-gray-200 bg-white">
                        <div
                            class="bg-amber-50 border border-amber-200 rounded-xl p-4"
                        >
                            <div class="flex items-center gap-2 text-sm">
                                <svg
                                    class="w-4 h-4 text-amber-600"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.864-.833-2.633 0L5.732 21.5c-.77.833.192 2.5 1.732 2.5z"
                                    />
                                </svg>
                                <span class="text-amber-800">
                                    {{ __("confession.login_to_comment") }}
                                </span>
                            </div>
                        </div>
                    </div>
                @endauth

                {{-- * Liste des commentaires --}}
                <div class="px-6 py-6">
                    <div
                        x-show="loading && comments.length === 0"
                        class="text-center py-10"
                    >
                        <svg
                            class="animate-spin h-7 w-7 text-blue-600 mx-auto mb-3"
                            fill="none"
                            viewBox="0 0 24 24"
                        >
                            <circle
                                class="opacity-25"
                                cx="12"
                                cy="12"
                                r="10"
                                stroke="currentColor"
                                stroke-width="4"
                            ></circle>
                            <path
                                class="opacity-75"
                                fill="currentColor"
                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                            ></path>
                        </svg>
                        <p class="text-sm text-gray-500">
                            {{ __("confession.loading_comments") }}
                        </p>
                    </div>

                    <div x-show="! loading || comments.length > 0">
                        <template
                            x-for="comment in displayedComments"
                            :key="comment.id"
                        >
                            <div
                                class="bg-white rounded-xl border border-gray-200 p-5 mb-6 last:mb-0 shadow-sm"
                            >
                                <div
                                    class="flex items-start justify-between gap-4"
                                >
                                    <div class="flex items-center gap-3">
                                        <div
                                            class="w-9 h-9 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-sm font-semibold"
                                        >
                                            <span
                                                x-text="comment.user?.name ? comment.user.name.charAt(0).toUpperCase() : 'A'"
                                            ></span>
                                        </div>
                                        <div class="flex flex-col">
                                            <div
                                                class="flex flex-wrap items-center gap-2 text-xs text-gray-500"
                                            >
                                                <span
                                                    class="text-sm font-semibold text-gray-900"
                                                    x-text="comment.user?.name || '{{ __("confession.anonymous") }}'"
                                                ></span>
                                                <span class="text-gray-300">
                                                    &bull;
                                                </span>
                                                <span
                                                    x-text="formatDate(comment.created_at)"
                                                ></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <p
                                    class="mt-4 text-base leading-relaxed text-gray-800"
                                    style="text-align: justify;"
                                    x-text="comment.content"
                                ></p>

                                <div
                                    class="mt-4 flex flex-wrap items-center gap-3 text-xs text-gray-500"
                                >
                                    <div
                                        class="flex flex-wrap items-center gap-2"
                                    >
                                        @auth
                                            <button
                                                @click="voteComment(comment.id, 'up')"
                                                :disabled="comment.voteLoading"
                                                :class="comment.userVote === 'up'
                                                ? 'bg-green-600 text-white border border-green-600 hover:bg-green-700'
                                                : 'bg-white text-green-600 border border-green-600 hover:bg-green-50'"
                                                class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium border border-transparent transition-colors duration-200 disabled:opacity-60"
                                            >
                                                <span
                                                    x-text="`↑ ${comment.upvotes}`"
                                                ></span>
                                            </button>
                                            <button
                                                @click="voteComment(comment.id, 'down')"
                                                :disabled="comment.voteLoading"
                                                :class="comment.userVote === 'down'
                                                ? 'bg-red-600 text-white border border-red-600 hover:bg-red-700'
                                                : 'bg-white text-red-600 border border-red-600 hover:bg-red-50'"
                                                class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium border border-transparent transition-colors duration-200 disabled:opacity-60"
                                            >
                                                <span
                                                    x-text="`↓ ${comment.downvotes}`"
                                                ></span>
                                            </button>
                                        @endauth

                                        <span
                                            class="inline-flex items-center px-3 py-1.5 bg-gray-100 text-gray-600 rounded-full text-xs font-medium whitespace-nowrap"
                                        >
                                            <span
                                                x-text="`${comment.replies_count} ${comment.replies_count > 1 ? '{{ __("confession.reply_count_plural") }}' : '{{ __("confession.reply_count_singular") }}'}`"
                                            ></span>
                                        </span>

                                        @auth
                                            <button
                                                @click="comment.showReplyForm = !comment.showReplyForm"
                                                class="inline-flex items-center px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full text-xs font-medium transition-colors duration-200"
                                            >
                                                <span
                                                    x-text="
                                                        comment.showReplyForm
                                                            ? '{{ __("confession.cancel") }}'
                                                            : '{{ __("confession.respond") }}'
                                                    "
                                                ></span>
                                            </button>
                                            <button
                                                x-show="
                                                    currentUserId !== comment.user_id &&
                                                        parseInt(currentUserId) !== parseInt(comment.user_id)
                                                "
                                                @click="openCommentReportModal(comment.id)"
                                                type="button"
                                                class="inline-flex items-center px-3 py-1.5 bg-red-50 hover:bg-red-100 text-red-600 border border-red-200 rounded-full text-xs font-medium transition-colors duration-200"
                                            >
                                                <span class="mr-1">🚩</span>
                                                {{ __("app.report") }}
                                            </button>
                                        @endauth
                                    </div>
                                </div>

                                <div
                                    x-show="comment.replies && comment.replies.length > 0"
                                    class="mt-5 border-l border-gray-200 pl-4 space-y-4"
                                >
                                    <h5
                                        class="text-xs font-semibold text-gray-500 uppercase tracking-wide"
                                    >
                                        {{ __("confession.replies_label") }}
                                    </h5>

                                    <template
                                        x-for="reply in comment.replies"
                                        :key="reply.id"
                                    >
                                        <div
                                            class="bg-gray-50 rounded-xl p-4 border border-gray-200"
                                        >
                                            <div
                                                class="flex items-center gap-3 mb-3"
                                            >
                                                <div
                                                    class="w-8 h-8 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-xs font-semibold"
                                                >
                                                    <span
                                                        x-text="reply.user?.name ? reply.user.name.charAt(0).toUpperCase() : 'A'"
                                                    ></span>
                                                </div>
                                                <div
                                                    class="flex flex-wrap items-center gap-2 text-[11px] text-gray-500"
                                                >
                                                    <span
                                                        class="text-sm font-medium text-gray-900"
                                                        x-text="reply.user?.name || '{{ __("confession.anonymous") }}'"
                                                    ></span>
                                                    <span class="text-gray-300">
                                                        &bull;
                                                    </span>
                                                    <span
                                                        x-text="formatDate(reply.created_at)"
                                                    ></span>
                                                </div>
                                            </div>
                                            <p
                                                class="text-sm leading-relaxed text-gray-700"
                                                style="text-align: justify;"
                                                x-text="reply.content"
                                            ></p>
                                            @auth
                                                <div
                                                    class="mt-3 flex justify-end"
                                                >
                                                    <button
                                                        x-show="
                                                            currentUserId !== reply.user_id &&
                                                                parseInt(currentUserId) !== parseInt(reply.user_id)
                                                        "
                                                        @click="openCommentReportModal(reply.id)"
                                                        type="button"
                                                        class="inline-flex items-center px-3 py-1.5 bg-red-50 hover:bg-red-100 text-red-600 border border-red-200 rounded-full text-[11px] font-medium transition-colors duration-200"
                                                    >
                                                        <span class="mr-1">
                                                            🚩
                                                        </span>
                                                        {{ __("app.report") }}
                                                    </button>
                                                </div>
                                            @endauth
                                        </div>
                                    </template>
                                </div>

                                @auth
                                    <div
                                        x-show="comment.showReplyForm"
                                        x-transition
                                        class="mt-5 border-l border-gray-200 pl-4"
                                    >
                                        <form
                                            @submit.prevent="submitReply(comment.id)"
                                            class="space-y-3"
                                        >
                                            <textarea
                                                x-model="comment.replyContent"
                                                class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm resize-none"
                                                rows="3"
                                                placeholder="{{ __("confession.reply_form_placeholder") }}"
                                                required
                                                :disabled="comment.replyLoading"
                                            ></textarea>
                                            <div
                                                class="flex justify-between text-xs text-gray-500 mt-1"
                                            >
                                                <span
                                                    x-text="`${(comment.replyContent || '').length}/1000 {{ __("confession.characters_count") }}`"
                                                ></span>
                                                <span
                                                    x-show="(comment.replyContent || '').length < 10"
                                                    class="text-red-500"
                                                >
                                                    {{ __("confession.min_characters_required") }}
                                                </span>
                                            </div>
                                            <div class="flex space-x-2">
                                                <button
                                                    type="submit"
                                                    :disabled="comment.replyLoading || !comment.replyContent?.trim() || comment.replyContent.length < 10"
                                                    class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded-full transition-colors duration-200 disabled:opacity-50"
                                                >
                                                    <svg
                                                        x-show="!comment.replyLoading"
                                                        class="w-4 h-4 mr-1"
                                                        fill="none"
                                                        stroke="currentColor"
                                                        viewBox="0 0 24 24"
                                                    >
                                                        <path
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                            stroke-width="2"
                                                            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
                                                        ></path>
                                                    </svg>
                                                    <svg
                                                        x-show="comment.replyLoading"
                                                        class="animate-spin w-4 h-4 mr-1"
                                                        fill="none"
                                                        viewBox="0 0 24 24"
                                                    >
                                                        <circle
                                                            class="opacity-25"
                                                            cx="12"
                                                            cy="12"
                                                            r="10"
                                                            stroke="currentColor"
                                                            stroke-width="4"
                                                        ></circle>
                                                        <path
                                                            class="opacity-75"
                                                            fill="currentColor"
                                                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                                                        ></path>
                                                    </svg>
                                                    <span
                                                        x-text="
                                                            comment.replyLoading
                                                                ? '{{ __("confession.sending") }}'
                                                                : '{{ __("confession.respond") }}'
                                                        "
                                                    ></span>
                                                </button>
                                                <button
                                                    type="button"
                                                    @click="comment.showReplyForm = false; comment.replyContent = ''"
                                                    class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs font-medium rounded-full transition-colors duration-200"
                                                >
                                                    {{ __("confession.cancel") }}
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                @endauth
                            </div>
                        </template>
                    </div>

                    <div
                        x-show="!loading && comments.length === 0"
                        class="text-center py-12 text-gray-400"
                    >
                        <svg
                            class="w-14 h-14 mx-auto mb-3"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                            ></path>
                        </svg>
                        <p class="text-sm text-gray-500">
                            {{ __("confession.no_comments") }}
                        </p>
                    </div>

                    <div x-show="loadingMore" class="text-center py-8">
                        <svg
                            class="animate-spin h-6 w-6 text-blue-600 mx-auto mb-2"
                            fill="none"
                            viewBox="0 0 24 24"
                        >
                            <circle
                                class="opacity-25"
                                cx="12"
                                cy="12"
                                r="10"
                                stroke="currentColor"
                                stroke-width="4"
                            ></circle>
                            <path
                                class="opacity-75"
                                fill="currentColor"
                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                            ></path>
                        </svg>
                        <p class="text-gray-500 text-xs">
                            {{ __('confession.loading_more_comments') }}
                        </p>
                    </div>

                    <div
                        x-show="! loading && ! loadingMore && ! hasMoreComments && comments.length > 0"
                        class="text-center py-8 text-gray-500 text-xs"
                    >
                        <p>{{ __('confession.all_comments_loaded') }}</p>
                    </div>
                </div>
            </div>

            {{-- Modal de signalement de commentaire - INSIDE x-data context --}}
            @auth
                <div
                    x-cloak
                    x-show="commentReportModalOpen === true"
                    x-transition.opacity
                    style="display: none"
                    class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4"
                    @keydown.escape.window="closeCommentReportModal()"
                    @click.self="closeCommentReportModal()"
                >
                    <div
                        class="w-full max-w-lg bg-white rounded-2xl shadow-2xl border border-gray-200 overflow-hidden"
                    >
                        <div
                            class="px-6 py-4 border-b border-gray-100 flex items-center justify-between"
                        >
                            <h3
                                class="text-lg font-semibold text-gray-900 flex items-center"
                            >
                                <span class="mr-2">🚩</span>
                                {{ __("app.report") }}
                            </h3>
                            <button
                                type="button"
                                class="text-gray-400 hover:text-gray-600"
                                @click="closeCommentReportModal()"
                            >
                                <span class="sr-only">
                                    {{ __("confession.cancel") }}
                                </span>
                                ✕
                            </button>
                        </div>

                        <form
                            @submit.prevent="submitCommentReport()"
                            class="px-6 py-5 space-y-4"
                        >
                            <div>
                                <label
                                    class="block text-sm font-medium text-gray-700 mb-2"
                                >
                                    {{ __("app.report") }}
                                </label>
                                <select
                                    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-red-500 focus:border-transparent"
                                    x-model="commentReportForm.reason"
                                    required
                                >
                                    <template
                                        x-for="[value, label] in Object.entries(reportReasons)"
                                        :key="value"
                                    >
                                        <option
                                            :value="value"
                                            x-text="label"
                                        ></option>
                                    </template>
                                </select>
                            </div>

                            <div>
                                <label
                                    class="block text-sm font-medium text-gray-700 mb-2"
                                >
                                    {{ __("confession.message") }}
                                </label>
                                <textarea
                                    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-red-500 focus:border-transparent resize-none"
                                    rows="4"
                                    x-model="commentReportForm.description"
                                    maxlength="2000"
                                    placeholder="{{ __("confession.share_reflection") }}"
                                ></textarea>
                                <p
                                    class="text-xs text-gray-400 mt-1"
                                    x-text="`${(commentReportForm.description || '').length}/2000`"
                                ></p>
                            </div>

                            <div
                                x-show="commentReportError"
                                class="bg-red-50 border border-red-200 text-red-700 px-4 py-2 rounded-lg text-sm"
                                x-text="commentReportError"
                            ></div>

                            <div
                                class="flex items-center justify-end gap-2 pt-2"
                            >
                                <button
                                    type="button"
                                    class="px-4 py-2 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-100"
                                    @click="closeCommentReportModal()"
                                >
                                    {{ __("confession.cancel") }}
                                </button>
                                <button
                                    type="submit"
                                    :disabled="commentReportLoading || !commentReportForm.commentId || !commentReportForm.reason"
                                    class="inline-flex items-center px-5 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50"
                                >
                                    <svg
                                        x-show="commentReportLoading"
                                        class="animate-spin -ml-1 mr-2 h-4 w-4"
                                        fill="none"
                                        viewBox="0 0 24 24"
                                    >
                                        <circle
                                            class="opacity-25"
                                            cx="12"
                                            cy="12"
                                            r="10"
                                            stroke="currentColor"
                                            stroke-width="4"
                                        ></circle>
                                        <path
                                            class="opacity-75"
                                            fill="currentColor"
                                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                                        ></path>
                                    </svg>
                                    <span>{{ __("app.report") }}</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            @endauth
        </div>
    </div>
    {{-- Fermeture de la div x-data --}}

    {{--
        ! ===================================================================
        ! SCRIPT ALPINE.JS - Logique interactive principale
        ! ===================================================================
        !
        ! * Cette section contient toute la logique Alpine.js pour :
        ! ? - Gestion des commentaires (chargement, affichage, ajout)
        ! ? - Système de votes (up/down pour commentaires)
        ! ? - Système de soutien (like confession)
        ! ? - Modales de signalement (confession et commentaires)
        ! ? - Pagination infinie et scroll
        ! ? - Gestion des réponses aux commentaires
        !
        ! * Variables globales PHP injectées :
        ! ? - $confession : Objet confession complet
        ! ? - $reportReasons : Raisons de signalement traduites
        ! ? - auth()->id() : ID utilisateur connecté
        ! ===================================================================
    --}}
    @php($reportReasons = \App\Models\Report::getReasons())
    <script>
        // ! =================================================================
        // ! FONCTION PRINCIPALE ALPINE.JS - State Management Complet
        // ! =================================================================
        // !
        // ! * Cette fonction retourne l'objet de données Alpine.js avec :
        // ! ? - Variables d'état réactives
        // ! ? - Méthodes pour toutes les interactions
        // ! ? - Configuration et initialisation
        // !
        // ! @@param {number} confessionId - ID de la confession courante
        // ! @@returns {object} Objet Alpine.js avec state et methods
        // ! =================================================================
        function confessionData(confessionId) {
            return {
                // ? ==========================================================
                // ? CONFIGURATION DE BASE
                // ? ==========================================================

                // ! ID de la confession courante
                confessionId,

                // ? ==========================================================
                // ? ÉTAT DES DONNÉES - Data State
                // ? ==========================================================

                // ! Objet confession complet injecté depuis PHP
                confession: @json($confession),

                // ! Commentaires - Structure hiérarchique
                comments: [], // * Tous les commentaires récupérés
                displayedComments: [], // * Commentaires actuellement affichés
                totalComments: 0, // * Nombre total pour le compteur

                // ! Utilisateur actuel
                currentUserId: @json(auth()->id()),

                translations: {
                    sessionExpiredRefresh: @json(__("confession.alerts.session_expired_refresh")),
                    loginRequired: @json(__("confession.alerts.login_required")),
                    sessionExpired: @json(__("confession.alerts.session_expired")),
                    sessionExpiredCode: @json(__("confession.alerts.session_expired_code")),
                    loadCommentsError: @json(__("confession.alerts.load_comments_error")),
                    supportError: @json(__("confession.alerts.support_error")),
                    reportError: @json(__("confession.alerts.report_error")),
                    cannotReportOwnComment: @json(__("confession.alerts.cannot_report_own_comment")),
                    submissionError: @json(__("confession.alerts.submission_error")),
                    addError: @json(__("confession.alerts.add_error")),
                    voteError: @json(__("confession.alerts.vote_error")),
                    reportSuccess: @json(__("confession.alerts.report_success")),
                    replyAdded: @json(__("confession.alerts.reply_added")),
                    commentAdded: @json(__("confession.alerts.comment_added")),
                    replyRequired: @json(__("confession.alerts.reply_required")),
                    commentRequired: @json(__("confession.alerts.comment_required")),
                    replyMin: @json(__("confession.alerts.reply_min")),
                    commentMin: @json(__("confession.alerts.comment_min")),
                    replyMax: @json(__("confession.alerts.reply_max")),
                    commentMax: @json(__("confession.alerts.comment_max")),
                    commentNotFound: @json(__("confession.alerts.comment_not_found")),
                },

                // ? ==========================================================
                // ? ÉTAT DE L'INTERFACE - UI State
                // ? ==========================================================

                // ! États de chargement
                loading: false, // * Chargement initial
                loadingMore: false, // * Chargement pagination
                hasMoreComments: true, // * Y'a-t-il plus de commentaires ?

                // ! Pagination
                currentPage: 1, // * Page courante
                perPage: 5, // * Commentaires par page

                // ? ==========================================================
                // ? SYSTÈME DE SIGNALEMENT - Reporting System
                // ? ==========================================================

                // ! Raisons de signalement traduites (injectées depuis PHP)
                reportReasons: @json($reportReasons),

                // ! Modal signalement confession
                confessionReportModalOpen: false,
                confessionReportModalHidden: true,
                confessionReportForm: { reason: '', description: '' },
                confessionReportLoading: false,
                confessionReportError: '',
                commentReportModalOpen: false,
                commentReportModalHidden: true,
                commentReportForm: {
                    commentId: null,
                    reason: '',
                    description: '',
                },
                commentReportLoading: false,
                commentReportError: '',

                // ? ==========================================================
                // ? SYSTÈME DE SOUTIEN - Support/Like System
                // ? ==========================================================

                // ! État du soutien utilisateur pour cette confession
                isSupported: @json($isSupported ?? false), // * True si utilisateur a déjà soutenu
                supportLoading: false, // * État chargement bouton soutien

                // ? ==========================================================
                // ? GESTION DES COMMENTAIRES - Comment Management
                // ? ==========================================================

                // ! Formulaire nouveau commentaire
                newComment: '', // * Contenu du nouveau commentaire
                commentLoading: false, // * État soumission commentaire

                // ? ==========================================================
                // ? SYSTÈME D'ALERTES - Alert System
                // ? ==========================================================

                // ! Messages d'alerte pour l'utilisateur
                alertMessage: '', // * Contenu du message d'alerte
                alertType: 'success', // * Type : success, error, info

                // ? ==========================================================
                // ? GESTION UTILISATEUR - User Management
                // ? ==========================================================

                // ! État d'authentification
                isAuthenticated: @json(auth()->check()), // * Utilisateur connecté ?
                wasAuthenticated: @json(auth()->check()), // * État auth précédent

                // ! Token CSRF pour requêtes sécurisées
                csrfToken: document
                    .querySelector('meta[name="csrf-token"]')
                    ?.getAttribute('content'),

                // ? ==========================================================
                // ? UTILITAIRES - Utilities
                // ? ==========================================================

                // ! Anti-spam : empêche les soumissions multiples
                _postInFlight: false,

                // ! =======================================================
                // ! MÉTHODE D'INITIALISATION ALPINE.JS
                // ! =======================================================
                // !
                // ! * Appelée automatiquement lors du montage Alpine.js
                // ! * Configure les valeurs par défaut et l'état initial
                // ! * Vérifie la cohérence des données injectées depuis PHP
                // !
                // ! @@lifecycle Alpine.js init hook
                // ! @@returns {void}
                // ! =======================================================
                init() {
                    // ? Initialisation sécurisée de reports_count
                    if (
                        this.confession &&
                        this.confession.reports_count == null
                    ) {
                        this.confession.reports_count = 0;
                    }

                    // ? Fallback pour raisons de signalement
                    if (!this.reportReasons) {
                        this.reportReasons = {};
                    }

                    // ? Configuration raison par défaut - Confession
                    if (!this.confessionReportForm.reason) {
                        this.confessionReportForm.reason =
                            this.defaultReportReason();
                    }

                    // ? Configuration raison par défaut - Commentaire
                    if (!this.commentReportForm.reason) {
                        this.commentReportForm.reason =
                            this.defaultReportReason();
                    }
                },

                // ! =======================================================
                // ! GESTION CSRF COOKIE - Sécurité Laravel Sanctum
                // ! =======================================================
                // !
                // ! * Assure que le cookie XSRF-TOKEN de Sanctum est posé
                // ! * Nécessaire avant toute requête POST sécurisée
                // ! * Gère l'authentification pour les appels API
                // !
                // ! @@async
                // ! @@returns {Promise<void>}
                // ! @throws {Error} Si échec récupération cookie CSRF
                // ! =======================================================
                async ensureCsrfCookie() {
                    try {
                        await fetch('/sanctum/csrf-cookie', {
                            method: 'GET',
                            credentials: 'same-origin',
                            headers: { 'X-Requested-With': 'XMLHttpRequest' },
                        });
                    } catch (e) {
                        // CSRF cookie fetch failed
                    }
                },

                // ? À appeler juste avant tout POST
                async beforeAnyPost() {
                    // 1) s'assurer du cookie CSRF
                    await this.ensureCsrfCookie();
                    // 2) rafraîchir le statut d'auth
                    await this.checkAuthStatus();
                    return this.isAuthenticated;
                },

                // * Vérification d'auth
                async checkAuthStatus() {
                    try {
                        const res = await fetch('/api/dev/test-auth', {
                            method: 'GET',
                            headers: {
                                Accept: 'application/json',
                                'X-Requested-With': 'XMLHttpRequest',
                            },
                            credentials: 'same-origin',
                        });

                        if (res.ok) {
                            const data = await res.json();
                            this.isAuthenticated = !!(
                                data.authenticated || data.user
                            );
                            if (
                                !this.isAuthenticated &&
                                this.wasAuthenticated
                            ) {
                                this.showAlert(
                                    this.translations.sessionExpiredRefresh,
                                    'error',
                                );
                            }
                            this.wasAuthenticated = this.isAuthenticated;
                        } else {
                            // Auth check failed
                        }
                    } catch (e) {
                        // Auth check error
                    }
                },

                // ! =======================================================
                // ! INITIALISATION PRINCIPALE DES DONNÉES
                // ! =======================================================
                // !
                // ! * Méthode appelée au montage de la page (x-init)
                // ! * Séquence d'initialisation complète :
                // !   1. Configuration cookie CSRF Sanctum
                // !   2. Vérification statut authentification
                // !   3. Chargement initial des commentaires
                // !
                // ! @@async
                // ! @@lifecycle Appelée par x-init Alpine.js
                // ! @@returns {Promise<void>}
                // ! @@sideEffect Initialise l'état global de la page
                // ! =======================================================
                async initializeData() {
                    // ? Étape 1 : Sécurité CSRF
                    await this.ensureCsrfCookie();

                    // ? Étape 2 : Vérification auth
                    await this.checkAuthStatus();

                    // ? Étape 3 : Chargement données
                    await this.loadComments();
                },

                // ! =======================================================
                // ! CHARGEMENT DES COMMENTAIRES - Comments Loading
                // ! =======================================================
                // !
                // ! * Charge les commentaires avec pagination
                // ! * Gère le chargement initial (page 1) et scroll infini
                // ! * Structure hiérarchique : commentaires + réponses
                // ! * Mise à jour du compteur total et état pagination
                // !
                // ! @@async
                // ! @@param {number} page - Numéro de page à charger (défaut: 1)
                // ! @@returns {Promise<void>}
                // ! @@sideEffect Met à jour comments, displayedComments, totalComments
                // ! @api GET /api/confessions/{id}/comments?page={page}&per_page={perPage}
                // ! =======================================================
                async loadComments(page = 1) {
                    // ? Gestion des états de chargement selon type
                    if (page === 1)
                        this.loading = true; // * Chargement initial
                    else this.loadingMore = true; // * Chargement pagination

                    try {
                        // ? Appel API pour récupérer les commentaires
                        const res = await fetch(
                            `/api/confessions/${this.confessionId}/comments?page=${page}&per_page=${this.perPage}`,
                            {
                                headers: {
                                    Accept: 'application/json',
                                    'X-Requested-With': 'XMLHttpRequest',
                                },
                            },
                        );

                        if (!res.ok) throw new Error(`Error ${res.status}`);

                        const data = await res.json();

                        // ? Décoration des commentaires avec méthodes d'interaction
                        const incoming = (data.data || []).map((c) =>
                            this.decorateComment(c),
                        );

                        // ? Gestion des données selon type de chargement
                        if (page === 1) {
                            // * Premier chargement : remplace tout
                            this.comments = incoming;
                        } else {
                            // * Scroll infini : ajoute à la liste existante
                            this.comments.push(...incoming);
                        }

                        // ? Mise à jour de l'affichage
                        this.displayedComments = [...this.comments];

                        // ! =================================================
                        // ! GESTION PAGINATION FLEXIBLE
                        // ! =================================================
                        // ! * Supporte deux formats de réponse API :
                        // ! ? - Format Laravel standard : {data, pagination: {current_page, last_page}}
                        // ! ? - Format simple : {data, total, per_page, current_page}
                        // ! =================================================
                        const hasPaginator = !!data.pagination;
                        this.totalComments = data.total ?? this.comments.length;

                        // ? Calcul s'il reste des commentaires à charger
                        this.hasMoreComments = hasPaginator
                            ? data.pagination.current_page <
                              data.pagination.last_page
                            : incoming.length === this.perPage;

                        this.currentPage = page;
                    } catch (e) {
                        console.error('Comments error:', e);
                        this.showAlert(
                            this.translations.loadCommentsError,
                            'error',
                        );
                    } finally {
                        this.loading = false;
                        this.loadingMore = false;
                    }
                },

                // ! =======================================================
                // ! GESTION SCROLL INFINI - Infinite Scroll System
                // ! =======================================================
                // !
                // ! * Implémente le chargement automatique au scroll
                // ! * Utilise un debounce pour optimiser les performances
                // ! * Se déclenche à 80% de la hauteur du document
                // ! * Évite les appels multiples avec conditions de garde
                // !
                // ! @@property {number} _scrollTick - Timer pour debounce
                // ! @@method handleScroll - Gestionnaire d'événement scroll
                // ! @@performance Debounce 150ms pour éviter spam
                // ! =======================================================

                // ? Timer pour debounce des événements scroll
                _scrollTick: null,

                // ! Gestionnaire principal du scroll infini
                handleScroll() {
                    // ? Conditions de garde - éviter appels inutiles
                    if (this.loadingMore || !this.hasMoreComments) return;

                    // ? Debounce pour optimiser performances
                    clearTimeout(this._scrollTick);
                    this._scrollTick = setTimeout(() => {
                        // ? Calcul position scroll relative
                        const scrollY = window.scrollY; // * Position actuelle
                        const windowH = window.innerHeight; // * Hauteur viewport
                        const docH = document.documentElement.scrollHeight; // * Hauteur totale

                        // ? Déclenchement à 80% de la page
                        if (scrollY + windowH >= docH * 0.8) {
                            this.loadComments(this.currentPage + 1);
                        }
                    }, 150); // * Debounce 150ms
                },

                // ! =======================================================
                // ! VALIDATION AUTHENTIFICATION AVANT ACTION
                // ! =======================================================
                // !
                // ! * Vérifie l'état d'authentification avant actions sensibles
                // ! * Utilisée avant : like, commentaire, signalement
                // ! * Gère les cas de session expirée avec messages utilisateur
                // ! * Rafraîchit automatiquement le statut auth
                // !
                // ! @@async
                // ! @@returns {Promise<boolean>} True si authentifié et valide
                // ! @@sideEffect Affiche alertes si problème authentification
                // ! @@usage Appeler avant toute action nécessitant connexion
                // ! =======================================================
                async validateAuthBeforeAction() {
                    // ? Vérification authentification de base
                    if (!this.isAuthenticated) {
                        this.showAlert(
                            this.translations.loginRequired,
                            'error',
                        );
                        return false;
                    }

                    // ? Rafraîchissement et re-vérification du statut
                    await this.checkAuthStatus();
                    if (!this.isAuthenticated) {
                        this.showAlert(
                            this.translations.sessionExpired,
                            'error',
                        );
                        return false;
                    }
                    return true;
                },

                // * Support / Like
                async toggleSupport() {
                    if (!(await this.validateAuthBeforeAction())) return;
                    if (this._postInFlight) return; // ! évite le double clic
                    this._postInFlight = true;
                    this.supportLoading = true;

                    try {
                        if (!(await this.beforeAnyPost())) return;

                        const res = await fetch(
                            `/api/confessions/${this.confessionId}/support`,
                            {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    Accept: 'application/json',
                                    'X-CSRF-TOKEN': this.csrfToken,
                                    'X-Requested-With': 'XMLHttpRequest',
                                },
                                credentials: 'same-origin',
                            },
                        );

                        if (!res.ok) {
                            if (res.status === 419)
                                throw new Error(
                                    this.translations.sessionExpiredCode,
                                );
                            if (res.status === 401) {
                                this.isAuthenticated = false;
                                this.showAlert(
                                    this.translations.sessionExpired,
                                    'error',
                                );
                                return;
                            }
                            const err = await res.json().catch(() => ({}));
                            throw new Error(
                                err.message || `Error ${res.status}`,
                            );
                        }

                        const data = await res.json();
                        this.confession.likes = data.data.likes;
                        this.isSupported = data.data.is_supported;
                        this.showAlert(
                            this.isSupported
                                ? this.translations.supportAdded
                                : this.translations.supportRemoved,
                            'success',
                        );
                    } catch (e) {
                        console.error('Support error:', e);
                        this.showAlert(
                            e.message || this.translations.supportError,
                            'error',
                        );
                    } finally {
                        this.supportLoading = false;
                        this._postInFlight = false;
                    }
                },

                defaultReportReason() {
                    const reasons = this.reportReasons || {};
                    const keys = Object.keys(reasons);
                    return keys.length ? keys[0] : '';
                },

                decorateComment(raw) {
                    if (!raw) return raw;

                    const decoratedReplies = (raw.replies || []).map((reply) =>
                        this.decorateComment(reply),
                    );

                    return {
                        ...raw,
                        showReplyForm: false,
                        replyContent: '',
                        replyLoading: false,
                        voteLoading: false,
                        userVote: this.getUserVote(raw),
                        upvotes: raw.upvotes ?? 0,
                        downvotes: raw.downvotes ?? 0,
                        replies: this.sortReplies(decoratedReplies),
                        replies_count:
                            raw.replies_count ?? decoratedReplies.length ?? 0,
                        reports_count: raw.reports_count ?? 0,
                    };
                },

                findCommentById(commentId) {
                    const queue = [...this.displayedComments];
                    while (queue.length) {
                        const current = queue.shift();
                        if (!current) continue;
                        if (current.id === commentId) return current;
                        if (current.replies && current.replies.length) {
                            queue.push(...current.replies);
                        }
                    }
                    return null;
                },

                async openConfessionReportModal() {
                    if (!(await this.validateAuthBeforeAction())) return;
                    if (
                        this.currentUserId &&
                        this.confession?.user_id === this.currentUserId
                    )
                        return;
                    this.confessionReportForm = {
                        reason: this.defaultReportReason(),
                        description: '',
                    };
                    this.confessionReportError = '';
                    this.confessionReportModalOpen = true;
                    this.confessionReportModalHidden = false;
                },

                closeConfessionReportModal() {
                    this.confessionReportModalOpen = false;
                    this.confessionReportModalHidden = true;
                    this.confessionReportLoading = false;
                    this.confessionReportError = '';
                },

                async submitConfessionReport() {
                    if (!(await this.validateAuthBeforeAction())) return;
                    if (this.confessionReportLoading) return;

                    this.confessionReportLoading = true;
                    this.confessionReportError = '';

                    if (!(await this.beforeAnyPost())) {
                        this.confessionReportLoading = false;
                        return;
                    }

                    try {
                        const res = await fetch(
                            `/api/confessions/${this.confessionId}/report`,
                            {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    Accept: 'application/json',
                                    'X-CSRF-TOKEN': this.csrfToken,
                                    'X-Requested-With': 'XMLHttpRequest',
                                },
                                credentials: 'same-origin',
                                body: JSON.stringify(this.confessionReportForm),
                            },
                        );

                        if (!res.ok) {
                            const errorPayload = await res
                                .json()
                                .catch(() => ({}));
                            let message =
                                errorPayload.message || `Error ${res.status}`;
                            if (res.status === 422 && errorPayload.errors) {
                                const first = Object.values(
                                    errorPayload.errors,
                                )[0];
                                message = Array.isArray(first)
                                    ? first[0]
                                    : first;
                            }
                            this.confessionReportError = message;
                            return;
                        }

                        const data = await res.json();
                        if (!this.confession.reports_count)
                            this.confession.reports_count = 0;
                        this.confession.reports_count =
                            data.data?.confession?.reports_count ??
                            this.confession.reports_count;
                        this.showAlert(
                            this.translations.reportSuccess,
                            'success',
                        );
                        this.closeConfessionReportModal();
                    } catch (e) {
                        console.error('Confession report error:', e);
                        this.confessionReportError =
                            e.message || this.translations.reportError;
                    } finally {
                        this.confessionReportLoading = false;
                    }
                },

                async openCommentReportModal(commentId) {
                    if (!(await this.validateAuthBeforeAction())) return;

                    const comment = this.findCommentById(commentId);
                    if (!comment) return;

                    if (
                        this.currentUserId &&
                        (comment.user_id === this.currentUserId ||
                            parseInt(comment.user_id) ===
                                parseInt(this.currentUserId))
                    ) {
                        this.showAlert(
                            this.translations.cannotReportOwnComment,
                            'error',
                        );
                        return;
                    }

                    this.commentReportForm = {
                        commentId,
                        reason: this.defaultReportReason(),
                        description: '',
                    };
                    this.commentReportError = '';
                    this.commentReportModalOpen = true;
                },

                closeCommentReportModal() {
                    this.commentReportModalOpen = false;
                    this.commentReportModalHidden = true;
                    this.commentReportLoading = false;
                    this.commentReportError = '';
                    this.commentReportForm = {
                        commentId: null,
                        reason: this.defaultReportReason(),
                        description: '',
                    };
                },

                async submitCommentReport() {
                    if (!(await this.validateAuthBeforeAction())) return;
                    const commentId = this.commentReportForm.commentId;
                    if (!commentId) return;

                    const comment = this.findCommentById(commentId);
                    if (!comment) {
                        this.commentReportError =
                            this.translations.commentNotFound;
                        return;
                    }

                    if (this.commentReportLoading) return;

                    this.commentReportLoading = true;
                    this.commentReportError = '';

                    if (!(await this.beforeAnyPost())) {
                        this.commentReportLoading = false;
                        return;
                    }

                    try {
                        const res = await fetch(
                            `/api/comments/${commentId}/report`,
                            {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    Accept: 'application/json',
                                    'X-CSRF-TOKEN': this.csrfToken,
                                    'X-Requested-With': 'XMLHttpRequest',
                                },
                                credentials: 'same-origin',
                                body: JSON.stringify({
                                    reason: this.commentReportForm.reason,
                                    description:
                                        this.commentReportForm.description,
                                }),
                            },
                        );

                        if (!res.ok) {
                            const errorPayload = await res
                                .json()
                                .catch(() => ({}));
                            let message =
                                errorPayload.message || `Error ${res.status}`;
                            if (res.status === 422 && errorPayload.errors) {
                                const first = Object.values(
                                    errorPayload.errors,
                                )[0];
                                message = Array.isArray(first)
                                    ? first[0]
                                    : first;
                            }
                            this.commentReportError = message;
                            return;
                        }

                        const data = await res.json();
                        comment.reports_count =
                            data.data?.comment?.reports_count ??
                            comment.reports_count ??
                            0;
                        this.showAlert(
                            this.translations.reportSuccess,
                            'success',
                        );
                        this.closeCommentReportModal();
                    } catch (e) {
                        console.error('Comment report error:', e);
                        this.commentReportError =
                            e.message || this.translations.reportError;
                    } finally {
                        this.commentReportLoading = false;
                    }
                },

                // * Soumission commentaire / réponse (unifiée)
                async submitCommentOrReply(parentId = null) {
                    if (!(await this.validateAuthBeforeAction())) return;
                    if (this._postInFlight) return;
                    const target = parentId
                        ? this.displayedComments.find((c) => c.id === parentId)
                        : this;
                    const content = (
                        parentId ? target?.replyContent : this.newComment || ''
                    ).trim();

                    if (!content)
                        return this.showAlert(
                            parentId
                                ? this.translations.replyRequired
                                : this.translations.commentRequired,
                            'error',
                        );
                    if (content.length < 10)
                        return this.showAlert(
                            parentId
                                ? this.translations.replyMin
                                : this.translations.commentMin,
                            'error',
                        );
                    if (content.length > 1000)
                        return this.showAlert(
                            parentId
                                ? this.translations.replyMax
                                : this.translations.commentMax,
                            'error',
                        );

                    if (parentId) target.replyLoading = true;
                    else this.commentLoading = true;
                    this._postInFlight = true;

                    try {
                        if (!(await this.beforeAnyPost())) return;

                        const res = await fetch(
                            `/api/confessions/${this.confessionId}/comments`,
                            {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    Accept: 'application/json',
                                    'X-CSRF-TOKEN': this.csrfToken,
                                    'X-Requested-With': 'XMLHttpRequest',
                                },
                                credentials: 'same-origin',
                                body: JSON.stringify(
                                    parentId
                                        ? { content, parent_id: parentId }
                                        : { content },
                                ),
                            },
                        );

                        if (!res.ok) {
                            if (res.status === 419)
                                throw new Error(
                                    this.translations.sessionExpiredCode,
                                );
                            if (res.status === 401) {
                                this.isAuthenticated = false;
                                this.showAlert(
                                    this.translations.sessionExpired,
                                    'error',
                                );
                                return;
                            }
                            const err = await res.json().catch(() => ({}));
                            if (res.status === 422 && err.errors) {
                                const first = Object.values(err.errors)[0];
                                throw new Error(
                                    Array.isArray(first) ? first[0] : first,
                                );
                            }
                            throw new Error(
                                err.message || `Error ${res.status}`,
                            );
                        }

                        const data = await res.json();
                        const newEntry = this.decorateComment(data.data);

                        if (parentId) {
                            target.replies = this.sortReplies([
                                ...(target.replies || []),
                                newEntry,
                            ]);
                            target.replies_count =
                                (target.replies_count || 0) + 1;
                            target.replyContent = '';
                            target.showReplyForm = false;
                            this.showAlert(
                                this.translations.replyAdded,
                                'success',
                            );
                        } else {
                            this.comments.unshift(newEntry);
                            this.displayedComments = [...this.comments];
                            this.totalComments++;
                            this.newComment = '';
                            this.showAlert(
                                this.translations.commentAdded,
                                'success',
                            );
                        }

                        this.updateGlobalCounters();
                        this.forceUpdate();
                    } catch (e) {
                        console.error('Submission error:', e);
                        this.showAlert(
                            e.message || this.translations.addError,
                            'error',
                        );
                    } finally {
                        if (parentId) target.replyLoading = false;
                        else this.commentLoading = false;
                        this._postInFlight = false;
                    }
                },

                async submitComment() {
                    return await this.submitCommentOrReply();
                },
                async submitReply(id) {
                    return await this.submitCommentOrReply(id);
                },

                // * Vote commentaire
                async voteComment(commentId, voteType) {
                    if (!(await this.validateAuthBeforeAction())) return;
                    const comment = this.displayedComments.find(
                        (c) => c.id === commentId,
                    );
                    if (!comment || comment.voteLoading) return;
                    comment.voteLoading = true;

                    try {
                        if (!(await this.beforeAnyPost())) return;

                        const res = await fetch(
                            `/api/comments/${commentId}/vote`,
                            {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    Accept: 'application/json',
                                    'X-CSRF-TOKEN': this.csrfToken,
                                    'X-Requested-With': 'XMLHttpRequest',
                                },
                                credentials: 'same-origin',
                                body: JSON.stringify({ type: voteType }),
                            },
                        );

                        if (!res.ok) throw new Error(`Error ${res.status}`);

                        const data = await res.json();
                        comment.upvotes = data.data.upvotes;
                        comment.downvotes = data.data.downvotes;
                        comment.userVote = data.data.user_vote;
                    } catch (e) {
                        console.error('Vote error:', e);
                        this.showAlert(this.translations.voteError, 'error');
                    } finally {
                        comment.voteLoading = false;
                    }
                },

                // * Utils
                getUserVote(comment) {
                    return comment.user_vote || null;
                },
                sortReplies(replies) {
                    return [...replies].sort(
                        (a, b) =>
                            new Date(a.created_at) - new Date(b.created_at),
                    );
                },

                updateGlobalCounters() {
                    this.totalComments = this.comments.length;
                    this.displayedComments.forEach((c) => {
                        if (c.replies) c.replies_count = c.replies.length;
                    });
                },

                forceUpdate() {
                    this.displayedComments = [...this.displayedComments];
                    this.comments = [...this.comments];
                    if (typeof this.$nextTick === 'function')
                        this.$nextTick(() => {});
                },

                formatDate(s) {
                    const d = new Date(s),
                        now = new Date(),
                        diff = Math.floor((now - d) / 1000);
                    if (diff < 60) return "À l'instant";
                    if (diff < 3600)
                        return `Il y a ${Math.floor(diff / 60)} min`;
                    if (diff < 86400)
                        return `Il y a ${Math.floor(diff / 3600)} h`;
                    if (diff < 2592000)
                        return `Il y a ${Math.floor(diff / 86400)} j`;
                    return d.toLocaleDateString('fr-FR', {
                        day: '2-digit',
                        month: 'short',
                        year: 'numeric',
                    });
                },

                showAlert(message, type = 'success') {
                    this.alertMessage = message;
                    this.alertType = type;
                    setTimeout(() => (this.alertMessage = ''), 5000);
                },
            };
        }
    </script>
@endsection