@extends('layouts.app')

@section('title', $query ? "Tìm kiếm: {$query} - Truyện Hay" : 'Tìm kiếm - Truyện Hay')
@section('description', $query ? "Kết quả tìm kiếm cho '{$query}' trên Truyện Hay" : 'Tìm kiếm truyện, tác giả, thể loại trên Truyện Hay')

@section('content')
{{-- Hero Search Section --}}
<div class="bg-gradient-to-br from-purple-500/10 via-primary/5 to-background-dark border-b border-gray-800">
    <div class="container mx-auto px-4 lg:px-8 max-w-7xl py-12">
        <div class="max-w-3xl mx-auto">
            <h1 class="text-3xl md:text-4xl font-extrabold text-white mb-6 text-center flex items-center justify-center gap-3">
                <span class="material-symbols-outlined text-4xl text-primary">search</span>
                Tìm Kiếm
            </h1>

            {{-- Search Form --}}
            <form action="{{ route('search') }}" method="GET" class="relative">
                <div class="relative">
                    <input type="text"
                           name="q"
                           value="{{ $query ?? '' }}"
                           placeholder="Tìm truyện, tác giả, thể loại..."
                           autocomplete="off"
                           class="w-full bg-surface-dark text-white border-2 border-gray-700 focus:border-primary rounded-2xl px-6 py-4 pr-14 text-lg focus:outline-none transition-all shadow-xl"
                           id="search-input">
                    <button type="submit"
                            class="absolute right-2 top-1/2 -translate-y-1/2 bg-primary hover:bg-primary-hover text-white rounded-xl px-6 py-2 font-bold transition-all">
                        Tìm
                    </button>
                </div>
                {{-- Autocomplete Results --}}
                <div id="autocomplete-results" class="hidden absolute top-full left-0 right-0 mt-2 bg-surface-dark rounded-2xl border border-gray-800 shadow-2xl max-h-96 overflow-y-auto z-50"></div>
            </form>
        </div>
    </div>
</div>

