@extends('layouts.app')

@section('title', 'Tài khoản - ' . $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-6xl">
        <!-- Profile Header -->
        <div class="bg-white dark:bg-[#1f1c27] rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 p-8 mb-6">
            <div class="flex items-center gap-6">
                <!-- Avatar -->
                <div class="w-20 h-20 bg-gradient-to-br from-primary to-purple-500 rounded-full flex items-center justify-center text-white text-3xl font-bold">
                    {{ strtoupper(substr($user->name, 0, 1)) }}
                </div>

                <!-- Info -->
                <div class="flex-1">
                    <h1 class="text-3xl font-bold text-slate-900 dark:text-white mb-2">{{ $user->name }}</h1>
                    <p class="text-gray-500 dark:text-gray-400">{{ $user->email }}</p>
                    <p class="text-sm text-gray-400 dark:text-gray-500 mt-1">
                        Tham gia: {{ $user->created_at->format('d/m/Y') }}
                    </p>
                </div>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
            <!-- Bookmarks -->
            <a href="{{ route('profile.bookmarks') }}"
               class="bg-white dark:bg-[#1f1c27] rounded-xl shadow-sm border border-gray-100 dark:border-gray-800 p-6 hover:shadow-lg hover:border-primary/20 transition-all group">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
                        <span class="material-symbols-outlined text-blue-500 text-2xl">bookmark</span>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-slate-900 dark:text-white">{{ $stats['bookmarks_count'] }}</p>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Tủ truyện</p>
                    </div>
                </div>
            </a>

            <!-- Reading History -->
            <a href="{{ route('profile.reading-history') }}"
               class="bg-white dark:bg-[#1f1c27] rounded-xl shadow-sm border border-gray-100 dark:border-gray-800 p-6 hover:shadow-lg hover:border-primary/20 transition-all group">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
                        <span class="material-symbols-outlined text-green-500 text-2xl">history</span>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-slate-900 dark:text-white">{{ $stats['reading_history_count'] }}</p>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Lịch sử đọc</p>
                    </div>
                </div>
            </a>

            <!-- Comments -->
            <a href="{{ route('profile.comments') }}"
               class="bg-white dark:bg-[#1f1c27] rounded-xl shadow-sm border border-gray-100 dark:border-gray-800 p-6 hover:shadow-lg hover:border-primary/20 transition-all group">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
                        <span class="material-symbols-outlined text-orange-500 text-2xl">comment</span>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-slate-900 dark:text-white">{{ $stats['comments_count'] }}</p>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Bình luận</p>
                    </div>
                </div>
            </a>

            <!-- Ratings -->
            <a href="{{ route('profile.ratings') }}"
               class="bg-white dark:bg-[#1f1c27] rounded-xl shadow-sm border border-gray-100 dark:border-gray-800 p-6 hover:shadow-lg hover:border-primary/20 transition-all group">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-yellow-100 dark:bg-yellow-900/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
                        <span class="material-symbols-outlined text-yellow-500 text-2xl">star</span>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-slate-900 dark:text-white">{{ $stats['ratings_count'] }}</p>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Đánh giá</p>
                    </div>
                </div>
            </a>
        </div>

        <!-- Recently Read Section -->
        @if($recentlyRead->count() > 0)
        <div class="bg-white dark:bg-[#1f1c27] rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-bold text-slate-900 dark:text-white">Đọc gần đây</h2>
                <a href="{{ route('profile.reading-history') }}"
                   class="text-sm text-primary hover:text-primary-hover font-semibold flex items-center gap-1">
                    Xem tất cả
                    <span class="material-symbols-outlined text-sm">arrow_forward</span>
                </a>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
                @foreach($recentlyRead as $history)
                <a href="{{ route('comics.detail', $history->comic->slug) }}"
                   class="group">
                    <div class="aspect-[2/3] rounded-lg overflow-hidden shadow-md mb-2">
                        <img src="https://img.otruyenapi.com/uploads/comics/{{ $history->comic->thumb_url }}"
                             alt="{{ $history->comic->title }}"
                             class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                    </div>
                    <h3 class="text-sm font-semibold text-slate-900 dark:text-white line-clamp-2 mb-1 group-hover:text-primary transition-colors">
                        {{ $history->comic->title }}
                    </h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400">
                        Chương {{ $history->chapter->chapter_number }}
                    </p>
                </a>
                @endforeach
            </div>
        </div>
        @endif
    </div>
</div>
@endsection