@php
    $isEdit = $board->exists;
    $selectedListRoles = old('list_roles', $board->list_roles ?? []);
    $selectedViewRoles = old('view_roles', $board->view_roles ?? []);
    $selectedPostViewRoles = old('post_view_roles', $board->post_view_roles ?? []);
    $selectedWriteRoles = old('write_roles', $board->write_roles ?? []);
    $selectedEditRoles = old('edit_roles', $board->edit_roles ?? []);
    $selectedDeleteRoles = old('delete_roles', $board->delete_roles ?? []);
    $selectedCommentWriteRoles = old('comment_write_roles', $board->comment_write_roles ?? []);
    $selectedCommentViewRoles = old('comment_view_roles', $board->comment_view_roles ?? []);
    $selectedCommentEditRoles = old('comment_edit_roles', $board->comment_edit_roles ?? []);
    $selectedCommentDeleteRoles = old('comment_delete_roles', $board->comment_delete_roles ?? []);

    $permissionGroups = [
        [
            'title' => '목록 / 열람',
            'description' => '게시판 목록과 글 열람에 적용됩니다.',
            'fields' => [
                'list_roles' => ['label' => '목록 노출', 'selected' => $selectedListRoles],
                'view_roles' => ['label' => '목록 상세', 'selected' => $selectedViewRoles],
                'post_view_roles' => ['label' => '글 상세', 'selected' => $selectedPostViewRoles],
            ],
        ],
        [
            'title' => '작성 / 수정',
            'description' => '글 작성, 수정, 삭제 권한을 조절합니다.',
            'fields' => [
                'write_roles' => ['label' => '작성', 'selected' => $selectedWriteRoles],
                'edit_roles' => ['label' => '수정', 'selected' => $selectedEditRoles],
                'delete_roles' => ['label' => '삭제', 'selected' => $selectedDeleteRoles],
            ],
        ],
        [
            'title' => '댓글 열람 / 작성',
            'description' => '댓글 접근과 작성 가능 대상을 설정합니다.',
            'fields' => [
                'comment_view_roles' => ['label' => '댓글 열람', 'selected' => $selectedCommentViewRoles],
                'comment_write_roles' => ['label' => '댓글 작성', 'selected' => $selectedCommentWriteRoles],
            ],
        ],
        [
            'title' => '댓글 수정 / 삭제',
            'description' => '댓글 관리 권한은 운영진 기준으로 묶어 두는 것이 안전합니다.',
            'fields' => [
                'comment_edit_roles' => ['label' => '댓글 수정', 'selected' => $selectedCommentEditRoles],
                'comment_delete_roles' => ['label' => '댓글 삭제', 'selected' => $selectedCommentDeleteRoles],
            ],
        ],
    ];
@endphp

