@extends('layouts.app')
@section('title', 'Chat — ' . ($conversation->subject ?? 'Support'))

@push('styles')
<style>
.chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 180px);min-height:500px;}
.chat-header{background:var(--card);border:1px solid var(--border);border-radius:14px 14px 0 0;padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;}
.chat-messages{flex:1;overflow-y:auto;padding:1.25rem;background:rgba(255,255,255,.01);border-left:1px solid var(--border);border-right:1px solid var(--border);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.06) transparent;}
.chat-messages::-webkit-scrollbar{width:4px;}
.chat-messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:4px;}
.msg{display:flex;gap:.65rem;margin-bottom:1rem;align-items:flex-end;}
.msg.mine{flex-direction:row-reverse;}
.msg-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:#fff;flex-shrink:0;}
.msg-av.user{background:linear-gradient(135deg,var(--green),var(--gl));}
.msg-av.agent{background:linear-gradient(135deg,#1d4ed8,#3b82f6);}
.msg-bubble{max-width:70%;padding:.65rem .9rem;border-radius:14px;font-size:.855rem;line-height:1.5;}
.msg.mine .msg-bubble{background:linear-gradient(135deg,var(--green),var(--gl));color:#fff;border-radius:14px 14px 4px 14px;}
.msg:not(.mine) .msg-bubble{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:14px 14px 14px 4px;}
.msg-time{font-size:.65rem;color:var(--muted);margin-top:.2rem;text-align:right;}
.msg.mine .msg-time{text-align:right;}
.chat-input{background:var(--card);border:1px solid var(--border);border-radius:0 0 14px 14px;padding:1rem 1.25rem;display:flex;gap:.75rem;align-items:flex-end;}
.chat-input textarea{flex:1;background:rgba(255,255,255,.04);border:1.5px solid var(--border);border-radius:10px;padding:.6rem .9rem;color:var(--text);font-size:.875rem;outline:none;resize:none;font-family:inherit;max-height:120px;}
.chat-input textarea:focus{border-color:#60a5fa;}
.send-btn{background:linear-gradient(135deg,#1d4ed8,#3b82f6);color:#fff;border:none;border-radius:10px;padding:.65rem 1.1rem;cursor:pointer;transition:.2s;flex-shrink:0;}
.send-btn:hover{opacity:.9;}
.typing{font-size:.72rem;color:var(--muted);padding:.25rem 1.25rem;font-style:italic;}
.resolved-banner{background:rgba(76,175,80,.08);border:1px solid rgba(76,175,80,.2);border-radius:10px;padding:.75rem 1rem;text-align:center;font-size:.82rem;color:var(--gl);margin-bottom:.75rem;}
</style>
@endpush

@section('content')
<div style="margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;">
  <a href="{{ route('chat.index') }}" style="color:var(--muted);text-decoration:none;font-size:.82rem;font-weight:600;"><i class="fas fa-arrow-left"></i> All Chats</a>
  <span class="badge badge-{{ ['open'=>'pending','assigned'=>'pickup','resolved'=>'confirmed','closed'=>'rejected'][$conversation->status] ?? 'pending' }}">{{ ucfirst($conversation->status) }}</span>
</div>

@if(in_array($conversation->status, ['resolved','closed']))
<div class="resolved-banner"><i class="fas fa-check-circle"></i> This conversation has been {{ $conversation->status }}. Start a new chat if you need more help.</div>
@endif

<div class="chat-wrap">
  <div class="chat-header">
    <div>
      <div style="font-weight:800;font-size:.95rem;">{{ $conversation->subject ?? 'Support Chat' }}</div>
      @if($conversation->agent)
      <div style="font-size:.75rem;color:#60a5fa;margin-top:.15rem;"><i class="fas fa-headset"></i> Agent: {{ $conversation->agent->name }}</div>
      @else
      <div style="font-size:.75rem;color:var(--muted);margin-top:.15rem;"><i class="fas fa-clock"></i> Waiting for agent...</div>
      @endif
    </div>
    <div style="font-size:.72rem;color:var(--muted);">Started {{ $conversation->created_at->format('d M Y') }}</div>
  </div>

  <div class="chat-messages" id="chatMessages">
    @forelse($messages as $msg)
    @php $isMine = $msg->sender_id === auth()->id(); @endphp
    <div class="msg {{ $isMine ? 'mine' : '' }}" id="msg-{{ $msg->id }}">
      @if($msg->sender->avatar)
      <img src="{{ Storage::url($msg->sender->avatar) }}" class="msg-av" style="object-fit:cover;">
      @else
      <div class="msg-av {{ $isMine ? 'user' : 'agent' }}">{{ strtoupper(substr($msg->sender->name,0,2)) }}</div>
      @endif
      <div>
        @if(!$isMine)<div style="font-size:.7rem;color:var(--muted);margin-bottom:.2rem;">{{ $msg->sender->name }}</div>@endif
        <div class="msg-bubble">{{ $msg->message }}</div>
        <div class="msg-time">{{ $msg->created_at->format('H:i') }}</div>
      </div>
    </div>
    @empty
    <div style="text-align:center;padding:2rem;color:var(--muted);font-size:.82rem;">Send a message to start the conversation.</div>
    @endforelse
  </div>

  @if(!in_array($conversation->status, ['resolved','closed']))
  <form method="POST" action="{{ route('chat.send', $conversation) }}" class="chat-input" id="chatForm">
    @csrf
    <textarea name="message" id="msgInput" placeholder="Type your message..." rows="1" required
      onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();document.getElementById('chatForm').submit();}"></textarea>
    <button type="submit" class="send-btn"><i class="fas fa-paper-plane"></i></button>
  </form>
  @endif
</div>

@push('scripts')
<script>
// Scroll to bottom
const msgs = document.getElementById('chatMessages');
if (msgs) msgs.scrollTop = msgs.scrollHeight;

// Auto-resize textarea
const inp = document.getElementById('msgInput');
if (inp) inp.addEventListener('input', () => { inp.style.height = 'auto'; inp.style.height = Math.min(inp.scrollHeight, 120) + 'px'; });

// Poll for new messages every 5 seconds
let lastId = {{ $messages->last()?->id ?? 0 }};
let lastTime = '{{ now()->toIso8601String() }}';

setInterval(async () => {
  try {
    const res = await fetch('{{ route("chat.poll", $conversation) }}?since=' + encodeURIComponent(lastTime));
    const data = await res.json();

    if (data.messages && data.messages.length > 0) {
      data.messages.forEach(m => {
        if (document.getElementById('msg-' + m.id)) return;
        const isMine = {{ auth()->id() }} === parseInt(m.sender_id ?? 0);
        const div = document.createElement('div');
        div.id = 'msg-' + m.id;
        div.className = 'msg' + (m.is_agent ? '' : ' mine');
        div.innerHTML = `
          <div class="msg-av ${m.is_agent ? 'agent' : 'user'}">${m.sender.substring(0,2).toUpperCase()}</div>
          <div>
            ${m.is_agent ? `<div style="font-size:.7rem;color:var(--muted);margin-bottom:.2rem;">${m.sender}</div>` : ''}
            <div class="msg-bubble">${m.message}</div>
            <div class="msg-time">${m.time}</div>
          </div>`;
        msgs.appendChild(div);
        msgs.scrollTop = msgs.scrollHeight;
        lastTime = m.created_at;
      });
    }

    // If resolved, show banner
    if (data.status === 'resolved' || data.status === 'closed') {
      document.querySelector('.chat-input')?.remove();
    }
  } catch(e) {}
}, 5000);
</script>
@endpush
@endsection