@props(['board', 'errors'])

@php
    $categoryRows = collect();
    if (is_string(old('categories'))) {
        $categoryRows = collect(explode(',', old('categories')))
            ->map(fn ($name) => trim($name))
            ->filter()
            ->unique()
            ->values()
            ->map(function ($name) use ($board) {
                $existing = $board->categories->firstWhere('name', $name);

                return ['id' => $existing?->id, 'name' => $name];
            });
    } elseif ($board->exists) {
        $categoryRows = $board->activeCategories->map(fn ($category) => [
            'id' => $category->id,
            'name' => $category->name,
        ]);
    }

    $defaultCategoryId = old('default_category_id', $board->default_category_id);
    $defaultCategoryName = old('default_category_name');
    if (blank($defaultCategoryName) && $defaultCategoryId) {
        $defaultCategoryName = $categoryRows->firstWhere('id', (int) $defaultCategoryId)['name'] ?? null;
    }
    if (blank($defaultCategoryName) && $categoryRows->isNotEmpty()) {
        $defaultCategoryName = $categoryRows->first()['name'];
    }
@endphp

<x-ui.card padded class="min-w-0 border border-muted bg-card shadow-sm">
    <div class="space-y-5" data-board-category-manager>
        <div>
            <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">Categories</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>

        <input type="hidden" name="categories" value="{{ $categoryRows->pluck('name')->implode(',') }}" data-category-names>
        <input type="hidden" name="default_category_id" value="{{ $defaultCategoryId }}" data-default-category-id>
        <input type="hidden" name="default_category_name" value="{{ $defaultCategoryName }}" data-default-category-name>

        <div class="flex flex-col gap-2 sm:flex-row">
            <x-ui.input floating id="category-name-input" label="카테고리 이름" maxlength="255" class="min-w-0 flex-1" data-category-name-input />
            <x-ui.button type="button" variant="outline" size="sm" data-category-add>추가</x-ui.button>
        </div>
        <p class="text-sm text-danger" role="alert" data-category-feedback hidden></p>
        @error('categories')
            <p class="error-text">{{ $message }}</p>
        @enderror

        <ul class="space-y-2" data-category-list>
            @foreach ($categoryRows as $category)
                <li class="flex items-center gap-3 rounded-xl border border-muted bg-surface px-3 py-2" data-category-item data-category-name="{{ $category['name'] }}" data-category-id="{{ $category['id'] }}">
                    <input type="radio" name="category_default_choice" value="{{ $category['name'] }}" class="radio" aria-label="{{ $category['name'] }}를 기본 카테고리로 선택" @checked($defaultCategoryName === $category['name']) data-category-default>
                    <span class="min-w-0 flex-1 truncate text-sm font-medium c-main">{{ $category['name'] }}</span>
                    <x-ui.button type="button" variant="ghost" size="sm" data-category-remove>삭제</x-ui.button>
                </li>
            @endforeach
        </ul>
        <p class="text-sm c-subtle {{ $categoryRows->isNotEmpty() ? 'hidden' : '' }}" data-category-empty>등록된 카테고리가 없습니다. 이름을 입력해 추가해 주세요.</p>

        <div class="border-t border-muted pt-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>
            <p class="mt-1 text-xs c-subtle">끄면 글 작성 시 기본 카테고리로 고정됩니다.</p>
        </div>
    </div>
</x-ui.card>

<script>
    (() => {
        const root = document.querySelector('[data-board-category-manager]');
        if (!root) return;

        const categoryList = root.querySelector('[data-category-list]');
        const nameInput = root.querySelector('input[data-category-name-input]');
        const addButton = root.querySelector('[data-category-add]');
        const namesField = root.querySelector('[data-category-names]');
        const defaultIdField = root.querySelector('[data-default-category-id]');
        const defaultNameField = root.querySelector('[data-default-category-name]');
        const emptyState = root.querySelector('[data-category-empty]');
        const feedback = root.querySelector('[data-category-feedback]');
        const items = () => Array.from(categoryList.querySelectorAll('[data-category-item]'));

        const syncFields = () => {
            const rows = items();
            let selected = rows.find((row) => row.querySelector('[data-category-default]')?.checked);
            if (!selected && rows.length) {
                selected = rows[0];
                selected.querySelector('[data-category-default]').checked = true;
            }

            namesField.value = rows.map((row) => row.dataset.categoryName).join(',');
            defaultNameField.value = selected?.dataset.categoryName ?? '';
            defaultIdField.value = selected?.dataset.categoryId || '';
            emptyState.classList.toggle('hidden', rows.length > 0);
        };

        const createRow = (name) => {
            const row = document.createElement('li');
            row.className = 'flex items-center gap-3 rounded-xl border border-muted bg-surface px-3 py-2';
            row.dataset.categoryItem = '';
            row.dataset.categoryName = name;
            row.dataset.categoryId = '';

            const radio = document.createElement('input');
            radio.type = 'radio';
            radio.name = 'category_default_choice';
            radio.value = name;
            radio.className = 'radio';
            radio.setAttribute('aria-label', `${name}를 기본 카테고리로 선택`);
            radio.dataset.categoryDefault = '';
            radio.addEventListener('change', syncFields);

            const label = document.createElement('span');
            label.className = 'min-w-0 flex-1 truncate text-sm font-medium c-main';
            label.textContent = name;

            const remove = document.createElement('button');
            remove.type = 'button';
            remove.className = 'btn btn-sm btn-ghost';
            remove.textContent = '삭제';
            remove.addEventListener('click', () => {
                row.remove();
                syncFields();
            });

            row.append(radio, label, remove);
            return row;
        };

        const addCategory = () => {
            const name = nameInput.value.trim();
            feedback.hidden = true;
            feedback.textContent = '';
            if (!name) return;
            if (name.includes(',')) {
                feedback.textContent = '카테고리 이름에는 쉼표를 사용할 수 없습니다.';
                feedback.hidden = false;
                return;
            }
            if (items().some((row) => row.dataset.categoryName === name)) {
                feedback.textContent = '이미 등록된 카테고리입니다.';
                feedback.hidden = false;
                return;
            }

            const wasEmpty = items().length === 0;
            categoryList.append(createRow(name));
            if (wasEmpty) categoryList.lastElementChild.querySelector('[data-category-default]').checked = true;
            nameInput.value = '';
            syncFields();
            nameInput.focus();
        };

        addButton.addEventListener('click', addCategory);
        nameInput.addEventListener('keydown', (event) => {
            if (event.key === 'Enter') {
                event.preventDefault();
                addCategory();
            }
        });
        categoryList.querySelectorAll('[data-category-default]').forEach((radio) => radio.addEventListener('change', syncFields));
        categoryList.querySelectorAll('[data-category-remove]').forEach((button) => button.addEventListener('click', () => {
            button.closest('[data-category-item]').remove();
            syncFields();
        }));
        syncFields();
    })();
</script>