@extends('admin.layouts.app')

@section('title', 'Assessment Bank')
@section('page-title', 'Final Assessment')
@section('page-title-jp', '最終試験管理')

@section('content')

@php
// $component is a reserved Blade variable inside component slots → alias it immediately
$selectedComponent = $component;
$componentLabels = [
    'vocab'     => 'Kosakata',
    'kanji'     => 'Kanji',
    'grammar'   => 'Tata Bahasa',
    'reading'   => 'Membaca',
    'listening' => 'Menyimak',
];
$componentIcons = [
    'vocab'     => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/>',
    'kanji'     => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>',
    'grammar'   => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/>',
    'reading'   => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>',
    'listening' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/>',
];
$metricColors = ['vocab' => 'primary', 'kanji' => 'warning', 'grammar' => 'success', 'reading' => 'info', 'listening' => 'purple'];

$totalItems   = $bankCounts->sum('total');
$totalReviewed = $bankCounts->sum('reviewed');
$activeCount  = $batches->where('status', 'active')->count();
$pendingReview = $totalItems - $totalReviewed;

// Source data readiness helpers
$readingNeed   = \App\Services\AssessmentService::COMPONENTS['reading'];
$listeningNeed = \App\Services\AssessmentService::COMPONENTS['listening'];
$readingOk     = $readingQuestionCount >= $readingNeed;
$listeningOk   = $listeningQuestionCount >= $listeningNeed;
@endphp

{{-- ── Workflow steps ─────────────────────────────────────────────────────── --}}
<div class="workflow-steps">
    <div class="workflow-step done">
        <div class="step-num">1</div>
        <div class="step-body">
            <div class="step-title">Generate Soal</div>
            <div class="step-desc">Buat soal dari data domain (kosakata, kanji, grammar, reading, listening)</div>
        </div>
    </div>
    <div class="workflow-arrow">→</div>
    <div class="workflow-step {{ $pendingReview > 0 ? 'active' : 'done' }}">
        <div class="step-num">2</div>
        <div class="step-body">
            <div class="step-title">Review & Edit</div>
            <div class="step-desc">Periksa, edit, atau generate ulang; tandai soal yang layak pakai</div>
        </div>
    </div>
    <div class="workflow-arrow">→</div>
    <div class="workflow-step">
        <div class="step-num">3</div>
        <div class="step-body">
            <div class="step-title">Rakit Batch</div>
            <div class="step-desc">Susun soal yang sudah direview ke dalam satu paket ujian (draft)</div>
        </div>
    </div>
    <div class="workflow-arrow">→</div>
    <div class="workflow-step {{ $activeCount > 0 ? 'done' : '' }}">
        <div class="step-num">4</div>
        <div class="step-body">
            <div class="step-title">Aktifkan Batch</div>
            <div class="step-desc">Batch aktif → user dapat mengerjakan ujian level ini</div>
        </div>
    </div>
</div>

{{-- ── Level tabs ──────────────────────────────────────────────────────────── --}}
<div class="level-tabs">
    @foreach ($levels as $l)
        <a href="{{ route('admin.assessments.index', ['level' => $l]) }}"
           class="level-tab {{ $level === $l ? 'active' : '' }}">
            {{ $l }}
            @php $lActive = \App\Models\AssessmentBatch::active()->forLevel($l)->exists(); @endphp
            @if($lActive)
                <span class="tab-dot active-dot" title="Batch aktif tersedia"></span>
            @else
                <span class="tab-dot inactive-dot" title="Belum ada batch aktif"></span>
            @endif
        </a>
    @endforeach
</div>

{{-- ── Generate Full Exam ──────────────────────────────────────────────────── --}}
@php
    $examTotal = array_sum($examCounts);
