@extends('layouts.app')

@section('title', 'Tủ truyện - ' . 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">Tủ truyện</h1>
            </div>
            <p class="text-gray-500 dark:text-gray-400">
                {{ $bookmarks->total() }} truyện đã theo dõi
            </p>
        </div>

        @if($bookmarks->count() > 0)
            <!-- Comics Grid -->
            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-8">
                @foreach($bookmarks as $bookmark)
                    @if($bookmark->comic)
                    <div class="group relative">
                        <a href="{{ route('comics.detail', $bookmark->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/{{ $bookmark->comic->thumb_url }}"
                                     alt="{{ $bookmark->comic->title }}"
                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">

                                <!-- Status Badge -->
                                <div class="absolute top-2 left-2">
                                    <span class="px-2 py-1 text-xs font-semibold rounded-full
                                        {{ $bookmark->comic->status === 'completed' ? 'bg-green-500' : 'bg-blue-500' }} text-white">
                                        {{ $bookmark->comic->status === 'completed' ? 'Hoàn thành' : 'Đang phát hành' }}
                                    </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">
                                {{ $bookmark->comic->title }}
                            </h3>

                            @if($bookmark->comic->latestChapter->first())
                            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">
                                <span class="material-symbols-outlined text-xs align-middle">book</span>
                                Chương {{ $bookmark->comic->latestChapter->first()->chapter_number }}
                            </p>
                            @endif

                            <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($bookmark->comic->view_count) }}
                                </span>
                                <span class="flex items-center gap-1">
                                    <span class="material-symbols-outlined text-xs">star</span>
                                    {{ $bookmark->comic->rating }}
                                </span>
                            </div>
                        </a>

                        <!-- Bookmark Added Date -->
                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">
                            Đã thêm: {{ $bookmark->created_at->diffForHumans() }}
                        </p>
                    </div>
                    @endif
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="flex justify-center">
                {{ $bookmarks->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">bookmark_border</span>
                </div>
                <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">Chưa có truyện nào</h3>
                <p class="text-gray-500 dark:text-gray-400 mb-6">
                    Bạn chưa theo dõi truyện nào. Hãy khám phá và thêm truyện yêu thích vào tủ!
                </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