@extends('layouts.app')

@section('title', 'Bình luận của tôi - ' . Auth::user()->name)

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-[#0d0b12] py-8">
    <div class="container mx-auto px-4 max-w-5xl">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex items-center gap-3 mb-2">
                <a href="{{ route('profile.index') }}"
                   class="text-gray-500 hover:text-primary transition-colors">
                    <span class="material-symbols-outlined">arrow_back</span>
                </a>
                <h1 class="text-3xl font-bold text-slate-900 dark:text-white">Bình luận của tôi</h1>
            </div>
            <p class="text-gray-500 dark:text-gray-400">
                {{ $comments->total() }} bình luận
            </p>
        </div>

        @if($comments->count() > 0)
            <!-- Comments List -->
            <div class="space-y-4 mb-8">
                @foreach($comments as $comment)
                <div class="bg-white dark:bg-[#1f1c27] rounded-xl shadow-sm border border-gray-100 dark:border-gray-800 p-6">
                    <!-- Comment Header -->
                    <div class="flex items-start justify-between mb-4">
                        <div class="flex-1">
                            <a href="{{ route('comics.detail', $comment->comic->slug) }}"
                               class="text-lg font-bold text-primary hover:text-primary-hover transition-colors">
                                {{ $comment->comic->title }}
                            </a>
                            @if($comment->chapter)
                            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                                Chương {{ $comment->chapter->chapter_number }}
                            </p>
                            @endif
                        </div>
                        <span class="text-sm text-gray-400">
                            {{ $comment->created_at->diffForHumans() }}
                        </span>
                    </div>

                    <!-- Comment Content -->
                    <div class="bg-gray-50 dark:bg-[#131118] rounded-lg p-4 mb-4">
                        <p class="text-slate-700 dark:text-gray-300 whitespace-pre-wrap">{{ $comment->content }}</p>
                    </div>

                    <!-- Comment Actions -->
                    <div class="flex items-center gap-3">
                        <a href="{{ route('comics.detail', $comment->comic->slug) }}"
                           class="text-sm text-primary hover:text-primary-hover flex items-center gap-1">
                            <span class="material-symbols-outlined text-sm">visibility</span>
                            Xem truyện
                        </a>

                        <span class="text-sm flex items-center gap-1
                            {{ $comment->is_approved ? 'text-green-600 dark:text-green-400' : 'text-yellow-600 dark:text-yellow-400' }}">
                            <span class="material-symbols-outlined text-sm">
                                {{ $comment->is_approved ? 'check_circle' : 'schedule' }}
                            </span>
                            {{ $comment->is_approved ? 'Đã duyệt' : 'Chờ duyệt' }}
                        </span>
                    </div>
                </div>
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="flex justify-center">
                {{ $comments->links() }}
            </div>
        @else
            <!-- Empty State -->
            <div class="bg-white dark:bg-[#1f1c27] rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 p-12 text-center">
                <div class="w-24 h-24 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4">
                    <span class="material-symbols-outlined text-5xl text-gray-400">comment</span>
                </div>
                <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">Chưa có bình luận</h3>
                <p class="text-gray-500 dark:text-gray-400 mb-6">
                    Bạn chưa có bình luận nào. Hãy chia sẻ suy nghĩ của bạn về các truyện yêu thích!
                </p>
                <a href="{{ route('comics.list') }}"
                   class="inline-flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary-hover text-white rounded-lg font-semibold transition-colors">
                    <span class="material-symbols-outlined">explore</span>
                    Khám phá truyện
                </a>
            </div>
        @endif
    </div>
</div>
@endsection