@endphp
<div class="full-exam-card">
    <div class="full-exam-header">
        <div class="full-exam-icon">🎯</div>
        <div class="full-exam-info">
            <div class="full-exam-title">Generate Full Final Assessment — {{ $level }}</div>
            <div class="full-exam-desc">
                Buat ujian lengkap standar JLPT dalam satu klik:
                <strong>{{ $examCounts['kanji'] ?? 0 }}</strong> kanji,
                <strong>{{ $examCounts['vocab'] ?? 0 }}</strong> kosakata,
                <strong>{{ $examCounts['grammar'] ?? 0 }}</strong> tata bahasa,
                <strong>{{ $examCounts['reading'] ?? 0 }}</strong> membaca,
                <strong>{{ $examCounts['listening'] ?? 0 }}</strong> menyimak
                = <strong>{{ $examTotal }} soal</strong>
            </div>
        </div>
    </div>
    <div class="full-exam-body">
        <div class="full-exam-readiness">
            <div class="readiness-title">Kesiapan Data Sumber:</div>
            @foreach ($sourceReadiness as $comp => $info)
                <div class="readiness-item {{ $info['ready'] ? 'ready' : 'not-ready' }}">
                    <span class="readiness-icon">{{ $info['ready'] ? '✓' : '⚠' }}</span>
                    <span class="readiness-label">{{ $componentLabels[$comp] ?? ucfirst($comp) }} ({{ $level }}):</span>
                    <span class="readiness-value">{{ $info['available'] }} tersedia / {{ $info['need'] }} dibutuhkan</span>
                    @if (!$info['ready'] && $comp === 'reading')
                        <span class="readiness-note">(akan di-generate otomatis)</span>
                    @elseif (!$info['ready'] && $comp === 'listening')
                        <span class="readiness-note">(akan diproses dari audio pool)</span>
                    @endif
                </div>
            @endforeach
        </div>
        <form action="{{ route('admin.assessments.generate-full-exam') }}" method="POST"
              onsubmit="this.querySelector('button[type=submit]').disabled=true; this.querySelector('button[type=submit]').textContent='⏳ Generating...'; return confirm('Generate Full Exam untuk level {{ $level }}?\n\nIni akan:\n• Auto-generate sumber yang kurang (reading/listening)\n• Generate {{ $examTotal }} soal semua komponen\n• Validasi distraktor via AI\n• Auto-review semua soal\n• Buat batch baru\n\nProses ini membutuhkan beberapa menit. Lanjutkan?');">
            @csrf
            <input type="hidden" name="level" value="{{ $level }}">
            <div style="margin-bottom: 12px;">
                <label class="form-label">Kode Ujian (Exam Code)</label>
                <input type="text" name="exam_code" placeholder="misal: JLPT-{{ $level }}-A" class="form-input" style="max-width: 280px;" pattern="[A-Za-z0-9\-_]+" title="Hanya huruf, angka, strip, underscore">
                <div style="font-size: 11px; color: #6b7280; margin-top: 4px;">Kode unik yang dimasukkan user untuk mengakses ujian ini. Kosongkan untuk auto-generate.</div>
            </div>
            <div class="full-exam-actions">
                <label class="full-exam-checkbox">
                    <input type="checkbox" name="auto_activate" value="1">
                    <span>Auto-aktifkan setelah generate</span>
                </label>
                <button type="submit" class="full-exam-btn">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                    </svg>
                    Generate Full Exam ({{ $examTotal }} soal)
                </button>
            </div>
        </form>
    </div>
</div>

{{-- ── Source Data Preparation ──────────────────────────────────────────────── --}}
<div class="source-grid">

    {{-- Reading --}}
    <div class="source-card {{ $readingOk ? 'source-ok' : ($readingPassageCount > 0 ? 'source-partial' : 'source-empty') }}">
        <div class="source-card-header">
            <span class="source-icon">📖</span>
            <div class="source-info">
                <div class="source-title">Sumber Membaca</div>
                <div class="source-stat">
                    @if ($readingPassageCount > 0)
                        {{ $readingPassageCount }} teks · {{ $readingQuestionCount }} pertanyaan
                    @else
                        Belum ada teks untuk {{ $level }}
                    @endif
                </div>
            </div>
            <span class="badge {{ $readingOk ? 'badge-success' : ($readingPassageCount > 0 ? 'badge-warning' : 'badge-gray') }}">
                @if ($readingOk) ✓ Siap
                @elseif ($readingPassageCount > 0) Kurang
                @else Kosong
                @endif
            </span>
        </div>
        <div class="source-card-body">
            <p class="source-desc">
                AI generate teks bacaan JLPT + soal pilihan ganda dalam Bahasa Indonesia.
                Butuh minimal <strong>{{ $readingNeed }} soal</strong> untuk komponen Membaca.
            </p>
            <form action="{{ route('admin.assessments.source.reading') }}" method="POST"
                  onsubmit="return confirm('Generate teks bacaan via OpenAI untuk level {{ $level }}?\n\nMembutuhkan beberapa detik per teks.');">
                @csrf
                <input type="hidden" name="level" value="{{ $level }}">
                <div class="source-form-row">
                    <div>
                        <label class="form-label">Jumlah teks</label>
                        <input type="number" name="passages" value="2" min="1" max="10" class="form-input" style="text-align:center;">
                    </div>
                    <div>
                        <label class="form-label">Soal / teks</label>
                        <input type="number" name="questions_per_passage" value="3" min="1" max="6" class="form-input" style="text-align:center;">
                    </div>
                    <button type="submit" class="source-btn source-btn-reading">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="14" height="14">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                        </svg>
                        Generate AI
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- Listening --}}
    <div class="source-card {{ $listeningOk ? 'source-ok' : ($listeningQuestionCount > 0 ? 'source-partial' : 'source-empty') }}">
        <div class="source-card-header">
            <span class="source-icon">🎧</span>
            <div class="source-info">
                <div class="source-title">Sumber Menyimak</div>
                <div class="source-stat">
                    @if ($audioPoolCount > 0)
                        {{ $audioPoolCount }} file audio · {{ $listeningQuestionCount }} soal tersedia
                        @if ($audioUnprocessedCount > 0)
                            · <span style="color:#f59e0b;">{{ $audioUnprocessedCount }} belum diproses</span>
                        @endif
                    @elseif ($listeningQuestionCount > 0)
                        {{ $listeningQuestionCount }} soal (pool tidak aktif)
                    @else
                        Belum ada soal untuk {{ $level }}
                    @endif
                </div>
            </div>
            <span class="badge {{ $listeningOk ? 'badge-success' : ($listeningQuestionCount > 0 ? 'badge-warning' : 'badge-gray') }}">
                @if ($listeningOk) ✓ Siap
                @elseif ($listeningQuestionCount > 0) Kurang
                @else Kosong
                @endif
            </span>
        </div>
        <div class="source-card-body">
            @if ($audioPoolCount > 0)
                <p class="source-desc">
                    Whisper mentranskrip setiap file audio baru, lalu GPT membuat soal JLPT dari transkrip.
                    Butuh minimal <strong>{{ $listeningNeed }} soal</strong> untuk komponen Menyimak.
                    @if ($audioUnprocessedCount === 0)
                        <span style="color:#10b981;">Semua file sudah diproses.</span>
                    @endif
                </p>
                <form action="{{ route('admin.assessments.source.listening') }}" method="POST"
                      onsubmit="return confirm('Proses audio pool {{ $level }} via Whisper + GPT?\n\nMenggunakan API quota. Setiap file butuh beberapa detik.');">
                    @csrf
                    <input type="hidden" name="level" value="{{ $level }}">
                    <div class="source-form-row" style="margin-bottom: 8px;">
                        <div style="grid-column: span 2;">
                            <label class="form-label">
                                Jumlah file yang diproses
                                @if ($audioUnprocessedCount > 0)
                                    <span style="color:#6b7280; font-weight:400;">(maks {{ $audioUnprocessedCount }} tersisa)</span>
                                @endif
                            </label>
                            <input type="number" name="count"
                                   value="{{ min(5, $audioUnprocessedCount) }}"
                                   min="1" max="{{ max(1, $audioUnprocessedCount) }}"
                                   class="form-input" style="text-align:center;"
                                   {{ $audioUnprocessedCount === 0 ? 'disabled' : '' }}>
                        </div>
                        <button type="submit" class="source-btn source-btn-listening"
                                style="align-self:end;"
                                {{ $audioUnprocessedCount === 0 ? 'disabled' : '' }}>
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="14" height="14">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/>
                            </svg>
                            @if ($audioUnprocessedCount > 0) Proses @else Selesai @endif
                        </button>
                    </div>
                </form>
            @else
                <p class="source-desc">
                    Pool audio belum dikonfigurasi untuk level <strong>{{ $level }}</strong>.
                    Upload file <code>.mp3</code> ke server, lalu daftarkan pathnya:
                </p>
                <div class="source-code-hint">
                    <div class="source-code-file">config/listening.php</div>
                    <code>'{{ $level }}' => 'audio/{{ strtolower($level) }}',</code>
                </div>
                <p class="source-desc" style="margin-top:8px;">
                    Simpan file ke <code>public/audio/{{ strtolower($level) }}/</code>, refresh halaman, lalu tombol generate akan muncul.
                </p>
            @endif
        </div>
    </div>

