@extends('layouts.superadmin')

@section('title','جلسة سقراط #'.$session->id)

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-6 sm:py-8">
    <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6 rtl">

        {{-- HERO --}}
        <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 border border-amber-400/25 shadow-2xl shadow-amber-500/10">
            <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-amber-400/18 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -left-16 w-80 h-80 rounded-full bg-fuchsia-500/18 blur-3xl"></div>

            <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-5">
                <div class="space-y-2 max-w-2xl">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-amber-300/30 text-[11px] text-amber-100">
                        <i class="fa-solid fa-file-lines text-xs"></i>
                        <span>تفاصيل جلسة سقراط • عرض الإجابات + Meta</span>
                    </div>

                    <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
                        جلسة #{{ $session->id }} <span class="text-amber-300">— {{ $session->user_name }}</span>
                    </h1>

                    <p class="text-[11px] sm:text-xs text-slate-300/80">
                        {{ $session->user_email }} • {{ $metaLine }}
                    </p>

                    <div class="flex flex-wrap gap-2 pt-1">
                        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
                            <i class="fa-solid fa-diagram-project text-[11px]"></i>
                            {{ $session->context_type }} @if($session->context_id) • #{{ $session->context_id }} @endif
                        </span>

                        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
                            <i class="fa-solid fa-layer-group text-[11px]"></i>
                            Level: L{{ $session->level }}
                        </span>

                        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border text-[11px] font-bold
                            {{ $session->status==='open'
                                ? 'bg-amber-500/10 text-amber-200 border-amber-400/25'
                                : 'bg-emerald-500/10 text-emerald-200 border-emerald-400/25' }}">
                            {{ strtoupper($session->status) }}
                        </span>
                    </div>
                </div>

                <div class="flex items-center gap-2">
                    <a href="{{ route('superadmin.socratic.sessions.index') }}"
                       class="px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
                        <i class="fa-solid fa-arrow-right ms-2 text-[11px]"></i>
                        رجوع
                    </a>

                    @if($session->status === 'open')
                        <form method="post" action="{{ route('superadmin.socratic.sessions.complete', $session->id) }}">
                            @csrf
                            <button class="inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-bold text-slate-900
                                bg-gradient-to-r from-emerald-400 via-emerald-300 to-cyan-300 shadow-lg shadow-emerald-500/30
                                hover:scale-[1.02] active:scale-100 transition">
                                <i class="fa-solid fa-circle-check ms-2 text-[11px]"></i>
                                إنهاء الجلسة
                            </button>
                        </form>
                    @else
                        <form method="post" action="{{ route('superadmin.socratic.sessions.reopen', $session->id) }}">
                            @csrf
                            <button class="inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-bold text-slate-900
                                bg-gradient-to-r from-amber-400 via-amber-300 to-fuchsia-200 shadow-lg shadow-amber-500/30
                                hover:scale-[1.02] active:scale-100 transition">
                                <i class="fa-solid fa-rotate ms-2 text-[11px]"></i>
                                إعادة فتح
                            </button>
                        </form>
                    @endif
                </div>
            </div>
        </div>

        @if(session('success'))
            <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 text-emerald-200 px-4 py-3 text-sm">
                {{ session('success') }}
            </div>
        @endif

        @if($missingRequired->count())
            <div class="rounded-3xl border border-rose-500/25 bg-rose-500/10 px-5 py-4 text-rose-200">
                <div class="font-extrabold mb-2 text-sm">أسئلة إلزامية ناقصة</div>
                <ul class="list-disc pl-5 text-sm text-rose-100/90 space-y-1">
                    @foreach($missingRequired as $q)
                        <li>{{ $q->question_text }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- META --}}
        <div class="rounded-3xl bg-gradient-to-br from-slate-900 to-slate-950 border border-white/10 shadow-xl p-5 sm:p-6">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <h2 class="text-sm sm:text-base font-bold text-cyan-200">تفاصيل الحدث (Meta)</h2>
                    <p class="text-[11px] sm:text-xs text-slate-300/80 mt-1">وين/متى/نوع الحالة/late_minutes…</p>
                </div>
                <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/70">
                    <i class="fa-solid fa-location-dot text-[11px]"></i>
                    Context Trace
                </span>
            </div>

            @if($meta)
                <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                    @foreach($meta as $k => $v)
                        <div class="rounded-2xl border border-white/10 bg-black/35 p-4">
                            <div class="text-[10px] text-slate-300/80">{{ $k }}</div>
                            <div class="mt-1 text-sm text-white break-words">
                                @if(is_array($v))
                                    <pre class="text-xs text-white/80 whitespace-pre-wrap">{{ json_encode($v, JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT) }}</pre>
                                @else
                                    {{ $v }}
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="mt-4 rounded-2xl border border-dashed border-white/15 bg-black/30 px-4 py-8 text-center text-slate-300/80 text-sm">
                    لا يوجد Meta مخزّن لهذه الجلسة.
                </div>
            @endif
        </div>

        {{-- ANSWERS --}}
        <div class="rounded-3xl border border-white/10 bg-slate-950/80 overflow-hidden shadow-xl">
            <div class="px-4 sm:px-6 py-4 border-b border-white/10">
                <h2 class="text-sm sm:text-base font-bold text-fuchsia-200">الإجابات</h2>
                <p class="text-[11px] sm:text-xs text-slate-300/80 mt-1">نفس البيانات — تصميم أوضح ومهيّب.</p>
            </div>

            <div class="divide-y divide-white/5">
                @forelse($answers as $a)
                    <div class="p-4 sm:p-6">
                        <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
                            <div class="min-w-0">
                                <div class="flex flex-wrap items-center gap-2">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
                                        Q#{{ $a->question_id }} • L{{ $a->question_level }}
                                    </span>

                                    @if((int)$a->is_required === 1)
                                        <span class="inline-flex items-center px-3 py-1 rounded-full bg-rose-500/10 border border-rose-400/25 text-rose-200 text-[11px] font-bold">
                                            إلزامي
                                        </span>
                                    @endif

                                    <span class="text-[11px] text-slate-300/70">{{ $a->created_at }}</span>
                                </div>

                                <div class="mt-2 text-white font-extrabold text-sm leading-relaxed">
                                    {{ $a->question_text }}
                                </div>
                            </div>

                            <div class="shrink-0">
                                <span class="inline-flex items-center justify-center w-10 h-10 rounded-2xl bg-fuchsia-500/15 border border-fuchsia-400/25 text-fuchsia-200">
                                    <i class="fa-solid fa-quote-right text-[12px]"></i>
                                </span>
                            </div>
                        </div>

                        <div class="mt-4 rounded-2xl border border-white/10 bg-black/30 p-4 text-sm text-slate-100 whitespace-pre-wrap">
                            {{ $a->answer }}
                        </div>
                    </div>
                @empty
                    <div class="px-4 py-10 text-center text-slate-300/80 text-sm">
                        لا توجد إجابات داخل هذه الجلسة.
                    </div>
                @endforelse
            </div>
        </div>

    </div>
</div>
@endsection