@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 Cut-off Predictor</p>
        <h1 class="mt-2 text-3xl font-semibold text-white">Predict Cut-off</h1>
        <p class="mt-2 max-w-3xl text-sm text-slate-300">
            Select history sessions + target session. AI will calculate the average difficulty of each session and predict the cut-off.
        </p>
    </div>
    <a href="{{ route('admin.exam-sessions.index') }}" class="admin-action-btn bg-slate-700 text-white">Sessions</a>
</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 method="POST" action="{{ route('admin.pyq.predictor.run') }}"
      class="rounded-2xl border border-white/10 bg-slate-900/60 p-6 backdrop-blur mb-6 space-y-6">
    @csrf

    <div class="grid gap-4 md:grid-cols-3">
        <div>
            <label class="block text-sm font-semibold text-slate-100 mb-2">Exam Type</label>
            <select name="exam_type"
                    onchange="window.location.href='{{ route('admin.pyq.predictor.index') }}?exam_type=' + this.value"
                    class="w-full p-3 rounded-lg bg-slate-800 border border-white/10 text-white">
                @foreach($examTypes as $t)
                    <option value="{{ $t }}" @selected($examType === $t)>{{ $t }}</option>
                @endforeach
            </select>
        </div>

        <div>
            <label class="block text-sm font-semibold text-slate-100 mb-2">Target Session (the one to predict for)</label>
            <select name="target_session_id" required class="w-full p-3 rounded-lg bg-slate-800 border border-white/10 text-white">
                <option value="">-- Select Target Session --</option>
                @foreach($sessions as $s)
                    <option value="{{ $s->id }}" @selected(old('target_session_id') == $s->id)>
                        {{ $s->session_name }} ({{ $s->shifts_count }} shifts)
                    </option>
                @endforeach
            </select>
        </div>

        <div>
            <label class="block text-sm font-semibold text-slate-100 mb-2">Predict For Year</label>
            <input type="number" name="predict_for_year" value="{{ old('predict_for_year', date('Y')) }}"
                   min="1950" max="{{ date('Y') + 5 }}" required
                   class="w-full p-3 rounded-lg bg-slate-800 border border-white/10 text-white">
        </div>
    </div>

    <div>
        <label class="block text-sm font-semibold text-slate-100 mb-2">History Sessions (those with actual cut-off)</label>
        <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3 max-h-96 overflow-y-auto p-3 rounded-xl bg-slate-800/40 border border-white/10">
            @forelse($sessions as $s)
                @if($s->cut_off_general)
                    <label class="flex items-start gap-3 p-3 rounded-lg bg-slate-900/60 border border-white/5 hover:border-cyan-400/30 cursor-pointer">
                        <input type="checkbox" name="history_session_ids[]" value="{{ $s->id }}"
                               class="mt-1 accent-cyan-500"
                               @checked(in_array($s->id, old('history_session_ids', [])))>
                        <div class="min-w-0">
                            <p class="text-sm font-semibold text-white">{{ $s->session_name }}</p>
                            <p class="text-xs text-slate-400">
                                {{ $s->shifts_count }} shifts · G{{ $s->cut_off_general }}
                            </p>
                        </div>
                    </label>
                @endif
            @empty
                <p class="text-slate-400 p-2">No sessions found for this exam type.</p>
            @endforelse
        </div>
    </div>

    <button type="submit" class="admin-action-btn bg-cyan-600 text-white">🔮 Predict Cut-off</button>
</form>

