{{-- Fichier : resources/views/dashboard.blade.php --}}
@extends("layouts.base")

@section("title", __("dashboard.title"))

@section("content")
    {{-- Conteneur principal du tableau de bord --}}
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-12">
        {{-- Section: Message Flash de Succès (utilisant Alpine.js pour la disparition) --}}
        @if (session("success"))
            <div
                x-data="{ show: true }"
                x-show="show"
                x-transition.duration.500ms
                class="bg-emerald-100 border border-emerald-200 text-emerald-800 p-4 rounded-xl shadow-lg flex items-center justify-between"
            >
                <div class="flex items-center">
                    {{-- Icône de succès (Coche) --}}
                    <svg
                        class="w-6 h-6 mr-3 text-emerald-600"
                        fill="currentColor"
                        viewBox="0 0 20 20"
                    >
                        <path
                            fill-rule="evenodd"
                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                            clip-rule="evenodd"
                        />
                    </svg>
                    <span class="font-medium text-lg">
                        {{ session("success") }}
                    </span>
                </div>
                {{-- Bouton de fermeture du message flash --}}
                <button
                    @click="show = false"
                    class="text-emerald-800 hover:text-emerald-900 transition-colors"
                >
                    {{-- Icône de fermeture (Croix) --}}
                    <svg
                        class="w-5 h-5"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M6 18L18 6M6 6l12 12"
                        ></path>
                    </svg>
                </button>
            </div>
        @endif

        {{-- Section: En-tête (Titre, Message de Bienvenue & Actions Rapides) --}}
        <div class="flex flex-col md:flex-row md:items-end md:justify-between">
            {{-- Titre et Bienvenue --}}
            <div>
                <h1 class="text-4xl font-extrabold text-gray-900 leading-tight">
                    {{ __("dashboard.title") }}
                </h1>
                <p class="text-xl text-gray-500 mt-2">
                    {{ __("dashboard.welcome", ["name" => Auth::user()->name]) }}
                </p>
            </div>
            {{-- Boutons d'Actions Rapides --}}
            <div class="flex flex-wrap gap-3 mt-6 md:mt-0">
                {{-- Lien pour éditer le profil --}}
                <a
                    href="{{ route("profile.edit") }}"
                    class="btn-primary-outline"
                >
                    {{ __("dashboard.edit_profile") }}
                </a>
                {{-- NOTE: Le bouton "Changer mon mot de passe" a été retiré ici. --}}

                {{-- Bouton de recours si l'utilisateur est banni ou suspendu --}}
                @if (Auth::user()->is_banned || Auth::user()->isSuspended())
                    <a href="#" class="btn-danger-outline">
                        {{ __("dashboard.ask_recours") }}
                    </a>
                @endif
            </div>
        </div>

        {{-- Section: Disposition principale (Sidebar + Contenu des Onglets) --}}
        <div class="max-w-7xl mx-auto grid lg:grid-cols-12 gap-8">
            {{-- Colonne de Statut et Notifications (3/12 de la largeur) --}}
            <div class="lg:col-span-3">
                <div
                    class="bg-white rounded-2xl shadow-xl border border-gray-100 p-6 space-y-6"
                >
                    {{-- Bloc de Statut de l'Utilisateur --}}
                    <div class="flex flex-col space-y-3">
                        <span
                            class="inline-block px-4 py-2 rounded-full text-sm font-semibold text-center {{ Auth::user()->is_banned ? "bg-red-100 text-red-700" : (Auth::user()->isSuspended() ? "bg-yellow-100 text-yellow-700" : "bg-green-100 text-green-700") }}"
                        >
                            {{ Auth::user()->is_banned ? __("dashboard.status_banned") : (Auth::user()->isSuspended() ? __("dashboard.status_suspended") : __("dashboard.status_active")) }}
                        </span>
                        @if (Auth::user()->role !== 'user')
                            <div class="text-sm text-gray-500 text-center">
                                {{ __("dashboard.role") }} :
                                <span class="font-medium text-gray-700">
                                    {{ __(ucfirst(Auth::user()->role)) }}
                                </span>
                            </div>
                        @endif
                    </div>

                    {{-- Section des Notifications de modération --}}
                    <div
                        x-data="{ showNotif: true }"
                        class="bg-gray-50 rounded-lg p-4"
                    >
                        <div class="flex justify-between items-center mb-3">
                            <h3 class="text-base font-semibold text-gray-800">
                                {{ __("dashboard.moderation_notifications") }}
                            </h3>
                            {{-- Bouton pour afficher/masquer les notifications (Alpine.js) --}}
                            <button
                                @click="showNotif = !showNotif"
                                class="text-blue-600 hover:text-blue-800 transition-colors text-sm font-medium"
                            >
                                <span
                                    x-text="showNotif ? '{{ __("dashboard.hide") }}' : '{{ __("dashboard.show") }}'"
                                ></span>
                            </button>
                        </div>
                        {{-- Liste des 3 dernières notifications de modération --}}
                        <div x-show="showNotif" x-transition>
                            @forelse (Auth::user()->notifications->whereIn("data.type", ["ban", "suspension"])->take(3) as $notif)
                                <div
                                    class="p-3 rounded-lg mb-2 text-sm {{ $notif->data["type"] === "ban" ? "bg-red-100 text-red-700" : "bg-yellow-100 text-yellow-700" }}"
                                >
                                    <div class="font-semibold">
                                        {{ $notif->data["message"] ?? __("dashboard.moderation_action") }}
                                    </div>
                                    <p class="text-xs mt-1">
                                        {{ __("dashboard.reason") }} :
                                        {{ $notif->data["reason"] ?? "-" }}
                                    </p>
                                    <p class="text-xs">
                                        {{ __("dashboard.moderator") }} :
                                        {{ $notif->data["moderator"] ?? "-" }}
                                    </p>
                                    {{-- Afficher l'expiration seulement pour les suspensions --}}
                                    @if (isset($notif->data["expires_at_human"]))
                                        <p class="text-xs">
                                            {{ __("dashboard.expires") }} :
                                            {{ $notif->data["expires_at_human"] }}
                                        </p>
                                    @endif

                                    <div
                                        class="text-right text-xs mt-2 opacity-70"
                                    >
                                        {{ $notif->created_at->diffForHumans() }}
                                    </div>
                                </div>
                            @empty
                                {{-- Message si aucune notification de modération --}}
                                <div
                                    class="text-gray-500 text-center py-4 text-sm"
                                >
                                    {{ __("dashboard.no_moderation_notif") }}
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>

            {{-- Contenu principal avec navigation par onglets (9/12 de la largeur) --}}
            <div class="lg:col-span-9" x-data="dashboardCarousel()">
                {{-- Navigation des Onglets (Filtres) --}}
                <div
                    class="w-full bg-white py-3 mb-6 shadow-sm border-b border-gray-100"
                >
                    <nav
                        class="flex flex-col sm:flex-row gap-2 sm:gap-1 justify-center items-center w-full px-2"
                    >
                        {{-- Onglet: Mes Confessions --}}
                        <button
                            @click="activeTab = 'confessions'"
                            :class="activeTab === 'confessions' ? 'bg-white text-blue-600 shadow-md' : 'text-gray-500 hover:text-gray-700'"
                            class="flex-1 px-4 py-3 rounded-xl font-semibold text-sm transition-all duration-200 flex items-center justify-center"
                        >
                            {{-- Icône de livre --}}
                            <svg
                                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 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
                                />
                            </svg>
                            <span class="hidden sm:inline">
                                {{ __("dashboard.my_confessions") }}
                            </span>
                            <span class="sm:hidden">
                                {{ __("dashboard.my_confessions_short") }}
                            </span>
                        </button>
                        {{-- Onglet: Confessions Supportées --}}
                        <button
                            @click="activeTab = 'supported'"
                            :class="activeTab === 'supported' ? 'bg-white text-green-600 shadow-md' : 'text-gray-500 hover:text-gray-700'"
                            class="flex-1 px-4 py-3 rounded-xl font-semibold text-sm transition-all duration-200 flex items-center justify-center"
                        >
                            {{-- Icône de cœur --}}
                            <svg
                                class="w-4 h-4 mr-2"
                                fill="currentColor"
                                viewBox="0 0 20 20"
                            >
                                <path
                                    fill-rule="evenodd"
                                    d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
                                    clip-rule="evenodd"
                                />
                            </svg>
                            <span class="hidden sm:inline">
                                {{ __("dashboard.supported_confessions") }}
                            </span>
                            <span class="sm:hidden">
                                {{ __("dashboard.supported_short") }}
                            </span>
                        </button>
                        {{-- Onglet: Mes Commentaires Récents --}}
                        <button
                            @click="activeTab = 'comments'"
                            :class="activeTab === 'comments' ? 'bg-white text-purple-600 shadow-md' : 'text-gray-500 hover:text-gray-700'"
                            class="flex-1 px-4 py-3 rounded-xl font-semibold text-sm transition-all duration-200 flex items-center justify-center"
                        >
                            {{-- Icône de bulle de conversation --}}
                            <svg
                                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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-3.582 8-8 8a8.959 8.959 0 01-4.906-1.476L3 21l2.476-5.094A8.959 8.959 0 013 12c0-4.418 3.582-8 8-8s8 3.582 8 8z"
                                />
                            </svg>
                            <span class="hidden sm:inline">
                                {{ __("dashboard.my_recent_comments") }}
                            </span>
                            <span class="sm:hidden">
                                {{ __("dashboard.comments_short") }}
                            </span>
                        </button>
                    </nav>
                </div>

                {{-- Contenu des Onglets (Affichage conditionnel via Alpine.js) --}}

                {{-- Panneau 1: Mes Confessions --}}
                <div
                    x-show="activeTab === 'confessions'"
                    x-transition.duration.300ms
                    class="space-y-4"
                >
                    <div class="flex items-center justify-between">
                        <h2 class="text-xl font-bold text-gray-900">
                            {{ __("dashboard.my_confessions") }}
                        </h2>
                    </div>

                    {{-- Grille des confessions de l'utilisateur --}}
                    <div
                        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
                    >
                        @forelse ($myConfessions as $confession)
                            @include("components.dashboard-confession-card", ["confession" => $confession, "is_owner" => true])
                        @empty
                            {{-- État vide pour les confessions --}}
                            <div class="col-span-full">
                                <div class="alert-info text-center py-12">
                                    {{-- Icône d'état vide --}}
                                    <svg
                                        class="w-16 h-16 mx-auto text-blue-400 mb-4"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                    >
                                        <path
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
                                        />
                                    </svg>
                                    <h3
                                        class="text-lg font-semibold text-blue-800 mb-2"
                                    >
                                        {{ __("dashboard.no_confession") }}
                                    </h3>
                                    {{-- Bouton pour ajouter une confession --}}
                                    <a
                                        href="{{ route("confession.create") }}"
                                        class="btn-primary-outline mt-4"
                                    >
                                        {{ __("dashboard.add_confession") }}
                                    </a>
                                </div>
                            </div>
                        @endforelse
                    </div>

                    {{-- Lien pour voir toutes les confessions --}}
                    <div class="text-center">
                        <a
                            href="{{ route("confession.mine") }}"
                            class="btn-link"
                        >
                            {{ __("dashboard.see_all") }} &rarr;
                        </a>
                    </div>
                </div>

                {{-- Panneau 2: Confessions Supportées --}}
                <div
                    x-show="activeTab === 'supported'"
                    x-transition.duration.300ms
                    class="space-y-4"
                >
                    <div class="flex items-center justify-between">
                        <h2 class="text-xl font-bold text-gray-900">
                            {{ __("dashboard.supported_confessions") }}
                        </h2>
                    </div>

                    {{-- Grille des confessions supportées par l'utilisateur --}}
                    <div
                        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
                    >
                        @forelse ($likedConfessions as $confession)
                            @include("components.dashboard-confession-card", ["confession" => $confession, "is_owner" => false])
                        @empty
                            {{-- État vide pour les supports --}}
                            <div class="col-span-full">
                                <div class="alert-info text-center py-12">
                                    {{-- Icône d'état vide --}}
                                    <svg
                                        class="w-16 h-16 mx-auto text-green-400 mb-4"
                                        fill="currentColor"
                                        viewBox="0 0 20 20"
                                    >
                                        <path
                                            fill-rule="evenodd"
                                            d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
                                            clip-rule="evenodd"
                                        />
                                    </svg>
                                    <h3
                                        class="text-lg font-semibold text-green-800 mb-2"
                                    >
                                        {{ __("dashboard.no_support") }}
                                    </h3>
                                    {{-- Bouton pour naviguer vers l'accueil --}}
                                    <a
                                        href="{{ route("home") }}"
                                        class="btn-primary-outline mt-4"
                                    >
                                        {{ __("dashboard.browse_confessions") }}
                                    </a>
                                </div>
                            </div>
                        @endforelse
                    </div>

                    {{-- Lien pour voir toutes les confessions supportées --}}
                    <div class="text-center">
                        <a
                            href="{{ route("confession.supported") }}"
                            class="btn-link"
                        >
                            {{ __("dashboard.see_all") }} &rarr;
                        </a>
                    </div>
                </div>

                {{-- Panneau 3: Mes Commentaires Récents --}}
                <div
                    x-show="activeTab === 'comments'"
                    x-transition.duration.300ms
                    class="space-y-4"
                >
                    <div class="flex items-center justify-between">
                        <h2 class="text-xl font-bold text-gray-900">
                            {{ __("dashboard.my_recent_comments") }}
                        </h2>
                    </div>

                    {{-- Grille des commentaires récents de l'utilisateur --}}
                    <div
                        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
                    >
                        @forelse ($myComments as $comment)
                            @include("components.dashboard-comment-card", ["comment" => $comment])
                        @empty
                            {{-- État vide pour les commentaires --}}
                            <div class="col-span-full">
                                <div class="alert-info text-center py-12">
                                    {{-- Icône d'état vide --}}
                                    <svg
                                        class="w-16 h-16 mx-auto text-purple-400 mb-4"
                                        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-3.582 8-8 8a8.959 8.959 0 01-4.906-1.476L3 21l2.476-5.094A8.959 8.959 0 013 12c0-4.418 3.582-8 8-8s8 3.582 8 8z"
                                        />
                                    </svg>
                                    <h3
                                        class="text-lg font-semibold text-purple-800 mb-2"
                                    >
                                        {{ __("dashboard.no_comments") }}
                                    </h3>
                                    {{-- Bouton pour naviguer vers l'accueil --}}
                                    <a
                                        href="{{ route("home") }}"
                                        class="btn-primary-outline mt-4"
                                    >
                                        {{ __("dashboard.browse_confessions") }}
                                    </a>
                                </div>
                            </div>
                        @endforelse
                    </div>

                    {{-- Lien pour voir tous les commentaires --}}
                    <div class="text-center">
                        <a
                            href="{{ route("comments.mine") }}"
                            class="btn-link"
                        >
                            {{ __("dashboard.see_all_comments") }} &rarr;
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Script Alpine.js pour la navigation des onglets --}}
    <script>
        /**
         * Initialise l'état de la navigation par onglets pour le tableau de bord.
         * La valeur par défaut 'confessions' sera l'onglet actif au chargement.
         * @returns {object} L'objet de données Alpine.js.
         */
        function dashboardCarousel() {
            return {
                activeTab: 'confessions',
            };
        }
    </script>
@endsection