@props([
    'board',
    'posts',
    'variant' => 'tenant',
    'query' => '',
    'currentCategory' => '',
    'boardCategories' => [],
    'boardIndexAction' => '',
    'createAction' => '',
    'canCreate' => true,
    'searchAction' => '',
    'showActions' => true,
    'emptyTitle' => '아직 게시글이 없습니다',
    'emptyDescription' => '첫 글을 작성해서 게시판을 시작해 보세요.',
    'emptyCtaLabel' => '글쓰기',
])

@php
    $boardCategories = collect($boardCategories ?? []);
    $currentCategory = trim((string) $currentCategory);
    $categoryBaseQuery = request()->except(['page', 'category']);

    $buildCategoryHref = static function (?string $category = null) use ($searchAction, $categoryBaseQuery): string {
        $query = $categoryBaseQuery;

        if ($category !== null && $category !== '') {
            $query['category'] = $category;
        } else {
            unset($query['category']);
        }

        if ($query === []) {
            return $searchAction;
        }

        return $searchAction . '?' . http_build_query($query);
    };
@endphp

<div class="space-y-8 px-4 py-6 md:px-0 md:py-0">

    <div class="space-y-4 border-b border-muted pb-6">
        <x-ui.section-header
            eyebrow="Board"
            :title="$board->title"
            title-tag="h1"
            :description="$board->description"
        >
            @if ($showActions)
                @if ($canCreate && $createAction !== '')
                    <x-ui.button href="{{ $createAction }}" variant="primary" size="sm">
                        {{ $emptyCtaLabel }}
                    </x-ui.button>
                @endif
            @endif

            <x-slot:search>
                <form method="GET" action="{{ $searchAction }}" role="search" class="w-full">
                    <label class="flex items-center gap-1.5 rounded-full border border-muted bg-surface px-3 py-1.5 transition-colors duration-200">
                        <span class="sr-only">검색</span>
                        <input
                            type="search"
                            name="q"
                            value="{{ $query }}"
                            placeholder="검색"
                            class="min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 text-sm c-main placeholder-c-subtle outline-none shadow-none focus:outline-none focus:ring-0 focus:shadow-none focus-visible:shadow-none"
                        >
                        <button
                            type="submit"
                            class="grid h-7 w-7 shrink-0 place-items-center rounded-full c-subtle transition-colors bg-hover-main text-hover-base"
                            aria-label="검색"
                        >
                            <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" class="h-4 w-4">
                                <path d="M8.5 15a6.5 6.5 0 1 1 4.596-11.096A6.5 6.5 0 0 1 8.5 15Zm0-1.5a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm6.854 3.207-3.89-3.89 1.06-1.06 3.89 3.89-1.06 1.06Z" fill="currentColor"/>
                            </svg>
                        </button>
                    </label>
                </form>
            </x-slot:search>
        </x-ui.section-header>

        @if ($boardCategories->isNotEmpty())
            <nav class="mt-4 w-full" aria-label="분류 선택">
                <div class="-mx-4 overflow-x-auto px-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden md:mx-0 md:px-0">
                    <div class="flex w-max flex-nowrap items-center gap-6 border-b border-muted pb-1">
                        <a
                            href="{{ $buildCategoryHref() }}"
                            role="tab"
                            aria-current="{{ $currentCategory === '' ? 'page' : 'false' }}"
                            class="group inline-flex shrink-0 items-center text-sm font-semibold transition-colors duration-200 {{ $currentCategory === '' ? 'text-primary' : 'c-subtle hover:c-main' }}"
                        >
                            <span class="relative inline-flex items-center py-2">
                                전체
                                @if ($currentCategory === '')
                                    <span class="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-current"></span>
                                @endif
                            </span>
                        </a>

                        @foreach ($boardCategories as $categoryItem)
                            @php
                                $categoryName = trim((string) data_get($categoryItem, 'name', ''));
                                $isActiveCategory = $currentCategory === $categoryName;
                            @endphp
                            <a
                                href="{{ $buildCategoryHref($categoryName) }}"
                                role="tab"
                                aria-current="{{ $isActiveCategory ? 'page' : 'false' }}"
                                class="group inline-flex shrink-0 items-center text-sm font-semibold transition-colors duration-200 {{ $isActiveCategory ? 'text-primary' : 'c-subtle hover:c-main' }}"
                            >
                                <span class="relative inline-flex items-center py-2">
                                    {{ $categoryName }}
                                    @if ($isActiveCategory)
                                        <span class="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-current"></span>
                                    @endif
                                </span>
                            </a>
                        @endforeach
                    </div>
                </div>
            </nav>
        @endif
    </div>

    @if ($posts->count() > 0)
        <x-posts.renderer
            :board="$board"
            :posts="$posts"
            :variant="$variant"
            :skin="$board->skin"
            item="card"
            :show-image="true"
            :board-label="$board->title"
            :show-summary="false"
        />

        <div class="flex justify-center py-4">
            <x-ui.pagination :paginator="$posts" />
        </div>
    @else
        <x-ui.empty-state
            title="{{ $emptyTitle }}"
            description="{{ $emptyDescription }}"
            ctaLabel="{{ $emptyCtaLabel }}"
            :href="$canCreate ? $createAction : ''"
        />
    @endif
</div>