@props(['solicitud'])

<x-modal name="ver-solicitud-{{ $solicitud->id }}" maxWidth="2xl">
    <div class="p-4 sm:p-6 text-left" x-data="{ tab: 'detalles' }">
        <h2 class="text-lg font-bold text-slate-800 mb-4 border-b pb-2 flex items-center justify-between">
            <span>Detalles de la Solicitud #{{ $solicitud->numero }}</span>
            <span class="text-sm font-normal text-slate-500">
                @php
                    $estadosMap = [
                        'I' => 'Ingresada',
                        'A' => 'Asignada',
                        'EE' => 'En Espera',
                        'CO' => 'Ejecutado/Por Conformar',
                        'CF' => 'Conformada',
                        'CE' => 'Cerrada',
                        'E' => 'Eliminada',
                    ];
                @endphp
                Estado: <span
                    class="font-semibold text-slate-700">{{ $estadosMap[$solicitud->estado] ?? $solicitud->estado }}</span>
            </span>
        </h2>

        <!-- Tabs -->
        <div class="flex border-b border-slate-200 mb-4">
            <button @click.prevent="tab = 'detalles'"
                :class="tab === 'detalles' ? 'border-b-2 border-indigo-500 text-indigo-600' : 'text-slate-500 hover:text-slate-700'"
                class="px-4 py-2 font-medium text-sm transition-colors duration-150 -mb-[1px]">
                Detalles Generales
            </button>
            @if($solicitud->auditLogs && $solicitud->auditLogs->count() > 0)
                <button @click.prevent="tab = 'historial'"
                    :class="tab === 'historial' ? 'border-b-2 border-indigo-500 text-indigo-600' : 'text-slate-500 hover:text-slate-700'"
                    class="px-4 py-2 font-medium text-sm transition-colors duration-150 -mb-[1px]">
                    Historial de Cambios
                </button>
            @endif
        </div>

        <div x-show="tab === 'detalles'">
            <div class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                <h4 class="text-xs font-bold text-blue-700 uppercase tracking-wider mb-3">Datos del Solicitante y
                    Ubicación</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <span class="block text-xs font-semibold text-slate-500 uppercase">Solicitante</span>
                        <span
                            class="text-sm font-medium text-slate-800">{{ optional($solicitud->usuario)->name ?? 'N/A' }}
                            {{ optional($solicitud->usuario)->apellido ?? '' }}</span>
                        <div class="mt-2 space-y-1">
                            <div class="mt-1 text-[11px] text-slate-500 leading-snug">
                                <span
                                    class="block">{{ optional(optional($solicitud->usuario)->gerencia)->nombre ?? 'Gerencia N/A' }}</span>
                                @if(optional($solicitud->usuario)->departamento)
                                    <span
                                        class="block text-slate-400 font-medium">{{ optional($solicitud->usuario->departamento)->nombre }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div>
                        <span class="block text-xs font-semibold text-slate-500 uppercase">Fecha de creación</span>
                        <span
                            class="text-sm font-medium text-slate-800">{{ $solicitud->created_at->format('d/m/Y h:i A') }}</span>
                        <span class="block text-xs font-semibold text-slate-500 uppercase mt-3">Última
                            actualización</span>
                        <span
                            class="text-sm font-medium text-slate-800">{{ $solicitud->updated_at->format('d/m/Y h:i A') }}</span>
                    </div>
                    <div>
                        <span class="block text-xs font-semibold text-slate-500 uppercase">Departamento Destino</span>
                        <span
                            class="text-sm font-medium text-slate-800">{{ optional($solicitud->departamento)->nombre ?? 'N/A' }}</span>
                    </div>
                    <div>
                        <span class="block text-xs font-semibold text-slate-500 uppercase">Área de trabajo
                            (Ubicación)</span>
                        <span
                            class="text-sm font-medium text-slate-800">{{ optional($solicitud->areaTrabajo)->nombre ?? 'N/A' }}</span>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-blue-200">
                    <span class="block text-xs font-semibold text-slate-500 uppercase mb-1">Descripción de la
                        Solicitud</span>
                    <div
                        class="p-3 bg-white border border-blue-100 rounded-lg text-sm text-slate-700 whitespace-pre-wrap">{{ $solicitud->descripcion }}</div>
                </div>

                @php
                    $obsOriginal = $solicitud->observaciones;
                    $obsConformacion = null;
                    $obsEnEspera = [];

                    // Extraer comentario de conformación si existe
                    if ($obsOriginal && str_contains($obsOriginal, '[Calificación del Usuario]:')) {
                        $parts = explode('[Calificación del Usuario]:', $obsOriginal);
                        $obsOriginal = trim($parts[0]);
                        $obsConformacion = trim($parts[1]);
                    }

                    // Extraer motivos de espera si existen (pueden ser varios)
                    if ($obsOriginal && str_contains($obsOriginal, '[En Espera]:')) {
                        $partsEspera = explode('[En Espera]:', $obsOriginal);
                        $obsOriginal = trim($partsEspera[0]);
                        for ($i = 1; $i < count($partsEspera); $i++) {
                            $obsEnEspera[] = trim($partsEspera[$i]);
                        }
                    }
                @endphp

                @if($obsOriginal)
                    <div class="mt-4">
                        <span class="block text-xs font-semibold text-slate-500 uppercase mb-1">Observaciones / Datos de
                            Contacto</span>
                        <div class="p-3 bg-rose-50 border border-rose-200 rounded-lg text-sm text-rose-800">{{ $obsOriginal }}</div>
                    </div>
                @endif
            </div>

            @if(!empty($obsEnEspera))
                <div class="mb-4">
                    <span class="block text-xs font-semibold text-slate-500 uppercase mb-1">Motivos de Suspensión (En
                        Espera)</span>
                    <div class="space-y-2">
                        @foreach($obsEnEspera as $espera)
                            <div class="p-3 bg-orange-50 border border-orange-100 rounded-lg text-sm text-orange-800 italic">
                                {{ $espera }}
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Solución aplicada y Técnico responsable --}}
            @if($solicitud->ejecuciones && $solicitud->ejecuciones->count() > 0)
                @php $ejecModal = $solicitud->ejecuciones->last(); @endphp
                <div class="mb-4 p-4 bg-emerald-50 border border-emerald-200 rounded-lg">
                    <h4 class="text-xs font-bold text-emerald-700 uppercase tracking-wider mb-3">Solución Aplicada</h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
                        <div>
                            <span class="block text-xs font-semibold text-slate-500 uppercase">Técnico Responsable</span>
                            <span class="text-sm font-medium text-slate-800">
                                {{ optional($ejecModal->analista)->name ?? 'N/A' }}
                                {{ optional($ejecModal->analista)->apellido ?? '' }}
                            </span>
                        </div>
                        <div>
                            <span class="block text-xs font-semibold text-slate-500 uppercase">Fecha de Resolución</span>
                            <span class="text-sm font-medium text-slate-800">
                                {{ $ejecModal->fecha_fin ? \Carbon\Carbon::parse($ejecModal->fecha_fin)->format('d/m/Y h:i A') : 'N/A' }}
                            </span>
                        </div>
                        @if($ejecModal->tiempo_dias > 0 || $ejecModal->tiempo_horas > 0 || $ejecModal->tiempo_minutos > 0)
                            <div class="col-span-2">
                                <span class="block text-xs font-semibold text-slate-500 uppercase">Tiempo de Actividad</span>
                                <span class="text-sm font-medium text-slate-800">
                                    @if($ejecModal->tiempo_dias > 0) {{ $ejecModal->tiempo_dias }} {{ $ejecModal->tiempo_dias == 1 ? 'día' : 'días' }}, @endif
                                    @if($ejecModal->tiempo_horas > 0) {{ $ejecModal->tiempo_horas }} {{ $ejecModal->tiempo_horas == 1 ? 'hora' : 'horas' }}, @endif
                                    @if($ejecModal->tiempo_minutos > 0) {{ $ejecModal->tiempo_minutos }} {{ $ejecModal->tiempo_minutos == 1 ? 'minuto' : 'minutos' }}@endif
                                </span>
                            </div>
                        @endif
                    </div>
                    <div>
                        <span class="block text-xs font-semibold text-slate-500 uppercase mb-1">Detalle de la
                            Solución</span>
                        <div
                            class="p-3 bg-white border border-emerald-100 rounded text-sm text-slate-700 whitespace-pre-wrap">{{ $ejecModal->solucion }}</div>
                    </div>
                    @if($ejecModal->observaciones)
                        <div class="mt-3">
                            <span class="block text-xs font-semibold text-slate-500 uppercase mb-1">Observaciones del
                                Técnico</span>
                            <div class="p-3 bg-white border border-slate-100 rounded text-sm text-slate-600 italic">{{ $ejecModal->observaciones }}</div>
                        </div>
                    @endif
                </div>
            @endif

            @if($obsConformacion)
                <div class="mb-4">
                    <span class="block text-xs font-semibold text-indigo-500 uppercase mb-1">Retroalimentación
                        (Conformación)</span>
                    <div class="p-3 bg-indigo-50 border border-indigo-100 rounded-lg text-sm text-indigo-800 italic">
                        @if($solicitud->calificacion)
                            <div class="text-amber-500 font-bold mb-1 text-base not-italic"
                                title="{{ $solicitud->calificacion }} Estrellas">
                                {{ str_repeat('★', $solicitud->calificacion) }}{{ str_repeat('☆', 5 - $solicitud->calificacion) }}
                            </div>
                        @endif
                        {{ $obsConformacion }}
                    </div>
                </div>
            @endif

        </div>

        {{-- Trazabilidad / Historial --}}
        @if($solicitud->auditLogs && $solicitud->auditLogs->count() > 0)
            <div x-show="tab === 'historial'" style="display: none;">
                <div class="relative pl-4 border-l-2 border-slate-200 space-y-4 my-2">
                    @foreach($solicitud->auditLogs as $log)
                        <div class="relative">
                            <div class="absolute -left-5 top-1 w-2.5 h-2.5 bg-sky-500 rounded-full border-2 border-white"></div>
                            <div class="text-xs text-slate-500 mb-0.5">
                                {{ $log->created_at->format('d/m/Y h:i A') }} - <span
                                    class="font-medium text-slate-700">{{ optional($log->usuario)->name ?? 'Sistema' }}
                                    {{ optional($log->usuario)->apellido ?? '' }}</span>
                            </div>
                            <div class="text-sm text-slate-800 font-medium">
                                @php
                                    $accionHumanizada = [
                                        'solicitud_creada'        => 'Ingresada',
                                        'solicitud_modificada'    => 'Modificada',
                                        'solicitud_eliminada'     => 'Eliminada',
                                        'ticket_auto_asignado'    => 'Asignada',
                                        'ticket_asignado'         => 'Asignado por',
                                        'ticket_redirigido'       => 'Redirigido a otro Departamento',
                                        'ticket_desasignado'      => 'Desasignada',
                                        'ticket_en_espera'        => 'En Espera',
                                        'ticket_en_ejecucion'     => 'En Ejecución',
                                        'ticket_ejecutado'        => 'Ejecutada',
                                        'ticket_conformado'       => 'Conformada',
                                        'solicitud_conformada'    => 'Conformada',
                                        'ticket_cerrado'          => 'Cerrada',
                                        'solicitud_cerrada'       => 'Cerrada',
                                        'solicitud_cerrada_admin' => 'Cerrada administrativamente',
                                    ];
                                @endphp
                                @if($log->accion === 'ticket_asignado' && isset($log->datos_nuevos['analista_nombre']))
                                    Asignado a
                                    <span class="font-semibold text-sky-700">{{ $log->datos_nuevos['analista_nombre'] }}</span>
                                @elseif($log->accion === 'ticket_en_espera')
                                    En Espera
                                @elseif($log->accion === 'ticket_en_ejecucion')
                                    En Ejecución
                                @else
                                    {{ $accionHumanizada[$log->accion] ?? ucfirst(str_replace('_', ' ', $log->accion)) }}
                                @endif
                            </div>
                            @if(($log->datos_nuevos || $log->datos_anteriores) && $log->accion !== 'ticket_cerrado')
                                <div class="text-[11px] text-slate-500 mt-0.5">
                                    @if(isset($log->datos_nuevos['estado_nuevo']))
                                        Cambio de estado: <span
                                            class="font-medium">{{ $log->datos_anteriores['estado_anterior'] ?? 'N/A' }}</span> &rarr;
                                        <span class="font-medium">{{ $log->datos_nuevos['estado_nuevo'] }}</span>
                                    @endif
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        <div class="mt-6 flex justify-end">
            <button x-data="" x-on:click.prevent="$dispatch('close-modal', 'ver-solicitud-{{ $solicitud->id }}')"
                class="btn bg-white border-slate-200 hover:border-slate-300 text-slate-600">
                Cerrar Ventana
            </button>
        </div>
    </div>
</x-modal>