@extends('layouts.app')

@php
    $title = "$chapter->title - $comic->title - Truyện Hay";
    $description = "Đọc $chapter->title của $comic->title online miễn phí tại Truyện Hay.";
@endphp

@section('title', $title)
@section('description', $description)

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

@push('styles')
<style>
    body {
        font-family: "Plus Jakarta Sans", sans-serif;
    }
    ::-webkit-scrollbar {
        width: 8px;
    }
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    ::-webkit-scrollbar-thumb {
        background: #2e2839;
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #6c2bee;
    }
    .reading-content p {
        margin-bottom: 1.5em;
        text-align: justify;
    }

    /* Custom scrollbar for chapter list */
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(108, 43, 238, 0.3);
        border-radius: 3px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: rgba(108, 43, 238, 0.6);
    }

    /* Smooth transitions - Apply only to specific properties to avoid interfering with theme changes */
    body,
    main,
    section,
    article,
    div:not(.no-transition),
    p,
    span:not(.material-symbols-outlined) {
        transition-property: background-color, border-color, color;
        transition-duration: 150ms;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Prevent transition on script changes */
    button, a {
        transition: all 0.2s ease;
    }

    /* Floating toolbar buttons */
    #prev-chapter-btn,
    #next-chapter-btn {
        transition: transform 0.2s ease, background-color 0.2s ease !important;
    }
</style>
@endpush

