@extends('layouts.public')

@section('title', 'Arama' . ($q ? ' - ' . $q : ''))

@section('content')
<style>
.search-page { max-width: 900px; margin: 0 auto; padding: 32px 16px; }

.search-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    color: white;
    padding: 36px 28px;
    border-radius: 16px;
    margin-bottom: 32px;
}
.search-header h1 { font-size: 26px; font-weight: 800; margin: 0 0 16px; }
.search-form { display: flex; gap: 10px; max-width: 600px; }
.search-form input {
    flex: 1; padding: 12px 16px; border: none; border-radius: 10px;
    font-size: 15px; font-family: inherit; outline: none;
}
.search-form button {
    padding: 12px 22px; background: rgba(255,255,255,0.25);
    color: white; border: 2px solid rgba(255,255,255,0.4);
    border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: 600;
    transition: all 0.2s;
}
.search-form button:hover { background: rgba(255,255,255,0.4); }

.result-section { margin-bottom: 32px; }
.result-section-title {
    font-size: 16px; font-weight: 700; color: #374151;
    border-left: 4px solid #3b82f6; padding-left: 12px;
    margin-bottom: 14px;
}
.result-item {
    display: block; padding: 14px 16px;
    background: white; border: 1px solid #e5e7eb;
    border-radius: 10px; text-decoration: none; color: inherit;
    margin-bottom: 10px; transition: all 0.2s;
}
.result-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(30,64,175,0.1);
    transform: translateY(-1px);
}
.result-item-title { font-size: 14px; font-weight: 700; color: #111827; margin-bottom: 4px; }
.result-item-meta { font-size: 12px; color: #9ca3af; }
.result-item-excerpt {
    font-size: 13px; color: #6b7280; margin-top: 6px;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.result-badge {
    display: inline-block; padding: 2px 8px; border-radius: 20px;
    font-size: 11px; font-weight: 600; margin-bottom: 6px;
}
.badge-blog { background: #eff6ff; color: #1d4ed8; }
.badge-forum { background: #f0fdf4; color: #15803d; }
.badge-chat { background: #fdf4ff; color: #7c3aed; }

.no-results {
    text-align: center; padding: 60px 20px;
    background: white; border-radius: 12px; border: 1px solid #e5e7eb;
}
.no-results-icon { font-size: 48px; margin-bottom: 16px; }
.no-results-title {
    font-size: 18px; font-weight: 700; color: #111827; margin-bottom: 8px;
}
.no-results-text { color: #6b7280; font-size: 14px; }

.search-count { font-size: 14px; color: #6b7280; margin-bottom: 24px; }
.search-count strong { color: #111827; }

@media (max-width: 640px) {
    .search-page { padding: 20px 12px; }
    .search-header { padding: 24px 20px; }
    .search-header h1 { font-size: 20px; }
    .search-form { flex-direction: column; }
    .search-form button { width: 100%; }
}
</style>

<div class="search-page">
<div class="search-header">
    <h1>🔍 Site İçi Arama</h1>
    <form class="search-form" action="/search" method="GET">
        <input type="text" name="q" value="{{ $q }}" placeholder="Blog, forum, sohbet içinde ara..." autofocus>
        <button type="submit">Ara</button>
    </form>
</div>

@if(!$q)
    <div class="no-results">
        <div class="no-results-icon">🔍</div>
        <h3 class="no-results-title">Ne aramak istiyorsunuz?</h3>
        <p class="no-results-text">Yukarıdaki arama kutusuna bir şeyler yazın.</p>
    </div>
@elseif($blogResults->isEmpty() && $forumResults->isEmpty() && $chatResults->isEmpty())
    <div class="no-results">
        <div class="no-results-icon">😕</div>
        <h3 class="no-results-title">"{{ $q }}" için sonuç bulunamadı</h3>
        <p class="no-results-text">Farklı bir arama terimi deneyin.</p>
    </div>
@else
    @php
        $totalCount = $blogResults->count() + $forumResults->count();
    @endphp
    <p class="search-count">
        "<strong>{{ $q }}</strong>" için <strong>{{ $totalCount }}</strong> sonuç bulundu.
    </p>

    {{-- Blog Sonuçları --}}
    @if($blogResults->count() > 0)
    <div class="result-section">
        <div class="result-section-title">📰 Blog Yazıları ({{ $blogResults->count() }})</div>
        @foreach($blogResults as $post)
            <a href="{{ route('blog.show', $post->slug) }}" class="result-item">
                <div class="result-badge badge-blog">Blog</div>
                <div class="result-item-title">{{ $post->title }}</div>
                <div class="result-item-meta">
                    {{ $post->user?->name }} · {{ $post->published_at?->format('d M Y') }}
                    @if($post->category) · {{ $post->category->name }} @endif
                </div>
                @if($post->excerpt)
                <div class="result-item-excerpt">{{ $post->excerpt }}</div>
                @endif
            </a>
        @endforeach
    </div>
    @endif

    {{-- Forum Sonuçları --}}
    @if($forumResults->count() > 0)
    <div class="result-section">
        <div class="result-section-title">💬 Forum Konuları ({{ $forumResults->count() }})</div>
        @foreach($forumResults as $topic)
            <a href="{{ $topic->category ? route('forum.topic', [$topic->category, $topic]) : route('forum.index') }}" class="result-item">
                <div class="result-badge badge-forum">Forum</div>
                <div class="result-item-title">{{ $topic->title }}</div>
                <div class="result-item-meta">
                    {{ $topic->user?->name }} · {{ $topic->reply_count ?? 0 }} yanıt
                    @if($topic->category) · {{ $topic->category->name }} @endif
                </div>
                <div class="result-item-excerpt">{{ strip_tags($topic->content) }}</div>
            </a>
        @endforeach
    </div>
    @endif

@endif
</div>
@endsection
