@extends('admin.layouts.app')

@section('title', 'Chat Sessions')

@section('content')
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-xl font-bold text-white tracking-tight">Chat Sessions</h1>
            <p class="text-xs text-slate-500 mt-1">Monitor and view chat histories between users and astrologers.</p>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-[#101828] border border-white/5 rounded-xl p-4 mb-6">
        <form action="{{ route('admin.chats.index') }}" method="GET" class="flex flex-wrap items-center gap-4">
            <div class="flex-1 min-w-[200px] relative">
                <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500"></i>
                <input type="text" name="search" value="{{ request('search') }}"
                    placeholder="Search by user or astrologer name..."
                    class="w-full pl-10 pr-4 py-2 bg-white/5 border border-white/10 rounded-lg text-xs text-white focus:outline-none focus:border-yellow-500/50">
            </div>

            <button type="submit"
                class="bg-yellow-500 hover:bg-yellow-400 text-slate-900 px-6 py-2 rounded-lg text-xs font-bold transition-all">
                Filter
            </button>

            @if(request()->anyFilled(['search', 'user_id', 'astrologer_id']))
                <a href="{{ route('admin.chats.index') }}" class="text-xs text-slate-500 hover:text-white transition-colors">
                    Reset
                </a>
            @endif
        </form>
    </div>

    <div class="bg-[#101828] border border-white/5 rounded-xl overflow-hidden shadow-sm">
        <table class="w-full text-left">
            <thead>
                <tr class="bg-white/[0.02] border-b border-white/5">
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Session ID
                    </th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">User</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Astrologer
                    </th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Status</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Cost</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider text-right">
                        Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
                @forelse($sessions as $session)
                    <tr class="hover:bg-white/[0.01] transition-colors group">
                        <td class="px-6 py-4 text-xs font-medium text-white">
                            #{{ $session->id }}
                        </td>
                        <td class="px-6 py-4">
                            <p class="text-xs font-semibold text-white">{{ $session->user->name ?? 'Guest' }}</p>
                        </td>
                        <td class="px-6 py-4">
                            <p class="text-xs font-semibold text-indigo-400">{{ $session->astrologer->name ?? 'N/A' }}</p>
                        </td>
                        <td class="px-6 py-4">
                            <span
                                class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase 
                                        {{ $session->status == 'active' ? 'bg-green-500/10 text-green-400' : 'bg-slate-500/10 text-slate-400' }}">
                                {{ ucfirst($session->status) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-xs text-white">
                            ₹{{ number_format($session->total_cost, 2) }}
                        </td>
                        <td class="px-6 py-4 text-right">
                            <a href="{{ route('admin.chats.show', $session->id) }}"
                                class="p-1.5 text-slate-400 hover:text-white hover:bg-white/10 rounded-md transition-all">
                                <i data-lucide="eye" class="w-3.5 h-3.5"></i>
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-6 py-12 text-center text-slate-500">
                            No chat sessions found.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-6">
        {{ $sessions->links() }}
    </div>
@endsection