</div>

{{-- ── Quick Setup ─────────────────────────────────────────────────────────── --}}
@if($activeCount === 0)
<div class="quick-setup-card">
    <div class="quick-setup-left">
        <div class="quick-setup-icon">⚡</div>
        <div>
            <div class="quick-setup-title">Quick Setup Otomatis</div>
            <div class="quick-setup-desc">
                Tidak ada batch aktif untuk level <strong>{{ $level }}</strong>.
                Tombol ini akan <strong>generate soal semua komponen</strong> ({{ implode(', ', array_map(fn($c,$n) => "$n $c", array_keys(\App\Services\AssessmentService::COMPONENTS), array_values(\App\Services\AssessmentService::COMPONENTS))) }}),
                auto-reviewed, langsung rakit batch, dan aktifkan — semua dalam satu klik.
            </div>
            <div class="quick-setup-warning">
                ⚠ Soal dibuat otomatis dari data domain tanpa review manual. Disarankan meninjau kualitas soal setelah setup.
            </div>
        </div>
    </div>
    <form action="{{ route('admin.assessments.quick-setup') }}" method="POST"
          onsubmit="return confirm('Jalankan Quick Setup untuk level {{ $level }}?\n\nIni akan:\n• Generate soal semua komponen\n• Auto-mark semua soal sebagai reviewed\n• Buat & aktifkan batch baru\n\nLanjutkan?');">
        @csrf
        <input type="hidden" name="level" value="{{ $level }}">
        <button type="submit" class="quick-setup-btn">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
            </svg>
            Jalankan Quick Setup
        </button>
    </form>
</div>
@else
<div class="quick-setup-card quick-setup-done">
    <div class="quick-setup-left">
        <div class="quick-setup-icon" style="background: #d1fae5; color: #065f46;">✓</div>
        <div>
            <div class="quick-setup-title" style="color: #065f46;">Level {{ $level }} sudah siap</div>
            <div class="quick-setup-desc">
                Terdapat <strong>{{ $activeCount }} batch aktif</strong> untuk level ini.
                User sudah dapat mengerjakan ujian. Gunakan Generate/Rakit di bawah jika ingin menambah batch baru.
            </div>
        </div>
    </div>
    <form action="{{ route('admin.assessments.quick-setup') }}" method="POST"
          onsubmit="return confirm('Level {{ $level }} sudah punya batch aktif.\n\nQuick Setup akan membuat batch BARU (batch lama tetap aktif).\n\nLanjutkan?');">
        @csrf
        <input type="hidden" name="level" value="{{ $level }}">
        <button type="submit" class="quick-setup-btn quick-setup-btn-secondary">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="18" height="18">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Buat Batch Baru
        </button>
    </form>
</div>
@endif

