@extends('layouts.app')

@section('title', '全站搜索 - 深圳市云创芯电子有限公司')

@section('content')
<section class="px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
    <div class="mx-auto max-w-5xl">
        <h1 class="text-3xl font-bold tracking-tight text-fg">全站搜索</h1>

        <form action="{{ url('/search') }}" method="GET" class="mt-6 flex flex-col gap-3 sm:flex-row">
            <div class="relative flex-1">
                <x-icon name="search" :size="22" class="absolute left-4 top-1/2 -translate-y-1/2 text-muted pointer-events-none" />
                <input type="search" name="q" value="{{ $q }}" placeholder="搜索产品、文章、术语、论坛…" class="w-full rounded-lg border border-line bg-surface pl-12 pr-4 py-3.5 text-lg text-fg placeholder:text-muted focus:border-primary focus:outline-none focus:shadow-[0_0_0_3px_var(--color-primary-soft)]">
            </div>
            <button type="submit" class="inline-flex items-center justify-center rounded-lg bg-primary px-8 py-3.5 text-lg font-semibold text-white transition hover:bg-primary-hover">搜索</button>
        </form>

        @if ($q === '')
            <p class="mt-8 text-base text-muted">输入关键词，跨「产品 / 文章 / 术语库 / 技术论坛」检索全站内容。</p>
        @else
            <p class="mt-8 text-base text-muted">“<span class="font-medium text-fg">{{ $q }}</span>” 共找到 <span class="font-medium text-fg">{{ $total }}</span> 条结果。</p>

            @if ($total === 0)
                <div class="mt-6 rounded-lg border border-line bg-surface p-10 text-center">
                    <p class="text-lg text-muted">没有匹配的内容，换个关键词试试。</p>
                </div>
            @else
                @if ($results['articles']->isNotEmpty())
                    <div class="mt-10">
                        <h2 class="flex items-center gap-2 text-xl font-semibold text-fg">
                            <x-icon name="doc" :size="24" class="text-primary" /> 文章
                        </h2>
                        <ul class="mt-4 space-y-3">
                            @foreach ($results['articles'] as $article)
                                <li>
                                    <a href="{{ route('articles.show', $article->slug) }}" class="block rounded-lg border border-line bg-surface p-5 transition hover:border-primary hover:shadow-card">
                                        <h3 class="text-lg font-semibold text-fg">{{ $article->title }}</h3>
                                        @if ($article->summary)
                                            <p class="mt-1.5 line-clamp-2 text-base text-muted">{{ Str::limit($article->summary, 120) }}</p>
                                        @endif
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if ($results['products']->isNotEmpty())
                    <div class="mt-10">
                        <h2 class="flex items-center gap-2 text-xl font-semibold text-fg">
                            <x-icon name="box" :size="24" class="text-primary" /> 产品
                        </h2>
                        <ul class="mt-4 space-y-3">
                            @foreach ($results['products'] as $product)
                                <li>
                                    <a href="{{ route('products.show', $product->slug) }}" class="block rounded-lg border border-line bg-surface p-5 transition hover:border-primary hover:shadow-card">
                                        <h3 class="text-lg font-semibold text-fg">{{ $product->name }}</h3>
                                        @if ($product->summary)
                                            <p class="mt-1.5 line-clamp-2 text-base text-muted">{{ Str::limit($product->summary, 120) }}</p>
                                        @endif
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if ($results['glossary']->isNotEmpty())
                    <div class="mt-10">
                        <h2 class="flex items-center gap-2 text-xl font-semibold text-fg">
                            <x-icon name="book" :size="24" class="text-primary" /> 术语库
                        </h2>
                        <ul class="mt-4 space-y-3">
                            @foreach ($results['glossary'] as $term)
                                <li>
                                    <a href="{{ route('glossary.show', $term->slug) }}" class="block rounded-lg border border-line bg-surface p-5 transition hover:border-primary hover:shadow-card">
                                        <h3 class="text-lg font-semibold text-fg">{{ $term->term }}</h3>
                                        <p class="mt-1.5 line-clamp-2 text-base text-muted">{{ Str::limit($term->definition, 120) }}</p>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if ($results['threads']->isNotEmpty())
                    <div class="mt-10">
                        <h2 class="flex items-center gap-2 text-xl font-semibold text-fg">
                            <x-icon name="chat" :size="24" class="text-primary" /> 技术论坛
                        </h2>
                        <ul class="mt-4 space-y-3">
                            @foreach ($results['threads'] as $thread)
                                <li>
                                    <a href="{{ route('forum.thread', $thread) }}" class="block rounded-lg border border-line bg-surface p-5 transition hover:border-primary hover:shadow-card">
                                        <h3 class="text-lg font-semibold text-fg">{{ $thread->title }}</h3>
                                        <p class="mt-1.5 line-clamp-2 text-base text-muted">{{ Str::limit($thread->body, 120) }}</p>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            @endif
        @endif
    </div>
</section>
@endsection