@extends('layouts.admin')

@section('content')
<div class="mb-6 flex items-center justify-between">
    <div>
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-cyan-200">AI Question Analyzer</p>
        <h1 class="mt-2 text-3xl font-semibold text-white">Analyze a Question</h1>
        <p class="mt-2 max-w-3xl text-sm text-slate-300">
            Ek question paste karo → AI batayega difficulty level, exam probability, concept, aur bahut kuch.
        </p>
    </div>
</div>

@if(session('status'))
    <div class="mb-5 rounded-xl border border-emerald-400/30 bg-emerald-500/10 px-4 py-2 text-sm text-emerald-200">{{ session('status') }}</div>
@endif
@if($errors->any())
    <div class="mb-5 rounded-xl border border-rose-400/30 bg-rose-500/10 px-4 py-3 text-sm text-rose-100">
        @foreach($errors->all() as $e) <div>{{ $e }}</div> @endforeach
    </div>
@endif

{{-- ═══════════ FORM ═══════════ --}}
<form method="POST" action="{{ route('admin.question-analyzer.analyze') }}"
      class="rounded-2xl border border-white/10 bg-slate-900/60 p-6 backdrop-blur mb-6 space-y-5">
    @csrf

    <div>
        <label class="block text-sm font-semibold text-slate-100 mb-2">
            Question Text <span class="text-rose-400">*</span>
        </label>
        <textarea name="question_text" rows="4" required
                  placeholder="Enter the question here..."
                  class="w-full p-3 rounded-lg bg-slate-800 border border-white/10 text-white placeholder-slate-500">{{ old('question_text') }}</textarea>
    </div>

    <div>
        <label class="block text-sm font-semibold text-slate-100 mb-2">Options (optional)</label>
        <div class="grid gap-3 sm:grid-cols-2">
            @for($i = 0; $i < 4; $i++)
                <div class="flex items-center gap-2">
                    <span class="w-6 h-6 flex items-center justify-center rounded bg-slate-700 text-slate-300 text-xs font-bold shrink-0">
                        {{ chr(65 + $i) }}
                    </span>
                    <input type="text" name="options[]" value="{{ old("options.{$i}") }}"
                           placeholder="Option {{ chr(65 + $i) }}"
                           class="flex-1 p-2 rounded-lg bg-slate-800 border border-white/10 text-white placeholder-slate-500 text-sm">
                </div>
            @endfor
        </div>
    </div>

    <div class="grid gap-4 md:grid-cols-2">
        <div>
            <label class="block text-sm font-semibold text-slate-100 mb-2">Correct Answer (optional)</label>
            <input type="text" name="correct_answer" value="{{ old('correct_answer') }}"
                   placeholder="e.g. B) Babur"
                   class="w-full p-3 rounded-lg bg-slate-800 border border-white/10 text-white">
        </div>
        <div>
            <label class="block text-sm font-semibold text-slate-100 mb-2">Exam Type</label>
            <input type="text" name="exam_type" value="{{ old('exam_type') }}"
                   placeholder="SSC CGL / RAS / UPSC / IBPS"
                   class="w-full p-3 rounded-lg bg-slate-800 border border-white/10 text-white">
        </div>
        <div>
            <label class="block text-sm font-semibold text-slate-100 mb-2">Subject</label>
            <input type="text" name="subject" value="{{ old('subject') }}"
                   placeholder="History / Polity / Reasoning"
                   class="w-full p-3 rounded-lg bg-slate-800 border border-white/10 text-white">
        </div>
        <div>
            <label class="block text-sm font-semibold text-slate-100 mb-2">Topic</label>
            <input type="text" name="topic" value="{{ old('topic') }}"
                   placeholder="Mughal Empire"
                   class="w-full p-3 rounded-lg bg-slate-800 border border-white/10 text-white">
        </div>
    </div>

    <button type="submit" class="admin-action-btn bg-cyan-600 text-white">
        🔍 Analyze Question
    </button>
</form>

