@extends('admin.layouts.app')

@section('title', 'Preview Batch #' . $batch->id)
@section('page-title', 'Preview Batch #' . $batch->id)
@section('page-title-jp', '試験バッチ プレビュー')

@section('content')

@php
$statusLabels = ['draft' => 'Draft', 'active' => 'Aktif', 'archived' => 'Arsip'];
$statusColors = ['draft' => 'badge-warning', 'active' => 'badge-success', 'archived' => 'badge-gray'];
@endphp

<div style="margin-bottom: 20px;">
    <a href="{{ route('admin.assessments.index', ['level' => $batch->level]) }}" style="color: #6366f1; text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; gap: 6px;">
        <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="M15 19l-7-7 7-7"/></svg>
        Kembali ke Assessment Bank
    </a>
</div>

{{-- Batch info header --}}
<div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 24px;">
    <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;">
        <div>
            <h2 style="font-size: 18px; font-weight: 800; color: #1e293b; margin: 0 0 6px;">
                Batch #{{ $batch->id }} — {{ $batch->level }}
            </h2>
            <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                <span class="badge {{ $statusColors[$batch->status] ?? 'badge-gray' }}">{{ $statusLabels[$batch->status] ?? $batch->status }}</span>
                @foreach (($batch->section_counts ?? []) as $comp => $count)
                    @if ($count > 0)
                        <span class="badge badge-primary" style="font-size: 11px;">{{ $componentLabels[$comp] ?? $comp }}: {{ $count }}</span>
                    @endif
                @endforeach
                <span style="font-size: 13px; color: #6b7280;">Total: {{ $grouped->flatten()->count() }} item</span>
            </div>
        </div>
        <div style="display: flex; gap: 8px;">
            @if ($batch->status === 'draft')
                <form action="{{ route('admin.assessments.batches.review-all', $batch) }}" method="POST"
                      onsubmit="return confirm('Review semua item di batch ini sekaligus?');">
                    @csrf
                    <button class="btn-action btn-view" style="padding: 10px 16px;">
                        <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', $batch) }}" method="POST"
                      onsubmit="return confirm('Aktifkan batch #{{ $batch->id }}?');">
                    @csrf
                    <button class="btn-action btn-edit" style="padding: 10px 16px;">
                        <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 Batch
                    </button>
                </form>
            @endif
        </div>
    </div>
</div>

{{-- Questions grouped by component --}}
@foreach ($grouped as $component => $batchItems)
<div style="background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 20px; overflow: hidden;">
    <div style="padding: 14px 20px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between;">
        <div style="font-size: 15px; font-weight: 700; color: #1e293b;">
            {{ $componentLabels[$component] ?? ucfirst($component) }}
        </div>
        <span class="badge badge-primary">{{ $batchItems->count() }} soal</span>
    </div>
    <div style="padding: 0;">
        @foreach ($batchItems as $idx => $bi)
            @php($item = $bi->item)
            <div style="padding: 14px 20px; border-bottom: 1px solid #f8fafc; {{ $idx % 2 === 0 ? '' : 'background: #fafbfc;' }}">
                @if ($item->isInstruction())
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <span class="badge badge-gray">Instruksi Audio</span>
                        @if (data_get($item->context, 'audio_url'))
                            <audio controls style="height: 28px;">
                                <source src="{{ data_get($item->context, 'audio_url') }}" type="audio/mpeg">
                            </audio>
                        @endif
                    </div>
                    @if (data_get($item->context, 'transcript'))
                        <div style="font-size: 12px; color: #6b7280; margin-top: 6px; font-style: italic;">
                            {{ Str::limit(data_get($item->context, 'transcript'), 200) }}
                        </div>
                    @endif
                @else
                    <div style="display: flex; align-items: flex-start; gap: 12px;">
                        <span style="color: #94a3b8; font-size: 13px; font-weight: 700; min-width: 28px;">{{ $idx + 1 }}.</span>
                        <div style="flex: 1;">
                            {{-- Reading passage --}}
                            @if ($component === 'reading' && data_get($item->context, 'passage'))
                                <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; margin-bottom: 10px; font-size: 13px; line-height: 1.7; color: #334155;">
                                    <div style="font-size: 11px; font-weight: 700; color: #6366f1; margin-bottom: 6px;">
                                        {{ data_get($item->context, 'passage.title', 'Teks Bacaan') }}
                                    </div>
                                    {{ data_get($item->context, 'passage.body') }}
                                </div>
                            @endif

                            {{-- Listening audio --}}
                            @if ($component === 'listening' && data_get($item->context, 'audio_url'))
                                <div style="margin-bottom: 8px;">
                                    <audio controls style="height: 28px;">
                                        <source src="{{ data_get($item->context, 'audio_url') }}" type="audio/mpeg">
                                    </audio>
                                    @if (data_get($item->context, 'transcript'))
                                        <details style="margin-top: 4px;">
                                            <summary style="font-size: 11px; color: #6366f1; cursor: pointer;">Transcript</summary>
                                            <div style="font-size: 12px; color: #6b7280; margin-top: 4px; padding: 8px; background: #f8fafc; border-radius: 6px;">
                                                {{ data_get($item->context, 'transcript') }}
                                            </div>
                                        </details>
                                    @endif
                                </div>
                            @endif

                            <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: 8px;">{{ $item->question_label }}</div>
                            @endif
                            <div style="display: flex; flex-wrap: wrap; gap: 6px;">
                                @foreach (($item->choices ?? []) as $c)
                                    <span style="padding: 4px 12px; border-radius: 6px; font-size: 13px;
                                        {{ $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>
                            <div style="margin-top: 6px; display: flex; gap: 8px; align-items: center;">
                                @if ($item->isReviewed())
                                    <span class="badge badge-success" style="font-size: 10px;">✓ Reviewed</span>
                                @else
                                    <span class="badge badge-warning" style="font-size: 10px;">Draft</span>
                                @endif
                                <span style="font-size: 10px; color: #94a3b8;">v{{ $item->version }} · ID #{{ $item->id }}</span>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        @endforeach
    </div>
</div>
@endforeach

<style>
.badge-primary { background: #e0e7ff; color: #3730a3; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.badge-success { background: #d1fae5; color: #065f46; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.badge-warning { background: #fef3c7; color: #92400e; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.badge-gray { background: #f1f5f9; color: #64748b; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
</style>

@endsection