@extends("layouts.base")

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

@section("content")
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-10">
        {{-- Titre principal --}}
        <div class="mb-8">
            <h1 class="text-4xl font-extrabold text-gray-900 leading-tight">
                💬 {{ __("my_comments.title") }}
            </h1>
            <p class="text-xl text-gray-500 mt-2">
                {{ __("my_comments.subtitle") }}
            </p>
        </div>

        {{-- Message flash --}}
        @if (session("success"))
            <div
                class="bg-emerald-100 border border-emerald-200 text-emerald-800 p-4 rounded-xl shadow-lg mb-8"
            >
                <div class="flex items-center">
                    <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>
            </div>
        @endif

        {{-- Liste des commentaires --}}
        <div class="space-y-6">
            @forelse ($comments as $comment)
                @include("components.dashboard-comment-card", ["comment" => $comment])
            @empty
                <div class="alert-info text-center py-12">
                    <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="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-blue-800 mb-2">
                        {{ __("my_comments.no_comments_title") }}
                    </h3>
                    <p class="text-blue-600">
                        {{ __("my_comments.no_comments_text") }}
                    </p>
                    <div class="mt-6">
                        <a
                            href="{{ route("home") }}"
                            class="btn-primary-outline"
                        >
                            {{ __("my_comments.browse_confessions") }}
                        </a>
                    </div>
                </div>
            @endforelse
        </div>

        {{-- Pagination --}}
        @if ($comments->hasPages())
            <div class="mt-12">
                {{ $comments->links("pagination::tailwind") }}
            </div>
        @endif

        {{-- Boutons d'action --}}
        <div class="mt-8 text-center">
            <a
                href="{{ route("dashboard") }}"
                class="btn-secondary-outline mr-4"
            >
                ← {{ __("my_comments.back_to_dashboard") }}
            </a>
            <a href="{{ route("home") }}" class="btn-primary-outline">
                {{ __("my_comments.browse_confessions") }}
            </a>
        </div>
    </div>
@endsection