@extends('layouts.admin')

@section('title', 'Messages de contact')

@section('content')
<div class="max-w-6xl mx-auto">
    {{-- En-tete --}}
    <div class="flex items-center justify-between mb-6">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">Messages de contact</h2>
            <p class="text-sm text-gray-500 mt-1">
                {{ $messages->total() }} message(s) au total
                @if($unreadCount > 0)
                    — <span class="text-primary-600 font-semibold">{{ $unreadCount }} non lu(s)</span>
                @endif
            </p>
        </div>
    </div>

    @if($messages->count())
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="divide-y divide-gray-100">
                @foreach($messages as $msg)
                    <a href="{{ route('admin.messages.show', $msg) }}"
                       class="block px-6 py-4 hover:bg-gray-50 transition {{ !$msg->is_read ? 'bg-blue-50/50' : '' }}">
                        <div class="flex items-start justify-between gap-4">
                            <div class="min-w-0 flex-1">
                                <div class="flex items-center gap-3 mb-1">
                                    @if(!$msg->is_read)
                                        <span class="w-2.5 h-2.5 bg-primary-500 rounded-full flex-shrink-0"></span>
                                    @endif
                                    <span class="font-semibold text-gray-900 {{ !$msg->is_read ? '' : 'font-normal' }}">{{ $msg->name }}</span>
                                    <span class="text-sm text-gray-400">{{ $msg->email }}</span>
                                    @if($msg->phone)
                                        <span class="text-sm text-gray-400">— {{ $msg->phone }}</span>
                                    @endif
                                </div>
                                <p class="text-sm text-gray-600 truncate">{{ Str::limit($msg->message, 120) }}</p>
                                <div class="flex items-center gap-3 mt-1.5">
                                    <span class="text-xs text-gray-400">{{ $msg->created_at->format('d/m/Y H:i') }}</span>
                                    @if(!empty($msg->photos))
                                        <span class="inline-flex items-center text-xs text-gray-400">
                                            <svg class="w-3.5 h-3.5 mr-1" 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>
                                            {{ count($msg->photos) }} photo(s)
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <svg class="w-5 h-5 text-gray-300 flex-shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>

        <div class="mt-6">
            {{ $messages->links() }}
        </div>
    @else
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-12 text-center">
            <svg class="w-16 h-16 text-gray-200 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
            </svg>
            <p class="text-gray-500">Aucun message pour le moment.</p>
        </div>
    @endif
</div>
@endsection