<x-dynamic-component
    :component="$getFieldWrapperView()"
    :id="$getId()"
    :label="$getLabel()"
    :label-sr-only="$isLabelHidden()"
    :helper-text="$getHelperText()"
    :hint="$getHint()"
    :hint-action="$getHintAction()"
    :hint-color="$getHintColor()"
    :hint-icon="$getHintIcon()"
    :required="$isRequired()"
    :state-path="$getStatePath()"
>
@php
    $userCredit = \App\Models\UserCredit::getOrCreateForUser(auth()->id());
    $userBalance = $userCredit->balance;
    $creditService = new \App\Services\CreditService();
    $canPurchaseCredits = auth()->user()->can_purchase_credits || auth()->user()->is_admin;
    
    // Listar TODOS os serviços (não filtrar)
    $performances = \App\Models\Performance::all();
    
    // Tentar obter o record atual (para modo de edição)
    $selectedPerformancesIds = [];
    try {
        $record = $getRecord();
        if ($record && method_exists($record, 'performances')) {
            $record->load('performances');
            $selectedPerformancesIds = $record->performances->pluck('id')->toArray();
        }
    } catch (\Exception $e) {
        // Se não conseguir obter o record, continua sem performances selecionadas
        $selectedPerformancesIds = [];
    }
@endphp

