@props([
    'error' => null,
    'success' => null
])

<div x-data="promoCodeInput()" class="w-full">
    <div class="flex gap-2">
        <input 
            type="text" 
            x-model="code"
            x-on:input="code = code.toUpperCase()"
            placeholder="Code promo"
            maxlength="20"
            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white uppercase"
            :class="{ 'border-red-500': error, 'border-green-500': success }"
            :disabled="loading"
        >
        <button 
            type="button"
            x-on:click="applyCode()"
            :disabled="loading || code.length < 3"
            class="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
            <span x-show="!loading">Appliquer</span>
            <span x-show="loading" class="flex items-center gap-2">
                <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                </svg>
                ...
            </span>
        </button>
    </div>

    {{-- Message d'erreur --}}
    <div x-show="error" x-cloak x-transition class="mt-2 text-sm text-red-600 flex items-center gap-1">
        <svg class="w-4 h-4" 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"/>
        </svg>
        <span x-text="error"></span>
    </div>

    {{-- Message de succès --}}
    <div x-show="success" x-cloak x-transition class="mt-2 text-sm text-green-600 flex items-center gap-1">
        <svg class="w-4 h-4" 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"/>
        </svg>
        <span x-text="success"></span>
    </div>

    {{-- Réduction appliquée --}}
    <div x-show="discount > 0" x-cloak x-transition class="mt-3 p-3 bg-green-50 dark:bg-green-900/30 rounded-lg">
        <div class="flex justify-between items-center">
            <span class="text-sm text-green-700 dark:text-green-400">Réduction:</span>
            <span class="font-bold text-green-600 dark:text-green-400" x-text="'-' + formatPrice(discount) + ' FCFA'"></span>
        </div>
    </div>
</div>

@push('scripts')
<script>
function promoCodeInput() {
    return {
        code: '',
        loading: false,
        error: null,
        success: null,
        discount: 0,
        
        async applyCode() {
            if (this.code.length < 3) return;
            
            this.loading = true;
            this.error = null;
            this.success = null;
            
            try {
                const response = await fetch('{{ route("cart.apply-promo") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({ code: this.code })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    this.success = data.message;
                    this.discount = data.discount;
                    this.dispatchPromoApplied(data);
                } else {
                    this.error = data.message;
                    this.discount = 0;
                }
            } catch (e) {
                this.error = 'Erreur de connexion. Veuillez réessayer.';
            } finally {
                this.loading = false;
            }
        },
        
        dispatchPromoApplied(data) {
            window.dispatchEvent(new CustomEvent('promo-applied', { detail: data }));
        },
        
        formatPrice(price) {
            return new Intl.NumberFormat('fr-FR').format(price);
        }
    };
}
</script>
@endpush
