@extends('layouts.app')

@section('title', 'Truyện Hay - Trang chủ Website đọc truyện')
@section('description', 'Nền tảng đọc truyện online miễn phí hàng đầu với kho tàng truyện phong phú, đa dạng thể loại, cập nhật chương mới liên tục hàng ngày.')

@section('content')
    {{-- Hero Section - Featured Comic --}}
    @if($featuredComic)
        <section class="relative w-full h-100 md:h-125 overflow-hidden group">
            <div class="absolute inset-0 bg-cover bg-position-[center_20%] transition-transform duration-700 group-hover:scale-105"
                style="background-image: url('https://img.otruyenapi.com/uploads/comics/{{ $featuredComic->thumb_url }}');"></div>
            <div class="absolute inset-0 bg-linear-to-t from-background-dark via-background-dark/60 to-transparent"></div>
            <div class="absolute inset-0 bg-linear-to-r from-background-dark via-background-dark/80 to-transparent"></div>

            <div class="container mx-auto px-4 lg:px-8 h-full relative z-10 flex flex-col justify-center max-w-7xl">
                <div class="max-w-2xl animate-fade-in-up mb-12">
                    <span class="inline-block py-1 px-3 rounded-full bg-primary/20 text-primary border border-primary/30 text-xs font-bold mb-4 backdrop-blur-sm">
                        SPOTLIGHT HÔM NAY
                    </span>
                    <h2 class="text-4xl md:text-6xl font-extrabold text-white mb-4 leading-tight">
                        {{ $featuredComic->title }}
                    </h2>
                    <div class="flex items-center gap-4 text-gray-300 text-sm mb-6">
                        <span class="flex items-center gap-1">
                            <span class="material-symbols-outlined text-yellow-500 text-lg">star</span>
                            {{ number_format($featuredComic->rating, 1) }}
                        </span>
                        <span>•</span>
                        <span>{{ $featuredComic->author?->name }}</span>
                        <span>•</span>
                        <span>{{ $featuredComic->categories->first()?->name ?? '' }}</span>
                    </div>
                    <p class="text-gray-300 text-base md:text-lg line-clamp-3 mb-8 max-w-xl">
                        {{ $featuredComic->description }}
                    </p>
                    <div class="flex gap-4">
                        <a href="{{ route('comics.detail', ['slug' => $featuredComic->slug]) }}" class="flex items-center justify-center h-12 px-8 rounded-lg bg-primary hover:bg-primary-hover text-white font-bold text-base shadow-lg shadow-primary/40 transition-all transform hover:-translate-y-0.5">
                            <span class="mr-2 material-symbols-outlined text-[20px]">menu_book</span> Đọc Ngay
                        </a>
                        <button class="flex items-center justify-center h-12 px-6 rounded-lg bg-white/10 hover:bg-white/20 text-white font-bold text-base backdrop-blur-md border border-white/10 transition-colors">
                            <span class="material-symbols-outlined text-[20px]">bookmark_add</span>
                        </button>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <div class="container mx-auto px-4 lg:px-8 max-w-7xl -mt-20 relative z-20 pb-12">
        {{-- Recommended Comics Section --}}
        <section class="mb-12 mt-12.5">
            <div class="flex items-center justify-between mb-4 px-2">
                <h3 class="text-white text-2xl font-bold flex items-center gap-2">
                    <span class="material-symbols-outlined text-primary">recommend</span> Truyện Đề Cử
                </h3>
                <a class="text-sm text-gray-400 hover:text-white flex items-center gap-1 transition-colors" href="{{ route('comics.list') }}">
                    Xem tất cả <span class="material-symbols-outlined text-base">arrow_forward</span>
                </a>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($recommendedComics as $comic)
                    <x-comic-card-horizontal :comic="$comic" />
                @endforeach
            </div>
        </section>

        {{-- Hot Comics Section --}}
        @if(isset($hotComics) && count($hotComics) > 0)
        <section class="mb-12">
            <div class="flex items-center justify-between mb-6 px-2">
                <h3 class="text-white text-2xl font-bold flex items-center gap-2">
                    <span class="material-symbols-outlined text-red-500">local_fire_department</span> Truyện Hot
                </h3>
                <a class="text-sm text-gray-400 hover:text-white flex items-center gap-1 transition-colors" href="{{ route('comics.list') }}">
                    Xem tất cả <span class="material-symbols-outlined text-base">arrow_forward</span>
                </a>
            </div>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                @foreach($hotComics as $comic)
                    <x-comic-card-grid :comic="$comic" />
                @endforeach
            </div>
        </section>
        @endif

        {{-- New Comics Section --}}
        @if(isset($newComics) && count($newComics) > 0)
        <section class="mb-12">
            <div class="flex items-center justify-between mb-6 px-2">
                <h3 class="text-white text-2xl font-bold flex items-center gap-2">
                    <span class="material-symbols-outlined text-green-500">new_releases</span> Truyện Mới
                </h3>
                <a class="text-sm text-gray-400 hover:text-white flex items-center gap-1 transition-colors" href="{{ route('comics.list') }}">
                    Xem tất cả <span class="material-symbols-outlined text-base">arrow_forward</span>
                </a>
            </div>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                @foreach($newComics as $comic)
                    <x-comic-card-grid :comic="$comic" />
                @endforeach
            </div>
        </section>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            {{-- Recently Updated Comics --}}
            <div class="lg:col-span-8">
                <div class="flex items-center justify-between mb-6 px-2 border-b border-gray-800 pb-2">
                    <h3 class="text-white text-xl font-bold flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary">update</span> Mới Cập Nhật
                    </h3>
                </div>
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
                    @foreach($recentlyUpdatedComics as $comic)
                        <x-comic-card-grid :comic="$comic" />
                    @endforeach
                </div>
                <div class="mt-8 flex justify-center">
                    <a class="px-5 py-2 rounded-full border border-gray-700 text-gray-300 hover:text-white hover:border-primary hover:bg-primary/10 transition-all text-sm font-semibold flex items-center" href="{{ route('comics.list') }}">
                        Xem Thêm
                    </a>
                </div>
            </div>

            {{-- Sidebar --}}
            <aside class="lg:col-span-4 flex flex-col gap-8">
                {{-- Ranking Section --}}
                <div class="bg-surface-dark rounded-xl p-5 border border-gray-800">
                    <div class="flex items-center justify-between mb-4 pb-2 border-b border-gray-700/50">
                        <h3 class="text-white font-bold text-lg flex items-center gap-2">
                            <span class="material-symbols-outlined text-yellow-500">trophy</span> Bảng Xếp Hạng
                        </h3>
                        {{-- <div class="flex gap-2">
                            <button class="text-[10px] font-bold text-primary bg-primary/10 px-2 py-1 rounded">Tuần</button>
                            <button class="text-[10px] font-bold text-gray-500 hover:text-gray-300 transition-colors px-2 py-1">Tháng</button>
                        </div> --}}
                    </div>
                    <div class="flex flex-col gap-4">
                        @foreach($topRankedComics as $index => $comic)
                            <x-ranking-item :comic="$comic" :index="$index" />
                        @endforeach
                    </div>
                </div>

                {{-- Categories Section --}}
                <div class="bg-surface-dark rounded-xl p-5 border border-gray-800">
                    <h3 class="text-white font-bold text-lg mb-4 flex items-center gap-2">
                        <span class="material-symbols-outlined text-pink-500">category</span> Thể Loại
                    </h3>
                    <div class="flex flex-wrap gap-2">
                        @foreach($categories as $category)
                        <a class="text-xs px-3 py-1.5 rounded-lg bg-gray-800 text-gray-300 hover:bg-primary hover:text-white transition-all"
                            href="{{ route('comics.list.category', ['categorySlug' => $category->slug]) }}">{{ $category->name }}</a>
                        @endforeach
                    </div>
                </div>

                {{-- Author Section --}}
                <div class="bg-surface-dark rounded-xl p-5 border border-gray-800">
                    <h3 class="text-white font-bold text-lg mb-4 flex items-center gap-2">
                        <span class="material-symbols-outlined text-blue-500">account_circle</span> Tác Giả
                    </h3>
                    <div class="flex flex-wrap gap-2">
                        @foreach($sidebarAuthors as $author)
                        <a class="text-xs px-3 py-1.5 rounded-lg bg-gray-800 text-gray-300 hover:bg-primary hover:text-white transition-all"
                            href="{{ route('authors.detail', ['slug' => $author->slug]) }}">{{ $author->bio ? $author->bio : $author->name }}</a>
                        @endforeach
                    </div>
                </div>
            </aside>
        </div>

        {{-- Comics by Popular Genres --}}
        @if(isset($comicsByGenre) && count($comicsByGenre) > 0)
        <section class="mt-12">
            <div class="flex items-center justify-between mb-6 px-2">
                <h3 class="text-white text-2xl font-bold flex items-center gap-2">
                    <span class="material-symbols-outlined text-purple-500">explore</span> Khám Phá Theo Thể Loại
                </h3>
            </div>
            @foreach($comicsByGenre as $index => $genreData)
            <div class="mb-10 relative">
                {{-- Category Header with Slider Controls --}}
                <div class="flex items-center justify-between mb-4 px-2">
                    <h4 class="text-white text-xl font-bold flex items-center gap-2">
                        <span class="w-1 h-6 bg-gradient-to-b from-primary to-purple-500 rounded-full"></span>
                        {{ $genreData['category']->name }}
                    </h4>

                    {{-- Slider Navigation --}}
                    <div class="flex items-center gap-3">
                        <div class="flex items-center gap-2">
                            <button
                                class="genre-slider-prev-{{ $index }} w-10 h-10 rounded-full bg-gray-800 hover:bg-primary border border-gray-700 hover:border-primary text-gray-400 hover:text-white transition-all flex items-center justify-center group cursor-pointer"
                                aria-label="Previous">
                                <span class="material-symbols-outlined text-[20px]">chevron_left</span>
                            </button>
                            <button
                                class="genre-slider-next-{{ $index }} w-10 h-10 rounded-full bg-gray-800 hover:bg-primary border border-gray-700 hover:border-primary text-gray-400 hover:text-white transition-all flex items-center justify-center group cursor-pointer"
                                aria-label="Next">
                                <span class="material-symbols-outlined text-[20px]">chevron_right</span>
                            </button>
                        </div>
                    </div>
                </div>

                {{-- Slider Container --}}
                <div class="relative overflow-hidden">
                    <div class="genre-slider-{{ $index }} flex transition-transform duration-500 ease-out gap-4">
                        @foreach($genreData['comics'] as $comic)
                            <div class="flex-shrink-0" style="width: calc(16.666% - 14px);">
                                <x-comic-card-grid :comic="$comic" />
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- View All Link (Bottom) --}}
                <div class="mt-6 text-center">
                    <a class="inline-flex items-center gap-2 px-6 py-2.5 rounded-full bg-gradient-to-r from-primary/10 to-purple-500/10 border border-primary/30 text-primary hover:bg-primary hover:text-white font-semibold text-sm transition-all hover:scale-105 hover:shadow-lg hover:shadow-primary/30 group"
                       href="{{ route('comics.list.category', ['categorySlug' => $genreData['category']->slug]) }}">
                        <span>Xem tất cả truyện {{ $genreData['category']->name }}</span>
                        <span class="material-symbols-outlined text-base group-hover:translate-x-1 transition-transform">arrow_forward</span>
                    </a>
                </div>
            </div>
            @endforeach
        </section>
        @endif

        {{-- Statistics Section --}}
        @if(isset($stats))
        <section class="mt-16 mb-12">
            <div class="bg-gradient-to-br from-primary/20 via-purple-500/10 to-background-dark rounded-2xl p-8 border border-gray-800">
                <div class="text-center mb-8">
                    <h3 class="text-white text-2xl md:text-3xl font-bold mb-2">Con Số Ấn Tượng</h3>
                    <p class="text-gray-400">Cộng đồng yêu truyện tranh đang phát triển mạnh mẽ</p>
                </div>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                    <div class="text-center p-6 bg-surface-dark/50 rounded-xl border border-gray-800/50 hover:border-primary/50 transition-all group">
                        <div class="text-4xl md:text-5xl font-extrabold text-primary mb-2 group-hover:scale-110 transition-transform">
                            {{ number_format($stats['total_comics']) }}
                        </div>
                        <div class="text-sm text-gray-400 flex items-center justify-center gap-1">
                            <span class="material-symbols-outlined text-primary text-base">book</span>
                            Tác Phẩm
                        </div>
                    </div>
                    <div class="text-center p-6 bg-surface-dark/50 rounded-xl border border-gray-800/50 hover:border-green-500/50 transition-all group">
                        <div class="text-4xl md:text-5xl font-extrabold text-green-500 mb-2 group-hover:scale-110 transition-transform">
                            {{ number_format($stats['total_authors']) }}
                        </div>
                        <div class="text-sm text-gray-400 flex items-center justify-center gap-1">
                            <span class="material-symbols-outlined text-green-500 text-base">person</span>
                            Tác Giả
                        </div>
                    </div>
                    <div class="text-center p-6 bg-surface-dark/50 rounded-xl border border-gray-800/50 hover:border-yellow-500/50 transition-all group">
                        <div class="text-4xl md:text-5xl font-extrabold text-yellow-500 mb-2 group-hover:scale-110 transition-transform">
                            {{ number_format($stats['total_categories']) }}
                        </div>
                        <div class="text-sm text-gray-400 flex items-center justify-center gap-1">
                            <span class="material-symbols-outlined text-yellow-500 text-base">category</span>
                            Thể Loại
                        </div>
                    </div>
                    <div class="text-center p-6 bg-surface-dark/50 rounded-xl border border-gray-800/50 hover:border-blue-500/50 transition-all group">
                        <div class="text-4xl md:text-5xl font-extrabold text-blue-500 mb-2 group-hover:scale-110 transition-transform">
                            {{ number_format(round($stats['total_views'] / 1000000, 1)) }}M
                            {{-- 10.4M --}}
                        </div>
                        <div class="text-sm text-gray-400 flex items-center justify-center gap-1">
                            <span class="material-symbols-outlined text-blue-500 text-base">visibility</span>
                            Lượt Xem
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @endif

        {{-- Top Authors Section --}}
        @if(isset($topAuthors) && count($topAuthors) > 0)
        <section class="mt-12">
            <div class="flex items-center justify-between mb-6 px-2">
                <h3 class="text-white text-2xl font-bold flex items-center gap-2">
                    <span class="material-symbols-outlined text-orange-500">emoji_events</span> Top Tác Giả
                </h3>
                <a class="text-sm text-gray-400 hover:text-white flex items-center gap-1 transition-colors" href="{{ route('authors.list') }}">
                    Xem tất cả <span class="material-symbols-outlined text-base">arrow_forward</span>
                </a>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach($topAuthors as $author)
                <a href="{{ route('authors.detail', ['slug' => $author->slug]) }}"
                   class="flex items-center gap-4 p-4 bg-surface-dark rounded-xl border border-gray-800 hover:border-primary/50 transition-all group">
                   @php
                        $authorName = $author->bio ? $author->bio : $author->name;
                   @endphp

                    <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary to-purple-600 flex items-center justify-center text-white text-2xl font-bold flex-shrink-0 group-hover:scale-110 transition-transform">
                        {{ mb_substr($authorName, 0, 1) }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <h4 class="text-white font-bold text-lg truncate group-hover:text-primary transition-colors">
                            {{ $authorName }}
                        </h4>
                        <div class="flex items-center gap-3 text-sm text-gray-400 mt-1">
                            <span class="flex items-center gap-1">
                                <span class="material-symbols-outlined text-xs">book</span>
                                {{ number_format($author->comics_count) }} truyện
                            </span>
                            @if($author->comics_avg_rating)
                                <span class="flex items-center gap-1">
                                    <span class="material-symbols-outlined text-xs text-yellow-500">star</span>
                                    {{ number_format($author->comics_avg_rating, 1) }}
                                </span>
                            @endif
                        </div>
                    </div>
                    <span class="material-symbols-outlined text-gray-600 group-hover:text-primary transition-colors">
                        arrow_forward
                    </span>
                </a>
                @endforeach
            </div>
        </section>
        @endif

        {{-- Completed Comics Section --}}
        @if(isset($completedComics) && count($completedComics) > 0)
        <section class="mt-12 mb-12">
            <div class="flex items-center justify-between mb-6 px-2">
                <h3 class="text-white text-2xl font-bold flex items-center gap-2">
                    <span class="material-symbols-outlined text-cyan-500">check_circle</span> Truyện Đã Hoàn Thành
                </h3>
                <a class="text-sm text-gray-400 hover:text-white flex items-center gap-1 transition-colors" href="{{ route('comics.list', ['status' => 'completed']) }}">
                    Xem tất cả <span class="material-symbols-outlined text-base">arrow_forward</span>
                </a>
            </div>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                @foreach($completedComics as $comic)
                    <x-comic-card-grid :comic="$comic" />
                @endforeach
            </div>
        </section>
        @endif
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize sliders for each genre
    const genreSliders = @json(array_keys($comicsByGenre ?? []));

    genreSliders.forEach(index => {
        const slider = document.querySelector(`.genre-slider-${index}`);
        const prevBtn = document.querySelector(`.genre-slider-prev-${index}`);
        const nextBtn = document.querySelector(`.genre-slider-next-${index}`);

        if (!slider || !prevBtn || !nextBtn) return;

        let currentPosition = 0;
        const itemWidth = slider.querySelector('div')?.offsetWidth || 0;
        const gap = 16; // 4 in Tailwind = 16px
        const slideWidth = itemWidth + gap;
        const itemsPerSlide = 6;
        const totalItems = slider.children.length;
        const maxSlides = Math.ceil(totalItems / itemsPerSlide) - 1;

        function updateSlider() {
            slider.style.transform = `translateX(-${currentPosition * slideWidth * itemsPerSlide}px)`;

            // Update button states
            prevBtn.disabled = currentPosition === 0;
            nextBtn.disabled = currentPosition >= maxSlides;

            // Visual feedback for disabled buttons
            if (currentPosition === 0) {
                prevBtn.classList.add('opacity-50', 'cursor-not-allowed');
                prevBtn.classList.remove('hover:bg-primary', 'hover:border-primary');
            } else {
                prevBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                prevBtn.classList.add('hover:bg-primary', 'hover:border-primary');
            }

            if (currentPosition >= maxSlides) {
                nextBtn.classList.add('opacity-50', 'cursor-not-allowed');
                nextBtn.classList.remove('hover:bg-primary', 'hover:border-primary');
            } else {
                nextBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                nextBtn.classList.add('hover:bg-primary', 'hover:border-primary');
            }
        }

        prevBtn.addEventListener('click', () => {
            if (currentPosition > 0) {
                currentPosition--;
                updateSlider();
            }
        });

        nextBtn.addEventListener('click', () => {
            if (currentPosition < maxSlides) {
                currentPosition++;
                updateSlider();
            }
        });

        // Touch/Swipe support for mobile
        let touchStartX = 0;
        let touchEndX = 0;

        slider.addEventListener('touchstart', (e) => {
            touchStartX = e.changedTouches[0].screenX;
        }, { passive: true });

        slider.addEventListener('touchend', (e) => {
            touchEndX = e.changedTouches[0].screenX;
            handleSwipe();
        }, { passive: true });

        function handleSwipe() {
            const swipeThreshold = 50;
            const diff = touchStartX - touchEndX;

            if (Math.abs(diff) > swipeThreshold) {
                if (diff > 0 && currentPosition < maxSlides) {
                    // Swipe left - next
                    currentPosition++;
                    updateSlider();
                } else if (diff < 0 && currentPosition > 0) {
                    // Swipe right - previous
                    currentPosition--;
                    updateSlider();
                }
            }
        }

        // Initialize button states
        updateSlider();

        // Responsive recalculation on window resize
        let resizeTimeout;
        window.addEventListener('resize', () => {
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(() => {
                currentPosition = 0;
                updateSlider();
            }, 250);
        });
    });
});
</script>

