@props([
    'name' => 'meta_keywords',
    'value' => '',
    'hint' => null,
])

@php
    $initial = old($name, $value);
    $tags = [];
    if (is_string($initial) && trim($initial) !== '') {
        $tags = array_values(array_filter(array_map('trim', preg_split('/[,،]+/u', $initial) ?: [])));
    }
@endphp

<div
    class="admin-tag-input"
    x-data="{
        tags: @js($tags),
        draft: '',
        sync() {
            this.$refs.value.value = this.tags.join(', ');
        },
        add() {
            const parts = String(this.draft || '').split(/[,،]+/).map((tag) => tag.trim()).filter(Boolean);
            parts.forEach((part) => {
                if (! this.tags.includes(part)) {
                    this.tags.push(part);
                }
            });
            this.draft = '';
            this.sync();
        },
        remove(index) {
            this.tags.splice(index, 1);
            this.sync();
        },
        onKey(event) {
            if (event.key === 'Enter' || event.key === ',') {
                event.preventDefault();
                this.add();
            }
        },
    }"
    x-init="sync()"
>
    <input type="hidden" name="{{ $name }}" x-ref="value" value="{{ implode(', ', $tags) }}" />
    <div class="admin-tag-input__chips">
        <template x-for="(tag, index) in tags" :key="tag + '-' + index">
            <span class="admin-tag-chip">
                <span x-text="tag"></span>
                <button type="button" @click="remove(index)" aria-label="{{ __('admin.delete') }}">&times;</button>
            </span>
        </template>
    </div>
    <input
        type="text"
        class="admin-tag-input__field"
        x-model="draft"
        @keydown="onKey($event)"
        @blur="add()"
        placeholder="{{ __('admin.seo_tags_placeholder') }}"
    />
</div>
@if ($hint)
    <p class="mt-1 text-xs text-slate-500">{{ $hint }}</p>
@endif