@php
    $boardLabel = $boardSlug !== '' ? $boardSlug : '전체';
    $statusLabel = match ($status) {
        \App\Models\Tenant\Post::MODERATION_HIDDEN => '숨김',
        \App\Models\Tenant\Post::MODERATION_BLOCKED => '차단',
        \App\Models\Tenant\Post::MODERATION_NORMAL => '공개',
        default => '전체',
    };
    $currentUserId = (int) auth('tenant')->id();
    $moveBoards = $boards->map(fn ($board) => [
        'id' => (int) $board->id,
        'title' => (string) $board->title,
        'categories' => $board->activeCategories->map(fn ($category) => [
            'id' => (int) $category->id,
            'name' => (string) $category->name,
        ])->values()->all(),
    ])->values()->all();
@endphp

<x-layouts.tenant-admin title="게시글 관리" header="게시글 관리" :hide-header-title="true">
    <div class="space-y-6">
        @if (session('status'))
            <x-ui.alert
                variant="success"
                title="저장 완료"
                dismiss-after="3000"
                class="border border-success-soft bg-success-soft"
            >
                {{ session('status') }}
            </x-ui.alert>
        @endif

        <x-admin.section-header
            eyebrow="Post admin"
            title="게시글 관리"
            title-tag="h1"
            description="현재 테넌트의 모든 게시글을 확인하고, 작성자와 발행 상태를 함께 관리할 수 있습니다."
        >
            <x-ui.badge variant="primary" size="md">게시판 {{ $boardLabel }}</x-ui.badge>
            <x-ui.badge variant="secondary" size="md">상태 {{ $statusLabel }}</x-ui.badge>
            <x-ui.badge variant="accent" size="md">전체 {{ $posts->total() }}</x-ui.badge>
        </x-admin.section-header>

        <x-ui.card padded class="border border-muted bg-surface shadow-sm">
            <form method="GET" action="{{ tenant_admin_url(null, 'posts', request()) }}" class="grid gap-3 lg:grid-cols-[minmax(0,1fr)_14rem_12rem_auto]">
                <x-ui.input
                    type="search"
                    name="q"
                    floating
                    label="검색"
                    placeholder="제목, 작성자, 비회원 이름"
                    value="{{ $query }}"
                />

                <x-ui.select name="board" label="게시판" floating>
                    <option value="">전체</option>
                    @foreach ($boards as $board)
                        <option value="{{ $board->slug }}" @selected($boardSlug === $board->slug)>{{ $board->title }}</option>
                    @endforeach
                </x-ui.select>

                <x-ui.select name="status" label="상태" floating>
                    <option value="">전체</option>
                    <option value="{{ \App\Models\Tenant\Post::MODERATION_NORMAL }}" @selected($status === \App\Models\Tenant\Post::MODERATION_NORMAL)>공개</option>
                    <option value="{{ \App\Models\Tenant\Post::MODERATION_HIDDEN }}" @selected($status === \App\Models\Tenant\Post::MODERATION_HIDDEN)>숨김</option>
                    <option value="{{ \App\Models\Tenant\Post::MODERATION_BLOCKED }}" @selected($status === \App\Models\Tenant\Post::MODERATION_BLOCKED)>차단</option>
                </x-ui.select>

                <x-ui.button type="submit" variant="primary" size="sm" class="self-end">검색</x-ui.button>
            </form>
        </x-ui.card>

        @if ($posts->isEmpty())
            <x-ui.empty-state
                title="게시글이 없습니다"
                description="현재 테넌트에 저장된 게시글이 아직 없거나, 선택한 조건에 맞는 글이 없습니다."
            />
        @else
            <form
                method="POST"
                action="{{ tenant_admin_url(null, 'posts/bulk', request()) }}"
                class="space-y-4"
                data-bulk-post-form
                data-move-boards='@json($moveBoards)'
            >
                @csrf
                <div class="flex flex-col gap-3 rounded-[var(--radius-xl)] border border-muted bg-surface px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
                    <div class="text-sm font-semibold c-main" data-bulk-selection-count>0개 선택</div>
                    <div class="flex flex-wrap gap-2">
                        <x-ui.button type="submit" name="action" value="public" variant="primary" size="sm" disabled data-bulk-action>공개</x-ui.button>
                        <x-ui.button type="submit" name="action" value="hide" variant="soft" size="sm" disabled data-bulk-action>숨김</x-ui.button>
                        <x-ui.button type="button" variant="soft" size="sm" disabled data-bulk-action data-bulk-move-open>이동</x-ui.button>
                        <x-ui.button type="submit" name="action" value="delete" variant="danger" size="sm" disabled data-bulk-action data-bulk-delete>삭제</x-ui.button>
                    </div>
                </div>

                <div class="fixed inset-0 z-[100] hidden flex items-center justify-center bg-black/60 p-4" data-bulk-move-modal aria-hidden="true">
                    <div class="w-full max-w-md rounded-[var(--radius-xl)] border border-muted bg-card p-5 shadow-xl" role="dialog" aria-modal="true" aria-labelledby="bulk-move-title">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <h2 id="bulk-move-title" class="text-lg font-extrabold c-main">게시글 이동</h2>
                                <p class="mt-1 text-sm c-muted">대상 게시판과 분류를 선택해 주세요.</p>
                            </div>
                            <button type="button" class="text-sm font-semibold c-muted hover:c-main" data-bulk-move-close>닫기</button>
                        </div>
                        <div class="mt-5 space-y-4">
                            <x-ui.select name="target_board_id" id="bulk-target-board" label="대상 게시판" :floating="false" data-bulk-target-board>
                                    <option value="">게시판 선택</option>
                                    @foreach ($boards as $board)
                                        <option value="{{ $board->id }}">{{ $board->title }}</option>
                                    @endforeach
                            </x-ui.select>
                            <div data-bulk-category-field hidden>
                                <x-ui.select name="board_category_id" id="bulk-target-category" label="분류" :floating="false" data-bulk-target-category></x-ui.select>
                            </div>
                        </div>
                        <div class="mt-6 flex justify-end gap-2">
                            <x-ui.button type="button" variant="soft" size="sm" data-bulk-move-close>취소</x-ui.button>
                            <x-ui.button type="submit" name="action" value="move" variant="primary" size="sm">이동</x-ui.button>
                        </div>
                    </div>
                </div>

            <div class="space-y-4 md:hidden">
                @foreach ($posts as $post)
                    @php
                        $collection = $post->tagmoa_collection ?? null;
                        $isCollected = (bool) data_get($collection, 'exists', false);
                        $collectionVariant = data_get($collection, 'variant', 'secondary');
                        $collectionStateLabel = data_get($collection, 'state_label');
                        $statusVariant = $post->moderationVariant();
                        $postUrl = tenant_url(null, $post->board->slug . '/' . $post->slug);
                    @endphp

                    <article class="overflow-hidden rounded-[1.5rem] border border-muted bg-card shadow-sm">
                        <div class="space-y-3 p-4">
                            <label class="inline-flex items-center gap-2 text-sm font-semibold c-main">
                                <input type="checkbox" value="{{ $post->id }}" class="rounded border-muted" data-bulk-post-checkbox @disabled((int) $post->user_id !== $currentUserId)>
                                {{ (int) $post->user_id === $currentUserId ? '선택' : '내 글 아님' }}
                            </label>
                            <div class="space-y-1">
                                <div class="flex flex-wrap items-center gap-2">
                                    <x-ui.badge variant="secondary" size="sm">{{ $post->board?->title ?? '-' }}</x-ui.badge>
                                    <x-ui.badge variant="{{ $collectionVariant }}" size="sm">{{ $isCollected ? '수집됨' : '미수집' }}</x-ui.badge>
                                    @if ($collectionStateLabel)
                                        <x-ui.badge variant="secondary" size="sm">{{ $collectionStateLabel }}</x-ui.badge>
                                    @endif
                                </div>
                                <h2 class="text-lg font-extrabold tracking-[-0.04em] c-main">
                                    <a href="{{ $postUrl }}" target="_blank" rel="noopener" class="hover:c-primary">
                                        {{ $post->title }}
                                    </a>
                                </h2>
                                @if ($post->meta_description)
                                    <p class="max-h-24 overflow-hidden text-sm leading-6 c-muted">{{ $post->meta_description }}</p>
                                @endif
                            </div>

                            <div class="grid gap-2 text-sm">
                                <div class="flex items-center justify-between gap-3 rounded-2xl border border-muted bg-surface px-3 py-2">
                                    <span class="c-muted">작성자</span>
                                    <span class="font-semibold c-main">{{ $post->authorLabel() }}</span>
                                </div>
                                <div class="flex items-center justify-between gap-3 rounded-2xl border border-muted bg-surface px-3 py-2">
                                    <span class="c-muted">발행일</span>
                                    <span class="font-semibold c-main">{{ $post->publishedAtLabel() }}</span>
                                </div>
                                <div class="flex items-center justify-between gap-3 rounded-2xl border border-muted bg-surface px-3 py-2">
                                    <span class="c-muted">수정일</span>
                                    <span class="font-semibold c-main">{{ $post->updatedAtLabel() }}</span>
                                </div>
                                <div class="flex items-center justify-between gap-3 rounded-2xl border border-muted bg-surface px-3 py-2">
                                    <span class="c-muted">태그모아</span>
                                    <div class="flex flex-wrap items-center justify-end gap-2">
                                        <x-ui.badge size="sm" variant="{{ $collectionVariant }}">{{ $isCollected ? '수집됨' : '미수집' }}</x-ui.badge>
                                        @if ($collectionStateLabel)
                                            <x-ui.badge size="sm" variant="secondary">{{ $collectionStateLabel }}</x-ui.badge>
                                        @endif
                                    </div>
                                </div>
                                <div class="flex items-center justify-between gap-3 rounded-2xl border border-muted bg-surface px-3 py-2">
                                    <span class="c-muted">상태</span>
                                    <x-ui.badge size="sm" variant="{{ $statusVariant }}">{{ $post->moderationLabel() }}</x-ui.badge>
                                </div>
                            </div>

                            <x-ui.button href="{{ $postUrl }}" target="_blank" rel="noopener" variant="soft" size="sm">글 보기</x-ui.button>
                        </div>
                    </article>
                @endforeach
            </div>

            <div class="hidden md:block">
                <div class="table-container bg-card">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th class="w-12">
                                    <input type="checkbox" class="rounded border-muted" aria-label="현재 페이지 게시글 전체 선택" data-bulk-post-select-all>
                                </th>
                                <th>게시글</th>
                                <th>작성자</th>
                                <th>게시판</th>
                                <th>발행일</th>
                                <th>수정일</th>
                                <th>태그모아</th>
                                <th>상태</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($posts as $post)
                                @php
                                    $collection = $post->tagmoa_collection ?? null;
                                    $isCollected = (bool) data_get($collection, 'exists', false);
                                    $collectionVariant = data_get($collection, 'variant', 'secondary');
                                    $collectionStateLabel = data_get($collection, 'state_label');
                                    $statusVariant = $post->moderationVariant();
                                    $postUrl = tenant_url(null, $post->board->slug . '/' . $post->slug);
                                @endphp
                                <tr>
                                    <td class="align-top">
                                        <input type="checkbox" name="post_ids[]" value="{{ $post->id }}" class="rounded border-muted" aria-label="{{ $post->title }} 선택" data-bulk-post-checkbox @disabled((int) $post->user_id !== $currentUserId)>
                                    </td>
                                    <td class="align-top">
                                        <div class="space-y-1">
                                            <a href="{{ $postUrl }}" target="_blank" rel="noopener" class="text-sm font-bold c-main hover:c-primary">
                                                {{ $post->title }}
                                            </a>
                                            @if ($post->meta_description)
                                                <div class="max-w-xl text-sm leading-6 c-muted">{{ $post->meta_description }}</div>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="align-top">
                                        <div class="space-y-1">
                                            <div class="text-sm font-semibold c-main">{{ $post->authorLabel() }}</div>
                                        </div>
                                    </td>
                                    <td class="align-top">
                                        <x-ui.badge variant="secondary" size="sm">{{ $post->board?->title ?? '-' }}</x-ui.badge>
                                    </td>
                                    <td class="align-top">
                                        <div class="space-y-1 text-sm">
                                            <div class="font-semibold c-main">{{ $post->publishedAtLabel() }}</div>
                                        </div>
                                    </td>
                                    <td class="align-top">
                                        <div class="space-y-1 text-sm">
                                            <div class="font-semibold c-main">{{ $post->updatedAtLabel() }}</div>
                                        </div>
                                    </td>
                                    <td class="align-top">
                                        <div class="flex flex-wrap items-center gap-2">
                                            <x-ui.badge size="sm" variant="{{ $collectionVariant }}">{{ $isCollected ? '수집됨' : '미수집' }}</x-ui.badge>
                                            @if ($collectionStateLabel)
                                                <x-ui.badge size="sm" variant="secondary">{{ $collectionStateLabel }}</x-ui.badge>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="align-top">
                                        <x-ui.badge size="sm" variant="{{ $statusVariant }}">{{ $post->moderationLabel() }}</x-ui.badge>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div>
                {{ $posts->links() }}
            </div>
            </form>
        @endif
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const form = document.querySelector('[data-bulk-post-form]');
            if (!form) return;

            const checkboxes = Array.from(form.querySelectorAll('[data-bulk-post-checkbox]'));
            const submittedCheckboxes = checkboxes.filter((checkbox) => checkbox.name === 'post_ids[]');
            const selectAll = form.querySelector('[data-bulk-post-select-all]');
            const actions = Array.from(form.querySelectorAll('[data-bulk-action]'));
            const count = form.querySelector('[data-bulk-selection-count]');
            const moveModal = form.querySelector('[data-bulk-move-modal]');
            const moveOpen = form.querySelector('[data-bulk-move-open]');
            const targetBoard = form.querySelector('select[data-bulk-target-board]');
            const categoryField = form.querySelector('[data-bulk-category-field]');
            const targetCategory = form.querySelector('select[data-bulk-target-category]');
            let moveBoards = [];

            try {
                moveBoards = JSON.parse(form.dataset.moveBoards || '[]');
            } catch {
                moveBoards = [];
            }

            const selectedCount = () => submittedCheckboxes.filter((checkbox) => checkbox.checked).length;
            const sync = () => {
                const selected = selectedCount();
                actions.forEach((button) => {
                    button.disabled = selected === 0;
                    button.classList.toggle('btn-disabled', selected === 0);
                });
                if (count) count.textContent = `${selected}개 선택`;
                if (selectAll) {
                    selectAll.checked = selected > 0 && selected === submittedCheckboxes.length;
                    selectAll.indeterminate = selected > 0 && selected < submittedCheckboxes.length;
                }
            };

            checkboxes.forEach((checkbox) => checkbox.addEventListener('change', () => {
                checkboxes.filter((item) => item.value === checkbox.value).forEach((item) => { item.checked = checkbox.checked; });
                sync();
            }));
            selectAll?.addEventListener('change', () => {
                checkboxes.filter((checkbox) => !checkbox.disabled).forEach((checkbox) => { checkbox.checked = selectAll.checked; });
                sync();
            });
            const updateCategories = () => {
                const board = moveBoards.find((item) => Number(item.id) === Number(targetBoard?.value));
                const categories = Array.isArray(board?.categories) ? board.categories : [];
                if (!targetCategory || !categoryField) return;

                targetCategory.replaceChildren();
                const emptyOption = document.createElement('option');
                emptyOption.value = '';
                emptyOption.textContent = '분류 없음';
                targetCategory.appendChild(emptyOption);
                categories.forEach((category) => {
                    const option = document.createElement('option');
                    option.value = String(category.id);
                    option.textContent = category.name;
                    targetCategory.appendChild(option);
                });
                categoryField.hidden = categories.length === 0;
                targetCategory.disabled = categories.length === 0;
            };
            const closeMoveModal = () => {
                if (!moveModal) return;
                moveModal.classList.add('hidden');
                moveModal.setAttribute('aria-hidden', 'true');
                if (targetBoard) targetBoard.required = false;
            };
            moveOpen?.addEventListener('click', () => {
                if (!moveModal) return;
                updateCategories();
                moveModal.classList.remove('hidden');
                moveModal.setAttribute('aria-hidden', 'false');
                if (targetBoard) targetBoard.required = true;
                targetBoard?.focus();
            });
            form.querySelectorAll('[data-bulk-move-close]').forEach((button) => button.addEventListener('click', closeMoveModal));
            moveModal?.addEventListener('click', (event) => {
                if (event.target === moveModal) closeMoveModal();
            });
            targetBoard?.addEventListener('change', updateCategories);
            form.addEventListener('submit', (event) => {
                if (event.submitter?.matches('[data-bulk-delete]') && !window.confirm('선택한 게시글을 삭제할까요? 삭제한 게시글은 복구할 수 없습니다.')) {
                    event.preventDefault();
                }
            });
            sync();
        });
    </script>
</x-layouts.tenant-admin>