{{-- ── Summary metric cards ─────────────────────────────────────────────────── --}}
<div class="metrics-grid" style="grid-template-columns: repeat(5, 1fr); margin-bottom: 20px;">
    @foreach ($components as $c)
        @php($row = $bankCounts->get($c))
        @php($rev = (int)($row->reviewed ?? 0))
        @php($tot = (int)($row->total ?? 0))
        @php($pct = $tot > 0 ? (int)round($rev / $tot * 100) : 0)
        <div class="metric-card {{ $metricColors[$c] }}" style="padding: 14px 16px;">
            <div class="metric-icon">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">{!! $componentIcons[$c] !!}</svg>
            </div>
            <div class="metric-label">{{ $componentLabels[$c] }}</div>
            <div class="metric-value" style="font-size: 22px;">{{ $rev }}<span style="font-size:13px; font-weight:400; color:#94a3b8;">/{{ $tot }}</span></div>
            <div class="metric-change {{ $tot > 0 && $rev === $tot ? 'positive' : '' }}">
                @if($tot === 0)
                    Belum ada soal
                @elseif($rev === $tot)
                    ✓ Semua sudah direview
                @else
                    {{ $tot - $rev }} belum direview
                @endif
            </div>
            @if($tot > 0)
                <div class="mini-progress" style="margin-top: 8px;">
                    <div class="mini-progress-bar" style="width: {{ $pct }}%;"></div>
                </div>
            @endif
        </div>
    @endforeach
</div>

{{-- ── Generate + Build Batch (side by side) ───────────────────────────────── --}}
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px;">

    {{-- Generate soal --}}
    <div class="section-card">
        <div class="section-card-header">
            <div class="section-card-title">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="18" height="18"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                Generate Soal Baru
            </div>
            <span class="badge badge-primary">Langkah 1</span>
        </div>
        <div class="section-card-body">
            <p style="font-size: 13px; color: #6b7280; margin: 0 0 14px;">Buat soal dari data {{ $level }} yang ada di database. Soal baru berstatus <strong>draft</strong> sampai direview.</p>
            <form action="{{ route('admin.assessments.generate') }}" method="POST">
                @csrf
                <input type="hidden" name="level" value="{{ $level }}">
                <div style="display: grid; grid-template-columns: 1fr 80px auto; gap: 10px; align-items: end;">
                    <div>
                        <label class="form-label">Komponen</label>
                        <select name="component" class="form-select">
                            @foreach ($components as $c)
                                <option value="{{ $c }}">{{ $componentLabels[$c] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Jumlah</label>
                        <input type="number" name="count" value="10" min="1" max="50" class="form-input" style="text-align: center;">
                    </div>
                    <button type="submit" class="btn-action btn-edit" style="padding: 10px 16px; font-size: 14px;">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                        Generate
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- Rakit batch --}}
    <div class="section-card">
        <div class="section-card-header">
            <div class="section-card-title">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="18" height="18"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                Rakit Batch Baru
            </div>
            <span class="badge badge-warning">Langkah 3</span>
        </div>
        <div class="section-card-body">
            <p style="font-size: 13px; color: #6b7280; margin: 0 0 14px;">Tentukan jumlah soal tiap komponen. Hanya soal <strong>reviewed</strong> yang bisa masuk batch. Isi 0 untuk skip komponen tersebut.</p>
            <form action="{{ route('admin.assessments.batches.build') }}" method="POST">
                @csrf
                <input type="hidden" name="level" value="{{ $level }}">
                <div style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px;">
                    @foreach ($components as $c)
                        @php($row = $bankCounts->get($c))
                        @php($avail = (int)($row->reviewed ?? 0))
                        <div>
                            <label class="form-label" title="{{ $componentLabels[$c] }}: {{ $avail }} soal siap">
                                {{ substr($componentLabels[$c], 0, 5) }}
                                <span style="color: {{ $avail > 0 ? '#10b981' : '#ef4444' }}; font-weight: 700;">{{ $avail }}</span>
                            </label>
                            <input type="number" name="counts[{{ $c }}]" value="{{ $c === 'vocab' || $c === 'kanji' ? 10 : ($c === 'grammar' || $c === 'reading' ? 5 : 3) }}"
                                   min="0" max="{{ $avail }}"
                                   class="form-input" style="text-align: center;">
                        </div>
                    @endforeach
                </div>
                <button type="submit" class="btn-action btn-edit" style="width: 100%; justify-content: center; padding: 10px; font-size: 14px;">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    Buat Batch (Draft)
                </button>
            </form>
        </div>
    </div>
</div>

