@php
    $isSearch = $query !== '';
    $siteSeoTitle = $platformSiteSettings?->effectiveSeoTitle() ?: ($platformSiteSettings?->effectiveSiteName() ?? 'qpost platform');
    $siteSeoDescription = $platformSiteSettings?->effectiveSeoDescription() ?: ($platformSiteSettings?->site_description ?? '새 글과 추천 채널');
    $siteSeoKeywords = $platformSiteSettings?->effectiveSeoKeywords() ?: '';
    $siteSeoCanonicalUrl = rtrim(url()->current(), '/') . '/';
    $siteSeoOgTitle = $platformSiteSettings?->effectiveSeoOgTitle() ?: $siteSeoTitle;
    $siteSeoOgDescription = $platformSiteSettings?->effectiveSeoOgDescription() ?: $siteSeoDescription;
    $siteSeoOgImage = $platformSiteSettings?->effectiveSeoOgImageUrl() ?: '';
@endphp

@extends('components.layouts.platform-home', ['platformSiteSettings' => $platformSiteSettings ?? null])

@section('title', $isSearch ? '[' . $query . '] 검색결과' : $siteSeoTitle)
@section('meta-description', $isSearch ? '검색 결과 페이지' : $siteSeoDescription)
@if (! $isSearch && $siteSeoKeywords !== '')
    @section('meta-keywords', $siteSeoKeywords)
@endif
@section('canonical-url', $isSearch ? url()->current() : $siteSeoCanonicalUrl)
@section('og-title', $isSearch ? '[' . $query . '] 검색결과' : $siteSeoOgTitle)
@section('og-description', $isSearch ? '검색 결과 페이지' : $siteSeoOgDescription)
@if (! $isSearch && $siteSeoOgImage !== '')
    @section('og-image', $siteSeoOgImage)
@endif
@section('og-type', 'website')
@section('meta-robots', $isSearch ? 'noindex,follow' : (($platformSiteSettings?->indexable ?? true) ? 'index,follow' : 'noindex,follow'))

@section('content')
    <div class="space-y-6">
        @if ($query !== '')
            <section class="space-y-4">
                <x-ui.section-header
                    eyebrow="SEARCH"
                    title="{{ '[' . $query . '] 검색결과' }}"
                    title-tag="h1"
                    size="md"
                />

                @if (($searchResults?->count() ?? 0) > 0)
                    <div class="space-y-4">
                        <div class="text-xs c-subtle">
                            총 {{ number_format($resultCount) }}개 결과
                        </div>

                        <div class="space-y-4">
                            @foreach ($searchResults as $post)
                                <x-posts.items.listcard
                                    :post="$post"
                                    :board="$post->board"
                                    variant="platform"
                                    :show-image="true"
                                />
                            @endforeach
                        </div>
                    </div>

                    <div class="flex justify-center py-4">
                        <x-ui.pagination :paginator="$searchResults" />
                    </div>
                @else
                    <x-ui.empty-state
                        title="검색 결과가 없습니다"
                        description="다른 검색어로 다시 찾아보세요."
                    />
                @endif
            </section>
        @else
            <div>
                @if ($heroPosts->isEmpty())
                    <x-ui.empty-state
                        title="수집된 새 글이 없습니다"
                        description="태그모아 허용 게시판에서 글이 저장되면 이 목록에 노출됩니다."
                    />
                @else
                    <div class="space-y-10">
                        <x-platform.hero-spotlight :posts="$heroPosts" />

                        <section class="space-y-4">
                            <x-ui.section-header
                                eyebrow="SPOTLIGHT"
                                title="주목할 이야기"
                                title-tag="h3"
                                size="md"
                            />

                            <x-posts.renderer
                                :board="null"
                                :posts="$listPosts"
                                variant="platform"
                                :config="['skin' => 'scroll', 'item' => 'card', 'showImage' => true, 'boardLabelField' => 'tenant.name', 'showPublishedDate' => false]"
                                :show-image="true"
                            />
                        </section>

                        <section class="space-y-4">
                            <x-ui.section-header
                                eyebrow="NEW POST"
                                title="새로운 이야기"
                                title-tag="h3"
                                size="md"
                            />

                            <div class="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
                                @foreach ($compactPosts->take(4)->values() as $post)
                                    <x-posts.items.listcard
                                        :post="$post"
                                        :board="null"
                                        variant="platform"
                                        :show-image="true"
                                    />
                                @endforeach
                            </div>
                        </section>
                    </div>
                @endif
            </div>
        @endif

        @if ($query === '')
            <div class="pt-4">
                <x-ui.section-header
                    eyebrow="Trends"
                    title="지금 뜨는 태그"
                    title-tag="h2"
                    size="md"
                />

                @php
                    $visibleTrendItems = collect($trendItems)
                        ->filter(function ($trendItem) {
                            return collect(data_get($trendItem, 'data.news_items', []))
                                ->filter(function ($newsItem) {
                                    return trim((string) data_get($newsItem, 'title', '')) !== '';
                                })
                                ->isNotEmpty();
                        })
                        ->values();
                @endphp

                @if ($visibleTrendItems->isEmpty())
                    <x-ui.empty-state
                        title="지금 뜨는 태그가 없습니다"
                    />
                @else
<div
    class="overflow-hidden rounded-[1.5rem] border border-muted bg-card shadow-sm mt-4"
    data-trend-spotlight