{{-- RESULT --}}
@if(session('prediction'))
    @php $r = session('prediction'); @endphp

    <div class="space-y-5">

        {{-- Header --}}
        <div class="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-cyan-400/20 bg-slate-900/60 px-6 py-4 backdrop-blur">
            <div>
                <p class="text-[10px] font-bold uppercase tracking-[0.24em] text-cyan-300">Prediction</p>
                <h2 class="mt-1 text-2xl font-bold text-white">
                    {{ $r['prediction']['target_year'] ?? '—' }} · {{ $r['prediction']['target_session'] ?? '—' }}
                </h2>
            </div>
            @php
                $conf = $r['prediction']['confidence'] ?? 'n/a';
                $confColor = match($conf) {
                    'high' => 'bg-emerald-500/20 text-emerald-200 border-emerald-400/40',
                    'medium' => 'bg-amber-500/20 text-amber-200 border-amber-400/40',
                    default => 'bg-rose-500/20 text-rose-200 border-rose-400/40',
                };
            @endphp
            <span class="inline-block px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest border {{ $confColor }}">
                {{ $conf }} confidence
            </span>
        </div>

        {{-- Category Cut-off --}}
        @php
            $cut = $r['prediction']['predicted_cutoff'] ?? [];
            $ci = $r['prediction']['confidence_interval'] ?? [];
            $cats = [
                'general' => ['label' => 'General', 'color' => 'from-cyan-400 to-blue-500'],
                'obc' => ['label' => 'OBC', 'color' => 'from-emerald-400 to-teal-500'],
                'sc' => ['label' => 'SC', 'color' => 'from-amber-400 to-orange-500'],
                'st' => ['label' => 'ST', 'color' => 'from-pink-400 to-rose-500'],
            ];
        @endphp

        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            @foreach($cats as $key => $meta)
                @php
                    $val = $cut[$key] ?? null;
                    $range = $ci[$key] ?? 0;
                    $min = $val !== null ? $val - $range : null;
                    $max = $val !== null ? $val + $range : null;
                @endphp
                <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 {{ $meta['color'] }}"></div>
                    <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">{{ $meta['label'] }}</p>
                    <p class="mt-2 text-4xl font-bold text-white">{{ $val ?? '—' }}</p>
                    @if($val !== null && $range)
                        <p class="mt-1 text-xs text-slate-400">Range: {{ $min }} – {{ $max }}</p>
                    @endif
                </div>
            @endforeach
        </div>
        
        {{-- ⭐ NEW: Cut-off Factors Breakdown --}}
        @if(!empty($r['cut_off_factors']))
            @php $cf = $r['cut_off_factors']; @endphp
            <div class="rounded-2xl border border-cyan-400/20 bg-slate-900/60 p-6 backdrop-blur">
                <h3 class="text-base font-semibold text-white mb-4 flex items-center gap-2">
                    <svg class="h-4 w-4 text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m-6 4h6m-6 4h6M5 3h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2z"/>
                    </svg>
                    Prediction Breakdown (how it was calculated)
                </h3>
        
                @php
                    $cats = ['general' => 'General', 'obc' => 'OBC', 'sc' => 'SC', 'st' => 'ST'];
                    $base = $cf['base_value'] ?? [];
                    $diff = $cf['difficulty_impact'] ?? [];
                    $comp = $cf['competition_impact'] ?? [];
                    $trend = $cf['trend_impact'] ?? [];
                @endphp
        
                <div class="overflow-x-auto rounded-xl border border-white/10">
                    <table class="w-full text-sm text-slate-200">
                        <thead class="bg-slate-800/60 text-xs uppercase tracking-wider">
                            <tr>
                                <th class="p-3 text-left">Factor</th>
                                <th class="p-3 text-right">General</th>
                                <th class="p-3 text-right">OBC</th>
                                <th class="p-3 text-right">SC</th>
                                <th class="p-3 text-right">ST</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-t border-white/5">
                                <td class="p-3 text-slate-300">Base (last year)</td>
                                @foreach($cats as $k => $l)
                                    <td class="p-3 text-right">{{ $base[$k] ?? '—' }}</td>
                                @endforeach
                            </tr>
                            <tr class="border-t border-white/5">
                                <td class="p-3 text-slate-300">Difficulty impact</td>
                                @foreach($cats as $k => $l)
                                    @php $v = $diff[$k] ?? 0; @endphp
                                    <td class="p-3 text-right font-semibold {{ $v >= 0 ? 'text-emerald-400' : 'text-rose-400' }}">
                                        {{ $v >= 0 ? '+' : '' }}{{ $v }}
                                    </td>
                                @endforeach
                            </tr>
                            <tr class="border-t border-white/5">
                                <td class="p-3 text-slate-300">Competition impact</td>
                                @foreach($cats as $k => $l)
                                    @php $v = $comp[$k] ?? 0; @endphp
                                    <td class="p-3 text-right font-semibold {{ $v >= 0 ? 'text-emerald-400' : 'text-rose-400' }}">
                                        {{ $v >= 0 ? '+' : '' }}{{ $v }}
                                    </td>
                                @endforeach
                            </tr>
                            <tr class="border-t border-white/5">
                                <td class="p-3 text-slate-300">Trend impact</td>
                                @foreach($cats as $k => $l)
                                    @php $v = $trend[$k] ?? 0; @endphp
                                    <td class="p-3 text-right font-semibold {{ $v >= 0 ? 'text-emerald-400' : 'text-rose-400' }}">
                                        {{ $v >= 0 ? '+' : '' }}{{ $v }}
                                    </td>
                                @endforeach
                            </tr>
                            <tr class="border-t border-cyan-400/30 bg-cyan-500/5">
                                <td class="p-3 font-bold text-cyan-200">Final Predicted</td>
                                @foreach($cats as $k => $l)
                                    <td class="p-3 text-right font-bold text-cyan-200 text-lg">
                                        {{ $r['prediction']['predicted_cutoff'][$k] ?? '—' }}
                                    </td>
                                @endforeach
                            </tr>
                        </tbody>
                    </table>
                </div>
        
                @if(!empty($cf['explanation']))
                    <p class="mt-4 text-sm text-slate-300 leading-relaxed">
                        <b class="text-white">Reason:</b> {{ $cf['explanation'] }}
                    </p>
                @endif
            </div>
        @endif

        {{-- Trend Chart --}}
        @if(!empty($r['yearly_cutoff_table']))
            <div class="rounded-2xl border border-white/10 bg-slate-900/60 p-6 backdrop-blur">
                <h3 class="text-base font-semibold text-white mb-4">Cut-off Trend</h3>
                <div style="height: 280px;"><canvas id="cutoffTrendChart"></canvas></div>
            </div>
        @endif

        {{-- Subject + Topic Charts --}}
        <div class="grid gap-5 lg:grid-cols-2">
            @if(!empty($r['subject_weightage']))
                <div class="rounded-2xl border border-white/10 bg-slate-900/60 p-6 backdrop-blur">
                    <h3 class="text-base font-semibold text-white mb-4">📊 Subject Weightage</h3>
                    <div style="height: 300px;"><canvas id="subjectChart"></canvas></div>
                </div>
            @endif
            @if(!empty($r['topic_weightage']))
                <div class="rounded-2xl border border-white/10 bg-slate-900/60 p-6 backdrop-blur">
                    <h3 class="text-base font-semibold text-white mb-4">🎯 Topic Weightage (Top 10)</h3>
                    <div style="height: 300px;"><canvas id="topicChart"></canvas></div>
                </div>
            @endif
        </div>

        {{-- Subject-Topic Breakdown --}}
        @if(!empty($r['subject_topic_breakdown']))
            <div class="rounded-2xl border border-white/10 bg-slate-900/60 p-6 backdrop-blur">
                <h3 class="text-base font-semibold text-white mb-4">📚 Subject-wise Topic Breakdown</h3>
                <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                    @foreach($r['subject_topic_breakdown'] as $group)
                        <div class="rounded-xl border border-white/10 bg-slate-950/50 p-4">
                            <div class="flex items-center justify-between mb-3">
                                <p class="font-semibold text-white">{{ $group['subject'] ?? '—' }}</p>
                                <span class="text-xs font-bold text-cyan-300">{{ $group['weightage'] ?? 0 }}%</span>
                            </div>
                            <ul class="space-y-1.5">
                                @foreach($group['topics'] ?? [] as $topic)
                                    <li class="flex items-center justify-between text-xs">
                                        <span class="text-slate-300 truncate">{{ $topic['name'] ?? '—' }}</span>
                                        <span class="text-slate-400 shrink-0 ml-2">{{ $topic['weightage'] ?? 0 }}%</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        {{-- Important + Ignored --}}
        <div class="grid gap-5 lg:grid-cols-2">
            @if(!empty($r['important_topics']))
                <div class="rounded-2xl border border-emerald-400/30 bg-emerald-950/20 p-6 backdrop-blur">
                    <h3 class="text-base font-semibold text-emerald-200 mb-4">✅ Important Topics</h3>
                    <ul class="space-y-2">
                        @foreach($r['important_topics'] as $t)
                            <li class="flex items-start justify-between gap-3 text-sm">
                                <span class="text-emerald-100">{{ $t['topic'] ?? '—' }} <span class="text-xs text-slate-400">· {{ $t['subject'] ?? '' }}</span></span>
                                <span class="text-xs font-bold text-emerald-300 shrink-0">{{ $t['weightage'] ?? 0 }}%</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if(!empty($r['ignored_topics']))
                <div class="rounded-2xl border border-slate-500/30 bg-slate-800/30 p-6 backdrop-blur">
                    <h3 class="text-base font-semibold text-slate-200 mb-4">⚠️ Ignored Topics</h3>
                    <ul class="space-y-2">
                        @foreach($r['ignored_topics'] as $t)
                            <li class="flex items-start justify-between gap-3 text-sm">
                                <span class="text-slate-300">{{ $t['topic'] ?? '—' }} <span class="text-xs text-slate-500">· {{ $t['subject'] ?? '' }}</span></span>
                                <span class="text-xs text-slate-400 shrink-0">{{ $t['weightage'] ?? 0 }}%</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>

        {{-- Reasoning --}}
        @if(!empty($r['prediction']['reasoning']))
            <div class="rounded-2xl border border-cyan-400/20 bg-slate-900/60 p-6 backdrop-blur">
                <h3 class="text-xs uppercase tracking-widest text-cyan-300 mb-3">AI Reasoning</h3>
                <p class="text-slate-200 leading-relaxed">{{ $r['prediction']['reasoning'] }}</p>
            </div>
        @endif
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            if (typeof Chart === 'undefined') return;
            Chart.defaults.color = '#cbd5e1';
            Chart.defaults.borderColor = 'rgba(255,255,255,0.08)';

            const trendData = @json($r['yearly_cutoff_table'] ?? []);
            const trendCanvas = document.getElementById('cutoffTrendChart');
            if (trendCanvas && trendData.length) {
                new Chart(trendCanvas, {
                    type: 'line',
                    data: {
                        labels: trendData.map(d => d.year),
                        datasets: [
                            { label: 'General', data: trendData.map(d => d.general), borderColor: '#22d3ee', tension: 0.35, fill: false, borderWidth: 2, pointRadius: 4 },
                            { label: 'OBC', data: trendData.map(d => d.obc), borderColor: '#34d399', tension: 0.35, fill: false, borderWidth: 2, pointRadius: 3 },
                            { label: 'SC', data: trendData.map(d => d.sc), borderColor: '#fbbf24', tension: 0.35, fill: false, borderWidth: 2, pointRadius: 3 },
                            { label: 'ST', data: trendData.map(d => d.st), borderColor: '#f472b6', tension: 0.35, fill: false, borderWidth: 2, pointRadius: 3 },
                        ]
                    },
                    options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'top', labels: { boxWidth: 12, padding: 15 } } },
                        scales: { y: { beginAtZero: false, grid: { color: 'rgba(255,255,255,0.05)' } }, x: { grid: { display: false } } } }
                });
            }

            const subjData = @json($r['subject_weightage'] ?? []);
            const subjCanvas = document.getElementById('subjectChart');
            if (subjCanvas && subjData.length) {
                new Chart(subjCanvas, {
                    type: 'doughnut',
                    data: { labels: subjData.map(s => s.subject), datasets: [{ data: subjData.map(s => s.percentage),
                        backgroundColor: ['#22d3ee','#34d399','#fbbf24','#f472b6','#a78bfa','#fb923c','#60a5fa','#facc15'], borderColor: '#0f172a', borderWidth: 2 }] },
                    options: { responsive: true, maintainAspectRatio: false, cutout: '55%',
                        plugins: { legend: { position: 'right', labels: { boxWidth: 12, padding: 10 } } } }
                });
            }

            const topicData = @json($r['topic_weightage'] ?? []);
            const topicCanvas = document.getElementById('topicChart');
            if (topicCanvas && topicData.length) {
                new Chart(topicCanvas, {
                    type: 'bar',
                    data: { labels: topicData.map(t => t.topic), datasets: [{ data: topicData.map(t => t.weightage),
                        backgroundColor: 'rgba(34,211,238,0.6)', borderColor: '#22d3ee', borderWidth: 1, borderRadius: 6 }] },
                    options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false,
                        plugins: { legend: { display: false } },
                        scales: { x: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.05)' } }, y: { grid: { display: false } } } }
                });
            }
        });
    </script>
@endif
@endsection