@extends('layouts.admin')

@section('title', 'طلبات AI')
@section('heading', 'طلبات الذكاء الاصطناعي')
@section('subheading', 'سجل الطلبات والردود')

@section('content')
    <form method="get" action="{{ route('admin.ai-requests.index') }}" class="mb-6 flex flex-col gap-4 rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm sm:flex-row sm:items-end">
        <div class="flex-1">
            <label for="q" class="mb-1 block text-sm font-medium text-zinc-700">بحث</label>
            <input id="q" name="q" type="search" value="{{ $q }}"
                   placeholder="نص في المطالبة أو الرد، أو اسم المستخدم…"
                   class="w-full rounded-xl border border-zinc-300 bg-zinc-50 px-4 py-2.5 text-sm">
        </div>
        <div class="w-full sm:w-48">
            <label for="status" class="mb-1 block text-sm font-medium text-zinc-700">الحالة</label>
            <select id="status" name="status" class="w-full rounded-xl border border-zinc-300 bg-white px-4 py-2.5 text-sm">
                <option value="">الكل</option>
                <option value="pending" @selected($status === 'pending')>معلق</option>
                <option value="completed" @selected($status === 'completed')>مكتمل</option>
                <option value="failed" @selected($status === 'failed')>فشل</option>
            </select>
        </div>
        <button type="submit" class="rounded-xl bg-madar-950 px-6 py-2.5 text-sm font-bold text-white hover:bg-madar-900">تطبيق</button>
        <a href="{{ route('admin.ai-requests.index') }}" class="rounded-xl border border-zinc-300 px-6 py-2.5 text-center text-sm font-medium text-zinc-700 hover:bg-zinc-50">مسح</a>
    </form>

    <div class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-zinc-200 text-sm">
                <thead class="bg-zinc-50 text-right text-xs font-semibold uppercase tracking-wide text-zinc-500">
                    <tr>
                        <th class="px-4 py-3">#</th>
                        <th class="px-4 py-3">المستخدم</th>
                        <th class="px-4 py-3">الحالة</th>
                        <th class="px-4 py-3">الرموز</th>
                        <th class="px-4 py-3">المطالبة</th>
                        <th class="px-4 py-3">الرد</th>
                        <th class="px-4 py-3">التاريخ</th>
                        <th class="px-4 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-zinc-100">
                    @forelse ($requests as $req)
                        <tr class="align-top hover:bg-zinc-50/80">
                            <td class="whitespace-nowrap px-4 py-3 text-zinc-500">{{ $req->id }}</td>
                            <td class="whitespace-nowrap px-4 py-3">
                                @if ($req->user)
                                    <a href="{{ route('admin.users.show', $req->user) }}" class="text-teal-700 hover:underline">{{ $req->user->username }}</a>
                                @else
                                    —
                                @endif
                            </td>
                            <td class="px-4 py-3">
                                <span class="inline-flex rounded-full bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-700">{{ $req->status }}</span>
                            </td>
                            <td class="whitespace-nowrap px-4 py-3 font-mono">{{ $req->tokens_used }}</td>
                            <td class="max-w-xs px-4 py-3 text-zinc-800"><span class="line-clamp-3">{{ $req->prompt }}</span></td>
                            <td class="max-w-xs px-4 py-3 text-zinc-600"><span class="line-clamp-3">{{ $req->response ?? '—' }}</span></td>
                            <td class="whitespace-nowrap px-4 py-3 text-zinc-500">{{ $req->created_at?->format('Y-m-d H:i') }}</td>
                            <td class="px-4 py-3">
                                <a href="{{ route('admin.ai-requests.show', $req) }}" class="text-xs font-bold text-teal-700 hover:underline">تفاصيل</a>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="8" class="px-4 py-12 text-center text-zinc-500">لا توجد طلبات.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="border-t border-zinc-100 px-4 py-3">
            {{ $requests->links() }}
        </div>
    </div>
@endsection