<form method="POST" action="{{ $isEdit ? route('platform.boards.update', $board) : route('platform.boards.store') }}" class="space-y-8">
    @csrf
    @if ($isEdit)
        @method('PUT')
    @endif

    <div class="flex flex-wrap items-center justify-between gap-3">
        <div class="space-y-1">
            <div class="text-sm font-semibold c-secondary">Platform boards</div>
            <h1 class="text-3xl font-black tracking-[-0.055em] c-main">{{ $isEdit ? '게시판 수정' : '게시판 생성' }}</h1>
        </div>

        <div class="flex gap-2">
            <x-ui.button href="{{ route('platform.boards.index') }}" variant="ghost" size="sm">목록으로</x-ui.button>
            <x-ui.button type="submit" variant="primary" size="sm">{{ $isEdit ? '저장' : '생성' }}</x-ui.button>
        </div>
    </div>

    <div class="grid gap-4 xl:grid-cols-[minmax(0,1.6fr)_22rem]">
        <div class="space-y-4">
            <x-ui.card padded class="border border-muted bg-card shadow-sm">
                <div class="space-y-5">
                    <div>
                        <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">Basics</div>
                        <h2 class="mt-1 text-xl font-extrabold tracking-[-0.04em] c-main">기본 정보</h2>
                        <p class="mt-2 text-sm leading-6 c-muted">
                            게시판 이름, 슬러그, 노출 형식을 먼저 정리합니다.
                        </p>
                    </div>

                    <div class="grid gap-4 md:grid-cols-2">
                        <x-ui.input floating id="title" name="title" label="게시판 이름" value="{{ old('title', $board->title) }}" required />
                        <x-ui.input floating id="slug" name="slug" label="슬러그" value="{{ old('slug', $board->slug) }}" required />
                    </div>

                    <div class="grid gap-4 md:grid-cols-2">
                        <x-ui.select id="skin" name="skin" label="스킨" :error="$errors->first('skin')" required>
                            @foreach ($skins as $key => $label)
                                <option value="{{ $key }}" @selected(old('skin', $board->skin) === $key)>{{ $label }}</option>
                            @endforeach
                        </x-ui.select>

                        <x-ui.input
                            type="number"
                            floating
                            id="posts_per_page"
                            name="posts_per_page"
                            label="게시글 수"
                            value="{{ old('posts_per_page', $board->posts_per_page ?: 15) }}"
                            min="1"
                            max="100"
                            required
                        />
                    </div>

                    <div class="grid gap-4 md:grid-cols-2">
                        <x-ui.input
                            type="number"
                            floating
                            id="order"
                            name="order"
                            label="표시 순서"
                            value="{{ old('order', $board->order ?: 0) }}"
                            min="0"
                        />

                        <x-ui.input
                            type="number"
                            floating
                            id="default_category_id"
                            name="default_category_id"
                            label="기본 분류 ID"
                            value="{{ old('default_category_id', $board->default_category_id) }}"
                            help="활성 카테고리 중 하나의 ID를 입력하세요."
                        />
                    </div>

                    <x-ui.textarea
                        floating
                        id="description"
                        name="description"
                        label="설명"
                        rows="4"
                    >{{ old('description', $board->description) }}</x-ui.textarea>

                    <x-ui.input
                        floating
                        id="categories"
                        name="categories"
                        label="카테고리 목록"
                        value="{{ old('categories', $isEdit ? $board->categories->pluck('name')->implode(', ') : '') }}"
                        placeholder="공지, 자유, 질문"
                        help="쉼표로 구분하면 자동으로 카테고리를 생성하고 정리합니다."
                    />
                </div>
            </x-ui.card>

            <x-ui.card padded class="border border-muted bg-card shadow-sm">
                <div class="space-y-5">
                    <div>
                        <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">Permissions</div>
                        <h2 class="mt-1 text-xl font-extrabold tracking-[-0.04em] c-main">권한 설정</h2>
                        <p class="mt-2 text-sm leading-6 c-muted">
                            운영진과 회원의 접근 범위를 역할 단위로 나눠서 제어합니다.
                        </p>
                    </div>

                    <div class="rounded-[1.25rem] border border-muted bg-surface px-4 py-3">
                        <div class="text-sm font-bold c-main">이용 안내</div>
                        <div class="mt-2 grid gap-1 text-sm leading-6 c-muted">
                            <p>비회원은 로그인하지 않은 방문자입니다.</p>
                            <p>일반 회원은 <code class="rounded bg-base px-1 py-0.5 text-xs text-main">role=user</code> 계정입니다.</p>
                            <p>로그인 회원은 로그인한 모든 계정을 의미하며, 일반 회원보다 범위가 넓습니다.</p>
                            <p>아무것도 체크하지 않으면 제한이 없고, 비회원만 허용하려면 <code class="rounded bg-base px-1 py-0.5 text-xs text-main">비회원</code>만 선택하세요.</p>
                        </div>
                    </div>

                    <div class="grid gap-4">
                        @foreach ($permissionGroups as $group)
                            <div class="rounded-[1.25rem] border border-muted bg-surface p-4">
                                <div class="space-y-1">
                                    <div class="text-sm font-bold c-main">{{ $group['title'] }}</div>
                                    <div class="text-xs c-muted">{{ $group['description'] }}</div>
                                </div>

                                <div class="mt-4 grid gap-3">
                                    @foreach ($group['fields'] as $field => $meta)
                                        <div class="rounded-2xl border border-muted bg-card px-4 py-3">
                                            <div class="text-xs font-semibold uppercase tracking-[0.16em] c-subtle">{{ $meta['label'] }}</div>
                                            <div class="mt-3 grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
                                                @foreach ($roleOptions as $value => $label)
                                                    <x-ui.checkbox
                                                        name="{{ $field }}[]"
                                                        value="{{ $value }}"
                                                        :checked="in_array($value, $meta['selected'], true)"
                                                    >
                                                        {{ $label }}
                                                    </x-ui.checkbox>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </x-ui.card>
        </div>

        <div class="space-y-4">
            <x-ui.card padded class="border border-muted bg-card shadow-sm">
                <div class="space-y-4">
                    <div>
                        <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">Visibility</div>
                        <h2 class="mt-1 text-xl font-extrabold tracking-[-0.04em] c-main">표시 설정</h2>
                    </div>

                    <div class="space-y-4">
                        <x-ui.switch
                            name="allow_user_category_select"
                            value="1"
                            :checked="old('allow_user_category_select', $board->allow_user_category_select)"
                        >
                            사용자 분류 선택 허용
                        </x-ui.switch>

                        <x-ui.switch
                            name="is_private_inquiry"
                            value="1"
                            :checked="old('is_private_inquiry', $board->is_private_inquiry)"
                        >
                            비공개 문의 게시판
                        </x-ui.switch>

                        <x-ui.switch
                            name="tagmoa_collect_allowed"
                            value="1"
                            :checked="old('tagmoa_collect_allowed', $board->tagmoa_collect_allowed)"
                        >
                            태그모아 수집 허용
                        </x-ui.switch>
                    </div>
                </div>
            </x-ui.card>

            <x-ui.card padded class="border border-muted bg-card shadow-sm">
                <div class="space-y-4">
                    <div>
                        <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">Summary</div>
                        <h2 class="mt-1 text-xl font-extrabold tracking-[-0.04em] c-main">현재 값</h2>
                    </div>

                    <div class="space-y-3">
                        <div class="flex items-center justify-between gap-3 rounded-2xl border border-muted bg-surface px-4 py-3">
                            <span class="text-sm c-muted">스킨</span>
                            <span class="text-sm font-semibold c-main">{{ old('skin', $board->skin) }}</span>
                        </div>
                        <div class="flex items-center justify-between gap-3 rounded-2xl border border-muted bg-surface px-4 py-3">
                            <span class="text-sm c-muted">게시글 수</span>
                            <span class="text-sm font-semibold c-main">{{ old('posts_per_page', $board->posts_per_page ?: 15) }}</span>
                        </div>
                        <div class="flex items-center justify-between gap-3 rounded-2xl border border-muted bg-surface px-4 py-3">
                            <span class="text-sm c-muted">표시 순서</span>
                            <span class="text-sm font-semibold c-main">{{ old('order', $board->order ?: 0) }}</span>
                        </div>
                    </div>
                </div>
            </x-ui.card>
        </div>
    </div>

    <div class="flex flex-wrap items-center gap-3 border-t border-muted pt-6">
        <x-ui.button type="submit" variant="primary" size="md">{{ $isEdit ? '저장' : '생성' }}</x-ui.button>
        <x-ui.button href="{{ route('platform.boards.index') }}" variant="outline" size="md">취소</x-ui.button>
    </div>
</form>