@extends('layouts.app')

@section('content')
    {{-- UNIFIED REUSABLE PAGE HEADER --}}
    @include('partials.page-header', [
        'title' => 'Messages',
        'subtitle' => 'Conversations open when an interest is accepted between both members.',
    ])

    <div class="matri-conversations-list" style="display: flex; flex-direction: column; gap: 10px;">
        @forelse ($conversations as $conversation)
            @php($hasUnread = ($conversation['unread'] ?? 0) > 0)
            <a href="{{ route('messages.show', $conversation['id']) }}" class="matri-card-box matri-convo-item {{ $hasUnread ? 'is-unread' : '' }}" style="display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; text-decoration: none; color: inherit; transition: all 0.2s ease; {{ $hasUnread ? 'border-left: 3px solid var(--matri-primary); background: #FAF5F0;' : '' }}">
                <div style="display: flex; align-items: center; gap: 14px; min-width: 0;">
                    <div style="width: 44px; height: 44px; border-radius: 50%; background: #F3ECE2; color: var(--matri-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0;">
                        {{ mb_substr($conversation['name'] ?? 'M', 0, 1) }}
                    </div>
                    <div style="min-width: 0;">
                        <h2 style="font-size: 15px; font-weight: {{ $hasUnread ? '700' : '600' }}; color: var(--matri-text); margin: 0 0 2px; display: inline-flex; align-items: center; gap: 4px;">
                            <span>{{ $conversation['name'] }}</span>
                            @include('partials.verified-badge', ['verified' => !empty($conversation['verified']) || !empty($conversation['is_verified'])])
                        </h2>
                        <p style="font-size: 13px; color: {{ $hasUnread ? 'var(--matri-text)' : 'var(--matri-text-muted)' }}; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 500px;">
                            {{ $conversation['preview'] ?: 'No messages yet' }}
                        </p>
                    </div>
                </div>

                <div style="flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px;">
                    <span style="font-size: 11.5px; color: var(--matri-text-light);">{{ $conversation['at'] }}</span>
                    @if ($hasUnread)
                        <span class="matri-side-nav-badge" style="font-size: 11px; padding: 1px 7px;">
                            {{ $conversation['unread'] }} unread
                        </span>
                    @endif
                </div>
            </a>
        @empty
            @include('partials.empty-state', [
                'iconSvg' => '<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>',
                'title' => 'No conversations yet.',
                'description' => 'A conversation opens after an interest is mutually accepted. Blocked people cannot be messaged.',
                'actionUrl' => route('discover'),
                'actionText' => 'Discover profiles',
            ])
        @endforelse
    </div>
@endsection