{{-- ── Batches ─────────────────────────────────────────────────────────────── --}}
<div class="section-card" style="margin-bottom: 24px;">
    <div class="section-card-header">
        <div class="section-card-title">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="18" height="18"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
            Batch Ujian — {{ $level }}
        </div>
        <span class="badge {{ $activeCount > 0 ? 'badge-success' : 'badge-gray' }}">
            {{ $activeCount }} batch aktif
        </span>
    </div>
    <x-admin.data-table
        :headers="[
            ['label' => '#',          'sortable' => false, 'width' => '5%'],
            ['label' => 'Status',     'sortable' => false, 'width' => '12%'],
            ['label' => 'Komposisi',  'sortable' => false, 'width' => '38%'],
            ['label' => 'Soal',       'sortable' => false, 'align' => 'center', 'width' => '10%'],
            ['label' => 'Dibuat',     'sortable' => false, 'width' => '15%'],
            ['label' => 'Aksi',       'sortable' => false, 'align' => 'center', 'width' => '20%'],
        ]"
        :searchable="false"
        :hoverable="true">
        @forelse ($batches as $b)
        <tr>
            <td style="font-weight: 600; color: #94a3b8;">
                #{{ $b->id }}
                @if($b->exam_code)
                    <div style="font-size: 11px; font-weight: 700; color: #6366f1; margin-top: 2px; font-family: monospace;">{{ $b->exam_code }}</div>
                @endif
            </td>
            <td>
                @if($b->status === 'active')
                    <span class="badge badge-success">● Aktif</span>
                @elseif($b->status === 'archived')
                    <span class="badge badge-gray">Arsip</span>
                @else
                    <span class="badge badge-warning">Draft</span>
                @endif
            </td>
            <td>
                <div style="display: flex; flex-wrap: wrap; gap: 4px;">
                    @foreach (($b->section_counts ?? []) as $k => $v)
                        @if($v > 0)
                        <span class="badge badge-primary" style="font-size: 11px;">
                            {{ $componentLabels[$k] ?? $k }}: {{ $v }}
                        </span>
                        @endif
                    @endforeach
                </div>
            </td>
            <td class="center">
                <strong>{{ $b->batch_items_count }}</strong>
            </td>
            <td style="color: #6b7280; font-size: 13px;">
                {{ $b->created_at?->format('d M Y') }}
                @if($b->activated_at)
                    <div style="font-size: 11px; color: #10b981;">Aktif {{ $b->activated_at->format('d M Y') }}</div>
                @endif
            </td>
            <td class="center">
                <div class="action-buttons" style="justify-content: center; gap: 6px; flex-wrap: wrap;">
                    <a href="{{ route('admin.assessments.batches.preview', $b) }}" class="btn-action btn-view" title="Preview semua soal dalam batch">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="14" height="14"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                        Preview
                    </a>
                    @if ($b->status === 'draft')
                        <form action="{{ route('admin.assessments.batches.review-all', $b) }}" method="POST" style="display:inline;"
                              onsubmit="return confirm('Review semua item di batch #{{ $b->id }} sekaligus?');">
                            @csrf
                            <button class="btn-action btn-view" title="Review semua item sekaligus">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="14" height="14"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
                                Review All
                            </button>
                        </form>
                        <form action="{{ route('admin.assessments.batches.activate', $b) }}" method="POST" style="display:inline;"
                              onsubmit="return confirm('Aktifkan batch #{{ $b->id }}? Semua item harus sudah direview.');">
                            @csrf
                            <button class="btn-action btn-edit" title="Aktifkan batch agar bisa dipakai user">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="14" height="14"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                Aktifkan
                            </button>
                        </form>
                    @endif
                    @if ($b->status !== 'archived')
                        <form action="{{ route('admin.assessments.batches.archive', $b) }}" method="POST" style="display:inline;"
                              onsubmit="return confirm('Arsipkan batch #{{ $b->id }}? Batch ini tidak akan disajikan ke user lagi.');">
                            @csrf
                            <button class="btn-action btn-delete" title="Arsipkan batch">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="14" height="14"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8l1 12a2 2 0 002 2h8a2 2 0 002-2L19 8m-9 4v6m4-6v6"/></svg>
                                Arsip
                            </button>
                        </form>
                    @endif
                    <form action="{{ route('admin.assessments.batches.delete', $b) }}" method="POST" style="display:inline;"
                          onsubmit="return confirm('HAPUS batch #{{ $b->id }}{{ $b->exam_code ? ' ('.$b->exam_code.')' : '' }}?\n\nUser yang mengakses kode ini akan melihat pesan ujian dihapus.\nAksi ini tidak bisa dibatalkan.');">
                        @csrf
                        @method('DELETE')
                        <button class="btn-action btn-delete" title="Hapus batch (soft delete)" style="background: #fef2f2; border-color: #fca5a5; color: #dc2626;">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="14" height="14"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            Hapus
                        </button>
                    </form>
                </div>
            </td>
        </tr>
        @empty
        <tr>
            <td colspan="6" class="center text-muted" style="padding: 32px;">
                Belum ada batch untuk {{ $level }}. Generate & review soal dulu, lalu rakit batch di atas.
            </td>
        </tr>
        @endforelse
    </x-admin.data-table>
</div>

{{-- ── Reset User Fails ────────────────────────────────────────────────────── --}}
<div class="section-card" style="margin-bottom: 24px;">
    <div class="section-card-header">
        <div class="section-card-title">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="18" height="18"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
            Reset Percobaan Gagal User
        </div>
    </div>
    <div class="section-card-body">
        <p style="font-size: 13px; color: #6b7280; margin: 0 0 14px;">
            User yang gagal 3 kali pada satu kode ujian akan dikunci secara permanen. Gunakan form ini untuk mereset hitungan gagal agar user bisa mencoba lagi.
        </p>
        <form action="{{ route('admin.assessments.reset-fails') }}" method="POST"
              onsubmit="return confirm('Reset percobaan gagal untuk user ini?');">
            @csrf
            <div style="display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end;">
                <div>
                    <label class="form-label">User ID</label>
                    <input type="number" name="user_id" min="1" class="form-input" placeholder="ID user" required>
                </div>
                <div>
                    <label class="form-label">Kode Ujian</label>
                    <input type="text" name="exam_code" class="form-input" placeholder="misal: JLPT-N5-A" required>
                </div>
                <button type="submit" class="btn-action btn-edit" style="padding: 10px 16px; font-size: 14px;">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                    Reset
                </button>
            </div>
        </form>
    </div>
