@extends('frontend.layouts.app')
@section('title', 'Mesajlar — Animexe')
@push('styles')
<style>
.msg-wrap{max-width:680px;margin:0 auto;padding:calc(var(--nav-h) + 28px) 16px 64px}
.msg-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.msg-header h1{font-size:1.3rem;font-weight:900;color:#fff}

.msg-list{display:flex;flex-direction:column;gap:4px}
.msg-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  text-decoration:none;transition:all .15s;cursor:pointer;
}
.msg-row:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.msg-row.unread{background:rgba(0,245,255,.04);border-color:rgba(0,245,255,.12)}

.msg-ava{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:800;color:#fff;
}
.msg-ava img{width:100%;height:100%;object-fit:cover}

.msg-info{flex:1;min-width:0}
.msg-name{font-size:.9rem;font-weight:700;color:#fff;margin-bottom:3px;display:flex;align-items:center;gap:8px}
.msg-preview{font-size:.8rem;color:rgba(255,255,255,.4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-row.unread .msg-preview{color:rgba(255,255,255,.7)}
.msg-unread-dot{width:8px;height:8px;border-radius:50%;background:var(--accent2);flex-shrink:0}
.msg-time{font-size:.7rem;color:rgba(255,255,255,.25);flex-shrink:0;align-self:flex-start;margin-top:4px}

.msg-empty{text-align:center;padding:64px 20px;color:rgba(255,255,255,.2)}
.msg-empty i{font-size:2.8rem;display:block;margin-bottom:14px;opacity:.2}
.msg-empty p{font-size:.9rem}
</style>
@endpush

@section('content')
<div class="msg-wrap">
  <div class="msg-header">
    <h1><i class="bi bi-chat-dots" style="color:var(--accent2)"></i> Mesajlar</h1>
  </div>

  @if($conversations->isEmpty())
  <div class="msg-empty">
    <i class="bi bi-chat-square-dots"></i>
    <p>Henüz mesajın yok.<br>Bir kullanıcının profiline git ve mesaj gönder.</p>
  </div>
  @else
  <div class="msg-list">
    @foreach($conversations as $conv)
    @php
      $other = $conv['other'];
      $last  = $conv['last_message'];
      $unread= $conv['unread'];
    @endphp
    <a href="{{ route('messages.show', $conv['id']) }}" class="msg-row {{ $unread > 0 ? 'unread' : '' }}">
      <div class="msg-ava">
        @if($other?->avatar)
          <img src="{{ \App\Support\MediaUrl::fromStoragePath($other->avatar) }}" alt="{{ $other->name }}">
        @else
          {{ mb_strtoupper(mb_substr($other?->name ?? '?', 0, 1)) }}
        @endif
      </div>
      <div class="msg-info">
        <div class="msg-name">
          {{ $other?->name ?? 'Silinmiş Kullanıcı' }}
          @if($unread > 0)
          <span style="font-size:.65rem;background:var(--accent2);color:#05050e;padding:1px 7px;border-radius:20px;font-weight:800">{{ $unread }}</span>
          @endif
        </div>
        <div class="msg-preview">
          @if($last)
            @if($last->user_id === auth()->id()) <span style="color:rgba(255,255,255,.25)">Sen: </span> @endif
            @if(str_starts_with($last->body, 'ANIMESHARE::'))
              @php try { $sd = json_decode(substr($last->body,12),true); } catch(\Throwable $e){ $sd=null; } @endphp
              <i class="bi bi-play-circle" style="color:var(--accent2)"></i> {{ $sd['title'] ?? 'Anime' }} paylaştı
            @elseif(str_starts_with($last->body, 'IMAGE::'))
              <i class="bi bi-image"></i> Fotoğraf
            @elseif(str_starts_with($last->body, 'GIF::'))
              <i class="bi bi-file-play"></i> GIF
            @else
              {{ Str::limit($last->body, 60) }}
            @endif
          @else
            <em>Henüz mesaj yok</em>
          @endif
        </div>
      </div>
      <div style="display:flex;flex-direction:column;align-items:flex-end;gap:6px">
        @if($unread > 0)<div class="msg-unread-dot"></div>@endif
        <span class="msg-time">
          @if($conv['updated_at']){{ $conv['updated_at']->diffForHumans(null, true) }}@endif
        </span>
      </div>
    </a>
    @endforeach
  </div>
  @endif
</div>
@endsection
