<nav class="text-xs text-gray-500 dark:text-gray-400 mb-6" aria-label="Breadcrumb">
    <ol class="flex flex-wrap items-center gap-1">
        <li><a href="<?= APP_URL ?>/home" class="hover:text-primary-600 dark:hover:text-primary-400"><?= Lang::get('home') ?></a><span class="mx-1">/</span></li>
        <li><span class="text-gray-700 dark:text-gray-300"><?= Lang::get('messages') ?></span></li>
    </ol>
</nav>

<div class="max-w-5xl mx-auto">
        
    <div class="flex items-center justify-between gap-4 mb-6">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white"><?= Lang::get('messages') ?></h1>
    </div>

    <?php if (empty($groupedMessages)): ?>
        <div class="rounded-lg border border-dashed border-gray-300 dark:border-gray-700 p-12 text-center text-gray-500 dark:text-gray-400">
            <p class="text-lg font-medium mb-1"><?= Lang::get('no_messages') ?></p>
            <p class="text-sm"><?= Lang::get('no_messages_hint') ?></p>
        </div>
    <?php else: ?>
        <div class="space-y-4">
            <?php foreach ($groupedMessages as $conversation): ?>
                <?php
                    $lastMessage = $conversation['last_message'];
                    $isIncoming = (int)$lastMessage['recipient_id'] === Session::getUserId();
                    $otherName = $isIncoming
                        ? ($lastMessage['sender_display_name'] ?: $lastMessage['sender_username'])
                        : ($lastMessage['recipient_display_name'] ?: $lastMessage['recipient_username']);
                    $hasUnread = $conversation['unread_count'] > 0;
                ?>
                
                <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-lg transition-shadow <?= $conversation['listing_status'] === 'sold' ? 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 mb-4' : '' ?>">
                    <a href="<?= APP_URL ?>/messages/conversation/<?= $conversation['listing_id'] ?: 'direct_' . $lastMessage['id'] ?>" class="block">
                        <div class="p-5">
                            <!-- Item Header -->
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center gap-3 mb-2">
                                        <?php if ($hasUnread): ?>
                                            <span class="inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-primary-600 rounded-full">
                                                <?= $conversation['unread_count'] ?>
                                            </span>
                                        <?php endif; ?>
                                        
                                        <?php if ($conversation['listing_status'] === 'sold'): ?>
                                            <span class="inline-flex items-center px-2 py-1 text-xs font-bold text-white bg-red-600 rounded-full">
                                                SOLD
                                            </span>
                                        <?php endif; ?>
                                        
                                        <?php if ($conversation['listing_id']): ?>
                                            <div class="flex items-center gap-3">
                                                <!-- Thumbnail Image -->
                                                <?php if ($conversation['listing_image']): ?>
                                                    <img src="<?= APP_URL ?>/uploads/listings/<?= htmlspecialchars($conversation['listing_image']['filename']) ?>" 
                                                         alt="<?= htmlspecialchars($conversation['listing_title']) ?>"
                                                         class="w-12 h-12 rounded-lg object-cover flex-shrink-0"
                                                         onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                                <?php endif; ?>
                                                
                                                <div class="w-12 h-12 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center flex-shrink-0" <?= $conversation['listing_image'] ? 'style="display:none;"' : '' ?>>
                                                    <svg class="w-6 h-6 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                                    </svg>
                                                </div>
                                                
                                                <div class="flex-1 min-w-0">
                                                    <span class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide"><?= Lang::get('item') ?></span>
                                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white truncate">
                                                        <?= htmlspecialchars($conversation['listing_title']) ?>
                                                    </h3>
                                                </div>
                                            </div>
                                        <?php else: ?>
                                            <div class="flex items-center gap-3">
                                                <!-- Direct Message Icon -->
                                                <div class="w-12 h-12 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center flex-shrink-0">
                                                    <svg class="w-6 h-6 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                                                    </svg>
                                                </div>
                                                
                                                <div class="flex-1 min-w-0">
                                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white truncate">
                                                        <?= htmlspecialchars($otherName) ?>
                                                    </h3>
                                                    <span class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide"><?= Lang::get('direct_message') ?></span>
                                                </div>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                    
                                    <div class="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-300">
                                        <span>
                                            <?= $isIncoming ? Lang::get('from') : Lang::get('to') ?> <?= htmlspecialchars($otherName) ?>
                                        </span>
                                        <span>·</span>
                                        <span class="text-xs">
                                            <?= count($conversation['messages']) ?> <?= Lang::get('messages') ?>
                                        </span>
                                    </div>
                                </div>
                                
                                <time class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap" datetime="<?= date('c', strtotime($lastMessage['created_at'])) ?>">
                                    <?= date('M j, Y', strtotime($lastMessage['created_at'])) ?>
                                </time>
                            </div>
                            
                            <!-- Last Message Preview -->
                            <div class="mt-3 pt-3 border-t border-gray-100 dark:border-gray-700">
                                <p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">
                                    <?= htmlspecialchars($lastMessage['body']) ?>
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</div>
