@extends('compte.layout')
@php $moi = auth()->user(); @endphp

@section('compte')
    <div class="panel" style="padding:0;overflow:hidden">
        <div class="messagerie">
            {{-- Liste des fils --}}
            <div class="messagerie-liste">
                <div class="panel-head" style="padding:14px 16px;margin:0;border-bottom:1px solid var(--line-soft)">
                    <h2 style="font-size:1rem">Conversations</h2>
                    <span class="small muted">{{ $conversations->count() }}</span>
                </div>

                @forelse($conversations as $conv)
                    @php
                        $autre = $conv->otherParty($moi);
                        $dernier = $conv->lastMessage->first();
                        $nonLus = $conv->unreadCountFor($moi);
                    @endphp
                    <a href="{{ url('/compte/messages/'.$conv->id) }}"
                       class="messagerie-item {{ $conversation && $conversation->id === $conv->id ? 'is-active' : '' }}">
                        <span class="seller-avatar" style="width:38px;height:38px;font-size:.85rem">{{ $autre?->initials ?? '?' }}</span>
                        <span style="min-width:0;flex:1">
                            <span class="row-between" style="gap:6px">
                                <strong class="small truncate">{{ $autre?->display_name ?? 'Compte supprimé' }}</strong>
                                @if($nonLus)<span class="badge badge-orange">{{ $nonLus }}</span>@endif
                            </span>
                            <span class="tiny muted truncate" style="display:block">{{ $conv->sujet }}</span>
                            @if($dernier)
                                <span class="tiny muted truncate" style="display:block">{{ Str::limit($dernier->body, 46) }}</span>
                            @endif
                        </span>
                    </a>
                @empty
                    <p class="muted small" style="padding:22px 16px;margin:0">
                        Aucune conversation. Contactez un vendeur depuis une annonce pour démarrer.
                    </p>
                @endforelse
            </div>

            {{-- Fil ouvert --}}
            <div class="messagerie-fil">
                @if($conversation)
                    @php $autre = $conversation->otherParty($moi); @endphp

                    <div class="messagerie-entete">
                        <div class="row-center" style="gap:10px;min-width:0">
                            @php $objet = $conversation->ad ?? $conversation->business; @endphp
                            @if($objet)
                                <x-media :icon="$objet->icon" :seed="$objet->seed" :url="$objet->cover"
                                         ratio="square" style="width:40px;border-radius:6px;flex:none"/>
                            @endif
                            <div style="min-width:0">
                                <strong class="small" style="display:block;color:var(--ink-900)">{{ $autre?->display_name ?? 'Compte supprimé' }}</strong>
                                @if($conversation->sujet_url)
                                    <a href="{{ $conversation->sujet_url }}" class="tiny muted truncate" style="display:block">
                                        {{ $conversation->sujet }}@if($conversation->ad) — {{ $conversation->ad->price_label }}@endif
                                    </a>
                                @else
                                    <span class="tiny muted">Contenu supprimé</span>
                                @endif
                            </div>
                        </div>
                        <form method="post" action="{{ url('/compte/messages/'.$conversation->id) }}"
                              onsubmit="return confirm('Supprimer cette conversation ?')">
                            @csrf @method('delete')
                            <button class="btn btn-ghost btn-icon btn-sm" title="Supprimer"><x-icon name="trash"/></button>
                        </form>
                    </div>

                    <div class="messagerie-corps" data-scroll-bottom>
                        @foreach($conversation->messages as $message)
                            <div class="bulle {{ $message->user_id === $moi->id ? 'is-moi' : '' }}">
                                <p style="margin:0">{{ $message->body }}</p>
                                <span class="tiny">{{ $message->created_at->translatedFormat('d/m/Y à H:i') }}</span>
                            </div>
                        @endforeach
                    </div>

                    <form method="post" action="{{ url('/compte/messages/'.$conversation->id) }}" class="messagerie-envoi">
                        @csrf
                        <textarea class="textarea @error('body') is-invalid @enderror" name="body" rows="2" required
                                  maxlength="4000" placeholder="Écrivez votre message…"></textarea>
                        <button class="btn btn-primary" type="submit"><x-icon name="arrow-right"/> Envoyer</button>
                    </form>
                    @error('body')<span class="field-error" style="padding:0 16px 12px">{{ $message }}</span>@enderror
                @else
                    <div class="center" style="padding:60px 24px">
                        <span class="tile-icon" style="margin:0 auto"><x-icon name="message"/></span>
                        <p class="muted small" style="margin-top:12px">Sélectionnez une conversation pour l'afficher.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="notice">
        <x-icon name="shield"/>
        <div>
            <strong class="strong">Restez prudent</strong>
            <p style="margin:4px 0 0">
                CityMag ne vous demandera jamais vos coordonnées bancaires. Méfiez-vous des acheteurs
                pressés qui proposent un paiement hors plateforme.
            </p>
        </div>
    </div>
@endsection