>
    <div class="p-4 sm:p-5 lg:p-6">
        {{-- 태그 목록 --}}
        <div class="flex items-center gap-3 border-b border-muted pb-4">
            <div
                class="min-w-0 flex-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
                role="tablist"
                aria-label="지금 뜨는 태그"
                data-trend-tag-strip
            >
                <div class="flex min-w-max items-center gap-2.5">
                    @foreach ($visibleTrendItems as $trendIndex => $trendItem)
                        @php
                            $isActiveTrend = $trendIndex === 0;
                        @endphp
                        <button
                            type="button"
                            role="tab"
                            aria-selected="{{ $isActiveTrend ? 'true' : 'false' }}"
                            aria-controls="trend-panel-{{ $trendItem->id }}"
                            data-trend-tag
                            data-active="{{ $isActiveTrend ? 'true' : 'false' }}"
                            class="shrink-0 rounded-full border px-4 py-2.5 text-sm font-bold leading-none transition-[background-color,border-color,color,box-shadow] duration-200 sm:px-5 sm:py-3
                                {{ $isActiveTrend
                                    ? 'border-primary bg-[rgb(var(--color-primary-rgb))] text-white shadow-sm'
                                    : 'border-muted bg-surface text-[rgb(var(--color-text-main-rgb))] hover:border-primary-soft hover:bg-surface1' }}"
                        >
                            {{ $trendItem->title }}
                        </button>
                    @endforeach
                </div>
            </div>

            <button
                type="button"
                class="hidden h-11 w-11 shrink-0 place-items-center rounded-full border border-muted bg-card text-xl c-main shadow-sm transition-[background-color,border-color,color] duration-200 hover:border-primary-soft hover:bg-surface1 hover:c-primary md:grid"
                aria-label="태그 더 보기"
                data-trend-tag-scroll
            >
                <span aria-hidden="true">›</span>
            </button>
        </div>

        {{-- 관련 기사 Swiper --}}
        <div class="min-w-0 pt-2">
            <div
                class="swiper overflow-hidden"
                data-trend-carousel
            >
                <div class="swiper-wrapper">
                    @foreach ($visibleTrendItems as $trendIndex => $trendItem)
                        @php
                            $trendData = $trendItem->data ?? [];

                            $newsItems = collect(
                                data_get($trendData, 'news_items', [])
                            );

                            $trendUrl = data_get($trendData, 'link')
                                ?: 'https://trends.google.co.kr/trending/rss?geo=KR';

                            $approxTraffic = trim(
                                (string) data_get($trendData, 'approx_traffic', '')
                            );
                        @endphp

                        <div
                            id="trend-panel-{{ $trendItem->id }}"
                            class="swiper-slide"
                            role="tabpanel"
                            aria-hidden="{{ $trendIndex === 0 ? 'false' : 'true' }}"
                            data-trend-panel
                        >
                            <div class="divide-y divide-[rgb(var(--color-border-muted-rgb)/0.75)]">
                                @if ($newsItems->isEmpty())
                                    <div class="py-12 text-center text-sm c-muted">
                                        표시할 관련 기사가 없습니다.
                                    </div>
                                @else
                                    @foreach ($newsItems->take(3) as $newsItem)
                                        @php
                                            $newsUrl = trim(
                                                (string) data_get($newsItem, 'url', '')
                                            );

                                            $newsTitle = trim(
                                                (string) data_get($newsItem, 'title', '')
                                            );

                                            $newsSnippet = trim(
                                                (string) data_get($newsItem, 'snippet', '')
                                            );

                                            $newsSource = trim(
                                                (string) data_get($newsItem, 'source', '')
                                            );

                                            $newsPicture = trim(
                                                (string) (
                                                    data_get($newsItem, 'picture')
                                                    ?: data_get($newsItem, 'picture_url')
                                                )
                                            );
                                        @endphp

                                        @if ($newsTitle !== '')
                                            <a
                                                href="{{ $newsUrl !== '' ? $newsUrl : $trendUrl }}"
                                                target="_blank"
                                                rel="noopener"
                                                class="group grid grid-cols-[minmax(0,1fr)_clamp(72px,20%,220px)] items-center gap-3 rounded-[1.25rem] px-1 py-5 transition-colors duration-200 hover:bg-surface1 sm:gap-4 sm:px-3 lg:grid-cols-[minmax(0,1fr)_220px] lg:gap-6"
                                            >
                                                <div class="min-w-0 space-y-2.5">
                                                    <h3 class="line-clamp-2 text-lg font-extrabold leading-[1.45] tracking-[-0.04em] c-main transition-colors group-hover:c-primary sm:text-xl lg:text-[1.4rem]">
                                                        {{ $newsTitle }}
                                                    </h3>

                                                    @if ($newsSnippet !== '')
                                                        <p class="line-clamp-2 text-sm leading-6 c-muted sm:text-base sm:leading-7">
                                                            {{ $newsSnippet }}
                                                        </p>
                                                    @endif

                                                    <div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs font-semibold c-muted sm:text-sm">
                                                        <span>
                                                            {{ $newsSource !== '' ? $newsSource : 'Google Trends' }}
                                                        </span>

                                                        @if ($approxTraffic !== '')
                                                            <span class="text-[rgb(var(--color-border-default-rgb))]">·</span>
                                                            <span>{{ $approxTraffic }} 검색</span>
                                                        @endif
                                                    </div>
                                                </div>

                                                @if ($newsPicture !== '')
                                                    <div class="overflow-hidden rounded-[1rem] bg-surface justify-self-end lg:w-[220px]">
                                                        <img
                                                            src="{{ $newsPicture }}"
                                                            alt=""
                                                            loading="lazy"
                                                            class="aspect-[4/3] w-full object-cover transition-transform duration-300 group-hover:scale-[1.02] sm:aspect-[16/10]"
                                                        >
                                                    </div>
                                                @endif
                                            </a>
                                        @endif
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
                @endif
            </div>
        @endif

    </div>
@endsection