{{-- ═══════════ RESULT ═══════════ --}}
@if(session('analysis'))
    @php $a = session('analysis'); @endphp

    <div class="space-y-5">
        {{-- Header --}}
        <div class="rounded-2xl border border-cyan-400/30 bg-gradient-to-br from-slate-900/90 via-slate-900/70 to-cyan-950/40 p-6 backdrop-blur">
            <div class="flex flex-wrap items-start justify-between gap-4">
                <div class="min-w-0 flex-1">
                    <p class="text-[10px] font-bold uppercase tracking-[0.24em] text-cyan-300">Question Analysis</p>
                    <h2 class="mt-2 text-lg font-semibold text-white leading-relaxed">
                        {{ Str::limit($a->question_text, 200) }}
                    </h2>
                </div>

                @php
                    $color = $a->difficulty === 'easy' ? 'emerald' : ($a->difficulty === 'hard' ? 'rose' : 'amber');
                @endphp
                <span class="px-4 py-2 rounded-full text-sm font-bold uppercase tracking-widest border
                    bg-{{ $color }}-500/20 text-{{ $color }}-200 border-{{ $color }}-400/40">
                    {{ strtoupper($a->difficulty ?? 'N/A') }}
                </span>
            </div>
        </div>

        {{-- 4 Main Cards --}}
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <div class="relative rounded-2xl border border-white/10 bg-slate-950/60 p-5 overflow-hidden">
                <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-cyan-400 to-blue-500"></div>
                <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">Difficulty Score</p>
                <p class="mt-2 text-4xl font-bold text-white">{{ $a->difficulty_score ?? '—' }}<span class="text-lg text-slate-500">/100</span></p>
            </div>

            <div class="relative rounded-2xl border border-white/10 bg-slate-950/60 p-5 overflow-hidden">
                <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-emerald-400 to-teal-500"></div>
                <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">Exam Probability</p>
                <p class="mt-2 text-4xl font-bold text-white">{{ $a->exam_probability ?? '—' }}<span class="text-lg text-slate-500">%</span></p>
            </div>

            <div class="relative rounded-2xl border border-white/10 bg-slate-950/60 p-5 overflow-hidden">
                <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-amber-400 to-orange-500"></div>
                <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">PYQ Frequency</p>
                <p class="mt-2 text-4xl font-bold text-white">{{ $a->pyq_frequency ?? '—' }}<span class="text-lg text-slate-500">×</span></p>
            </div>

            <div class="relative rounded-2xl border border-white/10 bg-slate-950/60 p-5 overflow-hidden">
                <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-pink-400 to-rose-500"></div>
                <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">Est. Time</p>
                <p class="mt-2 text-4xl font-bold text-white">{{ $a->estimated_time_seconds ?? '—' }}<span class="text-lg text-slate-500">s</span></p>
            </div>
        </div>

        {{-- Concept + Bloom --}}
        <div class="grid gap-4 sm:grid-cols-2">
            <div class="rounded-2xl border border-white/10 bg-slate-900/60 p-5 backdrop-blur">
                <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-cyan-300 mb-2">Concept Tested</p>
                <p class="text-white font-semibold">{{ $a->concept_tested ?? '—' }}</p>
            </div>
            <div class="rounded-2xl border border-white/10 bg-slate-900/60 p-5 backdrop-blur">
                <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-cyan-300 mb-2">Bloom Level</p>
                <p class="text-white font-semibold uppercase">{{ $a->bloom_level ?? '—' }}</p>
            </div>
        </div>

        {{-- Reason --}}
        @if($a->reason)
            <div class="rounded-2xl border border-white/10 bg-slate-900/60 p-5 backdrop-blur">
                <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-cyan-300 mb-2">Why This Difficulty?</p>
                <p class="text-slate-200 leading-relaxed">{{ $a->reason }}</p>
            </div>
        @endif

        {{-- 2-column: Trap + Prerequisite --}}
        <div class="grid gap-4 sm:grid-cols-2">
            @if($a->common_trap)
                <div class="rounded-2xl border border-rose-400/30 bg-rose-950/20 p-5 backdrop-blur">
                    <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-rose-300 mb-2">Common Trap</p>
                    <p class="text-rose-100 text-sm">{{ $a->common_trap }}</p>
                </div>
            @endif
            @if($a->prerequisite)
                <div class="rounded-2xl border border-amber-400/30 bg-amber-950/20 p-5 backdrop-blur">
                    <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-amber-300 mb-2">Prerequisite</p>
                    <p class="text-amber-100 text-sm">{{ $a->prerequisite }}</p>
                </div>
            @endif
        </div>

        {{-- Explanation --}}
        @if($a->explanation)
            <div class="rounded-2xl border border-white/10 bg-slate-900/60 p-5 backdrop-blur">
                <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-cyan-300 mb-2">Explanation</p>
                <p class="text-slate-200 leading-relaxed">{{ $a->explanation }}</p>
            </div>
        @endif

        {{-- Recommendation --}}
        @if($a->recommendation)
            <div class="rounded-2xl border border-emerald-400/30 bg-emerald-950/20 p-5 backdrop-blur">
                <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-emerald-300 mb-2">📚 Recommendation</p>
                <p class="text-emerald-100">{{ $a->recommendation }}</p>
            </div>
        @endif

        {{-- Confidence --}}
        @if($a->confidence)
            <div class="rounded-2xl border border-white/10 bg-slate-900/60 p-4 backdrop-blur text-center">
                <p class="text-xs text-slate-400">
                    Confidence: <span class="font-bold uppercase {{ $a->confidence === 'high' ? 'text-emerald-300' : ($a->confidence === 'low' ? 'text-rose-300' : 'text-amber-300') }}">{{ $a->confidence }}</span>
                </p>
            </div>
        @endif
    </div>
@endif

{{-- ═══════════ RECENT ANALYSES ═══════════ --}}
@if($recent->isNotEmpty())
    <div class="mt-8 rounded-2xl border border-white/10 bg-slate-900/60 p-6 backdrop-blur">
        <h3 class="text-base font-semibold text-white mb-4">Recent Analyses</h3>
        <div class="space-y-2">
            @foreach($recent as $r)
                <div class="flex items-center justify-between gap-3 p-3 rounded-lg bg-slate-800/40 border border-white/5">
                    <p class="text-sm text-slate-300 truncate flex-1">{{ Str::limit($r->question_text, 80) }}</p>
                    <span class="px-2 py-1 rounded text-[10px] font-bold uppercase
                        {{ $r->difficulty === 'easy' ? 'bg-emerald-500/20 text-emerald-200' : ($r->difficulty === 'hard' ? 'bg-rose-500/20 text-rose-200' : 'bg-amber-500/20 text-amber-200') }}">
                        {{ $r->difficulty }}
                    </span>
                    <form method="POST" action="{{ route('admin.question-analyzer.destroy', $r) }}" x-data
                          @submit.prevent="appConfirm('Delete?', {title:'Delete', confirmText:'Delete'}).then(c=>c && $el.submit())">
                        @csrf @method('DELETE')
                        <button class="text-rose-400 hover:text-rose-300 text-xs">Delete</button>
                    </form>
                </div>
            @endforeach
        </div>
    </div>
@endif
@endsection