@props([
    'label' => '',
    'model' => '',
    'placeholder' => 'Type and press Enter to add...',
    'validation' => 'email',
    'maxTags' => null,
    'readonly' => false,
    'required' => false,
    'help' => '',
    'id' => null,
])

@php
    $inputId = $id ?: 'tags-input-' . uniqid();
    $wireModel = str_replace(['[', ']'], ['.', ''], $model);
@endphp

<div class="form-group">
    @if($label)
        <label for="{{ $inputId }}" class="form-label {{ $required ? 'form-label-required' : '' }}">
            {{ $label }}
        </label>
    @endif
    
    <div 
        x-data="tagsInput({
            model: '{{ $wireModel }}',
            validation: '{{ $validation }}',
            maxTags: {{ $maxTags ?: 'null' }},
            readonly: {{ $readonly ? 'true' : 'false' }}
        })"
        class="tags-input-container"
        x-bind:class="{ 
            'has-error': error, 
            'readonly': readonly,
            'success': !error && tags.length > 0
        }"
    >
        <div class="tags-input-wrapper" x-on:click="focusInput()">
            <!-- Tags Display -->
            <div class="tags-list" x-show="tags.length > 0">
                <template x-for="(tag, index) in tags" :key="`tag-${index}-${tag}`">
                    <div class="tag-item">
                        <span class="tag-text" x-text="tag" :title="tag"></span>
                        <button 
                            type="button" 
                            class="tag-remove" 
                            x-on:click.stop="removeTag(index)"
                            x-show="!readonly"
                            :aria-label="`Remove ${tag}`"
                            tabindex="-1"
                        >
                            <x-ui.nicon name="cross" />
                        </button>
                    </div>
                </template>
            </div>
            
            <!-- Input Field -->
            <input 
                x-ref="input"
                type="text" 
                class="tags-input" 
                :placeholder="tags.length === 0 ? '{{ $placeholder }}' : ''"
                x-model="inputValue"
                x-on:keydown="handleKeydown($event)"
                x-on:input="handleInput($event)"
                x-on:blur="handleBlur()"
                x-on:paste="handlePaste($event)"
                x-bind:disabled="readonly || isMaxTagsReached()"
                x-bind:aria-describedby="error ? '{{ $inputId }}-error' : '{{ $inputId }}-help'"
                autocomplete="off"
                id="{{ $inputId }}"
            />
        </div>
        
        <!-- Error Message -->
        <div 
            x-show="error" 
            x-transition.opacity.duration.200ms
            class="tag-error-message"
            :id="`{{ $inputId }}-error`"
            role="alert"
        >
            <span x-text="errorMessage"></span>
        </div>
        
        <!-- Help Text -->
        @if($help)
            <div class="form-help-text" id="{{ $inputId }}-help">
                {{ $help }}
            </div>
        @endif
        
        <!-- Tag Count (only show if maxTags is set) -->
        <div 
            x-show="maxTags && tags.length > 0" 
            class="tag-count"
            x-bind:class="{
                'near-limit': maxTags && tags.length >= maxTags * 0.8,
                'at-limit': isMaxTagsReached()
            }"
        >
            <span class="count-current" x-text="tags.length"></span>/<span x-text="maxTags"></span>
            <span x-show="isMaxTagsReached()" class="ms-1 text-muted">{{ __('(limit reached)') }}</span>
        </div>
    </div>
    
    <!-- Server-side validation errors -->
    <x-ui.error :key="$wireModel" />
</div>