@php
    $otherUser = (int) $conversation->sender_id === (int) $userId
        ? $conversation->receiver
        : $conversation->sender;
    $isMine = (int) $conversation->sender_id === (int) $userId;
    $otherName = $otherUser?->username
        ?: trim(($otherUser?->first_name ?? '') . ' ' . ($otherUser?->last_name ?? ''))
        ?: 'Unknown User';
    $initials = strtoupper(substr($otherName, 0, 2));
    $unreadCount = $conversation->unread_count ?? 0;
    $productTitle = $conversation->product?->details->first()?->title;
@endphp

<div class="list-group-item conversation-item px-3 py-3 {{ $unreadCount > 0 ? 'unread' : '' }}">
    <div class="d-flex align-items-start gap-3">
        {{-- Avatar --}}
        <div class="flex-shrink-0">
            @if($otherUser?->avatar)
                <img src="{{ asset('storage/' . $otherUser->avatar) }}"
                     alt="{{ $otherName }}"
                     class="rounded-circle"
                     width="52" height="52"
                     style="object-fit:cover;">
            @else
                <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center avatar-initials"
                     style="width:52px;height:52px;">
                    <span class="text-primary">{{ $initials }}</span>
                </div>
            @endif
        </div>

        {{-- Content --}}
        <div class="flex-grow-1 min-width-0">
            <div class="d-flex justify-content-between align-items-start gap-2 mb-1">
                <div class="min-width-0 flex-grow-1">
                    <a href="{{ route('account.messages.show', $conversation) }}"
                       class="text-decoration-none">
                        <h6 class="fw-700 mb-0 text-truncate">
                            {{ $otherName }}
                            @if($unreadCount > 0)
                                <span class="badge bg-danger ms-2">{{ $unreadCount }}</span>
                            @endif
                        </h6>
                    </a>
                    <small class="text-muted">
                        <i class="fas fa-{{ $isMine ? 'paper-plane' : 'inbox' }} me-1" style="font-size:10px;"></i>
                        {{ $isMine ? 'From you' : 'To you' }}
                    </small>
                </div>
                <small class="text-muted flex-shrink-0 ms-2">
                    {{ $conversation->updated_at?->diffForHumans() ?? '' }}
                </small>
            </div>

            {{-- Subject --}}
            @if($conversation->subject)
                <div class="mb-1">
                    <a href="{{ route('account.messages.show', $conversation) }}"
                       class="text-decoration-none">
                        <span class="fw-600 {{ $unreadCount > 0 ? 'text-dark' : 'text-muted' }} small">
                            {{ Str::limit($conversation->subject, 80) }}
                        </span>
                    </a>
                </div>
            @endif

            {{-- Product --}}
            @if($productTitle)
                <div class="mb-1">
                    <span class="badge bg-info">
                        <i class="fas fa-cube me-1"></i>{{ Str::limit($productTitle, 50) }}
                    </span>
                </div>
            @endif

            {{-- Actions --}}
            <div class="d-flex flex-wrap gap-2 mt-2">
                <a href="{{ route('account.messages.show', $conversation) }}"
                   class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-reply me-1"></i> Open
                </a>
                <button type="button"
                        class="btn btn-sm btn-outline-danger"
                        onclick="deleteConversation({{ $conversation->id }})"
                        title="Remove from inbox">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    .fw-600 { font-weight: 600; }
    .fw-700 { font-weight: 700; }
    .min-width-0 { min-width: 0; }
</style>
@endpush