<?php

use Livewire\Component;
use App\Models\Post;

new class extends Component
{
    public string $query = '';

    public function mount()
    {
        $this->query = request('q', '');
    }

    public function render()
    {
        $results = collect();

        if (strlen(trim($this->query)) >= 2) {
            $results = Post::where('status', 'published')
                ->where(function ($q) {
                    $q->where('title', 'like', '%' . $this->query . '%')
                      ->orWhere('content', 'like', '%' . $this->query . '%');
                })
                ->with('category')
                ->latest()
                ->paginate(12);
        }

        return $this->view(['results' => $results])
            ->layout('layouts::frontend', [
                'pageTitle'       => $this->query ? 'Search: ' . $this->query . ' | Bikash Barta' : 'Search | Bikash Barta',
                'metaDescription' => 'Search Bikash Barta for news articles, stories, and updates.',
            ]);
    }

    public function search()
    {
        // wire:submit triggers re-render which reads $this->query
    }
};
?>

<main class="max-w-7xl mx-auto px-4 md:px-6 py-8">

    <!-- Page Header -->
    <div class="mb-8">
        <h1 class="text-2xl font-black text-slate-900 uppercase tracking-tight mb-2">{{ __('search.title') }}</h1>
        <nav class="text-[10px] text-slate-400 font-sans font-bold uppercase tracking-wider flex gap-2">
            <a href="{{ route('home') }}" class="hover:text-brand-blue">{{ __('nav.home') }}</a>
            <span>/</span>
            <span>{{ __('search.title') }}</span>
        </nav>
    </div>

    <!-- Search Form -->
    <form wire:submit.prevent="search" action="{{ route('search') }}" method="GET" class="mb-10">
        <div class="flex gap-0 max-w-2xl">
            <input
                type="text"
                name="q"
                wire:model="query"
                value="{{ $query }}"
                placeholder="{{ __('search.placeholder') }}"
                autofocus
                class="flex-1 bg-slate-50 border border-slate-200 border-r-0 rounded-l-md px-5 py-3 text-sm focus:ring-1 focus:ring-brand-blue focus:bg-white outline-none text-slate-700 placeholder:text-slate-400">
            <button type="submit"
                class="bg-brand-blue text-white px-6 py-3 rounded-r-md text-sm font-bold hover:bg-blue-800 transition-colors flex items-center gap-2">
                <i class="fa-solid fa-magnifying-glass"></i>
                <span class="hidden sm:inline">Search</span>
            </button>
        </div>
    </form>

    @if(strlen(trim($query)) >= 2)

        @if($results->count() > 0)
            <div class="mb-6 flex items-center justify-between">
                <p class="text-sm text-slate-500">
                    {{ __('search.results_for') }} "<span class="font-bold text-brand-blue">{{ $query }}</span>"
                    — <span class="font-bold text-slate-800">{{ $results->total() }}</span>
                </p>
            </div>

            <div class="space-y-5">
                @foreach($results as $post)
                @php
                    $img = $post->featured_image
                        ? (Str::startsWith($post->featured_image, 'http') ? $post->featured_image : asset('storage/' . $post->featured_image))
                        : 'https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?auto=format&fit=crop&q=80&w=400';
                @endphp
                <a href="{{ route('article', $post->slug) }}"
                    class="group flex gap-5 border border-slate-100 rounded-lg p-4 hover:border-slate-200 hover:shadow-sm transition-all bg-white">
                    <div class="w-28 h-20 md:w-36 md:h-24 flex-shrink-0 overflow-hidden rounded-md border border-slate-100">
                        <img src="{{ $img }}" alt="{{ $post->title }}"
                            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="text-[9px] font-black uppercase tracking-widest text-brand-blue border border-brand-blue/20 bg-brand-blue/5 px-2 py-0.5 rounded-sm">
                                {{ $post->category->name }}
                            </span>
                            <span class="text-[10px] text-slate-400 font-sans">{{ $post->created_at->format('d M Y') }}</span>
                        </div>
                        <h2 class="text-sm md:text-base font-bold text-slate-900 font-odia leading-snug group-hover:text-brand-blue transition-colors mb-2 line-clamp-2">
                            {{ $post->title }}
                        </h2>
                        @if($post->content)
                        <p class="text-xs text-slate-400 line-clamp-2 font-sans">
                            {{ Str::limit(strip_tags($post->content), 140) }}
                        </p>
                        @endif
                    </div>
                </a>
                @endforeach
            </div>

            <!-- Pagination -->
            @if($results->hasPages())
            <div class="mt-10 flex justify-center">
                {{ $results->appends(['q' => $query])->links() }}
            </div>
            @endif

        @else
            <div class="text-center py-20">
                <i class="fa-solid fa-magnifying-glass text-5xl text-slate-200 mb-6 block"></i>
                <p class="text-xl font-bold text-slate-400 mb-2">{{ __('search.no_results') }} "{{ $query }}"</p>
            </div>
        @endif

    @elseif(strlen(trim($query)) > 0)
        <p class="text-sm text-slate-400">Please enter at least 2 characters to search.</p>

    @else
        <!-- Empty state — no query yet -->
        <div class="text-center py-20 text-slate-300">
            <i class="fa-solid fa-newspaper text-6xl mb-6 block"></i>
            <p class="text-slate-400 font-semibold">Type something above to search our news archive.</p>
        </div>
    @endif

</main>