@section('content')
    <!-- Reading Tracker Data Attributes -->
    <div data-reading-page
         data-comic-id="{{ $comic->id }}"
         data-chapter-id="{{ $chapter->id }}"
         class="w-full max-w-210 flex flex-col gap-6 mx-auto my-12">
        <!-- Breadcrumb -->
        <nav class="flex flex-wrap items-center gap-2 text-sm text-slate-500 dark:text-slate-400 font-medium">
            <a class="hover:text-primary transition-colors" href="{{ route('home') }}">Trang chủ</a>
            <span class="material-symbols-outlined text-[14px]">chevron_right</span>
            <a class="hover:text-primary transition-colors" href="{{ route('comics.list.category', ['categorySlug' => $comic->categories->first()?->slug]) }}">{{ $comic->categories->first()?->name ?? 'Truyện' }}</a>
            <span class="material-symbols-outlined text-[14px]">chevron_right</span>
            <a class="hover:text-primary transition-colors" href="{{ route('comics.detail', ['slug' => $comic->slug]) }}">{{ $comic->title }}</a>
            <span class="material-symbols-outlined text-[14px]">chevron_right</span>
            <span class="text-slate-900 dark:text-white">{{ $chapter->title }}</span>
        </nav>

        <!-- Chapter Header -->
        <header class="text-center space-y-4 py-6 border-b border-slate-200 dark:border-white/5 relative">
            <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-3/4 h-24 bg-primary/20 blur-[60px] rounded-full pointer-events-none"></div>
            <h1 class="relative text-3xl md:text-4xl font-extrabold text-slate-900 dark:text-white leading-tight">
                {{ $chapter->title }} - Chương {{ $chapter->chapter_number }} - {{ $comic->title }}
            </h1>
            <div class="relative flex flex-wrap justify-center items-center gap-4 md:gap-8 text-xs md:text-sm text-slate-500 dark:text-slate-400">
                @if($comic->author)
                <div class="flex items-center gap-1.5">
                    <span class="material-symbols-outlined text-[18px]">edit_note</span>
                    <span>Tác giả: <strong class="text-slate-700 dark:text-slate-200">{{ $comic->author->name }}</strong></span>
                </div>
                <div class="hidden md:block w-1 h-1 bg-slate-300 dark:bg-slate-600 rounded-full"></div>
                @endif
                <div class="flex items-center gap-1.5">
                    <span class="material-symbols-outlined text-[18px]">image</span>
                    <span>{{ max(0, count($imageUrls) - 2) }} trang</span>
                </div>
                {{-- <div class="hidden md:block w-1 h-1 bg-slate-300 dark:bg-slate-600 rounded-full"></div> --}}
                {{-- <div class="flex items-center gap-1.5">
                    <span class="material-symbols-outlined text-[18px]">visibility</span>
                    <span>{{ number_format($comic->view_count) }} lượt xem</span>
                </div> --}}
                <div class="hidden md:block w-1 h-1 bg-slate-300 dark:bg-slate-600 rounded-full"></div>
                <div class="flex items-center gap-1.5">
                    <span class="material-symbols-outlined text-[18px]">update</span>
                    <span>{{ $chapter->published_at ? $chapter->published_at->diffForHumans() : 'Mới cập nhật' }}</span>
                </div>
            </div>
        </header>

        <!-- Chapter Content (Images) -->
        <article id="chapter-content" class="reading-content space-y-0">
            @if(count($imageUrls) > 0)
                @foreach($imageUrls as $index => $image)
                    @php
                        // Skip first image (index 0) and last image
                        $isFirstImage = $index === 0;
                        $isLastImage = $index === count($imageUrls) - 1;
                        $shouldSkip = $isFirstImage || $isLastImage;
                    @endphp

                    @if(!$shouldSkip)
                    <div class="w-full flex justify-center bg-white">
                        <img
                            src="{{ $image['url'] }}"
                            alt="Page {{ $image['page'] + 1 }}"
                            class="w-full h-full max-w-full object-cover object-[center_-90px]"
                            loading="lazy"
                            decoding="async"
                            data-page="{{ $image['page'] }}"
                        >
                    </div>
                    @endif
                @endforeach
            @else
                <div class="text-center py-12 text-slate-500 dark:text-slate-400">
                    <span class="material-symbols-outlined text-[64px] text-slate-300 dark:text-slate-600">image_not_supported</span>
                    <p class="mt-4 text-lg">Nội dung chương đang được cập nhật...</p>
                    <p class="mt-2 text-sm">Vui lòng quay lại sau.</p>
                </div>
            @endif
        </article>

        <!-- Navigation Bottom -->
        <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-8 pt-8 border-t border-slate-200 dark:border-white/10">
            @if($previousChapter)
            <a href="{{ route('comics.reading', ['slug' => $previousChapter->slug]) }}"
                class="col-span-1 py-3 px-4 rounded-xl bg-slate-200 dark:bg-white/5 hover:bg-slate-300 dark:hover:bg-white/10 text-slate-700 dark:text-white font-bold transition-colors flex items-center justify-center gap-2">
                <span class="material-symbols-outlined">arrow_back</span>
                <span class="hidden sm:inline">Chương trước</span>
            </a>
            @else
            <button disabled
                class="col-span-1 py-3 px-4 rounded-xl bg-slate-100 dark:bg-white/5 text-slate-300 dark:text-slate-600 font-bold cursor-not-allowed flex items-center justify-center gap-2">
                <span class="material-symbols-outlined">arrow_back</span>
                <span class="hidden sm:inline">Chương trước</span>
            </button>
            @endif

            <a href="{{ route('comics.detail', ['slug' => $comic->slug]) }}"
                class="hidden md:flex col-span-1 py-3 px-4 rounded-xl bg-slate-100 dark:bg-white/5 hover:bg-slate-200 dark:hover:bg-white/10 text-slate-600 dark:text-slate-300 font-bold transition-colors items-center justify-center gap-2">
                <span class="material-symbols-outlined">menu_book</span>
                Danh sách
            </a>

            @if($nextChapter)
            <a href="{{ route('comics.reading', ['slug' => $nextChapter->slug]) }}"
                class="col-span-1 py-3 px-4 rounded-xl bg-primary hover:bg-primary/90 text-white font-bold transition-colors flex items-center justify-center gap-2 shadow-lg shadow-primary/25">
                <span class="hidden sm:inline">Chương sau</span>
                <span class="material-symbols-outlined">arrow_forward</span>
            </a>
            @else
            <button disabled
                class="col-span-1 py-3 px-4 rounded-xl bg-slate-100 dark:bg-white/5 text-slate-300 dark:text-slate-600 font-bold cursor-not-allowed flex items-center justify-center gap-2">
                <span class="hidden sm:inline">Chương sau</span>
                <span class="material-symbols-outlined">arrow_forward</span>
            </button>
            @endif
        </div>

        <!-- Comments Section -->
        <section class="mt-12 bg-white dark:bg-surface-dark rounded-2xl p-6 md:p-8 shadow-sm border border-slate-100 dark:border-white/5">
            <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
                <span class="material-symbols-outlined text-primary">forum</span>
                Bình luận
            </h3>

            <!-- Comment System Component -->
            <div data-comment-system
                 data-comic-id="{{ $comic->id }}"
                 data-chapter-id="{{ $chapter->id }}"
                 data-is-auth="{{ Auth::check() ? 'true' : 'false' }}">
            </div>
        </section>
    </div>
    <!-- Floating Toolbar -->
    <div class="fixed bottom-6 left-1/2 -translate-x-1/2 z-40 w-[90%] max-w-120">
        <div class="bg-white/95 dark:bg-[#1e1a29]/95 backdrop-blur-xl rounded-2xl shadow-2xl shadow-black/20 border border-slate-200 dark:border-white/10 p-2 flex items-center justify-between gap-2 transition-all duration-300">
            <!-- Previous Chapter Button -->
            @if($previousChapter)
            <a href="{{ route('comics.reading', ['slug' => $previousChapter->slug]) }}"
                id="prev-chapter-btn"
                class="p-3 rounded-xl bg-slate-100 dark:bg-white/10 hover:bg-slate-200 dark:hover:bg-white/15 text-slate-700 dark:text-white transition-all duration-200 hover:scale-110 group relative cursor-pointer">
                <span class="material-symbols-outlined text-[20px]">arrow_back</span>
                <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-3 py-1.5 text-xs font-bold text-white bg-slate-800 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg">Chương trước</span>
            </a>
            @else
            <button disabled
                class="p-3 rounded-xl bg-slate-100 dark:bg-white/5 text-slate-300 dark:text-slate-600 cursor-not-allowed opacity-50">
                <span class="material-symbols-outlined text-[20px]">arrow_back</span>
            </button>
            @endif

            <div class="w-px h-8 bg-slate-200 dark:bg-white/10"></div>

            <!-- Chapter List Button -->
            <button id="chapter-list-btn"
                class="flex-1 h-10 bg-primary/10 hover:bg-primary/20 dark:bg-primary/20 dark:hover:bg-primary/30 text-primary font-bold text-sm rounded-lg flex items-center justify-center gap-2 transition-all duration-200 hover:scale-105 cursor-pointer">
                <span class="material-symbols-outlined text-[20px]">list</span>
                <span class="truncate">DS Chương</span>
            </button>

            <div class="w-px h-8 bg-slate-200 dark:bg-white/10"></div>

            <!-- Next Chapter Button -->
            @if($nextChapter)
            <a href="{{ route('comics.reading', ['slug' => $nextChapter->slug]) }}"
                id="next-chapter-btn"
                class="p-3 rounded-xl bg-primary hover:bg-primary/90 text-white shadow-lg shadow-primary/30 transition-all duration-200 hover:scale-110 group relative cursor-pointer">
                <span class="material-symbols-outlined text-[20px]">arrow_forward</span>
                <span class="absolute bottom-full right-0 mb-3 px-3 py-1.5 text-xs font-bold text-white bg-slate-800 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg">Chương sau</span>
            </a>
            @else
            <button disabled
                class="p-3 rounded-xl bg-slate-100 dark:bg-white/5 text-slate-300 dark:text-slate-600 cursor-not-allowed opacity-50">
                <span class="material-symbols-outlined text-[20px]">arrow_forward</span>
            </button>
            @endif
        </div>
    </div>

    <!-- Chapter List Sidebar -->
    <div id="chapter-list-sidebar" class="fixed inset-y-0 right-0 w-full sm:w-96 bg-white dark:bg-surface-dark shadow-2xl z-50 transform translate-x-full transition-transform duration-300 ease-out">
        <div class="h-full flex flex-col">
            <!-- Header -->
            <div class="p-4 border-b border-slate-200 dark:border-white/10 flex items-center justify-between bg-gradient-to-r from-primary/5 to-purple-500/5">
                <h3 class="text-lg font-bold text-slate-800 dark:text-white flex items-center gap-2">
                    <span class="material-symbols-outlined text-primary">menu_book</span>
                    Danh sách chương
                </h3>
                <button id="close-chapter-list" class="p-2 hover:bg-slate-100 dark:hover:bg-white/10 rounded-lg transition-colors">
                    <span class="material-symbols-outlined text-slate-600 dark:text-slate-300">close</span>
                </button>
            </div>

            <!-- Chapter List -->
            <div class="flex-1 overflow-y-auto p-4 custom-scrollbar">
                <div class="space-y-2">
                    @foreach($comic->chapters->sortBy('chapter_number') as $chapterItem)
                    <a href="{{ route('comics.reading', ['slug' => $chapterItem->slug]) }}"
                        class="block p-3 rounded-lg transition-all duration-200 {{ $chapterItem->id === $chapter->id ? 'bg-primary text-white shadow-lg shadow-primary/30' : 'bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 text-slate-700 dark:text-slate-300' }}">
                        <div class="flex items-center justify-between">
                            <span class="font-medium truncate">{{ $chapterItem->title }}</span>
                            @if($chapterItem->id === $chapter->id)
                            <span class="material-symbols-outlined text-[18px] flex-shrink-0">play_arrow</span>
                            @endif
                        </div>
                        @if($chapterItem->chapter_images && count($chapterItem->chapter_images) > 0)
                        <div class="text-xs mt-1 {{ $chapterItem->id === $chapter->id ? 'text-white/70' : 'text-slate-500 dark:text-slate-400' }} flex items-center gap-1">
                            <span class="material-symbols-outlined text-[14px]">image</span>
                            <span>{{ count($chapterItem->chapter_images) }} trang</span>
                        </div>
                        @endif
                    </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- Overlay -->
    <div id="chapter-list-overlay" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-40 opacity-0 pointer-events-none transition-opacity duration-300"></div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // ===== THEME TOGGLE =====
        const themeToggle = document.getElementById('theme-toggle');
        const themeIcon = document.getElementById('theme-icon');
        const html = document.documentElement;

        if (themeToggle && themeIcon) {
            // Function to update icon based on current theme
            function updateThemeIcon() {
                const isDark = html.classList.contains('dark');
                themeIcon.textContent = isDark ? 'light_mode' : 'dark_mode';
            }

            // Set initial icon based on current theme
            updateThemeIcon();

            // Toggle theme on click
            themeToggle.addEventListener('click', function() {
                const isDark = html.classList.contains('dark');

                if (isDark) {
                    // Switch to light mode
                    html.classList.remove('dark');
                    localStorage.setItem('theme', 'light');
                } else {
                    // Switch to dark mode
                    html.classList.add('dark');
                    localStorage.setItem('theme', 'dark');
                }

                // Update icon
                updateThemeIcon();

                // Rotate animation
                themeIcon.style.transform = 'rotate(360deg)';
                themeIcon.style.transition = 'transform 0.5s ease';
                setTimeout(() => {
                    themeIcon.style.transform = 'rotate(0deg)';
                }, 500);
            });
        }

        // ===== CHAPTER LIST SIDEBAR =====
        const chapterListBtn = document.getElementById('chapter-list-btn');
        const chapterListSidebar = document.getElementById('chapter-list-sidebar');
        const closeChapterList = document.getElementById('close-chapter-list');
        const overlay = document.getElementById('chapter-list-overlay');

        function openChapterList() {
            chapterListSidebar.classList.remove('translate-x-full');
            chapterListSidebar.classList.add('translate-x-0');
            overlay.classList.remove('opacity-0', 'pointer-events-none');
            overlay.classList.add('opacity-100');
            document.body.style.overflow = 'hidden';
        }

        function closeChapterListFunc() {
            chapterListSidebar.classList.add('translate-x-full');
            chapterListSidebar.classList.remove('translate-x-0');
            overlay.classList.add('opacity-0', 'pointer-events-none');
            overlay.classList.remove('opacity-100');
            document.body.style.overflow = '';
        }

        if (chapterListBtn) {
            chapterListBtn.addEventListener('click', openChapterList);
        }

        if (closeChapterList) {
            closeChapterList.addEventListener('click', closeChapterListFunc);
        }

        if (overlay) {
            overlay.addEventListener('click', closeChapterListFunc);
        }

        // Close on Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && !chapterListSidebar.classList.contains('translate-x-full')) {
                closeChapterListFunc();
            }
        });

        // Keyboard navigation
        document.addEventListener('keydown', function(e) {
            // Left arrow or A key for previous chapter
            if ((e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') && !e.ctrlKey && !e.metaKey) {
                const prevBtn = document.querySelector('a[href*="comics.reading"]:has(.material-symbols-outlined:first-child)');
                if (prevBtn && !prevBtn.hasAttribute('disabled')) {
                    window.location.href = prevBtn.href;
                }
            }
            // Right arrow or D key for next chapter
            if ((e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') && !e.ctrlKey && !e.metaKey) {
                const nextBtns = document.querySelectorAll('a[href*="comics.reading"]');
                const nextBtn = Array.from(nextBtns).find(btn => 
                    btn.textContent.includes('Chương sau') && !btn.hasAttribute('disabled')
                );
                if (nextBtn) {
                    window.location.href = nextBtn.href;
                }
            }
        });
    });
</script>
@endpush