@extends('layouts.app')

@section('title', $comic->title . ' - Truyện Hay')
@section('description', 'Đọc truyện ' . $comic->title . ' online miễn phí tại Truyện Hay. ' . Str::limit(strip_tags($comic->description), 150))

@push('head')
{!! $structuredData !!}
@endpush

@push('styles')
<style>
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #6c2bee;
        border-radius: 3px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #5a23c8;
    }
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
</style>
@endpush

@section('content')
    <div class="relative w-full overflow-hidden">
        <div class="absolute inset-0 z-0">
            <div
                class="absolute inset-0 bg-gradient-to-t from-background-light via-background-light/90 to-background-light/30 dark:from-background-dark dark:via-background-dark/90 dark:to-background-dark/30 z-10">
            </div>
            <img class="w-full h-full object-cover blur-2xl opacity-40 scale-110"
                alt="Background cover"
                src="https://img.otruyenapi.com/uploads/comics/{{ $comic->thumb_url }}" />
        </div>
        <div class="container mx-auto px-4 lg:px-8 relative z-20 py-8 lg:py-12">
            <div class="flex flex-wrap items-center gap-2 text-sm text-slate-500 dark:text-slate-400 mb-6">
                <a class="hover:text-primary transition-colors" href="{{ route('home') }}">Trang chủ</a>
                <span class="material-symbols-outlined text-[16px]">chevron_right</span>
                <a class="hover:text-primary transition-colors" href="#">{{ $comic->categories->first()?->name ?? 'Đang cập nhật' }}</a>
                <span class="material-symbols-outlined text-[16px]">chevron_right</span>
                <span class="text-slate-900 dark:text-white font-medium">{{ $comic->title }}</span>
            </div>
            <div class="flex flex-col md:flex-row gap-8 lg:gap-12">
                <div
                    class="flex-shrink-0 mx-auto md:mx-0 w-[240px] md:w-[280px] lg:w-[320px] aspect-[2/3] relative rounded-xl overflow-hidden shadow-2xl shadow-primary/20 ring-1 ring-white/10 group">
                    <img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                        alt="{{ $comic->title }}"
                        src="https://img.otruyenapi.com/uploads/comics/{{ $comic->thumb_url }}" />
                    @if($comic->is_hot)
                    <div
                        class="absolute top-3 left-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded shadow-md">
                        HOT</div>
                    @endif
                </div>
                <div class="flex flex-col justify-end flex-grow gap-4 text-center md:text-left">
                    <div>
                        <h1
                            class="text-3xl md:text-4xl lg:text-5xl font-black tracking-tight text-slate-900 dark:text-white mb-2 leading-tight">
                            {{ $comic->title }}
                        </h1>
                        @if($comic->alternative_title)
                        <p class="text-lg text-slate-600 dark:text-slate-300 font-medium mb-1">Tên khác: {{ $comic->alternative_title }}</p>
                        @endif
                        <div
                            class="flex flex-wrap justify-center md:justify-start items-center gap-x-6 gap-y-2 text-sm text-slate-500 dark:text-[#a69db9] mt-2">
                            <span class="flex items-center gap-1">
                                <span class="material-symbols-outlined text-[18px]">person</span>
                                {{ $comic->author?->name }}
                            </span>
                            @if($comic->artist)
                            <span class="flex items-center gap-1">
                                <span class="material-symbols-outlined text-[18px]">palette</span>
                                {{ $comic->artist }}
                            </span>
                            @endif
                            <span
                                class="flex items-center gap-1 px-2 py-0.5 rounded {{ $comic->status === 'ongoing' ? 'bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20' : 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20' }}">
                                <span
                                    class="material-symbols-outlined text-[16px] {{ $comic->status === 'ongoing' ? 'animate-pulse' : '' }}">radio_button_checked</span>
                                {{ $comic->status === 'ongoing' ? 'Đang phát hành' : 'Hoàn thành' }}
                            </span>
                        </div>
                    </div>
                    <div class="flex flex-wrap justify-center md:justify-start gap-4 md:gap-8 py-2">
                        <div class="flex flex-col items-center md:items-start">
                            <span class="text-2xl font-bold text-slate-900 dark:text-white" data-avg-rating>{{ number_format($comic->rating, 1) }}</span>
                            <div class="flex items-center text-yellow-400 text-sm">
                                @for($i = 1; $i <= 5; $i++)
                                    @if($i <= floor($comic->rating))
                                        {{-- full --}}
                                        <span class="material-symbols-outlined rating-star-filled text-[18px]">
                                            star
                                        </span>
                                    @elseif($i - 0.5 <= $comic->rating)
                                        {{-- half --}}
                                        <span class="material-symbols-outlined rating-star-filled text-[18px]">
                                            star_half
                                        </span>
                                    @else
                                        {{-- empty --}}
                                        <span class="material-symbols-outlined rating-star-outline text-[18px]">
                                            star
                                        </span>
                                    @endif
                                @endfor
                            </div>

                            <span class="text-xs text-slate-500" data-rating-count>{{ number_format($comic->rating_count) }} đánh giá</span>
                        </div>

                        <!-- Interactive Rating Component -->
                        <div class="w-px h-10 bg-slate-300 dark:bg-slate-700"></div>
                        <div class="flex flex-col items-center md:items-start">
                            <span class="text-xs text-slate-500 uppercase font-semibold tracking-wide mb-1">Đánh giá của bạn</span>
                            <div data-rating-component
                                 data-comic-id="{{ $comic->id }}"
                                 data-user-rating="{{ $userRating ?? 0 }}"
                                 data-is-auth="{{ Auth::check() ? 'true' : 'false' }}">
                            </div>
                        </div>

                        <div class="w-px h-10 bg-slate-300 dark:bg-slate-700"></div>
                        <div class="flex flex-col items-center md:items-start">
                            <span class="text-2xl font-bold text-slate-900 dark:text-white">{{ number_format($comic->view_count) }}</span>
                            <span class="text-xs text-slate-500 uppercase font-semibold tracking-wide">Lượt xem</span>
                        </div>
                        <div class="w-px h-10 bg-slate-300 dark:bg-slate-700"></div>
                        <div class="flex flex-col items-center md:items-start">
                            <span class="text-2xl font-bold text-slate-900 dark:text-white" id="follow-count-display">{{ number_format($comic->follow_count) }}</span>
                            <span class="text-xs text-slate-500 uppercase font-semibold tracking-wide">Theo dõi</span>
                        </div>
                    </div>
                    <div class="flex flex-wrap justify-center md:justify-start gap-2">
                        @foreach($comic->categories as $category)
                            <a class="px-3 py-1 rounded-full border border-slate-300 dark:border-slate-700 text-xs font-semibold text-slate-600 dark:text-slate-300 hover:border-primary hover:text-primary transition-colors"
                            href="#">{{ $category->name }}</a>
                        @endforeach
                    </div>
                    <div class="flex flex-wrap justify-center md:justify-start gap-3 mt-2">
                        @if($comic->chapters->count() > 0)
                        <a href="{{ route('comics.reading', ['slug' => $comic->chapters->last()->slug]) }}"
                            class="flex items-center gap-2 h-12 px-6 rounded-xl bg-primary hover:bg-primary/90 text-white font-bold shadow-lg shadow-primary/25 transition-all transform hover:-translate-y-0.5">
                            <span class="material-symbols-outlined">menu_book</span>
                            Đọc từ đầu
                        </a>
                        @endif
                        <!-- Bookmark Button Component -->
                        <div data-bookmark-button
                             data-comic-id="{{ $comic->id }}"
                             data-is-bookmarked="{{ $userBookmarked ? 'true' : 'false' }}"
                             data-is-auth="{{ Auth::check() ? 'true' : 'false' }}">
                        </div>
                        <button
                            class="flex items-center justify-center size-12 rounded-xl bg-slate-200 dark:bg-[#2e2839] hover:bg-slate-300 dark:hover:bg-[#3d354b] text-slate-900 dark:text-white transition-all cursor-pointer">
                            <span class="material-symbols-outlined">share</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container mx-auto px-4 lg:px-8 py-8">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            <div class="lg:col-span-8 flex flex-col gap-8">
                <div
                    class="sticky top-20 z-30 bg-background-light/95 dark:bg-background-dark/95 backdrop-blur-sm pt-2 -mt-2">
                    <div class="border-b border-slate-200 dark:border-[#433b54]">
                        <div class="flex gap-8 overflow-x-auto no-scrollbar">
                            <a class="tab-link pb-3 border-b-[3px] border-primary text-primary font-bold text-sm tracking-wide whitespace-nowrap"
                                href="#about" data-tab="about">
                                <span class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-[20px]">info</span>
                                    Giới thiệu
                                </span>
                            </a>
                            <a class="tab-link pb-3 border-b-[3px] border-transparent text-slate-500 dark:text-[#a69db9] hover:text-slate-800 dark:hover:text-white font-bold text-sm tracking-wide whitespace-nowrap transition-colors"
                                href="#chapters" data-tab="chapters">
                                <span class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-[20px]">list</span>
                                    Danh sách chương ({{ number_format($comic->chapters->count()) }})
                                </span>
                            </a>
                            <a class="tab-link pb-3 border-b-[3px] border-transparent text-slate-500 dark:text-[#a69db9] hover:text-slate-800 dark:hover:text-white font-bold text-sm tracking-wide whitespace-nowrap transition-colors"
                                href="#comments" data-tab="comments">
                                <span class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-[20px]">chat</span>
                                    Bình luận
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="animate-fade-in" id="about">
                    <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
                        <span class="w-1 h-6 bg-primary rounded-full"></span>
                        Nội dung
                    </h3>
                    <div class="text-slate-600 dark:text-slate-300 leading-relaxed text-base prose dark:prose-invert max-w-none">
                        {!! nl2br(e(Str::replace(['TruyenQQ'], ['Truyện Hay'], $comic->description))) !!}

                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-6">
                        <div
                            class="p-4 rounded-xl bg-white dark:bg-surface-dark border border-slate-100 dark:border-white/5 flex items-start gap-4">
                            <div
                                class="size-10 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500">
                                <span class="material-symbols-outlined">update</span>
                            </div>
                            <div>
                                <h4 class="text-sm font-bold text-slate-900 dark:text-white">Cập nhật</h4>
                                @if($comic->chapters->count() > 0)
                                <p class="text-xs text-slate-500 mt-1">{{ $comic->chapters->first()->title }} - {{ $comic->chapters->first()->published_at->diffForHumans() }}</p>
                                @else
                                <p class="text-xs text-slate-500 mt-1">Chưa có chương</p>
                                @endif
                            </div>
                        </div>
                        <div
                            class="p-4 rounded-xl bg-white dark:bg-surface-dark border border-slate-100 dark:border-white/5 flex items-start gap-4">
                            <div
                                class="size-10 rounded-full bg-purple-500/10 flex items-center justify-center text-purple-500">
                                <span class="material-symbols-outlined">translate</span>
                            </div>
                            <div>
                                <h4 class="text-sm font-bold text-slate-900 dark:text-white">Nhóm dịch</h4>
                                <p class="text-xs text-slate-500 mt-1">{{ $comic->translator ?? 'Đang cập nhật' }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex flex-col gap-4" id="chapters">
                    <div class="flex items-center justify-between">
                        <h3 class="text-xl font-bold text-slate-900 dark:text-white flex items-center gap-2">
                            <span class="w-1 h-6 bg-primary rounded-full"></span>
                            Danh sách chương
                        </h3>
                        <div class="flex gap-2">
                            <button id="sort-chapters" class="p-2 rounded-lg bg-slate-200 dark:bg-surface-dark hover:text-primary transition-colors">
                                <span class="material-symbols-outlined text-[20px]">sort</span>
                            </button>
                        </div>
                    </div>
                    @if($comic->chapters->count() > 0)
                    <div
                        class="bg-white dark:bg-surface-dark rounded-xl border border-slate-200 dark:border-white/5 p-4">
                        <div id="chapters-list"
                            class="max-h-[500px] overflow-y-auto pr-2 custom-scrollbar grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
                            @foreach($comic->chapters as $chapter)
                                <a class="group flex items-center justify-between p-3 rounded-lg bg-background-light dark:bg-background-dark border border-transparent hover:border-primary/50 hover:bg-primary/5 transition-all"
                                   href="{{ route('comics.reading', ['slug' => $chapter->slug]) }}">
                                    <div class="flex flex-col">
                                        <span
                                            class="text-sm font-bold text-slate-700 dark:text-slate-200 group-hover:text-primary">{{ $chapter->title }}</span>
                                        <span class="text-[10px] text-slate-400">{{ $chapter->published_at->format('d/m/Y') }}</span>
                                    </div>
                                     @if($loop->first)
                                        <span class="text-[10px] px-1.5 py-0.5 rounded bg-red-500 text-white font-bold">Mới</span>
                                    @endif
                                </a>
                            @endforeach
                        </div>
                    </div>
                    @else
                    <div class="bg-white dark:bg-surface-dark rounded-xl border border-slate-200 dark:border-white/5 p-8 text-center">
                        <span class="material-symbols-outlined text-[48px] text-slate-300 dark:text-slate-600">menu_book</span>
                        <p class="text-slate-500 mt-2">Chưa có chương nào</p>
                    </div>
                    @endif
                </div>
                <div class="flex flex-col gap-6" id="comments">
                    <h3 class="text-xl font-bold text-slate-900 dark:text-white flex items-center gap-2">
                        <span class="w-1 h-6 bg-primary rounded-full"></span>
                        Bình luận
                    </h3>

                    <!-- Comment System Component -->
                    <div data-comment-system
                         data-comic-id="{{ $comic->id }}"
                         data-is-auth="{{ Auth::check() ? 'true' : 'false' }}">
                    </div>
                </div>
            </div>
            <div class="lg:col-span-4 flex flex-col gap-8">
                <div
                    class="bg-white dark:bg-surface-dark rounded-xl border border-slate-200 dark:border-white/5 overflow-hidden">
                    <div
                        class="p-4 border-b border-slate-200 dark:border-white/5 flex items-center justify-between">
                        <h3 class="text-lg font-bold text-slate-900 dark:text-white">Truyện cùng thể loại</h3>
                    </div>
                    <div class="flex flex-col p-2">
                        @php
                            $relatedComics = \App\Models\Comic::whereHas('categories', function($q) use ($comic) {
                                $q->whereIn('categories.id', $comic->categories->pluck('id'));
                            })
                            ->where('id', '!=', $comic->id)
                            ->limit(5)
                            ->get();
                        @endphp

                        @forelse($relatedComics as $related)
                        <a class="flex gap-3 p-3 hover:bg-slate-50 dark:hover:bg-white/5 rounded-lg transition-colors group"
                            href="{{ route('comics.detail', ['slug' => $related->slug]) }}">
                            <div
                                class="w-16 aspect-[2/3] rounded bg-slate-200 relative overflow-hidden flex-shrink-0">
                                <img class="w-full h-full object-cover" alt="{{ $related->title }}"
                                    src="https://img.otruyenapi.com/uploads/comics/{{ $related->thumb_url }}" />
                            </div>
                            <div class="flex flex-col justify-center flex-1 min-w-0">
                                <h4
                                    class="text-sm font-bold text-slate-900 dark:text-white group-hover:text-primary line-clamp-2">
                                    {{ $related->title }}</h4>
                                <p class="text-xs text-slate-500 mt-1">{{ $related->chapters->first()?->title ?? 'Chưa có chương' }}</p>
                                <div class="flex items-center gap-1 mt-1 text-slate-400">
                                    <span class="material-symbols-outlined text-[14px]">visibility</span>
                                    <span class="text-[10px]">{{ number_format($related->view_count) }}</span>
                                </div>
                            </div>
                        </a>
                        @empty
                        <div class="text-center py-8 text-slate-500">
                            <p class="text-sm">Không có truyện liên quan</p>
                        </div>
                        @endforelse
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-4">Thể loại phổ biến</h3>
                    <div class="flex flex-wrap gap-2">
                        @php
                            $popularCategories = \App\Models\Category::where('is_active', true)->limit(10)->get();
                        @endphp
                        @foreach($popularCategories as $category)
                        <a class="px-3 py-1.5 rounded-lg bg-slate-200 dark:bg-surface-dark text-slate-700 dark:text-slate-300 text-xs font-bold hover:bg-primary hover:text-white transition-colors"
                            href="{{ route('comics.list.category', ['categorySlug' => $category->slug ]) }}">{{ $category->name }}</a>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    .rating-star-filled {
    font-variation-settings: 'FILL' 1;
    }

    .rating-star-outline {
    font-variation-settings: 'FILL' 0;
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Tab navigation
        const tabLinks = document.querySelectorAll('.tab-link');
        tabLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();

                // Remove active class from all tabs
                tabLinks.forEach(tab => {
                    tab.classList.remove('border-primary', 'text-primary');
                    tab.classList.add('border-transparent', 'text-slate-500', 'dark:text-[#a69db9]');
                });

                // Add active class to clicked tab
                this.classList.remove('border-transparent', 'text-slate-500', 'dark:text-[#a69db9]');
                this.classList.add('border-primary', 'text-primary');

                // Smooth scroll to section
                const targetId = this.getAttribute('href');
                const targetSection = document.querySelector(targetId);
                if (targetSection) {
                    const offset = 100;
                    const targetPosition = targetSection.offsetTop - offset;
                    window.scrollTo({
                        top: targetPosition,
                        behavior: 'smooth'
                    });
                }
            });
        });

        // Sort chapters
        const sortButton = document.getElementById('sort-chapters');
        const chaptersList = document.getElementById('chapters-list');
        let isAscending = true;

        if (sortButton && chaptersList) {
            sortButton.addEventListener('click', function() {
                const chapters = Array.from(chaptersList.children);
                chapters.reverse();
                chaptersList.innerHTML = '';
                chapters.forEach(chapter => chaptersList.appendChild(chapter));
                isAscending = !isAscending;
            });
        }

        // Smooth scroll on page load if hash exists
        if (window.location.hash) {
            setTimeout(() => {
                const targetSection = document.querySelector(window.location.hash);
                if (targetSection) {
                    const offset = 100;
                    const targetPosition = targetSection.offsetTop - offset;
                    window.scrollTo({
                        top: targetPosition,
                        behavior: 'smooth'
                    });
                }
            }, 100);
        }
    });
</script>
@endpush