@props([
    'name' => 'phone',
    'id' => null,
    'value' => '',
    'label' => 'Phone Number',
    'placeholder' => 'Enter your phone number',
    'required' => false,
    'disabled' => false,
    'readonly' => false,
    'attributes' => [],
    'class' => '',
    'helpText' => '',
    'preferredCountries' => ['ke', 'ug', 'tz', 'us'],
    'onlyCountries' => [],
    'excludeCountries' => [],
    'initialCountry' => 'auto',
    'separateDialCode' => true,
    'showValidationIcon' => true,
    'autoFormat' => true,
    'nationalMode' => false,
])

@php
    $componentId = $id ?? $name . '-' . uniqid();
    $hasError = $errors->has($name);
    $oldValue = old($name, $value);
@endphp

<div class="w-full space-y-2">
    @if($label)
        <label for="{{ $componentId }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            {{ $label }}
            @if($required)
                <span class="text-red-500 ml-1">*</span>
            @endif
        </label>
    @endif

    <div class="relative phone-input-wrapper flex" data-validation-state="neutral">
        <input
            type="tel"
            id="{{ $componentId }}"
            name="{{ $name }}_display"
            value="{{ $oldValue }}"
            placeholder="{{ $placeholder }}"
            {{ $required ? 'required' : '' }}
            {{ $disabled ? 'disabled' : '' }}
            {{ $readonly ? 'readonly' : '' }}
            autocomplete="tel"
            aria-describedby="{{ $componentId }}-help {{ $componentId }}-error"
            aria-invalid="{{ $hasError ? 'true' : 'false' }}"
            {{ $attributes->merge([
                'class' => 'block w-full text-sm transition-colors duration-200 border border-gray-300 ' .
                    ($hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600') .
                    ' bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 ' .
                    'focus:outline-none focus:ring-2 focus:ring-primary-500/20 ' .
                    ($disabled ? 'opacity-50 cursor-not-allowed' : '') .
                    ($readonly ? 'bg-gray-50 dark:bg-gray-800' : '') .
                    ' ' . $class
            ]) }}
        >
        
        <!-- Validation Icon -->
        @if($showValidationIcon)
            <div id="{{ $componentId }}-validation-icon" class="absolute right-3 top-1/2 transform -translate-y-1/2 hidden">
                <svg class="w-5 h-5 text-green-500" id="{{ $componentId }}-valid-icon" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <svg class="w-5 h-5 text-red-500" id="{{ $componentId }}-invalid-icon" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                </svg>
            </div>
        @endif
    </div>

    <!-- Hidden input for the actual phone number -->
    <input 
        type="hidden" 
        name="{{ $name }}" 
        id="{{ $componentId }}-hidden"
        value="{{ $oldValue }}"
    >

    <!-- Help Text -->
    @if($helpText)
        <p id="{{ $componentId }}-help" class="text-sm text-gray-500 dark:text-gray-400">
            {{ $helpText }}
        </p>
    @endif

    <!-- Error Message -->
    <div id="{{ $componentId }}-error">
        <x-form.error field="{{ $name }}" />
    </div>

    <!-- Validation Message -->
    <div id="{{ $componentId }}-validation-message" class="text-sm hidden">
        <span class="text-red-500" id="{{ $componentId }}-error-text"></span>
        <span class="text-green-500" id="{{ $componentId }}-success-text"></span>
    </div>
</div>

@once
     

    @push('scripts')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.1.1/js/intlTelInput.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.1.1/js/utils.js"></script>
    @endpush
@endonce

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const input = document.querySelector('#{{ $componentId }}');
            const hiddenInput = document.querySelector('#{{ $componentId }}-hidden');
            const validationIcon = document.querySelector('#{{ $componentId }}-validation-icon');
            const validIcon = document.querySelector('#{{ $componentId }}-valid-icon');
            const invalidIcon = document.querySelector('#{{ $componentId }}-invalid-icon');
            const validationMessage = document.querySelector('#{{ $componentId }}-validation-message');
            const errorText = document.querySelector('#{{ $componentId }}-error-text');
            const successText = document.querySelector('#{{ $componentId }}-success-text');

            if (!input) return;

            // Initialize intl-tel-input
            const iti = window.intlTelInput(input, {
                separateDialCode: {{ $separateDialCode ? 'true' : 'false' }},
                nationalMode: {{ $nationalMode ? 'true' : 'false' }},
                autoFormat: {{ $autoFormat ? 'true' : 'false' }},
                initialCountry: "{{ $initialCountry }}",
                preferredCountries: @json($preferredCountries),
                @if(!empty($onlyCountries))
                onlyCountries: @json($onlyCountries),
                @endif
                @if(!empty($excludeCountries))
                excludeCountries: @json($excludeCountries),
                @endif
                utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.1.1/js/utils.js",
                customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
                    return "{{ $placeholder }}" || selectedCountryPlaceholder;
                }
            });

            // Validation function
            function validatePhone() {
                const isValid = iti.isValidNumber();
                const phoneNumber = iti.getNumber();
                const wrapper = document.querySelector('.phone-input-wrapper');
                
                // Update wrapper classes for styling
                if (wrapper) {
                    wrapper.classList.remove('phone-input-error', 'phone-input-success');
                    wrapper.setAttribute('data-validation-state', 'neutral');
                    
                    if (input.value.length > 0) {
                        if (isValid) {
                            wrapper.classList.add('phone-input-success');
                            wrapper.setAttribute('data-validation-state', 'valid');
                        } else {
                            wrapper.classList.add('phone-input-error');
                            wrapper.setAttribute('data-validation-state', 'invalid');
                        }
                    }
                }
                
                @if($showValidationIcon)
                    if (validationIcon) {
                        if (input.value.length > 0) {
                            validationIcon.classList.remove('hidden');
                            
                            if (isValid) {
                                validIcon.classList.remove('hidden');
                                invalidIcon.classList.add('hidden');
                            } else {
                                validIcon.classList.add('hidden');
                                invalidIcon.classList.remove('hidden');
                            }
                        } else {
                            validationIcon.classList.add('hidden');
                        }
                    }
                @endif

                // Update validation message
                if (validationMessage && input.value.length > 0) {
                    validationMessage.classList.remove('hidden');
                    
                    if (isValid) {
                        errorText.textContent = '';
                        successText.textContent = 'Valid phone number';
                        errorText.classList.add('hidden');
                        successText.classList.remove('hidden');
                    } else {
                        const errorCode = iti.getValidationError();
                        let errorMsg = 'Invalid phone number';
                        
                        switch(errorCode) {
                            case intlTelInputUtils.validationError.INVALID_COUNTRY_CODE:
                                errorMsg = 'Invalid country code';
                                break;
                            case intlTelInputUtils.validationError.TOO_SHORT:
                                errorMsg = 'Phone number is too short';
                                break;
                            case intlTelInputUtils.validationError.TOO_LONG:
                                errorMsg = 'Phone number is too long';
                                break;
                            case intlTelInputUtils.validationError.IS_POSSIBLE_LOCAL_ONLY:
                                errorMsg = 'Phone number is only valid locally';
                                break;
                            case intlTelInputUtils.validationError.INVALID_LENGTH:
                                errorMsg = 'Invalid phone number length';
                                break;
                        }
                        
                        errorText.textContent = errorMsg;
                        successText.textContent = '';
                        errorText.classList.remove('hidden');
                        successText.classList.add('hidden');
                    }
                } else if (validationMessage) {
                    validationMessage.classList.add('hidden');
                }

                // Update hidden input
                if (hiddenInput) {
                    hiddenInput.value = isValid ? phoneNumber : input.value;
                }

                return isValid;
            }

            // Event listeners
            input.addEventListener('input', validatePhone);
            input.addEventListener('blur', validatePhone);
            input.addEventListener('keyup', validatePhone);
            input.addEventListener('change', validatePhone);

            // Country change event
            input.addEventListener('countrychange', function() {
                validatePhone();
            });

            // Form submission validation
            const form = input.closest('form');
            if (form) {
                form.addEventListener('submit', function(e) {
                    const isValid = validatePhone();
                    
                    @if($required)
                        if (!input.value.trim()) {
                            e.preventDefault();
                            input.focus();
                            return false;
                        }
                    @endif

                    if (input.value.trim() && !isValid) {
                        e.preventDefault();
                        input.focus();
                        return false;
                    }
                });
            }

            // Initialize validation on page load if there's a value
            if (input.value) {
                setTimeout(validatePhone, 100);
            }

            // Handle pre-filled international numbers
            @if($oldValue)
                setTimeout(function() {
                    if (iti.isValidNumber()) {
                        iti.setNumber("{{ $oldValue }}");
                    }
                    validatePhone();
                }, 100);
            @endif
        });
    </script>
@endpush