@extends('layouts.admin')
@section('title','Chats')
@section('page-title','Chat Management')
@section('content')
<div class="flex gap-3 mb-5">
    @foreach(['','open','closed','resolved'] as $s)
    <a href="{{ route('admin.chats', ['status' => $s]) }}"
       class="px-3 py-1.5 rounded-lg text-xs font-bold uppercase transition-all {{ request('status')===$s ? 'bg-primary text-white' : 'bg-white/5 text-slate-400 hover:text-white border border-white/10' }}">
        {{ $s ?: 'All' }}
    </a>
    @endforeach
</div>
<div class="glass-card rounded-2xl overflow-hidden">
    <table class="w-full text-left">
        <thead><tr class="border-b border-white/5 bg-white/5">
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Order</th>
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">User</th>
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Last Message</th>
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Status</th>
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Actions</th>
        </tr></thead>
        <tbody class="divide-y divide-white/5">
            @forelse($threads as $thread)
            <tr class="hover:bg-white/3 transition-colors">
                <td class="px-4 py-3 font-mono text-xs text-primary">{{ optional($thread->order)->order_id ?? '—' }}</td>
                <td class="px-4 py-3">
                    <div><p class="text-sm font-medium">{{ optional($thread->user)->name }}</p><p class="text-[10px] text-slate-500">{{ optional($thread->user)->email }}</p></div>
                </td>
                <td class="px-4 py-3 text-xs text-slate-400 max-w-xs truncate">{{ optional($thread->lastMessage)->message ?? '—' }}</td>
                <td class="px-4 py-3">
                    @php $clr = ['open'=>'green','closed'=>'slate','resolved'=>'blue'][$thread->status] ?? 'slate'; @endphp
                    <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-[10px] font-bold uppercase bg-{{ $clr }}-500/10 text-{{ $clr }}-500">
                        <span class="w-1.5 h-1.5 rounded-full bg-current {{ $thread->status==='open'?'animate-pulse':'' }}"></span> {{ $thread->status }}
                    </span>
                </td>
                <td class="px-4 py-3">
                    <div class="flex items-center gap-2">
                        <a href="{{ route('admin.chats', ['thread_id' => $thread->id]) }}"
                           class="px-3 py-1.5 bg-primary/10 text-primary rounded-lg text-xs font-bold hover:bg-primary hover:text-white transition-all border border-primary/20">Open Chat</a>
                        @if($thread->status === 'open')
                        <form method="POST" action="{{ route('admin.chats.close', $thread) }}">
                            @csrf
                            <button class="px-3 py-1.5 bg-white/5 text-slate-400 rounded-lg text-xs hover:text-white border border-white/10 transition-all">Close</button>
                        </form>
                        @endif
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="5" class="py-16 text-center text-slate-500 text-sm">No chat threads found.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
<div class="mt-5">{{ $threads->links() }}</div>
@endsection