</div>

{{-- ── Item bank ───────────────────────────────────────────────────────────── --}}
<div class="section-card">
    <div class="section-card-header">
        <div class="section-card-title">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="18" height="18"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
            Bank Soal Aktif — {{ $level }}
            @if($selectedComponent)
                <span class="badge badge-primary" style="margin-left: 4px;">{{ $componentLabels[$selectedComponent] }}</span>
            @endif
        </div>
        <div style="display: flex; align-items: center; gap: 8px;">
            <span style="font-size: 12px; color: #6b7280;">Filter:</span>
            <a href="{{ route('admin.assessments.index', ['level' => $level]) }}"
               class="filter-pill {{ !$selectedComponent ? 'active' : '' }}">Semua</a>
            @foreach ($components as $c)
                <a href="{{ route('admin.assessments.index', ['level' => $level, 'component' => $c]) }}"
                   class="filter-pill {{ $selectedComponent === $c ? 'active' : '' }}">{{ $componentLabels[$c] }}</a>
            @endforeach
        </div>
    </div>

    <x-admin.data-table
        :headers="[
            ['label' => 'Komponen',    'sortable' => false, 'width' => '10%'],
            ['label' => 'Soal & Pilihan', 'sortable' => false, 'width' => '52%'],
            ['label' => 'Status',      'sortable' => false, 'align' => 'center', 'width' => '14%'],
            ['label' => 'Aksi',        'sortable' => false, 'align' => 'center', 'width' => '24%'],
        ]"
        :searchable="false"
        :hoverable="true"
        :paginator="$items">

        @forelse ($items as $item)
        <tr id="item-row-{{ $item->id }}">
            {{-- Component --}}
            <td>
                <span class="badge badge-primary">{{ $componentLabels[$item->component] ?? $item->component }}</span>
                <div style="font-size: 11px; color: #94a3b8; margin-top: 4px;">v{{ $item->version }}</div>
            </td>

            {{-- Question content --}}
            <td>
                @if ($item->isInstruction())
                    <div style="display:flex; align-items:center; gap:8px;">
                        <span class="badge badge-gray">Instruksi Audio</span>
                    </div>
                    @if (data_get($item->context, 'transcript'))
                        <div style="font-size: 12px; color: #6b7280; margin-top: 4px; font-style: italic;">
                            "{{ Str::limit(data_get($item->context, 'transcript'), 120) }}"
                        </div>
                    @endif
                @else
                    <div style="font-weight: 600; color: #1e293b; font-size: 14px; margin-bottom: 4px;">
                        {{ $item->prompt }}
                    </div>
                    @if ($item->question_label)
                        <div style="font-size: 11px; color: #9ca3af; margin-bottom: 6px;">{{ $item->question_label }}</div>
                    @endif
                    <div style="display: flex; flex-wrap: wrap; gap: 4px;">
                        @foreach (($item->choices ?? []) as $c)
                            <span style="padding: 3px 10px; border-radius: 6px; font-size: 12px;
                                {{ $c === $item->answer
                                    ? 'background:#d1fae5; color:#065f46; font-weight:700; border:1px solid #a7f3d0;'
                                    : 'background:#f1f5f9; color:#64748b; border:1px solid #e2e8f0;' }}">
                                {{ $c }}{{ $c === $item->answer ? ' ✓' : '' }}
                            </span>
                        @endforeach
                    </div>

                    {{-- Inline edit panel (hidden by default) --}}
                    <div id="edit-panel-{{ $item->id }}" style="display:none; margin-top:14px; padding:14px; background:#f8fafc; border-radius:8px; border:1px solid #e2e8f0;">
                        <div style="font-size: 12px; font-weight: 700; color: #6366f1; margin-bottom: 10px; display:flex; align-items:center; gap:6px;">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="14" height="14"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                            Edit Soal (akan membuat versi baru)
                        </div>
                        <form action="{{ route('admin.assessments.items.update', $item) }}" method="POST">
                            @csrf
                            @method('PUT')
                            <div style="margin-bottom: 8px;">
                                <label class="form-label">Teks soal (prompt)</label>
                                <input name="prompt" value="{{ $item->prompt }}" class="form-input">
                            </div>
                            <div style="margin-bottom: 8px;">
                                <label class="form-label">Label instruksi (opsional)</label>
                                <input name="question_label" value="{{ $item->question_label }}" placeholder="misal: の　よみかたを　えらんでください。" class="form-input">
                            </div>
                            <div style="margin-bottom: 8px;">
                                <label class="form-label">Pilihan jawaban (satu per baris input)</label>
                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px;">
                                    @foreach (($item->choices ?? []) as $i => $c)
                                        <input name="choices[]" value="{{ $c }}" class="form-input" placeholder="Pilihan {{ $i + 1 }}">
                                    @endforeach
                                </div>
                            </div>
                            <div style="margin-bottom: 12px;">
                                <label class="form-label">Jawaban benar <span style="color:#ef4444;">*</span> (harus sama persis dengan salah satu pilihan)</label>
                                <input name="answer" value="{{ $item->answer }}" class="form-input" style="border-color: #a7f3d0; background: #f0fdf4;">
                            </div>
                            <div style="display:flex; gap:8px;">
                                <button type="submit" class="btn-action btn-edit">
                                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="14" height="14"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                                    Simpan sebagai versi baru
                                </button>
                                <button type="button" onclick="toggleEdit({{ $item->id }})" class="btn-action btn-view">Batal</button>
                            </div>
                        </form>
                    </div>
                @endif
            </td>

            {{-- Status --}}
            <td class="center">
                @if ($item->isReviewed())
                    <span class="badge badge-success">✓ Reviewed</span>
                @else
                    <span class="badge badge-warning">Draft</span>
                @endif
                @if ($item->times_served > 0)
                    @php($rate = (int) round($item->correctRate() * 100))
                    <div style="margin-top: 6px; font-size: 11px; color: {{ $rate < 30 ? '#b91c1c' : '#6b7280' }};">
                        {{ $rate }}% benar
                        <div style="font-size: 10px; color: #9ca3af;">{{ $item->correct_count }}/{{ $item->times_served }} kali</div>
                        @if ($item->times_served >= 5 && $rate <= 20)
                            <div style="color: #b91c1c; font-weight: 700;">⚠ Terlalu susah</div>
                        @endif
                    </div>
                @endif
            </td>

            {{-- Actions --}}
            <td class="center">
                <div class="action-buttons" style="flex-direction: column; gap: 6px; align-items: center;">
                    @unless ($item->isInstruction())
                        <button type="button" onclick="toggleEdit({{ $item->id }})" class="btn-action btn-view" title="Edit soal ini">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="13" height="13"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                            Edit
                        </button>
                    @endunless
                    @unless ($item->isReviewed())
                        <form action="{{ route('admin.assessments.items.review', $item) }}" method="POST">
                            @csrf
                            <button class="btn-action btn-edit" title="Tandai soal ini sudah direview dan siap masuk batch">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="13" height="13"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                Reviewed
                            </button>
                        </form>
                    @endunless
                    <form action="{{ route('admin.assessments.items.regenerate', $item) }}" method="POST"
                          onsubmit="return confirm('Generate ulang item ini? Versi baru akan dibuat dan item ini dinonaktifkan.');">
                        @csrf
                        <button class="btn-action btn-view" title="Generate ulang dari data sumber">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="13" height="13"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                            Generate Ulang
                        </button>
                    </form>
                    <form action="{{ route('admin.assessments.items.deactivate', $item) }}" method="POST"
                          onsubmit="return confirm('Nonaktifkan soal ini? Tidak bisa digunakan di batch baru.');">
                        @csrf
                        <button class="btn-action btn-delete" title="Nonaktifkan soal">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="13" height="13"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                            Nonaktifkan
                        </button>
                    </form>
                </div>
            </td>
        </tr>
        @empty
        <tr>
            <td colspan="4" class="center text-muted" style="padding: 40px 24px;">
                <div style="font-size: 32px; margin-bottom: 8px;">📝</div>
                Belum ada soal aktif{{ $selectedComponent ? " untuk komponen \"" . ($componentLabels[$selectedComponent] ?? $selectedComponent) . "\"" : '' }} di level {{ $level }}.
                <div style="margin-top: 8px; font-size: 13px;">
                    Gunakan form <strong>Generate Soal</strong> di atas untuk membuat soal baru.
                </div>
            </td>
        </tr>
        @endforelse
    </x-admin.data-table>
