@extends('components.layout')

@section('title', 'Search Results | ' . ($settings['site_name'] ?? 'LOCAL PULSE'))

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-8">
            @if($searchQuery)
                Search results for "{{ $searchQuery }}"
            @else
                Search
            @endif
        </h1>

        <!-- Search Form -->
        <form action="{{ route('search') }}" method="GET" class="mb-4">
            <div class="flex gap-3">
                <input type="text" name="q" value="{{ $searchQuery }}" placeholder="Search articles, events, locations..." class="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-600 focus:border-transparent" required>
                <select name="type" class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-600">
                    <option value="article" {{ $typeFilter == 'article' ? 'selected' : '' }}>Articles</option>
                    <option value="event" {{ $typeFilter == 'event' ? 'selected' : '' }}>Events</option>
                    <option value="location" {{ $typeFilter == 'location' ? 'selected' : '' }}>Locations</option>
                    <option value="author" {{ $typeFilter == 'author' ? 'selected' : '' }}>Authors</option>
                </select>
                <button type="submit" class="bg-gray-900 text-white px-6 py-2 rounded-lg font-semibold hover:bg-gray-800 transition-colors">Search</button>
            </div>
        </form>

        @if($typeFilter === 'article')
            <div class="flex flex-wrap items-center gap-2 mb-8 pb-4 border-b border-gray-200">
                <span class="text-xs font-semibold text-gray-500 uppercase">Scope:</span>
                <a href="{{ route('search', array_merge(request()->query(), ['scope' => 'all'])) }}" class="px-3 py-1 text-xs font-semibold rounded-full {{ ($scopeFilter ?? 'all') === 'all' ? 'bg-gray-900 text-white' : 'bg-white border border-gray-200 text-gray-700 hover:border-gray-400' }}">All AU</a>
                <a href="{{ route('search', array_merge(request()->query(), ['scope' => 'local'])) }}" class="px-3 py-1 text-xs font-semibold rounded-full {{ ($scopeFilter ?? '') === 'local' ? 'bg-red-600 text-white' : 'bg-white border border-gray-200 text-gray-700 hover:border-red-400' }}">Local</a>
                <a href="{{ route('search', array_merge(request()->query(), ['scope' => 'international'])) }}" class="px-3 py-1 text-xs font-semibold rounded-full {{ ($scopeFilter ?? '') === 'international' ? 'bg-blue-600 text-white' : 'bg-white border border-gray-200 text-gray-700 hover:border-blue-400' }}">International</a>
            </div>
        @endif

        <!-- Results -->
        @if($articles->isNotEmpty() || $events->isNotEmpty() || $locations->isNotEmpty() || $authors->isNotEmpty())
            <div class="space-y-8">
                <!-- Articles -->
                @if($articles->isNotEmpty())
                    <div>
                        <h2 class="text-xl font-bold text-gray-900 mb-4">Articles ({{ $articles->count() }})</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            @foreach($articles->take(9) as $article)
                                <x-article-card :article="$article" />
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Events -->
                @if($events->isNotEmpty())
                    <div>
                        <h2 class="text-xl font-bold text-gray-900 mb-4">Events ({{ $events->count() }})</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            @foreach($events->take(6) as $event)
                                <div class="bg-white border border-gray-200 rounded-lg p-4">
                                    <h3 class="font-semibold text-gray-900">
                                        <a href="{{ route('events.show', $event->slug) }}" class="hover:text-red-600">{{ $event->title }}</a>
                                    </h3>
                                    <p class="text-sm text-gray-500 mt-1">{{ $event->start_date?->format('d M Y') }} &middot; {{ $event->venue }}</p>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Locations -->
                @if($locations->isNotEmpty())
                    <div>
                        <h2 class="text-xl font-bold text-gray-900 mb-4">Locations ({{ $locations->count() }})</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            @foreach($locations->take(9) as $location)
                                <a href="{{ $location->url ?? '#' }}" class="block bg-white border border-gray-200 rounded-lg p-4 hover:border-red-300 transition-colors">
                                    <h3 class="font-semibold text-gray-900">{{ $location->name }}</h3>
                                    <p class="text-sm text-gray-500 mt-1">{{ ucfirst($location->type) }}</p>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Authors -->
                @if($authors->isNotEmpty())
                    <div>
                        <h2 class="text-xl font-bold text-gray-900 mb-4">Authors ({{ $authors->count() }})</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            @foreach($authors->take(6) as $author)
                                <a href="{{ route('authors.show', $author->slug) }}" class="block bg-white border border-gray-200 rounded-lg p-4 hover:border-red-300 transition-colors">
                                    <h3 class="font-semibold text-gray-900">{{ $author->name }}</h3>
                                    <p class="text-sm text-gray-500 mt-1">{{ ucfirst($author->role) }}</p>
                                    @if($author->bio)
                                        <p class="text-sm text-gray-600 mt-2 line-clamp-2">{{ $author->bio }}</p>
                                    @endif
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        @elseif($searchQuery)
            <div class="text-center py-12">
                <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                <p class="text-gray-500 text-lg">No results found for "{{ $searchQuery }}"</p>
                <p class="text-gray-400 text-sm mt-2">Try different keywords or filters</p>
            </div>
        @else
            <div class="text-center py-12">
                <p class="text-gray-500">Enter a search term to find articles, events, locations, and authors.</p>
            </div>
        @endif
    </div>
@endsection