<div x-data="{ 
    open: false,
    _selected: [],
    _initialized: false,
    _syncing: false,
    _initialValue: @if(!empty($selectedPerformancesIds)) @json($selectedPerformancesIds) @else [] @endif,

    // Getter for selected items (always returns normalized array)
    get selected() {
        return this.normalizedSelected;
    },
    
    // Setter for selected items (normalizes before storing)
    set selected(value) {
        if (this._syncing) return;
        
        const newValue = this.normalizeArray(value);
        const currentValue = this.normalizedSelected;
        
        if (JSON.stringify(currentValue) !== JSON.stringify(newValue)) {
            this._selected = newValue;
            this.syncWithLivewire();
        }
    },
    
    // Get normalized selected items (unique and properly typed)
    get normalizedSelected() {
        if (!this._selected || !Array.isArray(this._selected)) return [];
        return [...new Set(this._selected.map(id => parseInt(id)).filter(id => !isNaN(id) && id > 0))];
    },
    
    // Normalize array of IDs (remove duplicates and ensure numbers)
    normalizeArray(arr) {
        if (!arr || !Array.isArray(arr)) return [];
        return [...new Set(arr.map(id => parseInt(id)).filter(id => !isNaN(id) && id > 0))];
    },
    
    // Sync the current selection with Livewire state
    syncWithLivewire() {
        if (typeof $wire === 'undefined' || this._syncing) return;
        
        const currentValue = this.normalizedSelected;
        
        // Only sync if there are actual changes
        if (JSON.stringify(currentValue) !== JSON.stringify(this._lastSyncedValue)) {
            this._syncing = true;
            
            try {
                $wire.set('{{ $getStatePath() }}', currentValue, false);
                this._lastSyncedValue = [...currentValue];
            } catch (e) {
                console.error('Error syncing with Livewire:', e);
            } finally {
                setTimeout(() => { this._syncing = false; }, 50);
            }
        }
    },
    init() {
        if (this._initialized) return;
        this._initialized = true;
        
        // Set initial value from PHP
        const initialValue = this._initialValue || [];
        
        // Set initial value without triggering sync
        this._syncing = true;
        this._selected = this.normalizeArray(initialValue);
        
        // Allow syncs after a small delay
        setTimeout(() => {
            this._syncing = false;
        }, 50);
    },
    performances: @js($performances->mapWithKeys(function($p) use ($creditService) {
        return [$p->id => [
            'name' => $p->option,
            'credit_value' => (float)$p->credit_value,
            'money_value' => (float)$creditService->creditsToMoney($p->credit_value)
        ]];
    })->toArray()),
    userBalance: {{ $userBalance }},
    isAdmin: {{ auth()->user()->is_admin ? 'true' : 'false' }},
    canPurchaseCredits: {{ $canPurchaseCredits ? 'true' : 'false' }},
    hasEnoughCredits(id) {
        if (!this.canPurchaseCredits || this.isAdmin) return true;
        const performance = this.performances[id];
        if (!performance) return false;
        return this.userBalance >= performance.credit_value;
    },
    toggle(id, fromButton = false) {
        // Prevent default behavior if not from button
        if (!fromButton && event) {
            event.preventDefault();
            event.stopPropagation();
        }
        
        // Ensure ID is a number
        id = parseInt(id);
        if (isNaN(id)) return;
        
        const performance = this.performances[id];
        if (!performance) return false;
        
        const idNum = parseInt(id);
        
        // Obter array atual já normalizado (usar _selected para evitar loop)
        let currentSelected = this.normalizeArray(this._selected);
        const index = currentSelected.indexOf(idNum);
        
        // Se já está selecionado, remover
        if (index > -1) {
            currentSelected.splice(index, 1);
        } else {
            // Verificar se precisa verificar créditos antes de adicionar
            if (this.canPurchaseCredits && !this.isAdmin) {
                if (performance.credit_value > 0 && !this.hasEnoughCredits(id)) {
                    if (!fromButton) {
                        $wire.dispatch('notify', {
                            title: 'Crédito Insuficiente',
                            message: 'Você não possui créditos suficientes para adicionar este serviço.',
                            type: 'warning'
                        });
                    }
                    return false;
                }
            }
            
            // Adicionar o item ao array único
            currentSelected.push(idNum);
        }
        
        // Atualizar _selected diretamente (setter normaliza automaticamente)
        this._selected = currentSelected;
        $wire.set('{{ $getStatePath() }}', currentSelected, false);
        
        return true;
    },
    removeService(id) {
        const idNum = parseInt(id);
        
        // Obter array atual já normalizado
        let currentSelected = this.normalizeArray(this._selected);
        
        // Remover o item
        const updated = currentSelected.filter(item => item !== idNum);
        
        // Atualizar _selected diretamente
        this._selected = updated;
        
        // Sincronizar com Livewire
        $wire.set('{{ $getStatePath() }}', updated, false);
    },
    isSelected(id) {
        const normalized = this.normalizedSelected;
        if (!normalized || normalized.length === 0) return false;
        const idNum = parseInt(id);
        return normalized.includes(idNum);
    },
    calculateTotalCredits() {
        const normalized = this.normalizedSelected;
        if (!normalized || normalized.length === 0) return 0;
        let total = 0;
        normalized.forEach(id => {
            if (this.performances[id]) {
                total += parseFloat(this.performances[id].credit_value);
            }
        });
        return total;
    },
    calculateTotal() {
        const normalized = this.normalizedSelected;
        if (!normalized || normalized.length === 0) return 0;
        let total = 0;
        normalized.forEach(id => {
            if (this.performances[id]) {
                total += parseFloat(this.performances[id].money_value);
            }
        });
        return total;
    },
    formatNumber(num) {
        return num.toFixed(2).replace('.', ',');
    },
    openModal() {
        // Normalizar array ao abrir o modal para evitar duplicatas
        // Garantir que _selected está normalizado
        const normalized = this.normalizeArray(this._selected);
        this._selected = normalized;
        if (normalized.length > 0) {
            $wire.set('{{ $getStatePath() }}', normalized, false);
        }
        this.open = true;
    }
    }" class="space-y-2">
    {{-- O entangle já faz o binding automático, não precisa de input hidden --}}
    
    {{-- Botão para abrir modal --}}
    <button
        type="button"
        @click.prevent="openModal()"
        onclick="event.preventDefault(); event.stopPropagation();"
        class="inline-flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg transition-colors"
    >
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
        </svg>
        Selecionar Serviços
    </button>
    
    <div x-show="normalizedSelected && normalizedSelected.length > 0" class="mt-2" x-cloak>
        <div class="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
            <p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                <strong>Serviços selecionados:</strong>
            </p>
            <template x-if="normalizedSelected && normalizedSelected.length > 0">
                <div class="space-y-1">
                    <template x-for="id in normalizedSelected" :key="id">
                        <div class="flex items-center justify-between p-2 bg-white dark:bg-gray-700 rounded group">
                            <span class="text-sm text-gray-900 dark:text-white flex-1" x-text="performances[id] ? performances[id].name : ''"></span>
                            <button 
                                type="button"
                                @click.prevent="removeService(id)"
                                onclick="event.preventDefault(); event.stopPropagation();"
                                class="ml-2 p-1 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors flex-shrink-0"
                                title="Remover serviço"
                            >
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>
                    </template>
                </div>
            </template>
        </div>
    </div>

    {{-- Modal --}}
    <div 
        x-show="open"
        x-cloak
        @click.away="open = false"
        class="fixed inset-0 z-50 overflow-y-auto"
        style="display: none;"
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
    >
        {{-- Overlay --}}
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>

        {{-- Modal Container --}}
        <div class="flex min-h-full items-center justify-center p-4">
            <div 
                class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-hidden"
                @click.stop
                x-transition:enter="ease-out duration-300"
                x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            >
                {{-- Header --}}
                <div class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white">
                        Serviços Disponíveis
                    </h3>
                    <button 
                        type="button"
                        @click.prevent="open = false"
                        onclick="event.preventDefault(); event.stopPropagation();"
                        class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 transition-colors"
                    >
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>

                {{-- Content --}}
                <div class="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
                    @if($canPurchaseCredits)
                    {{-- Info Box com saldo do usuário --}}
                    <div class="mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                        <p class="text-sm text-blue-900 dark:text-blue-100">
                            <strong>Seu saldo:</strong> <span x-text="formatNumber(userBalance)"></span> créditos 
                            (R$ <span x-text="formatNumber(userBalance * 500)"></span>)
                        </p>
                    </div>
                    @endif
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @foreach($performances as $performance)
                            <label 
                                @click="toggle({{ $performance->id }}, true); return false;"
                                :class="{
                                    'cursor-not-allowed opacity-60': canPurchaseCredits && !isAdmin && !hasEnoughCredits({{ $performance->id }}),
                                    'cursor-pointer': !(canPurchaseCredits && !isAdmin && !hasEnoughCredits({{ $performance->id }}))
                                }"
                            >
                            <div 
                                class="border-2 rounded-lg p-4 transition-all relative flex flex-col"
                                style="overflow: hidden; word-wrap: break-word;"
                                :class="isSelected({{ $performance->id }}) ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20' : (canPurchaseCredits && !isAdmin && !hasEnoughCredits({{ $performance->id }}) ? 'border-gray-300 bg-gray-50 dark:bg-gray-800' : 'border-gray-200 dark:border-gray-700 hover:shadow-md')"
                            >
                                <div class="flex items-start justify-between flex-1" style="min-width: 0;">
                                    <div class="flex-1" style="min-width: 0; overflow: hidden;">
                                        <div class="flex items-start gap-2 mb-2" style="min-width: 0;">
                                            <div 
                                                class="w-5 h-5 border-2 rounded flex items-center justify-center transition-colors flex-shrink-0 mt-0.5"
                                                :class="isSelected({{ $performance->id }}) ? 'bg-primary-500 border-primary-500' : 'border-gray-300 dark:border-gray-600'"
                                            >
                                                <svg 
                                                    x-show="isSelected({{ $performance->id }})"
                                                    class="w-3 h-3 text-white" 
                                                    fill="currentColor" 
                                                    viewBox="0 0 20 20"
                                                >
                                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                                </svg>
                                            </div>
                                            <h4 class="font-semibold" style="word-break: break-word; overflow-wrap: break-word; hyphens: auto; min-width: 0; flex: 1;" :class="isSelected({{ $performance->id }}) ? 'text-black dark:text-black' : 'text-gray-900 dark:text-white'">
                                                {{ $performance->option }}
                                            </h4>
                                        </div>
                                        
                                        @if($canPurchaseCredits)
                                        {{-- Valores do serviço --}}
                                        <div class="ml-7 mt-2 space-y-1">
                                            <p class="text-sm text-gray-600 dark:text-gray-400">
                                                <strong>Créditos:</strong> <span x-text="formatNumber(performances[{{ $performance->id }}].credit_value)"></span>
                                            </p>
                                            <p class="text-sm text-gray-600 dark:text-gray-400">
                                                <strong>Valor:</strong> R$ <span x-text="formatNumber(performances[{{ $performance->id }}].money_value)"></span>
                                            </p>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                                
                                @if($canPurchaseCredits && !auth()->user()->is_admin)
                                {{-- Badge de crédito insuficiente com botão para adicionar créditos --}}
                                <div x-show="!hasEnoughCredits({{ $performance->id }})" class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
                                    <div class="grid grid-cols-2 gap-2">
                                        <span class="inline-flex items-center justify-center px-5 py-2 rounded-lg text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
                                            Crédito Insuficiente
                                        </span>
                                        <a 
                                            href="/comprar-creditos" 
                                            target="_blank"
                                            class="inline-flex items-center justify-center px-4 py-2 text-xs font-medium text-white bg-primary-600 hover:bg-primary-700 rounded-lg transition-colors"
                                            onclick="event.stopPropagation();"
                                        >
                                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                                            </svg>
                                            Adicionar Créditos
                                        </a>
                                    </div>
                                </div>
                                @endif
                            </div>
                            </label>
                        @endforeach
                    </div>
                    
                    @if($performances->isEmpty())
                        <div class="text-center py-8 text-gray-500 dark:text-gray-400">
                            <p>Nenhum serviço disponível no momento.</p>
                        </div>
                    @endif
                </div>

                {{-- Footer --}}
                <div class="p-6 border-t border-gray-200 dark:border-gray-700">
                    @if($canPurchaseCredits)
                    {{-- Resumo de seleção --}}
                    <div x-show="normalizedSelected && normalizedSelected.length > 0" class="mb-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg" x-cloak>
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Total de créditos:</span>
                            <span class="text-lg font-bold text-gray-900 dark:text-white" x-text="formatNumber(calculateTotalCredits())"></span>
                        </div>
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Valor total:</span>
                            <span class="text-lg font-bold text-primary-600 dark:text-primary-400">R$ <span x-text="formatNumber(calculateTotal())"></span></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Seu saldo:</span>
                            <span class="text-sm text-gray-600 dark:text-gray-400" x-text="formatNumber(userBalance)"></span>
                        </div>
                    </div>
                    @endif
                    
                    <div class="flex items-center justify-end">
                        <button 
                            type="button"
                            @click.prevent="open = false"
                            onclick="event.preventDefault(); event.stopPropagation();"
                            class="px-6 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition-colors"
                        >
                            Fechar
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</x-dynamic-component>