<style>
/* Responsive slider widths */
@media (max-width: 640px) {
    .genre-slider-0 > div,
    .genre-slider-1 > div,
    .genre-slider-2 > div,
    .genre-slider-3 > div,
    .genre-slider-4 > div {
        width: calc(50% - 8px) !important; /* 2 items on mobile */
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .genre-slider-0 > div,
    .genre-slider-1 > div,
    .genre-slider-2 > div,
    .genre-slider-3 > div,
    .genre-slider-4 > div {
        width: calc(33.333% - 11px) !important; /* 3 items on tablet */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .genre-slider-0 > div,
    .genre-slider-1 > div,
    .genre-slider-2 > div,
    .genre-slider-3 > div,
    .genre-slider-4 > div {
        width: calc(25% - 12px) !important; /* 4 items on small desktop */
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .genre-slider-0 > div,
    .genre-slider-1 > div,
    .genre-slider-2 > div,
    .genre-slider-3 > div,
    .genre-slider-4 > div {
        width: calc(20% - 13px) !important; /* 5 items on medium desktop */
    }
}

/* Smooth transitions */
.genre-slider-0,
.genre-slider-1,
.genre-slider-2,
.genre-slider-3,
.genre-slider-4 {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Prevent text selection during drag */
.genre-slider-0,
.genre-slider-1,
.genre-slider-2,
.genre-slider-3,
.genre-slider-4 {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}
</style>
@endpush