@extends('layouts.app')

@section('content')
<div>
    <div class="mb-6">
        <h1 class="text-3xl font-bold text-indigo-700">Dashboard</h1>
        <p class="text-gray-600 mt-1">Welcome back, {{ auth()->user()->name }}. Here are your reading stats.</p>
    </div>

    @if (session('status'))
        <div class="bg-green-50 text-green-800 border border-green-200 rounded-md px-4 py-2 mb-4">
            {{ session('status') }}
        </div>
    @endif

    <!-- Stat cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
        <div class="bg-white rounded-xl border border-gray-100 shadow p-5">
            <div class="text-sm text-gray-500">Readlist items</div>
            <div class="mt-2 text-3xl font-bold text-gray-800">{{ $readlistCount ?? 0 }}</div>
        </div>
        <div class="bg-white rounded-xl border border-gray-100 shadow p-5">
            <div class="text-sm text-gray-500">Summaries in Readlist</div>
            <div class="mt-2 text-3xl font-bold text-gray-800">{{ $readlistWithSummaryCount ?? 0 }}</div>
        </div>
        <div class="bg-white rounded-xl border border-gray-100 shadow p-5">
            <div class="text-sm text-gray-500">Reviews written</div>
            <div class="mt-2 text-3xl font-bold text-gray-800">{{ $reviewsCount ?? 0 }}</div>
        </div>
        <div class="bg-white rounded-xl border border-gray-100 shadow p-5">
            <div class="text-sm text-gray-500">Reports submitted</div>
            <div class="mt-2 text-3xl font-bold text-gray-800">{{ $reportsCount ?? 0 }}</div>
        </div>
        <div class="bg-white rounded-xl border border-gray-100 shadow p-5">
            <div class="text-sm text-gray-500">Summary requests</div>
            <div class="mt-2 text-3xl font-bold text-gray-800">{{ $requestsCount ?? 0 }}</div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Recent Readlist -->
        <div class="bg-white rounded-xl border border-gray-100 shadow overflow-hidden">
            <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
                <h2 class="text-lg font-semibold">Recently added to Readlist</h2>
                <a class="text-sm text-indigo-600 hover:underline" href="{{ route('readlist.index') }}">View all</a>
            </div>
            <div class="divide-y divide-gray-100">
                @forelse(($latestReadlist ?? []) as $book)
                    <a href="{{ route('books.show', $book) }}" class="flex items-center gap-4 px-5 py-3 hover:bg-gray-50">
                        @if($book->cover_image)
                            <img src="{{ $book->cover_image }}" alt="{{ $book->title }} cover" class="w-10 h-14 object-cover rounded">
                        @else
                            <div class="w-10 h-14 bg-gray-200 rounded"></div>
                        @endif
                        <div class="min-w-0">
                            <div class="font-medium text-gray-800 truncate">{{ $book->title }}</div>
                            <div class="text-xs text-gray-500 truncate">
                                @if($book->authors && $book->authors->count())
                                    {{ $book->authors->pluck('name')->join(', ') }}
                                @elseif($book->author)
                                    {{ $book->author }}
                                @endif
                                @if($book->summary)
                                    <span class="ml-2 inline-block px-2 py-0.5 text-[10px] bg-green-50 text-green-700 rounded">Has summary</span>
                                @endif
                            </div>
                        </div>
                    </a>
                @empty
                    <div class="px-5 py-6 text-gray-600">No items yet. <a href="{{ route('books.index') }}" class="text-indigo-600 hover:underline">Browse books</a>.</div>
                @endforelse
            </div>
        </div>

        <!-- Your Reviews -->
        <div class="bg-white rounded-xl border border-gray-100 shadow overflow-hidden">
            <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
                <h2 class="text-lg font-semibold">Your latest reviews</h2>
            </div>
            <div class="divide-y divide-gray-100">
                @forelse(($latestReviews ?? []) as $review)
                    <a href="{{ route('books.show', $review->book) }}" class="block px-5 py-3 hover:bg-gray-50">
                        <div class="flex items-center justify-between">
                            <div class="font-medium text-gray-800">{{ $review->book->title }}</div>
                            <div class="flex items-center">
                                @for($i=1;$i<=5;$i++)
                                    <svg class="w-4 h-4 {{ $i <= $review->rating ? 'text-yellow-400' : 'text-gray-300' }}" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.803 2.036a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.803-2.036a1 1 0 00-1.176 0l-2.803 2.036c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81H7.03a1 1 0 00.95-.69l1.07-3.292z"/></svg>
                                @endfor
                            </div>
                        </div>
                        @if($review->comment)
                            <div class="mt-1 text-sm text-gray-600 line-clamp-2">{{ $review->comment }}</div>
                        @endif
                        <div class="mt-1 text-xs text-gray-500">{{ $review->created_at->diffForHumans() }}</div>
                    </a>
                @empty
                    <div class="px-5 py-6 text-gray-600">You haven't left any reviews yet.</div>
                @endforelse
            </div>
        </div>

        <!-- Summary Requests -->
        <div class="bg-white rounded-xl border border-gray-100 shadow overflow-hidden">
            <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
                <h2 class="text-lg font-semibold">Your summary requests</h2>
                <a class="text-sm text-indigo-600 hover:underline" href="{{ route('requests.index') }}">All requests</a>
            </div>
            <div class="divide-y divide-gray-100">
                @forelse(($latestRequests ?? []) as $r)
                    <div class="px-5 py-3">
                        <div class="flex items-center justify-between">
                            <div>
                                <div class="font-medium text-gray-800">Gutenberg #{{ $r->gutenberg_id }}</div>
                                <div class="text-sm text-gray-600">{{ $r->title ?? '—' }}</div>
                            </div>
                            <span class="inline-flex items-center px-2 py-1 rounded text-xs {{ $r->status === 'pending' ? 'bg-yellow-50 text-yellow-800' : ($r->status === 'completed' ? 'bg-green-50 text-green-800' : 'bg-gray-100 text-gray-700') }}">{{ ucfirst($r->status) }}</span>
                        </div>
                        <div class="mt-1 text-xs text-gray-500">{{ $r->created_at->diffForHumans() }}</div>
                    </div>
                @empty
                    <div class="px-5 py-6 text-gray-600">No requests yet. <a href="{{ route('requests.create') }}" class="text-indigo-600 hover:underline">Request a summary</a>.</div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection