@extends('layouts.app')

@section('title', 'Đánh giá 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-7xl">
        <!-- 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">Đánh giá của tôi</h1>
            </div>
            <p class="text-gray-500 dark:text-gray-400">
                {{ $ratings->total() }} truyện đã đánh giá
            </p>
        </div>

        @if($ratings->count() > 0)
            <!-- Ratings Grid -->
            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-8">
                @foreach($ratings as $rating)
                    @if($rating->comic)
                    <div class="group relative">
                        <a href="{{ route('comics.detail', $rating->comic->slug) }}"
                           class="block">
                            <!-- Thumbnail -->
                            <div class="aspect-[2/3] rounded-lg overflow-hidden shadow-md mb-3 relative">
                                <img src="https://img.otruyenapi.com/uploads/comics/{{ $rating->comic->thumb_url }}"
                                     alt="{{ $rating->comic->title }}"
                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">

                                <!-- My Rating Badge -->
                                <div class="absolute top-2 right-2 bg-yellow-500 text-white px-2 py-1 rounded-lg flex items-center gap-1 shadow-lg">
                                    <span class="material-symbols-outlined text-sm">star</span>
                                    <span class="font-bold text-sm">{{ $rating->rating }}</span>
                                </div>
                            </div>

                            <!-- Info -->
                            <h3 class="text-sm font-semibold text-slate-900 dark:text-white line-clamp-2 mb-2 group-hover:text-primary transition-colors">
                                {{ $rating->comic->title }}
                            </h3>

                            <div class="flex items-center gap-2 text-xs text-gray-400">
                                <span class="flex items-center gap-1">
                                    <span class="material-symbols-outlined text-xs">visibility</span>
                                    {{ number_format($rating->comic->view_count) }}
                                </span>
                                <span class="flex items-center gap-1">
                                    <span class="material-symbols-outlined text-xs">star</span>
                                    {{ $rating->comic->rating }}
                                    <span class="text-gray-500">({{ $rating->comic->rating_count }})</span>
                                </span>
                            </div>
                        </a>

                        <!-- Rating Date -->
                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">
                            Đánh giá: {{ $rating->created_at->diffForHumans() }}
                        </p>

                        <!-- My Rating Display -->
                        <div class="mt-2 flex items-center gap-1">
                            @for($i = 1; $i <= 5; $i++)
                            <span class="material-symbols-outlined text-sm {{ $i <= $rating->rating ? 'text-yellow-400' : 'text-gray-300' }}">
                                {{ $i <= $rating->rating ? 'star' : 'star_outline' }}
                            </span>
                            @endfor
                        </div>
                    </div>
                    @endif
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="flex justify-center">
                {{ $ratings->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">star_border</span>
                </div>
                <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">Chưa có đánh giá</h3>
                <p class="text-gray-500 dark:text-gray-400 mb-6">
                    Bạn chưa đánh giá truyện nào. Hãy đánh giá để chia sẻ cảm nhận của bạn!
                </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