@extends('provider.layout')

@section('title', 'Messages')

@push('styles')
<style>
/* ── Inbox Styles ───────────────────────────────────────────── */
.inbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.inbox-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--brand-500), var(--amber-500, #f59e0b));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.28);
}
.conv-list { display: flex; flex-direction: column; gap: 0;
    border: 1.5px solid rgba(20, 184, 166, 0.13);
    border-radius: 1.125rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 16px rgba(20,184,166,0.06);
}
.conv-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.05rem 1.25rem;
    background: #fff;
    border: none;
    border-bottom: 1px solid rgba(20, 184, 166, 0.09);
    border-radius: 0;
    text-decoration: none;
    color: inherit;
    transition: background 0.13s ease;
    position: relative;
}
.conv-item:last-child {
    border-bottom: none;
}
.conv-item:hover {
    background: #f0fdfa;
    z-index: 1;
}
.conv-item.unread {
    background: linear-gradient(135deg, #f0fdfa 0%, #fefce8 100%);
    border-left: 3.5px solid var(--brand-500);
}
.conv-item.unread:hover {
    background: linear-gradient(135deg, #ccfbf1 0%, #fef9c3 100%);
}
.conv-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-500), #f59e0b);
    color: #fff;
    font-weight: 800;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.22);
}
.conv-body { flex: 1; min-width: 0; }
.conv-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}
.conv-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55%;
}
.conv-item.unread .conv-name { font-weight: 700; color: #0f172a; }
.conv-time { font-size: 0.6875rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.conv-item.unread .conv-time { color: var(--brand-600); font-weight: 600; }
.conv-subject-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.2rem;
    overflow: hidden;
}
.conv-subject-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-700, #0f766e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conv-preview {
    font-size: 0.8125rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conv-item.unread .conv-preview { color: var(--text-secondary); font-weight: 500; }
.conv-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.unread-badge {
    min-width: 20px;
    height: 20px;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--brand-500), #f59e0b);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;
}
.empty-box {
    text-align: center;
    padding: 4.5rem 2rem;
    border: 2px dashed rgba(20, 184, 166, 0.15);
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(20,184,166,0.02), rgba(251,191,36,0.01));
}
.empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(20,184,166,0.1), rgba(251,191,36,0.07));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}
</style>
@endpush

@section('content')
@php
    $userId      = auth()->id();
    $totalUnread = $conversations->sum(fn($c) => $c->unreadCountFor($userId));
@endphp

{{-- Page Header --}}
<div class="inbox-header">
    <div>
        <h1 style="font-size:1.375rem;font-weight:800;color:var(--text-primary);margin-bottom:.2rem;display:flex;align-items:center;gap:.5rem">
            <i data-lucide="message-square" style="width:22px;height:22px;color:var(--brand-500)"></i>
            Messages
        </h1>
        <p style="color:var(--text-muted);font-size:.875rem;margin:0">Your conversations with customers.</p>
    </div>
    @if($totalUnread > 0)
        <div class="inbox-badge">
            <i data-lucide="bell" style="width:13px;height:13px"></i>
            {{ $totalUnread }} unread
        </div>
    @endif
</div>

@if(session('success'))
    <div class="alert alert-success" style="margin-bottom:1.25rem">
        <i data-lucide="check-circle" style="width:16px;height:16px;flex-shrink:0"></i>
        {{ session('success') }}
    </div>
@endif
@if(session('error'))
    <div class="alert alert-error" style="margin-bottom:1.25rem">
        <i data-lucide="alert-circle" style="width:16px;height:16px;flex-shrink:0"></i>
        {{ session('error') }}
    </div>
@endif

{{-- Empty State --}}
@if($conversations->isEmpty())
    <div class="empty-box">
        <div class="empty-icon">
            <i data-lucide="inbox" style="width:36px;height:36px;color:var(--brand-500)"></i>
        </div>
        <div style="font-size:1.0625rem;font-weight:700;color:var(--text-primary);margin-bottom:.4rem">No messages yet</div>
        <div style="color:var(--text-muted);font-size:.875rem">When customers contact you, their messages will appear here.</div>
    </div>

{{-- Conversation List --}}
@else
    <div class="conv-list">
        @foreach($conversations as $conv)
            @php
                $other       = $conv->otherParticipant($userId);
                $latest      = $conv->latestMessage;
                $unread      = $conv->unreadCountFor($userId);
                $isUnread    = $unread > 0;
                $displayName = $conv->getOtherParticipantDisplayName($userId);
                $initials    = strtoupper(substr($displayName, 0, 1));
                $adUrl       = $conv->safeReferenceUrl();
            @endphp

            <a href="{{ route('provider.messages.show', $conv) }}"
               class="conv-item {{ $isUnread ? 'unread' : '' }}"
               id="conv-row-{{ $conv->id }}">

                <div class="conv-avatar">{{ $initials }}</div>

                <div class="conv-body">
                    <div class="conv-top-row">
                        <span class="conv-name">{{ $other->name ?? 'Unknown User' }}</span>
                        <span class="conv-time">{{ $conv->last_message_at?->diffForHumans() ?? '' }}</span>
                    </div>

                    @if($conv->subject)
                        <div class="conv-subject-row">
                            <i data-lucide="package" style="width:11px;height:11px;color:var(--brand-600);flex-shrink:0"></i>
                            <span class="conv-subject-text">{{ Str::limit($conv->subject, 48) }}</span>
                        </div>
                    @endif

                    <div class="conv-preview">
                        @if($latest)
                            @if($latest->sender_id === $userId)<span style="color:var(--text-muted);font-size:0.75rem">You: </span>@endif
                            {{ Str::limit($latest->message, 72) }}
                        @else
                            No messages yet
                        @endif
                    </div>
                </div>

                <div class="conv-right">
                    @if($isUnread)
                        <div class="unread-badge">{{ $unread > 9 ? '9+' : $unread }}</div>
                    @endif
                    <i data-lucide="chevron-right" style="width:16px;height:16px;color:rgba(20,184,166,0.45)"></i>
                </div>
            </a>
        @endforeach
    </div>
@endif

@endsection