@extends('layouts.app')

@section('title', 'Lịch sử đọc - ' . 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 justify-between">
                <div>
                    <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">Lịch sử đọc</h1>
                    </div>
                    <p class="text-gray-500 dark:text-gray-400">
                        {{ $history->total() }} truyện đã đọc
                    </p>
                </div>

                @if($history->count() > 0)
                <button onclick="clearHistory()"
                        class="px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors flex items-center gap-2">
                    <span class="material-symbols-outlined text-sm">delete</span>
                    Xóa tất cả
                </button>
                @endif
            </div>
        </div>

        @if($history->count() > 0)
            <!-- History List -->
            <div class="space-y-4 mb-8">
                @foreach($history as $item)
                    @if($item->comic)
                    <div class="bg-white dark:bg-[#1f1c27] rounded-xl shadow-sm border border-gray-100 dark:border-gray-800 p-4 hover:border-primary/20 transition-all">
                        <div class="flex gap-4">
                            <!-- Thumbnail -->
                            <a href="{{ route('comics.detail', $item->comic->slug) }}"
                               class="flex-shrink-0">
                                <div class="w-20 h-28 rounded-lg overflow-hidden shadow-md">
                                    <img src="https://img.otruyenapi.com/uploads/comics/{{ $item->comic->thumb_url }}"
                                         alt="{{ $item->comic->title }}"
                                         class="w-full h-full object-cover hover:scale-105 transition-transform">
                                </div>
                            </a>

                            <!-- Info -->
                            <div class="flex-1 min-w-0">
                                <a href="{{ route('comics.detail', $item->comic->slug) }}"
                                   class="block">
                                    <h3 class="text-lg font-bold text-slate-900 dark:text-white line-clamp-1 mb-2 hover:text-primary transition-colors">
                                        {{ $item->comic->title }}
                                    </h3>
                                </a>

                                <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 dark:text-gray-400 mb-3">
                                    <span class="flex items-center gap-1">
                                        <span class="material-symbols-outlined text-sm">{{ $item->comic->status === 'completed' ? 'check_circle' : 'schedule' }}</span>
                                        {{ $item->comic->status === 'completed' ? 'Hoàn thành' : 'Đang phát hành' }}
                                    </span>
                                    <span class="flex items-center gap-1">
                                        <span class="material-symbols-outlined text-sm">schedule</span>
                                        {{ $item->last_read_at->diffForHumans() }}
                                    </span>
                                </div>

                                @if($item->chapter)
                                <a href="{{ route('comics.reading', $item->chapter->slug) }}"
                                   class="inline-flex items-center gap-2 px-4 py-2 bg-primary hover:bg-primary-hover text-white rounded-lg font-semibold text-sm transition-colors">
                                    <span class="material-symbols-outlined text-sm">play_arrow</span>
                                    Tiếp tục đọc: Chương {{ $item->chapter->chapter_number }}
                                </a>
                                @endif
                            </div>
                        </div>
                    </div>
                    @endif
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="flex justify-center">
                {{ $history->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">history</span>
                </div>
                <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">Chưa có lịch sử</h3>
                <p class="text-gray-500 dark:text-gray-400 mb-6">
                    Bạn chưa đọc truyện nào. Hãy bắt đầu khám phá ngay!
                </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>

<script>
    async function clearHistory() {
        if (!confirm('Bạn có chắc muốn xóa toàn bộ lịch sử đọc?')) return;

        try {
            const response = await axios.delete('/api/reading-history/clear');

            if (response.data.success) {
                window.location.reload();
            }
        } catch (error) {
            alert(error.response?.data?.message || 'Có lỗi xảy ra');
        }
    }
</script>
@endsection