@props(['comments' => [], 'ticket' => null, 'perPage' => 10])

@php
    $isPaginated = $comments instanceof \Illuminate\Pagination\Paginator || $comments instanceof \Illuminate\Pagination\LengthAwarePaginator;
    $commentsList = [];
    $commentCount = 0;
    
    if (is_string($comments)) {
        $commentsList = [];
    } elseif ($isPaginated) {
        $commentsList = $comments->items();
        $commentCount = $comments->total();
    } elseif (is_array($comments)) {
        $commentsList = $comments;
        $commentCount = count($comments);
    } elseif ($comments instanceof \Illuminate\Support\Collection) {
        $commentsList = $comments->all();
        $commentCount = $comments->count();
    } elseif (is_object($comments) && method_exists($comments, 'toArray')) {
        $commentsList = $comments->toArray();
        $commentCount = is_countable($commentsList) ? count($commentsList) : 0;
    }
@endphp

<div class="space-y-4">
    @if($commentCount > 0)
        <div class="space-y-3">
            @foreach($commentsList as $comment)
                <div class="bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow duration-200">
                    <!-- Header del comentario -->
                    <div class="px-4 py-3 bg-gradient-to-r from-gray-50 to-white border-b border-gray-100 flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <!-- Avatar -->
                            <div class="flex-shrink-0">
                                <div class="h-10 w-10 rounded-full flex items-center justify-center font-bold text-sm text-white shadow-md" style="background-color: #404040;">
                                    @php
                                        if ($comment->requester_id ?? $comment['requester_id'] ?? null) {
                                            $userName = $comment->requester?->name ?? $comment['requester']['name'] ?? 'S';
                                        } else {
                                            $userName = $comment->user?->name ?? $comment['user']['name'] ?? 'S';
                                        }
                                        echo strtoupper(substr($userName, 0, 1));
                                    @endphp
                                </div>
                            </div>
                            <!-- Información del usuario -->
                            <div class="flex-1">
                                <p class="text-sm font-semibold text-gray-900">
                                    @if($comment->requester_id ?? $comment['requester_id'] ?? null)
                                        {{ $comment->requester?->name ?? $comment['requester']['name'] ?? 'Solicitante' }}
                                    @else
                                        {{ $comment->user?->name ?? $comment['user']['name'] ?? 'Usuario' }}
                                    @endif
                                </p>
                                <p class="text-xs text-gray-500 flex items-center gap-1">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    @php
                                        $date = $comment->created_at ?? $comment['created_at'] ?? null;
                                        if ($date instanceof \DateTime || $date instanceof \Carbon\Carbon) {
                                            echo $date->format('d/m/Y H:i');
                                        } else {
                                            echo now()->format('d/m/Y H:i');
                                        }
                                    @endphp
                                </p>
                            </div>
                        </div>
                        <!-- Badge de tipo -->
                        @if(isset($comment->user) || isset($comment['user']))
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold shadow-sm" style="background-color: #ebe300; color: #404040;">
                                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"/>
                                </svg>
                                Equipo
                            </span>
                        @else
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 shadow-sm">
                                <!-- <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20"> -->
                                    <!-- <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v2h16V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/>
                                </svg> -->
                                Sistema
                            </span>
                        @endif
                    </div>

                    <!-- Contenido del comentario -->
                    <div class="px-4 py-4">
                        <div class="bg-gray-50 rounded-lg p-4 border border-gray-100">
                            <div class="text-sm text-gray-700 break-words leading-relaxed font-normal">
                                {{ $comment->content ?? $comment['content'] ?? '—' }}
                            </div>
                        </div>
                    </div>

                    <!-- Footer con acciones (opcional) -->
                    <!-- <div class="px-4 py-2 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
                        <div class="text-xs text-gray-500">
                            ID: {{ $comment->id ?? $comment['id'] ?? 'N/A' }}
                        </div>
                        @if(auth()->check() && (auth()->user()->hasRole('admin') || auth()->id() === ($comment->user_id ?? $comment['user_id'] ?? null)))
                            <div class="flex gap-2">
                                <button type="button" class="text-xs text-gray-600 hover:text-red-600 transition font-medium">
                                    Eliminar
                                </button>
                            </div>
                        @endif
                    </div> -->
                </div>
            @endforeach
        </div>

        <!-- Información de paginación si es necesario -->
        @if($isPaginated && $comments->hasPages())
            <div class="mt-6">
                {{ $comments->links() }}
            </div>
        @endif
    @else
        <!-- no hay comentarios -->
        <div class="text-center text-gray-500">
            <svg class="mx-auto h-12 w-12" 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"/>
            </svg>
            <h3 class="mt-2 text-sm font-medium text-gray-900">No hay comentarios</h3>
            <p class="mt-1 text-sm text-gray-500">Aún no hay comentarios en este ticket.</p>
        </div>
    @endif
</div>