</div>

<script>
function toggleEdit(id) {
    var panel = document.getElementById('edit-panel-' + id);
    var row   = document.getElementById('item-row-' + id);
    if (panel.style.display === 'none') {
        panel.style.display = 'block';
        row.style.background = '#faf5ff';
    } else {
        panel.style.display = 'none';
        row.style.background = '';
    }
}
</script>

<style>
/* Workflow steps */
.workflow-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 24px;
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    flex-wrap: wrap;
    gap: 4px;
}
.workflow-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 160px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.workflow-step.active {
    background: #fffbeb;
    border-color: #fcd34d;
}
.workflow-step.done {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.workflow-step.active .step-num {
    background: #f59e0b;
    color: white;
}
.workflow-step.done .step-num {
    background: #10b981;
    color: white;
}
.step-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}
.step-desc {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
    line-height: 1.4;
}
.workflow-arrow {
    color: #cbd5e1;
    font-size: 18px;
    font-weight: 700;
    padding: 0 4px;
    flex-shrink: 0;
    align-self: center;
}

/* Level tabs */
.level-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
}
.level-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: #64748b;
    background: white;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
}
.level-tab:hover {
    background: #f8fafc;
    color: #1e293b;
    border-color: #cbd5e1;
}
.level-tab.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59,130,246,0.3);
}
.tab-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.active-dot  { background: #10b981; }
.inactive-dot { background: #d1d5db; }
.level-tab.active .active-dot  { background: #6ee7b7; }
.level-tab.active .inactive-dot { background: rgba(255,255,255,0.4); }

/* Section cards */
.section-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow: hidden;
}
.section-card-header {
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.section-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-card-title svg {
    color: #64748b;
}
.section-card-body {
    padding: 16px 20px;
}

/* Form elements */
.form-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 5px;
}
.form-input, .form-select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #334155;
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus, .form-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

/* Mini progress bar */
.mini-progress {
    height: 4px;
    background: #e2e8f0;
    border-radius: 99px;
    overflow: hidden;
}
.mini-progress-bar {
    height: 100%;
    background: #3b82f6;
    border-radius: 99px;
    transition: width 0.3s;
}
.metric-card.success .mini-progress-bar { background: #10b981; }
.metric-card.warning .mini-progress-bar { background: #f59e0b; }
.metric-card.info    .mini-progress-bar { background: #06b6d4; }
.metric-card.purple  .mini-progress-bar { background: #8b5cf6; }

/* Filter pills */
.filter-pill {
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
}
.filter-pill:hover {
    background: #e2e8f0;
    color: #1e293b;
}
.filter-pill.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* Override metric-card for compact display */
.metric-card .metric-icon {
    opacity: 0.12;
}

/* Source data preparation grid */
.source-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.source-card {
    background: white;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: border-color 0.2s;
}
.source-card.source-ok      { border-color: #86efac; background: linear-gradient(to bottom, #f0fdf4, white 60px); }
.source-card.source-partial { border-color: #fcd34d; background: linear-gradient(to bottom, #fffbeb, white 60px); }
.source-card.source-empty   { border-color: #e2e8f0; background: linear-gradient(to bottom, #f8fafc, white 60px); }
.source-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
}
.source-icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
}
.source-info {
    flex: 1;
    min-width: 0;
}
.source-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}
.source-stat {
    font-size: 12px;
    color: #6b7280;
    margin-top: 1px;
}
.source-card-body {
    padding: 12px 16px;
}
.source-desc {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 10px;
    line-height: 1.5;
}
.source-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: end;
}
.source-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.source-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}
.source-btn-reading {
    background: #6366f1;
    color: white;
    box-shadow: 0 1px 4px rgba(99,102,241,0.35);
}
.source-btn-reading:hover:not(:disabled) {
    background: #4f46e5;
    transform: translateY(-1px);
}
.source-btn-listening {
    background: #8b5cf6;
    color: white;
    box-shadow: 0 1px 4px rgba(139,92,246,0.35);
}
.source-btn-listening:hover:not(:disabled) {
    background: #7c3aed;
    transform: translateY(-1px);
}
.source-code-hint {
    background: #1e293b;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 6px 0;
}
.source-code-file {
    font-size: 10px;
    color: #64748b;
    margin-bottom: 4px;
    font-family: monospace;
}
.source-code-hint code {
    color: #7dd3fc;
    font-size: 12px;
    font-family: monospace;
}
@@media (max-width: 900px) {
    .source-grid { grid-template-columns: 1fr; }
}

/* Quick Setup card */
.quick-setup-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1.5px solid #fcd34d;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.quick-setup-card.quick-setup-done {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #86efac;
}
.quick-setup-left {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1;
    min-width: 0;
}
.quick-setup-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #f59e0b;
    color: white;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(245,158,11,0.35);
}
.quick-setup-title {
    font-size: 15px;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 4px;
}
.quick-setup-desc {
    font-size: 13px;
    color: #78350f;
    line-height: 1.5;
    margin-bottom: 6px;
}
.quick-setup-warning {
    font-size: 12px;
    color: #b45309;
    background: rgba(245,158,11,0.12);
    border-radius: 6px;
    padding: 5px 10px;
    display: inline-block;
}
.quick-setup-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(245,158,11,0.4);
}
.quick-setup-btn:hover {
    background: #d97706;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(245,158,11,0.5);
}
.quick-setup-btn:active {
    transform: translateY(0);
}
.quick-setup-btn-secondary {
    background: white;
    color: #065f46;
    border: 1.5px solid #86efac;
    box-shadow: none;
}
.quick-setup-btn-secondary:hover {
    background: #f0fdf4;
    box-shadow: 0 2px 8px rgba(16,185,129,0.2);
}

/* Full Exam card */
.full-exam-card {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border: 1.5px solid #a5b4fc;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}
.full-exam-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(165,180,252,0.3);
}
.full-exam-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #6366f1;
    color: white;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(99,102,241,0.4);
}
.full-exam-info { flex: 1; }
.full-exam-title {
    font-size: 16px;
    font-weight: 800;
    color: #312e81;
    margin-bottom: 4px;
}
.full-exam-desc {
    font-size: 13px;
    color: #4338ca;
    line-height: 1.5;
}
.full-exam-body {
    padding: 16px 20px;
}
.full-exam-readiness {
    margin-bottom: 16px;
}
.readiness-title {
    font-size: 12px;
    font-weight: 700;
    color: #4338ca;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.readiness-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
}
.readiness-item.ready { color: #065f46; }
.readiness-item.not-ready { color: #92400e; }
.readiness-icon { font-size: 14px; width: 18px; text-align: center; }
.readiness-label { font-weight: 600; }
.readiness-value { color: #64748b; }
.readiness-note { font-size: 11px; color: #6366f1; font-style: italic; }
.full-exam-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.full-exam-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4338ca;
    cursor: pointer;
}
.full-exam-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #6366f1;
}
.full-exam-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(99,102,241,0.4);
}
.full-exam-btn:hover {
    background: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99,102,241,0.5);
}
.full-exam-btn:active { transform: translateY(0); }
.full-exam-btn:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none !important;
}
</style>
@endsection