@extends('layouts.admin')

@section('title', 'تفاصيل طلب AI')
@section('heading', 'تفاصيل طلب الذكاء الاصطناعي')
@section('subheading')
    الطلب #{{ $request->id }}
@endsection

@section('content')
    <div class="mb-6 flex flex-wrap items-center gap-4">
        <a href="{{ route('admin.ai-requests.index') }}" class="text-sm font-medium text-teal-700 hover:underline">← العودة إلى القائمة</a>
        @if ($request->user)
            <a href="{{ route('admin.users.show', $request->user) }}" class="text-sm font-medium text-zinc-600 hover:underline">عرض المستخدم</a>
        @endif
    </div>

    <div class="grid gap-6 lg:grid-cols-3">
        <div class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm lg:col-span-1">
            <h2 class="mb-4 text-base font-bold text-zinc-900">معلومات</h2>
            <dl class="space-y-3 text-sm">
                <div>
                    <dt class="text-xs text-zinc-500">المعرف</dt>
                    <dd class="font-mono font-medium">{{ $request->id }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-zinc-500">المستخدم</dt>
                    <dd>
                        @if ($request->user)
                            <a href="{{ route('admin.users.show', $request->user) }}" class="font-medium text-teal-700 hover:underline">{{ $request->user->username }}</a>
                        @else
                            —
                        @endif
                    </dd>
                </div>
                <div>
                    <dt class="text-xs text-zinc-500">الحالة</dt>
                    <dd><span class="rounded-full bg-zinc-100 px-2 py-0.5 text-xs font-medium">{{ $request->status }}</span></dd>
                </div>
                <div>
                    <dt class="text-xs text-zinc-500">الرموز</dt>
                    <dd class="font-mono">{{ $request->tokens_used }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-zinc-500">تاريخ الإنشاء</dt>
                    <dd>{{ $request->created_at?->format('Y-m-d H:i:s') }}</dd>
                </div>
            </dl>
        </div>

        <div class="space-y-6 lg:col-span-2">
            <div class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm">
                <h2 class="mb-3 text-base font-bold text-zinc-900">المطالبة (Prompt)</h2>
                <pre class="max-h-[28rem] overflow-auto whitespace-pre-wrap break-words rounded-xl bg-zinc-50 p-4 text-sm leading-relaxed text-zinc-800">{{ $request->prompt }}</pre>
            </div>
            <div class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm">
                <h2 class="mb-3 text-base font-bold text-zinc-900">الرد (Response)</h2>
                <pre class="max-h-[28rem] overflow-auto whitespace-pre-wrap break-words rounded-xl bg-zinc-50 p-4 text-sm leading-relaxed text-zinc-800">{{ $request->response ?? '—' }}</pre>
            </div>
        </div>
    </div>
@endsection