@php
    $boardCount = $boards->count();
    $postCount = $boards->sum('posts_count');
    $privateBoardCount = $boards->where('is_private_inquiry', true)->count();
@endphp

<x-layouts.tenant-admin title="게시판 관리" header="게시판 관리" :hide-header-title="true">
    <div class="space-y-6">
        <x-admin.section-header
            eyebrow="Boards"
            title="게시판관리"
            title-tag="h1"
            description="게시판의 공개 범위, 작성 권한, 카테고리 구성을 한 화면에서 관리합니다."
        >
            <x-ui.button href="{{ tenant_admin_url(null, 'boards/create') }}" variant="primary" size="sm">게시판 추가</x-ui.button>
            <x-ui.badge variant="primary" size="md">전체 {{ $boardCount }}</x-ui.badge>
            <x-ui.badge variant="secondary" size="md">게시글 {{ $postCount }}</x-ui.badge>
        </x-admin.section-header>

        @if ($boards->isEmpty())
            <x-ui.empty-state
                title="게시판이 없습니다"
                description="첫 게시판을 만들면 글쓰기와 카테고리 관리가 시작됩니다."
                cta-label="게시판 추가"
                :href="tenant_admin_url(null, 'boards/create')"
            />
        @else
            <div class="space-y-6">
                <div class="flex flex-wrap items-start justify-between gap-4">
                    <div class="flex flex-wrap gap-2">
                        <x-ui.badge variant="primary" size="md">공개 {{ $boards->where('is_private_inquiry', false)->count() }}</x-ui.badge>
                        <x-ui.badge variant="warning" size="md">비공개 {{ $privateBoardCount }}</x-ui.badge>
                    </div>
                </div>

                <div class="mt-6 space-y-4 md:hidden">
                    @foreach ($boards as $board)
                        <div class="space-y-4 border-b border-muted pb-4 last:border-b-0 last:pb-0">
                            <div class="flex items-start justify-between gap-3">
                                <x-admin.section-title
                                    variant="title"
                                    :title="$board->title"
                                    :href="tenant_url(null, $board->slug)"
                                    :description="'/' . $board->slug"
                                />

                                <div class="flex flex-col items-end gap-2">
                                    <x-ui.badge variant="{{ $board->is_private_inquiry ? 'warning' : 'success' }}" size="sm">
                                        {{ $board->is_private_inquiry ? '비공개 문의' : '공개' }}
                                    </x-ui.badge>
                                    <x-ui.badge variant="secondary" size="sm">{{ $board->skin }}</x-ui.badge>
                                </div>
                            </div>

                            <div class="grid gap-2 sm:grid-cols-2">
                                <div class="rounded-2xl border border-muted bg-surface px-4 py-3">
                                    <div class="text-xs font-semibold uppercase tracking-[0.16em] c-subtle">게시글</div>
                                    <div class="mt-1 text-sm font-bold c-main">{{ $board->posts_count }}</div>
                                </div>
                                <div class="rounded-2xl border border-muted bg-surface px-4 py-3">
                                    <div class="text-xs font-semibold uppercase tracking-[0.16em] c-subtle">카테고리</div>
                                    <div class="mt-1 text-sm font-bold c-main">{{ $board->categories_count }}</div>
                                </div>
                            </div>

                            <div class="flex flex-wrap gap-2">
                                <x-ui.badge variant="primary" size="sm">목록 {{ count($board->list_roles ?? []) }}</x-ui.badge>
                                <x-ui.badge variant="secondary" size="sm">작성 {{ count($board->write_roles ?? []) }}</x-ui.badge>
                                <x-ui.badge variant="accent" size="sm">댓글 {{ count($board->comment_write_roles ?? []) }}</x-ui.badge>
                            </div>

                            <div class="flex flex-wrap items-center gap-2">
                                <x-ui.button href="{{ tenant_admin_url(null, 'boards/' . $board->slug . '/edit') }}" variant="outline" size="sm">수정</x-ui.button>
                                <form method="POST" action="{{ tenant_admin_url(null, 'boards/' . $board->slug) }}" onsubmit="return confirm('게시판을 삭제하시겠습니까?')" class="inline-flex">
                                    @csrf
                                    @method('DELETE')
                                    <x-ui.button type="submit" variant="danger" size="sm">삭제</x-ui.button>
                                </form>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="mt-6 hidden md:block">
                    <div class="table-container bg-card">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>게시판</th>
                                    <th>권한</th>
                                    <th>카테고리</th>
                                    <th>게시글</th>
                                    <th>관리</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($boards as $board)
                                    <tr>
                                        <td class="align-top">
                                            <x-admin.section-title
                                                :title="$board->title"
                                                :href="tenant_url(null, $board->slug)"
                                                :description="'/' . $board->slug"
                                            />
                                        </td>
                                        <td class="align-top">
                                            <div class="flex flex-wrap gap-2">
                                                <x-ui.badge variant="{{ $board->is_private_inquiry ? 'warning' : 'success' }}" size="sm">
                                                    {{ $board->is_private_inquiry ? '비공개' : '공개' }}
                                                </x-ui.badge>
                                                <x-ui.badge variant="primary" size="sm">목록 {{ count($board->list_roles ?? []) }}</x-ui.badge>
                                                <x-ui.badge variant="secondary" size="sm">작성 {{ count($board->write_roles ?? []) }}</x-ui.badge>
                                            </div>
                                        </td>
                                        <td class="align-top">
                                            <div class="space-y-1">
                                                <div class="text-sm font-semibold c-main">{{ $board->categories_count }}</div>
                                            </div>
                                        </td>
                                        <td class="align-top">
                                            <div class="space-y-1">
                                                <div class="text-sm font-semibold c-main">{{ $board->posts_count }}</div>
                                            </div>
                                        </td>
                                        <td class="align-top">
                                            <div class="flex flex-wrap items-center gap-2">
                                                <x-ui.button href="{{ tenant_admin_url(null, 'boards/' . $board->slug . '/edit') }}" variant="primary" size="sm">수정</x-ui.button>
                                                <form method="POST" action="{{ tenant_admin_url(null, 'boards/' . $board->slug) }}" onsubmit="return confirm('게시판을 삭제하시겠습니까?')" class="inline-flex">
                                                    @csrf
                                                    @method('DELETE')
                                                    <x-ui.button type="submit" variant="danger" size="sm">삭제</x-ui.button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endif

    </div>
</x-layouts.tenant-admin>