<x-fempha-layout>
    <x-slot name="header">
        <h2 class="text-xl font-semibold text-gray-800">
            Aprobación Junta Directiva
        </h2>
    </x-slot>

    <div class="py-6 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        @if (session('success'))
            <div class="mb-4 p-4 bg-green-100 border border-green-300 text-green-800 rounded">
                {{ session('success') }}
            </div>
        @endif

        {{-- Buscador --}}
        <div class="mb-4">
            <input type="text"
                   wire:model.live.debounce.300ms="busqueda"
                   placeholder="Buscar por radicado o nombre del asociado..."
                   class="w-full border border-gray-300 rounded px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400" />
        </div>

        {{-- Modal de confirmación --}}
        @if ($solicitudId)
            <div class="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50">
                <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
                    <h3 class="text-lg font-semibold mb-2">
                        {{ $accion === 'aprobar' ? 'Aprobar solicitud' : 'Rechazar solicitud' }}
                    </h3>
                    <p class="text-sm text-gray-500 mb-4">
                        Ingresa las observaciones de la Junta para dejar trazabilidad.
                    </p>
                    <textarea wire:model="observaciones"
                              rows="4"
                              placeholder="Observaciones (mínimo 20 caracteres)..."
                              class="w-full border border-gray-300 rounded px-3 py-2 text-sm mb-1 focus:outline-none focus:ring-2 focus:ring-indigo-400"></textarea>
                    @error('observaciones')
                        <p class="text-red-500 text-xs mb-2">{{ $message }}</p>
                    @enderror
                    <div class="flex gap-3 mt-3 justify-end">
                        <button wire:click="cancelar"
                                class="px-4 py-2 text-sm border border-gray-300 rounded hover:bg-gray-50">
                            Cancelar
                        </button>
                        <button wire:click="ejecutarDecision"
                                class="px-4 py-2 text-sm text-white rounded
                                       {{ $accion === 'aprobar' ? 'bg-green-600 hover:bg-green-700' : 'bg-red-600 hover:bg-red-700' }}">
                            {{ $accion === 'aprobar' ? 'Confirmar aprobación' : 'Confirmar rechazo' }}
                        </button>
                    </div>
                </div>
            </div>
        @endif

        {{-- Tabla de solicitudes en acompañamiento --}}
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <table class="min-w-full divide-y divide-gray-200 text-sm">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left font-medium text-gray-500">Radicado</th>
                        <th class="px-4 py-3 text-left font-medium text-gray-500">Asociado</th>
                        <th class="px-4 py-3 text-left font-medium text-gray-500">Empresa</th>
                        <th class="px-4 py-3 text-right font-medium text-gray-500">Monto</th>
                        <th class="px-4 py-3 text-center font-medium text-gray-500">Puntaje</th>
                        <th class="px-4 py-3 text-center font-medium text-gray-500">Acciones</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse ($solicitudes as $solicitud)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 font-mono text-xs text-indigo-700">
                                {{ $solicitud->radicado }}
                            </td>
                            <td class="px-4 py-3">{{ $solicitud->asociado->name }}</td>
                            <td class="px-4 py-3 text-gray-600">{{ $solicitud->nombre_empresa ?? '—' }}</td>
                            <td class="px-4 py-3 text-right font-medium">
                                ${{ number_format($solicitud->monto_solicitado, 0, ',', '.') }}
                            </td>
                            <td class="px-4 py-3 text-center">
                                @if ($solicitud->evaluacion)
                                    <span class="inline-block px-2 py-0.5 rounded text-xs font-medium
                                        {{ $solicitud->evaluacion->puntaje_total >= 65 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                        {{ $solicitud->evaluacion->puntaje_total }}/100
                                    </span>
                                @else
                                    <span class="text-gray-400 text-xs">Sin evaluar</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-center">
                                <div class="flex gap-2 justify-center">
                                    <button wire:click="confirmar({{ $solicitud->id }}, 'aprobar')"
                                            class="px-3 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700">
                                        Aprobar
                                    </button>
                                    <button wire:click="confirmar({{ $solicitud->id }}, 'rechazar')"
                                            class="px-3 py-1 text-xs bg-red-600 text-white rounded hover:bg-red-700">
                                        Rechazar
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-8 text-center text-gray-400">
                                No hay solicitudes pendientes de aprobación por Junta.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
            <div class="px-4 py-3 border-t">
                {{ $solicitudes->links() }}
            </div>
        </div>
    </div>
</x-fempha-layout>
