@extends('layouts.master', [
    'title' => 'খুঁজুন: ' . request('q') . ' - ' . config('app.name'),
    'description' => 'আপনার অনুসন্ধান "' . request('q') . '" এর ফলাফল। সর্বশেষ খবর এবং সংবাদ পড়ুন আমাদের অনলাইন নিউজ পোর্টালে।',
])

@php
    $highlightSearchTerm = function (?string $text, ?string $query): string {
        $value = $text ?? '';
        $keyword = trim((string) $query);

        if ($keyword === '') {
            return e($value);
        }

        $pattern = '/' . preg_quote($keyword, '/') . '/iu';
        $segments = @preg_split($pattern, $value, -1, PREG_SPLIT_DELIM_CAPTURE);

        if (!is_array($segments)) {
            return e($value);
        }

        $html = '';
        foreach ($segments as $segment) {
            if ($segment === '') {
                continue;
            }

            if (@preg_match($pattern, $segment) === 1) {
                $html .= '<mark>' . e($segment) . '</mark>';
            } else {
                $html .= e($segment);
            }
        }

        return $html;
    };
@endphp

@section('content')
<div class="search-page">
    <div class="container">
        {{-- Breadcrumb --}}
        @component('components.breadcrumb', [
            'items' => [
                ['label' => 'খুঁজুন: ' . request('q'), 'url' => null]
            ]
        ])
        @endcomponent
        
        {{-- Search Header --}}
        <header class="search-header">
            <h1 class="search-title">
                @if(request('q'))
                "{{ request('q') }}" এর ফলাফল
                @else
                খুঁজুন
                @endif
            </h1>
            
            <form action="{{ route('search') }}" method="GET" class="search-form-large">
                <div class="search-input-group-large">
                    <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="11" cy="11" r="8"></circle>
                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                    </svg>
                    <input type="search" 
                           name="q" 
                           class="search-input-large" 
                           placeholder="খুঁজুন..." 
                           value="{{ request('q') }}"
                           autocomplete="off"
                           required>
                    <button type="submit" class="search-submit-large">খুঁজুন</button>
                </div>
            </form>
            
            @if(request('q'))
            <div class="search-stats">
                <span class="results-count">{{ $posts->total() }}টি ফলাফল পাওয়া গেছে</span>
                
                <div class="search-sort">
                    <label>সাজানোর ক্রম:</label>
                    @php $q = request('q'); @endphp
                    <select onchange="window.location.href = '{{ route('search') }}?q={{ $q }}&sort=' + this.value">
                        <option value="relevance" {{ request('sort') == 'relevance' ? 'selected' : '' }}>প্রাসঙ্গিকতা</option>
                        <option value="latest" {{ request('sort') == 'latest' ? 'selected' : '' }}>সর্বশেষ</option>
                        <option value="oldest" {{ request('sort') == 'oldest' ? 'selected' : '' }}>পুরনো</option>
                    </select>
                </div>
            </div>
            @endif
        </header>
        
        {{-- Search Filters --}}
        @if(request('q'))
        <div class="search-filters">
            <div class="filter-section">
                <h4 class="filter-title">বিভাগ</h4>
                <div class="filter-options">
                    <a href="{{ route('search', ['q' => request('q')]) }}" 
                       class="filter-option {{ !request('category') ? 'active' : '' }}">
                        সব বিভাগ
                    </a>
                    @foreach($categories ?? [] as $category)
                    <a href="{{ route('search', ['q' => request('q'), 'category' => $category->slug]) }}" 
                       class="filter-option {{ request('category') == $category->slug ? 'active' : '' }}">
                        {{ $category->name_bn }}
                    </a>
                    @endforeach
                </div>
            </div>
            
            <div class="filter-section">
                <h4 class="filter-title">সময়কাল</h4>
                <div class="filter-options">
                    <a href="{{ route('search', ['q' => request('q'), 'time' => 'any']) }}" 
                       class="filter-option {{ request('time', 'any') == 'any' ? 'active' : '' }}">যেকোনো সময়</a>
                    <a href="{{ route('search', ['q' => request('q'), 'time' => 'day']) }}" 
                       class="filter-option {{ request('time') == 'day' ? 'active' : '' }}">আজ</a>
                    <a href="{{ route('search', ['q' => request('q'), 'time' => 'week']) }}" 
                       class="filter-option {{ request('time') == 'week' ? 'active' : '' }}">এই সপ্তাহ</a>
                    <a href="{{ route('search', ['q' => request('q'), 'time' => 'month']) }}" 
                       class="filter-option {{ request('time') == 'month' ? 'active' : '' }}">এই মাস</a>
                    <a href="{{ route('search', ['q' => request('q'), 'time' => 'year']) }}" 
                       class="filter-option {{ request('time') == 'year' ? 'active' : '' }}">এই বছর</a>
                </div>
            </div>
        </div>
        
        {{-- Results --}}
        <div class="search-results">
            @forelse($posts as $post)
            <article class="search-result-item">
                @if($post->thumbnail_url)
                <a href="{{ route('single', $post->slug) }}" class="result-image-link">
                    <img src="{{ $post->thumbnail_url }}" 
                         alt="{{ $post->title }}"
                         class="result-image"
                         loading="lazy"
                         width="200"
                         height="133">
                </a>
                @endif
                
                <div class="result-content">
                    @if($post->category)
                    <a href="{{ route('category.show', $post->category->slug) }}" class="result-category">
                        {{ $post->category->name_bn }}
                    </a>
                    @endif
                    
                    <h3 class="result-title">
                        <a href="{{ route('single', $post->slug) }}">
                            {!! $highlightSearchTerm($post->title, request('q')) !!}
                        </a>
                    </h3>
                    
                    @if($post->excerpt)
                    <p class="result-excerpt">
                        {!! $highlightSearchTerm(Str::limit(strip_tags($post->excerpt), 200), request('q')) !!}
                    </p>
                    @endif
                    
                    <div class="result-meta">
                        @if($post->author)
                        <span class="result-author">{{ $post->author->name }}</span>
                        @endif
                        <span class="result-date">{{\Carbon\Carbon::parse($post->published_at)->locale('bn_BD')->isoFormat('j MMMM Y') }}</span>
                        <span class="result-views">{{ number_format($post->views_count) }} পঠিত</span>
                    </div>
                </div>
            </article>
            @empty
            <div class="no-results">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="11" cy="11" r="8"></circle>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
                <h3>কোনো ফলাফল পাওয়া যায়নি</h3>
                <p>"{{ request('q') }}" এর জন্য কোনো পোস্ট পাওয়া যায়নি। অন্য কিছু খুঁজে দেখুন।</p>
                <a href="{{ route('home') }}" class="btn-home">হোমপেজে ফিরুন</a>
            </div>
            @endforelse
        </div>
        
        {{-- Pagination --}}
        @if($posts->hasPages())
        <div class="pagination-wrapper">
            {{ $posts->appends(request()->query())->links('pagination::bootstrap-5') }}
        </div>
        @endif
        
        {{-- Related Searches --}}
        @if(isset($relatedSearches) && $relatedSearches->count() > 0)
        <div class="related-searches">
            <h4 class="related-searches-title">সম্পর্কিত অনুসন্ধান</h4>
            <div class="related-search-tags">
                @foreach($relatedSearches as $term)
                <a href="{{ route('search', ['q' => $term]) }}" class="related-search-tag">
                    {{ $term }}
                </a>
                @endforeach
            </div>
        </div>
        @endif
        @else
        {{-- Empty Search State --}}
        <div class="search-suggestions-empty">
            <h3>খুঁজতে শুরু করুন</h3>
            <p>আপনি যা খুঁজছেন তা খুঁজে পেতে নিচের ট্যাগগুলো ব্রাউজ করতে পারেন।</p>
            
            <div class="popular-searches">
                <h4>জনপ্রিয় অনুসন্ধান</h4>
                <div class="popular-tags">
                    @foreach($popularSearches ?? [] as $term)
                    <a href="{{ route('search', ['q' => $term]) }}" class="popular-tag">{{ $term }}</a>
                    @endforeach
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection