@php
    $tagSuggestions = $tagSuggestions ?? [];
    $tagInitial = $tagInitial ?? [];
    $tagName = $tagName ?? 'tags';
@endphp
<div class="tag-input" data-tag-input>
    <div data-tag-list></div>
    <input type="text" data-tag-field placeholder="Add person...">
    <div class="tag-suggestions" data-tag-suggestions></div>
    <input type="hidden" name="{{ $tagName }}" data-tag-hidden>
</div>
<script>
    (function () {
        const suggestions = @json($tagSuggestions);
        const initialTags = @json($tagInitial);

        const setupTagInput = (wrapper, suggestionList, initial = []) => {
            const listEl = wrapper.querySelector('[data-tag-list]');
            const inputEl = wrapper.querySelector('[data-tag-field]');
            const suggestionEl = wrapper.querySelector('[data-tag-suggestions]');
            const hiddenEl = wrapper.querySelector('[data-tag-hidden]');
            let tags = Array.from(new Set(initial.filter(Boolean)));

            const renderTags = () => {
                listEl.innerHTML = '';
                tags.forEach((tag) => {
                    const pill = document.createElement('span');
                    pill.className = 'tag-pill';
                    pill.textContent = tag;

                    const btn = document.createElement('button');
                    btn.type = 'button';
                    btn.textContent = '×';
                    btn.addEventListener('click', () => {
                        tags = tags.filter((t) => t !== tag);
                        renderTags();
                        renderSuggestions();
                    });

                    pill.appendChild(btn);
                    listEl.appendChild(pill);
                });
                hiddenEl.value = tags.join(', ');
            };

            const addTag = (value) => {
                const cleaned = value.trim();
                if (!cleaned) return;
                if (!tags.includes(cleaned)) {
                    tags.push(cleaned);
                    renderTags();
                }
                inputEl.value = '';
                renderSuggestions();
            };

            const renderSuggestions = () => {
                const query = inputEl.value.trim().toLowerCase();
                const filtered = suggestionList.filter((name) =>
                    name.toLowerCase().includes(query) && !tags.includes(name)
                );
                suggestionEl.innerHTML = '';
                if (!query || filtered.length === 0) {
                    suggestionEl.classList.remove('is-open');
                    return;
                }
                filtered.slice(0, 8).forEach((name) => {
                    const item = document.createElement('div');
                    item.className = 'tag-suggestion-item';
                    item.textContent = name;
                    item.addEventListener('mousedown', (event) => {
                        event.preventDefault();
                        addTag(name);
                    });
                    suggestionEl.appendChild(item);
                });
                suggestionEl.classList.add('is-open');
            };

            inputEl.addEventListener('keydown', (event) => {
                if (event.key === 'Enter' || event.key === ',') {
                    event.preventDefault();
                    addTag(inputEl.value.replace(/,$/, ''));
                }
                if (event.key === 'Backspace' && inputEl.value === '' && tags.length) {
                    tags.pop();
                    renderTags();
                    renderSuggestions();
                }
            });

            inputEl.addEventListener('input', renderSuggestions);
            inputEl.addEventListener('blur', () => {
                setTimeout(() => {
                    addTag(inputEl.value);
                    suggestionEl.classList.remove('is-open');
                }, 100);
            });

            renderTags();
        };

        document.querySelectorAll('[data-tag-input]').forEach((wrapper) => {
            if (wrapper.dataset.tagReady === 'true') return;
            wrapper.dataset.tagReady = 'true';
            setupTagInput(wrapper, suggestions, initialTags);
        });
    })();
</script>