<div>
    {{-- Mensaje de éxito --}}
    @if(session('mensaje'))
        <div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-md mb-4">
            ✓ {{ session('mensaje') }}
        </div>
    @endif

    {{-- Mensaje de error --}}
    @if(session('error'))
        <div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-md mb-4">
            ⚠ {{ session('error') }}
        </div>
    @endif

    {{-- Banner si caso ya está judicializado --}}
    @if($caso->estado === 'judicializado' && $caso->proceso_juridico_id)
        <div class="bg-blue-50 border border-blue-300 text-blue-900 px-4 py-3 rounded-md mb-4 flex items-center justify-between">
            <div>
                <strong>⚖ Este caso ya fue judicializado</strong>
                @if($caso->fecha_judicializacion)
                    <span class="ml-2 text-sm">el {{ \Carbon\Carbon::parse($caso->fecha_judicializacion)->format('d/m/Y') }}</span>
                @endif
            </div>
            <a href="{{ route('procesos.show', $caso->proceso_juridico_id) }}" wire:navigate
                class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-md transition">
                Ver proceso jurídico →
            </a>
        </div>
    @endif

    {{-- Encabezado del caso --}}
    <div class="flex items-start justify-between mb-6">
        <div>
            <h1 class="text-3xl font-mono font-bold text-gray-800">{{ $caso->radicado }}</h1>
            <p class="text-sm text-gray-500 mt-1">Creado el {{ $caso->created_at?->format('d/m/Y H:i') }}</p>
        </div>
        <a href="{{ route('casos-prejuridicos.index') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">
            ← Volver
        </a>
    </div>

    {{-- 3 tarjetas: Tipo, Estado, Total deuda --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
            <div class="text-xs text-gray-500 uppercase mb-2">Tipo</div>
            <span class="inline-flex items-center px-3 py-1 rounded-md text-sm font-semibold bg-yellow-100 text-yellow-800">
                Prejudicial
            </span>
        </div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
            <div class="text-xs text-gray-500 uppercase mb-2">Estado actual</div>
            <div class="text-lg font-bold text-gray-800 uppercase">
                {{ strtoupper($caso->etapa_label) }}
            </div>
        </div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
            <div class="text-xs text-gray-500 uppercase mb-2">Total deuda</div>
            <div class="text-2xl font-bold text-green-600">
                ${{ number_format((float)$caso->total_deuda, 0, ',', '.') }}
            </div>
        </div>
    </div>

    {{-- Stepper de 6 etapas --}}
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
        <div class="flex justify-between items-start mb-6">
            <h2 class="text-lg font-bold text-gray-800">Estado del proceso Prejurídico</h2>
            <div class="flex items-center gap-2">
                <select wire:model="etapaSeleccionada"
                    class="border-gray-300 rounded-md text-sm focus:ring-blue-500 focus:border-blue-500">
                    @foreach($etapasLabel as $slug => $label)
                        <option value="{{ $slug }}">{{ $label }}</option>
                    @endforeach
                </select>
                <button type="button" wire:click="actualizarEtapa"
                    class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-md transition">
                    Actualizar
                </button>
            </div>
        </div>

        {{-- Visual del stepper --}}
        <div class="relative">
            <div class="absolute top-5 left-0 right-0 h-0.5 bg-gray-200"></div>
            <div class="relative flex justify-between">
                @foreach($etapasLabel as $slug => $label)
                    @php
                        $idx = $loop->index;
                        $esActual = ($slug === $caso->etapa);
                        $esPasada = ($idx < $this->indiceEtapaActual);
                        $colorCirculo = $esActual ? 'bg-blue-600 text-white' : ($esPasada ? 'bg-blue-200 text-blue-800' : 'bg-gray-200 text-gray-500');
                        $colorTexto = $esActual ? 'text-blue-600 font-semibold' : 'text-gray-500';
                    @endphp
                    <div class="flex flex-col items-center" style="width: 16%;">
                        <div class="w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold {{ $colorCirculo }} z-10">
                            {{ $idx + 1 }}
                        </div>
                        <div class="text-xs text-center mt-2 {{ $colorTexto }}">
                            {{ $label }}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Dos paneles: Deudor e Información financiera --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        {{-- Deudor --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <h3 class="text-lg font-bold text-gray-800 mb-4">Deudor</h3>
            @if($caso->deudor)
                <div class="space-y-3">
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-500">Nombre</span>
                        <span class="text-sm font-semibold text-gray-800 text-right">{{ $caso->deudor->nombre_completo }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-500">Documento</span>
                        <span class="text-sm font-semibold text-gray-800">{{ $caso->deudor->tipo_documento }} {{ $caso->deudor->numero_documento }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-500">Teléfono</span>
                        <span class="text-sm font-semibold text-gray-800">{{ $caso->deudor->telefono ?? '—' }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-500">Email</span>
                        <span class="text-sm font-semibold text-gray-800">{{ $caso->deudor->email ?? '—' }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-500">Ciudad</span>
                        <span class="text-sm font-semibold text-gray-800">{{ $caso->deudor->ciudad ?? '—' }}</span>
                    </div>
                    <div class="flex justify-between border-t pt-3">
                        <span class="text-sm text-gray-500">Asesor responsable</span>
                        <span class="text-sm font-semibold text-gray-800">
                            @if($caso->responsable)
                                {{ $caso->responsable->name }}
                            @else
                                <span class="text-gray-400 italic">Sin asignar</span>
                            @endif
                        </span>
                    </div>
                </div>
            @else
                <p class="text-sm text-gray-500">Sin deudor asociado.</p>
            @endif
        </div>

        {{-- Información financiera --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <h3 class="text-lg font-bold text-gray-800 mb-4">Información financiera</h3>
            <div class="space-y-3">
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">Entidad</span>
                    <span class="text-sm font-semibold text-gray-800">{{ $caso->clienteCorporativo->nombre ?? '—' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">Producto</span>
                    <span class="text-sm font-semibold text-gray-800">
                        @if($caso->producto)
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 text-indigo-800">
                                {{ $caso->producto_label }}
                            </span>
                        @else
                            <span class="text-gray-400 italic">—</span>
                        @endif
                    </span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">Nro. Obligación</span>
                    <span class="text-sm font-semibold text-gray-800 font-mono">
                        {{ $caso->numero_obligacion ?? '—' }}
                    </span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">Nro. Pagaré</span>
                    <span class="text-sm font-semibold text-gray-800 font-mono">
                        {{ $caso->numero_pagare ?? '—' }}
                    </span>
                </div>
                <div class="flex justify-between border-t pt-3">
                    <span class="text-sm text-gray-500">Saldo capital</span>
                    <span class="text-sm font-semibold text-gray-800">${{ number_format((float)$caso->saldo_capital, 0, ',', '.') }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">Intereses</span>
                    <span class="text-sm font-semibold text-gray-800">${{ number_format((float)$caso->intereses, 0, ',', '.') }}</span>
                </div>
                <div class="flex justify-between border-t pt-3">
                    <span class="text-sm font-bold text-gray-800">Total deuda</span>
                    <span class="text-sm font-bold text-green-600">${{ number_format((float)$caso->total_deuda, 0, ',', '.') }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">Días en mora</span>
                    <span class="text-sm font-semibold text-gray-800">{{ $caso->dias_mora }}</span>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════ B3b.1 Acuerdos de Pago (read-only) ═══════════ --}}
    @if($caso->procesoJuridico && $caso->procesoJuridico->acuerdos->count() > 0)
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-bold text-gray-800">💼 Acuerdos de Pago</h3>
                <a href="{{ route('procesos.show', $caso->procesoJuridico) }}"
                   class="text-sm text-blue-600 hover:text-blue-800 font-medium">
                    🔗 Ver proceso #{{ $caso->procesoJuridico->id }} →
                </a>
            </div>
            <p class="text-sm text-gray-600 mb-4">
                Este caso tiene <strong>{{ $caso->procesoJuridico->acuerdos->count() }}</strong>
                acuerdo(s) asociado(s) al proceso jurídico vinculado.
            </p>
            <div class="space-y-3">
                @foreach($caso->procesoJuridico->acuerdos as $acuerdo)
                    <div class="border border-gray-200 rounded-lg p-4 bg-gray-50">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center gap-3">
                                <span class="font-semibold text-gray-800">Acuerdo #{{ $acuerdo->id }}</span>
                                <span class="text-xs text-gray-500">·</span>
                                <span class="text-sm text-gray-700">{{ $acuerdo->tipo_acuerdo_label }}</span>
                                <span class="text-xs text-gray-500">·</span>
                                <span class="px-2 py-0.5 rounded text-xs font-semibold
                                    {{ $acuerdo->estado_color === 'green' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $acuerdo->estado_color === 'red' ? 'bg-red-100 text-red-800' : '' }}
                                    {{ $acuerdo->estado_color === 'gray' ? 'bg-gray-200 text-gray-800' : '' }}
                                    {{ $acuerdo->estado_color === 'blue' ? 'bg-blue-100 text-blue-800' : '' }}">
                                    {{ $acuerdo->estado_label }}
                                </span>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                            <div>
                                <div class="text-gray-500 text-xs">Monto</div>
                                <div class="font-semibold text-gray-800">${{ number_format($acuerdo->monto_acordado, 0, ',', '.') }}</div>
                            </div>
                            <div>
                                <div class="text-gray-500 text-xs">Cuotas</div>
                                <div class="font-semibold text-gray-800">{{ $acuerdo->numero_cuotas }} ({{ ucfirst($acuerdo->periodicidad) }})</div>
                            </div>
                            <div>
                                <div class="text-gray-500 text-xs">Pagadas</div>
                                <div class="font-semibold text-gray-800">{{ $acuerdo->cuotas_pagadas_count }}/{{ $acuerdo->numero_cuotas }}</div>
                            </div>
                            <div>
                                <div class="text-gray-500 text-xs">Saldo pendiente</div>
                                <div class="font-semibold text-gray-800">${{ number_format($acuerdo->saldo_pendiente, 0, ',', '.') }}</div>
                            </div>
                        </div>
                        @if($acuerdo->cuotas_vencidas_count > 0)
                            <div class="mt-3 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-3 py-2">
                                ⚠️ {{ $acuerdo->cuotas_vencidas_count }} cuota(s) vencida(s)
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
            <div class="mt-4 text-xs text-gray-500 italic">
                ℹ️ Solo lectura desde prejurídico. Edición disponible en el proceso jurídico vinculado.
            </div>
        </div>
    @endif

    {{-- ═══════════ Acciones del caso (Judicializar) ═══════════ --}}
    @if($caso->estado === 'activo')
        <div class="bg-white rounded-lg shadow-sm border-2 border-red-100 p-6 mb-6">
            <div class="flex items-center justify-between gap-4">
                <div class="flex-1">
                    <h3 class="text-lg font-bold text-gray-800">Acciones del caso</h3>
                    <p class="text-sm text-gray-600 mt-1">
                        Si la gestión prejurídica no logra resultado, este caso puede convertirse en un <strong>proceso jurídico</strong> (demanda).
                        Esta acción es irreversible y crea un nuevo registro en el módulo Proceso Jurídico.
                    </p>
                </div>
                <button type="button" wire:click="abrirModalJudicializar"
                    class="px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-md transition shadow-sm flex items-center gap-2 whitespace-nowrap">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/>
                    </svg>
                    Judicializar caso
                </button>
            </div>
        </div>
    @endif

    {{-- ═══════════ MODAL DE CONFIRMACIÓN JUDICIALIZAR (con fecha demanda + motivo - A5) ═══════════ --}}
    @if($showJudicializarModal)
        <div class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 overflow-y-auto" wire:key="modal-judicializar">
            <div class="bg-white rounded-lg shadow-xl max-w-lg w-full p-6 my-8">
                <h3 class="text-xl font-bold text-gray-800 mb-3">⚖ Confirmar judicialización</h3>
                <p class="text-sm text-gray-600 mb-4">
                    Esta acción creará un nuevo proceso jurídico asociado a este caso prejurídico.
                </p>

                <div class="bg-yellow-50 border border-yellow-200 rounded-md p-3 mb-4">
                    <p class="text-sm text-yellow-800">
                        <strong>⚠ Atención:</strong> Esta acción es <strong>irreversible</strong>. Una vez judicializado,
                        el caso no puede volver a gestión prejurídica.
                    </p>
                </div>

                <div class="bg-gray-50 rounded-md p-3 mb-4 space-y-1">
                    <div class="text-sm"><strong>Radicado prejurídico:</strong> {{ $caso->radicado }}</div>
                    <div class="text-sm"><strong>Deudor:</strong> {{ $caso->deudor->nombre_completo ?? '—' }}</div>
                    <div class="text-sm"><strong>Entidad:</strong> {{ $caso->clienteCorporativo->nombre ?? '—' }}</div>
                    <div class="text-sm"><strong>Total deuda:</strong> ${{ number_format((float)$caso->total_deuda, 0, ',', '.') }}</div>
                </div>

                {{-- ═══ A5: Campo Fecha de presentación de la demanda ═══ --}}
                <div class="mb-4">
                    <label for="fechaDemanda" class="block text-sm font-semibold text-gray-700 mb-1">
                        Fecha de presentación de la demanda <span class="text-red-500">*</span>
                    </label>
                    <input type="date"
                        id="fechaDemanda"
                        wire:model="fechaDemanda"
                        max="{{ now()->toDateString() }}"
                        class="w-full border-gray-300 rounded-md text-sm focus:ring-red-500 focus:border-red-500 @error('fechaDemanda') border-red-500 @enderror">
                    @error('fechaDemanda')
                        <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- ═══ A5: Campo Motivo del escalamiento ═══ --}}
                <div class="mb-4">
                    <label for="motivoEscalamiento" class="block text-sm font-semibold text-gray-700 mb-1">
                        Motivo del escalamiento <span class="text-red-500">*</span>
                    </label>
                    <textarea
                        id="motivoEscalamiento"
                        wire:model="motivoEscalamiento"
                        rows="3"
                        maxlength="1000"
                        placeholder="Ej: Deudor no contesta llamadas, no responde WhatsApp, gestión prejudicial agotada, se requiere proceso ejecutivo..."
                        class="w-full border-gray-300 rounded-md text-sm focus:ring-red-500 focus:border-red-500 @error('motivoEscalamiento') border-red-500 @enderror"></textarea>
                    <div class="flex justify-between items-center mt-1">
                        @error('motivoEscalamiento')
                            <p class="text-xs text-red-600">{{ $message }}</p>
                        @else
                            <p class="text-xs text-gray-500">Mínimo 10 caracteres. Quedará registrado en las observaciones del proceso jurídico.</p>
                        @enderror
                        <p class="text-xs text-gray-400">{{ strlen($motivoEscalamiento) }}/1000</p>
                    </div>
                </div>

                <p class="text-sm text-gray-600 mb-4">
                    El historial de gestiones prejurídicas se conservará como evidencia.
                    El proceso jurídico se creará en estado <strong>Recepción</strong> con un radicado interno YBER nuevo.
                </p>

                <div class="flex justify-end gap-2">
                    <button type="button" wire:click="cerrarModalJudicializar"
                        class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-800 text-sm font-semibold rounded-md transition">
                        Cancelar
                    </button>
                    <button type="button" wire:click="judicializar"
                        wire:loading.attr="disabled"
                        wire:target="judicializar"
                        class="px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-red-300 text-white text-sm font-semibold rounded-md transition">
                        <span wire:loading.remove wire:target="judicializar">Sí, judicializar caso</span>
                        <span wire:loading wire:target="judicializar">Judicializando...</span>
                    </button>
                </div>
            </div>
        </div>
    @endif

    {{-- Componente de Registro de Gestión + Historial --}}
    <livewire:casos-prejuridicos.registro-gestion :caso="$caso" :key="'registro-gestion-'.$caso->id" />
</div>