<div class="container mx-auto px-4 lg:px-8 max-w-7xl py-8">
    @if($query && mb_strlen($query) >= 2)
        {{-- Filter Tabs --}}
        <div class="flex flex-wrap gap-3 mb-8">
            <a href="{{ route('search', ['q' => $query, 'type' => 'all']) }}"
               class="px-6 py-3 rounded-xl font-bold transition-all {{ $type === 'all' ? 'bg-primary text-white shadow-lg shadow-primary/30' : 'bg-gray-800 text-gray-300 hover:bg-gray-700' }}">
                Tất cả ({{ $total }})
            </a>
            <a href="{{ route('search', ['q' => $query, 'type' => 'comics']) }}"
               class="px-6 py-3 rounded-xl font-bold transition-all {{ $type === 'comics' ? 'bg-primary text-white shadow-lg shadow-primary/30' : 'bg-gray-800 text-gray-300 hover:bg-gray-700' }}">
                Truyện ({{ $comics->total() ?? 0 }})
            </a>
            <a href="{{ route('search', ['q' => $query, 'type' => 'authors']) }}"
               class="px-6 py-3 rounded-xl font-bold transition-all {{ $type === 'authors' ? 'bg-primary text-white shadow-lg shadow-primary/30' : 'bg-gray-800 text-gray-300 hover:bg-gray-700' }}">
                Tác giả ({{ $authors->count() }})
            </a>
            <a href="{{ route('search', ['q' => $query, 'type' => 'categories']) }}"
               class="px-6 py-3 rounded-xl font-bold transition-all {{ $type === 'categories' ? 'bg-primary text-white shadow-lg shadow-primary/30' : 'bg-gray-800 text-gray-300 hover:bg-gray-700' }}">
                Thể loại ({{ $categories->count() }})
            </a>

            @if($type === 'comics')
            {{-- Sort Options --}}
            <div class="ml-auto">
                <select name="sort" onchange="window.location.href='{{ route('search', ['q' => $query, 'type' => 'comics']) }}&sort='+this.value"
                        class="bg-gray-800 text-white border border-gray-700 rounded-xl px-4 py-3 font-semibold focus:outline-none focus:border-primary transition-all">
                    <option value="relevance" {{ $sort === 'relevance' ? 'selected' : '' }}>Liên quan nhất</option>
                    <option value="popular" {{ $sort === 'popular' ? 'selected' : '' }}>Phổ biến</option>
                    <option value="latest" {{ $sort === 'latest' ? 'selected' : '' }}>Mới nhất</option>
                </select>
            </div>
            @endif
        </div>

        {{-- Comics Results --}}
        @if(($type === 'all' || $type === 'comics') && $comics->count() > 0)
            <section class="mb-12">
                @if($type === 'all')
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-2xl font-bold text-white flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary">book</span>
                        Truyện
                    </h2>
                    <a href="{{ route('search', ['q' => $query, 'type' => 'comics']) }}" class="text-primary hover:text-primary-hover font-semibold">
                        Xem tất cả →
                    </a>
                </div>
                @endif

                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                    @foreach($comics as $comic)
                        <x-comic-card-grid :comic="$comic" />
                    @endforeach
                </div>

                @if($type === 'comics' && $comics->hasPages())
                <div class="mt-8">
                    {{ $comics->links('pagination::tailwind') }}
                </div>
                @endif
            </section>
        @endif

        {{-- Authors Results --}}
        @if(($type === 'all' || $type === 'authors') && $authors->count() > 0)
            <section class="mb-12">
                @if($type === 'all')
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-2xl font-bold text-white flex items-center gap-2">
                        <span class="material-symbols-outlined text-orange-500">person</span>
                        Tác Giả
                    </h2>
                    <a href="{{ route('search', ['q' => $query, 'type' => 'authors']) }}" class="text-primary hover:text-primary-hover font-semibold">
                        Xem tất cả →
                    </a>
                </div>
                @endif

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    @foreach($authors 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">
                        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-orange-500 to-amber-600 flex items-center justify-center text-white text-2xl font-bold flex-shrink-0 group-hover:scale-110 transition-transform">
                            {{ mb_substr($author->bio ?? $author->name, 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">
                                {{ $author->bio ?? $author->name }}
                            </h4>
                            <div class="text-sm text-gray-400">
                                {{ number_format($author->comics_count) }} truyện
                            </div>
                        </div>
                        <span class="material-symbols-outlined text-gray-600 group-hover:text-primary transition-colors">
                            arrow_forward
                        </span>
                    </a>
                    @endforeach
                </div>

                @if($type === 'authors' && method_exists($authors, 'hasPages') && $authors->hasPages())
                <div class="mt-8">
                    {{ $authors->links('pagination::tailwind') }}
                </div>
                @endif
            </section>
        @endif

        {{-- Categories Results --}}
        @if(($type === 'all' || $type === 'categories') && $categories->count() > 0)
            <section class="mb-12">
                @if($type === 'all')
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-2xl font-bold text-white flex items-center gap-2">
                        <span class="material-symbols-outlined text-yellow-500">category</span>
                        Thể Loại
                    </h2>
                    <a href="{{ route('search', ['q' => $query, 'type' => 'categories']) }}" class="text-primary hover:text-primary-hover font-semibold">
                        Xem tất cả →
                    </a>
                </div>
                @endif

                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                    @foreach($categories as $category)
                    <a href="{{ route('comics.list.category', ['categorySlug' => $category->slug]) }}"
                       class="group flex items-center gap-3 p-4 bg-surface-dark rounded-xl border border-gray-800 hover:border-yellow-500/50 transition-all">
                        <span class="material-symbols-outlined text-yellow-500 text-3xl group-hover:scale-110 transition-transform">
                            {{ $category->icon ?? 'label' }}
                        </span>
                        <span class="text-white font-bold group-hover:text-yellow-500 transition-colors">
                            {{ $category->name }}
                        </span>
                    </a>
                    @endforeach
                </div>

                @if($type === 'categories' && method_exists($categories, 'hasPages') && $categories->hasPages())
                <div class="mt-8">
                    {{ $categories->links('pagination::tailwind') }}
                </div>
                @endif
            </section>
        @endif

        {{-- No Results --}}
        @if($total == 0)
        <div class="text-center py-20">
            <div class="inline-flex items-center justify-center w-24 h-24 rounded-full bg-gray-800 mb-6">
                <span class="material-symbols-outlined text-6xl text-gray-600">search_off</span>
            </div>
            <h3 class="text-2xl font-bold text-white mb-2">Không tìm thấy kết quả</h3>
            <p class="text-gray-400 mb-6">Không có kết quả nào cho "{{ $query }}"</p>
            <p class="text-gray-500 text-sm">Gợi ý: Kiểm tra lại chính tả hoặc thử từ khóa khác</p>
        </div>
        @endif

    @elseif($query && mb_strlen($query) < 2)
        <div class="text-center py-20">
            <span class="material-symbols-outlined text-6xl text-gray-600 mb-4">keyboard</span>
            <p class="text-gray-400">Vui lòng nhập ít nhất 2 ký tự để tìm kiếm</p>
        </div>
    @else
        {{-- Search Suggestions when no query --}}
        <div class="text-center py-12">
            <h2 class="text-2xl font-bold text-white mb-8">Tìm kiếm phổ biến</h2>
            <div class="flex flex-wrap gap-3 justify-center max-w-4xl mx-auto">
                <a href="{{ route('search', ['q' => 'Tiên Hiệp']) }}" class="px-4 py-2 bg-gray-800 hover:bg-primary text-gray-300 hover:text-white rounded-lg transition-all">Tiên Hiệp</a>
                <a href="{{ route('search', ['q' => 'Ngôn Tình']) }}" class="px-4 py-2 bg-gray-800 hover:bg-primary text-gray-300 hover:text-white rounded-lg transition-all">Ngôn Tình</a>
                <a href="{{ route('search', ['q' => 'Đam Mỹ']) }}" class="px-4 py-2 bg-gray-800 hover:bg-primary text-gray-300 hover:text-white rounded-lg transition-all">Đam Mỹ</a>
                <a href="{{ route('search', ['q' => 'Hệ Thống']) }}" class="px-4 py-2 bg-gray-800 hover:bg-primary text-gray-300 hover:text-white rounded-lg transition-all">Hệ Thống</a>
                <a href="{{ route('search', ['q' => 'Xuyên Không']) }}" class="px-4 py-2 bg-gray-800 hover:bg-primary text-gray-300 hover:text-white rounded-lg transition-all">Xuyên Không</a>
            </div>
        </div>
    @endif
</div>

@push('scripts')
<script>
// Autocomplete functionality
const searchInput = document.getElementById('search-input');
const autocompleteResults = document.getElementById('autocomplete-results');
let timeout = null;

searchInput.addEventListener('input', function() {
    clearTimeout(timeout);
    const query = this.value.trim();

    if (query.length < 2) {
        autocompleteResults.classList.add('hidden');
        return;
    }

    timeout = setTimeout(() => {
        fetch(`{{ route('search.autocomplete') }}?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(data => {
                displayAutocomplete(data);
            });
    }, 300); // Debounce 300ms
});

function displayAutocomplete(data) {
    if (!data.comics.length && !data.authors.length && !data.categories.length) {
        autocompleteResults.classList.add('hidden');
        return;
    }

    let html = '<div class="p-4">';

    // Comics
    if (data.comics.length) {
        html += '<div class="mb-4"><h3 class="text-sm font-bold text-gray-400 uppercase mb-2">Truyện</h3>';
        data.comics.forEach(comic => {
            html += `
                <a href="${comic.url}" class="flex items-center gap-3 p-2 hover:bg-gray-800 rounded-lg transition-all group">
                    <img src="https://img.otruyenapi.com/uploads/comics/${comic.thumb}" alt="${comic.title}" class="w-12 h-16 object-cover rounded">
                    <span class="text-white group-hover:text-primary transition-colors">${comic.title}</span>
                </a>
            `;
        });
        html += '</div>';
    }

    // Authors
    if (data.authors.length) {
        html += '<div class="mb-4"><h3 class="text-sm font-bold text-gray-400 uppercase mb-2">Tác Giả</h3>';
        data.authors.forEach(author => {
            html += `
                <a href="${author.url}" class="flex items-center gap-3 p-2 hover:bg-gray-800 rounded-lg transition-all group">
                    <span class="material-symbols-outlined text-orange-500">person</span>
                    <div>
                        <div class="text-white group-hover:text-primary transition-colors">${author.name}</div>
                        <div class="text-xs text-gray-400">${author.comics_count} truyện</div>
                    </div>
                </a>
            `;
        });
        html += '</div>';
    }

    // Categories
    if (data.categories.length) {
        html += '<div><h3 class="text-sm font-bold text-gray-400 uppercase mb-2">Thể Loại</h3>';
        data.categories.forEach(category => {
            html += `
                <a href="${category.url}" class="flex items-center gap-2 p-2 hover:bg-gray-800 rounded-lg transition-all group">
                    <span class="material-symbols-outlined text-yellow-500">category</span>
                    <span class="text-white group-hover:text-primary transition-colors">${category.name}</span>
                </a>
            `;
        });
        html += '</div>';
    }

    html += '</div>';

    autocompleteResults.innerHTML = html;
    autocompleteResults.classList.remove('hidden');
}

// Close autocomplete when clicking outside
document.addEventListener('click', function(e) {
    if (!searchInput.contains(e.target) && !autocompleteResults.contains(e.target)) {
        autocompleteResults.classList.add('hidden');
    }
});

// Focus autocomplete on input focus if has content
searchInput.addEventListener('focus', function() {
    if (this.value.length >= 2 && autocompleteResults.innerHTML) {
        autocompleteResults.classList.remove('hidden');
    }
});
</script>
@endpush
@endsection