<div class="max-w-full">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h3 class="text-lg font-medium text-gray-900">Estados de Documentos</h3>
            <p class="text-sm text-gray-600">Configura los estados disponibles para los documentos de este proyecto</p>
        </div>
        
        <button type="button" 
                wire:click="openForm"
                class="btn btn-primary">
            <x-icons icon = "plus" class="w-4 h-4 mr-2" /> Nuevo Estado
        </button>
    </div>

    <!-- Lista de estados -->
    <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
    @if(false)
        @if(count($statuses) > 0)
            <div class="divide-y divide-gray-200">
                @foreach($statuses as $status)
                    <div class="p-4 hover:bg-gray-50 transition-colors" 
                         wire:key="status-{{ $status['id'] }}">
                        <div class="flex items-center justify-between">
                            <!-- Información del estado -->
                            <div class="flex items-center space-x-4">
                                <!-- Badge de color -->
                                <div class="flex items-center">
                                    <div class="w-10 h-10 rounded-full border flex items-center justify-center"
                                         style="background-color: {{ $status['color'] }}; color: {{ $status['text_color'] }}"
                                         title="{{ $status['name'] }}">
                                        <span class="font-bold text-sm">
                                            {{ substr($status['name'], 0, 2) }}
                                        </span>
                                    </div>
                                </div>
                                
                                <!-- Detalles -->
                                <div>
                                    <div class="flex items-center space-x-2">
                                        <span class="font-medium text-gray-900">{{ $status['name'] }}</span>
                                        @if($status['is_default'])
                                            <span class="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">
                                                Por defecto
                                            </span>
                                        @endif
                                    </div>
                                    
                                    @if($status['description'])
                                        <p class="text-sm text-gray-600 mt-1">{{ $status['description'] }}</p>
                                    @endif
                                    
                                    <!-- Permisos -->
                                    <div class="flex flex-wrap gap-2 mt-2">
                                        @if($status['allow_upload'])
                                            <span class="inline-flex items-center px-2 py-1 rounded text-xs bg-green-50 text-green-700">
                                                <x-icons icon = "upload" class="w-3 h-3 mr-1" /> Subir
                                            </span>
                                        @endif
                                        
                                        @if($status['allow_edit'])
                                            <span class="inline-flex items-center px-2 py-1 rounded text-xs bg-blue-50 text-blue-700">
                                                <x-icons icon = "pencil" class="w-3 h-3 mr-1" /> Editar
                                            </span>
                                        @endif
                                        
                                        @if($status['allow_delete'])
                                            <span class="inline-flex items-center px-2 py-1 rounded text-xs bg-red-50 text-red-700">
                                                <x-icons icon = "trash" class="w-3 h-3 mr-1" /> Eliminar
                                            </span>
                                        @endif
                                        
                                        @if($status['requires_approval'])
                                            <span class="inline-flex items-center px-2 py-1 rounded text-xs bg-yellow-50 text-yellow-700">
                                                <x-icons icon = "shield-check" class="w-3 h-3 mr-1" /> Aprobación
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Acciones -->
                            <div class="flex items-center space-x-2">
                                <!-- Botones de orden -->
                                <div class="flex space-x-1">
                                    <button type="button"
                                            wire:click="moveUp({{ $status['id'] }})"
                                            {{ $loop->first ? 'disabled' : '' }}
                                            class="p-1 {{ $loop->first ? 'text-gray-300 cursor-not-allowed' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded' }}"
                                            title="Mover hacia arriba">
                                        <x-icons icon = "arrow-up" class="w-4 h-4" />
                                    </button>
                                    
                                    <button type="button"
                                            wire:click="moveDown({{ $status['id'] }})"
                                            {{ $loop->last ? 'disabled' : '' }}
                                            class="p-1 {{ $loop->last ? 'text-gray-300 cursor-not-allowed' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded' }}"
                                            title="Mover hacia abajo">
                                        <x-icons icon = "arrow-down" class="w-4 h-4" />
                                    </button>
                                </div>
                                
                                <!-- Botón editar -->
                                <button type="button"
                                        wire:click="openForm({{ $status['id'] }})"
                                        class="p-1 text-yellow-600 hover:text-yellow-900 hover:bg-yellow-50 rounded"
                                        title="Editar estado">
                                    <x-icons icon = "pencil" class="w-4 h-4" />
                                </button>
                                
                                <!-- Botón eliminar -->
                                @if(!$status['is_default'])
                                    <button type="button"
                                            wire:click="confirmDelete({{ $status['id'] }})"
                                            class="p-1 text-red-600 hover:text-red-900 hover:bg-red-50 rounded"
                                            title="Eliminar estado">
                                        <x-icons icon = "trash" class="w-4 h-4" />
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="p-8 text-center text-gray-500">
                <x-icons icon = "document-text" class="w-12 h-12 mx-auto text-gray-300 mb-4" />
                <p class="mb-4">No hay estados configurados para este proyecto.</p>
                <button type="button" 
                        wire:click="openForm"
                        class="btn btn-primary">
                    <x-icons icon = "plus" class="w-4 h-4 mr-2" /> Crear primer estado
                </button>
            </div>
        @endif
    </div>
    @endif

    <!-- Formulario para crear/editar estado -->
    <div x-data="{ showForm: @entangle('showForm') }" 
         x-show="showForm"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 transform scale-95"
         x-transition:enter-end="opacity-100 transform scale-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100 transform scale-100"
         x-transition:leave-end="opacity-0 transform scale-95"
         class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
        
        <div class="bg-white rounded-lg shadow-xl w-full max-w-md max-h-[90vh] overflow-y-auto">
            <!-- Header del modal -->
            <div class="border-b px-6 py-4">
                <h3 class="text-lg font-medium text-gray-900">
                    {{ $formData['id'] ? 'Editar Estado' : 'Crear Nuevo Estado' }}
                </h3>
            </div>
            
            <!-- Formulario -->
            <form wire:submit.prevent="saveStatus" class="p-6">
                <!-- Nombre -->
                <div class="mb-4">
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">
                        Nombre del Estado *
                    </label>
                    <input type="text"
                           id="name"
                           wire:model="formData.name"
                           required
                           class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                    @error('formData.name')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                
                <!-- Colores -->
                <div class="grid grid-cols-2 gap-4 mb-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Color de fondo
                        </label>
                        <div class="flex items-center space-x-2">
                            <input type="color"
                                   wire:model="formData.color"
                                   class="w-10 h-10 p-1 border border-gray-300 rounded">
                            <input type="text"
                                   wire:model="formData.color"
                                   maxlength="7"
                                   class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        @error('formData.color')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Color del texto
                        </label>
                        <div class="flex items-center space-x-2">
                            <input type="color"
                                   wire:model="formData.text_color"
                                   class="w-10 h-10 p-1 border border-gray-300 rounded">
                            <input type="text"
                                   wire:model="formData.text_color"
                                   maxlength="7"
                                   class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        @error('formData.text_color')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
                
                <!-- Previsualización -->
                <div class="mb-4 p-3 bg-gray-50 rounded-lg">
                    <p class="text-sm font-medium text-gray-700 mb-2">Previsualización:</p>
                    <div class="flex items-center space-x-2">
                        <span class="px-3 py-1 rounded-full text-sm font-medium"
                              style="background-color: {{ $formData['color'] }}; color: {{ $formData['text_color'] ?: '#ffffff' }}">
                            {{ $formData['name'] ?: 'Nombre del estado' }}
                        </span>
                        <span class="text-sm text-gray-500">(Esto es cómo se verá)</span>
                    </div>
                </div>
                
                <!-- Descripción -->
                <div class="mb-4">
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-1">
                        Descripción
                    </label>
                    <textarea id="description"
                              wire:model="formData.description"
                              rows="3"
                              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
                    @error('formData.description')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                
                <!-- Permisos -->
                <div class="mb-4">
                    <p class="text-sm font-medium text-gray-700 mb-2">Permisos:</p>
                    <div class="grid grid-cols-2 gap-3">
                        <label class="flex items-center space-x-2">
                            <input type="checkbox"
                                   wire:model="formData.allow_upload"
                                   class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <span class="text-sm text-gray-700">Permitir subida</span>
                        </label>
                        
                        <label class="flex items-center space-x-2">
                            <input type="checkbox"
                                   wire:model="formData.allow_edit"
                                   class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <span class="text-sm text-gray-700">Permitir edición</span>
                        </label>
                        
                        <label class="flex items-center space-x-2">
                            <input type="checkbox"
                                   wire:model="formData.allow_delete"
                                   class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <span class="text-sm text-gray-700">Permitir eliminación</span>
                        </label>
                        
                        <label class="flex items-center space-x-2">
                            <input type="checkbox"
                                   wire:model="formData.requires_approval"
                                   class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <span class="text-sm text-gray-700">Requiere aprobación</span>
                        </label>
                    </div>
                </div>
                
                <!-- Estado por defecto -->
                <div class="mb-6">
                    <label class="flex items-center space-x-2">
                        <input type="checkbox"
                               wire:model="formData.is_default"
                               class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        <span class="text-sm text-gray-700">Estado por defecto para nuevos documentos</span>
                    </label>
                    <p class="mt-1 text-sm text-gray-500">
                        Solo puede haber un estado por defecto. Si marcas este, se desmarcará automáticamente el anterior.
                    </p>
                </div>
                
                <!-- Botones -->
                <div class="flex justify-end space-x-3">
                    <button type="button"
                            wire:click="closeForm"
                            class="btn btn-secondary">
                        Cancelar
                    </button>
                    <button type="submit"
                            class="btn btn-primary">
                        {{ $formData['id'] ? 'Actualizar Estado' : 'Crear Estado' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- Modal de confirmación para eliminar -->
    <div x-data="{ showDeleteModal: @entangle('showDeleteModal') }" 
         x-show="showDeleteModal"
         x-transition
         class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
        
        <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
            <div class="border-b px-6 py-4">
                <h3 class="text-lg font-medium text-gray-900">Confirmar eliminación</h3>
            </div>
            
            <div class="p-6">
                <p class="text-gray-700 mb-4">
                    ¿Estás seguro de que deseas eliminar el estado 
                    <strong>"{{ $statusToDelete->name ?? '' }}"</strong>?
                </p>
                
                @if($statusToDelete && $statusToDelete->documents()->exists())
                    <div class="mb-4 p-3 bg-red-50 border border-red-200 rounded">
                        <p class="text-sm text-red-700">
                            <x-icons icon = "exclamation" class="w-4 h-4 inline mr-1" />
                            No se puede eliminar porque hay documentos asociados a este estado.
                        </p>
                    </div>
                @endif
                
                <div class="flex justify-end space-x-3">
                    <button type="button"
                            wire:click="closeDeleteModal"
                            class="btn btn-secondary">
                        Cancelar
                    </button>
                    
                    @if(!($statusToDelete && $statusToDelete->documents()->exists()))
                        <button type="button"
                                wire:click="deleteStatus"
                                class="btn btn-danger">
                            Eliminar Estado
                        </button>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

