@extends('layouts.app')

@section('title', 'Messages — Tenseal')

@push('styles')
<style>
    .messages-page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
    }

    .messages-page-header h1 {
        font-size: 1.25rem;
        font-weight: 700;
    }

    .messages-page-header .msg-count {
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    /* Conversation list */
    .conv-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .conv-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.25rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        transition: all var(--transition);
        cursor: pointer;
    }

    .conv-item:hover {
        border-color: var(--accent);
        transform: translateX(2px);
    }

    .conv-item.has-unread {
        border-left: 3px solid var(--accent);
    }

    .conv-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--accent-light);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent);
        font-weight: 700;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .conv-body {
        flex: 1;
        min-width: 0;
    }

    .conv-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.25rem;
    }

    .conv-name {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .conv-time {
        font-size: 0.7rem;
        color: var(--text-muted);
        flex-shrink: 0;
    }

    .conv-preview {
        font-size: 0.8rem;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 0.2rem;
    }

    .conv-meta {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.7rem;
        color: var(--text-muted);
    }

    .conv-tx-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.1rem 0.45rem;
        border-radius: var(--radius-pill);
        background: var(--bg-hover);
        font-size: 0.65rem;
        color: var(--text-muted);
    }

    .unread-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 0.35rem;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        font-size: 0.65rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    /* Empty state */
    .messages-empty {
        text-align: center;
        padding: 3rem 1.5rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
    }

    .messages-empty .empty-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--bg-hover);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
    }

    .messages-empty .empty-icon i {
        font-size: 1.5rem;
        color: var(--text-muted);
        opacity: 0.5;
    }

    .messages-empty h3 {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.35rem;
    }

    .messages-empty p {
        color: var(--text-secondary);
        font-size: 0.85rem;
    }

    /* Pagination */
    .pagination-wrap {
        display: flex;
        justify-content: center;
        margin-top: 1.5rem;
    }
</style>
@endpush

@section('content')
    <div class="messages-page-header">
        <h1><i class="fas fa-envelope" style="color: var(--accent); margin-right: 0.4rem;"></i> Messages</h1>
        <span class="msg-count">{{ $transactions->total() }} conversation{{ $transactions->total() !== 1 ? 's' : '' }}</span>
    </div>

    @if($transactions->count() > 0)
        <div class="conv-list">
            @foreach($transactions as $tx)
                @php
                    $otherUser = $tx->buyer_id === auth()->id() ? $tx->seller : $tx->buyer;
                    $lastMsg = $tx->messages->first();
                @endphp
                <a href="{{ route('escrow.messages.index', $tx->id) }}" class="conv-item {{ $tx->unread_count > 0 ? 'has-unread' : '' }}">
                    <div class="conv-avatar">
                        {{ strtoupper(substr($otherUser->name ?? 'U', 0, 1)) }}
                    </div>
                    <div class="conv-body">
                        <div class="conv-top">
                            <span class="conv-name">{{ $otherUser->name ?? 'Unknown User' }}</span>
                            @if($lastMsg)
                                <span class="conv-time">{{ $lastMsg->created_at->diffForHumans(null, true, true) }}</span>
                            @endif
                        </div>
                        @if($lastMsg)
                            <div class="conv-preview">
                                @if($lastMsg->sender_id === auth()->id())
                                    <span style="color: var(--text-muted);">You: </span>
                                @endif
                                {{ Str::limit($lastMsg->content, 80) }}
                            </div>
                        @endif
                        <div class="conv-meta">
                            <span class="conv-tx-badge">
                                <i class="fas fa-shield-halved"></i>
                                {{ Str::limit($tx->title ?? 'Transaction #' . $tx->id, 30) }}
                            </span>
                            <span>&#8358;{{ number_format($tx->amount, 2) }}</span>
                        </div>
                    </div>
                    @if($tx->unread_count > 0)
                        <span class="unread-badge">{{ $tx->unread_count }}</span>
                    @endif
                </a>
            @endforeach
        </div>

        @include('partials.table-pagination', ['paginator' => $transactions, 'label' => 'conversations'])
    @else
        <div class="messages-empty">
            <div class="empty-icon"><i class="fas fa-envelope-open"></i></div>
            <h3>No messages yet</h3>
            <p>When you start a transaction, you can message the buyer or seller here.</p>
        </div>
    @endif
@endsection