<?php
$questions = $attempt['questions'] ?? [];
$score = (float)($attempt['score_pct'] ?? 0);
$passed = !empty($attempt['passed']);
$badgeClass = $passed ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700';
$badgeText = $passed ? 'PASSED' : 'FAILED';
$start = !empty($attempt['started_at']) ? strtotime($attempt['started_at']) : 0;
$end   = !empty($attempt['completed_at']) ? strtotime($attempt['completed_at']) : 0;
$duration = ($start && $end) ? (max(0, $end - $start)) : 0;
$durStr = ($duration > 0) ? (int)($duration / 60) . 'm ' . ($duration % 60) . 's' : '—';
?>
<div class="space-y-6">
    <div class="flex flex-wrap items-start justify-between gap-4">
        <div class="flex flex-col">
            <p class="text-xs text-slate-500">Attempt #<?= (int)($attempt['attempt_no'] ?? 1) ?> · <?= !empty($attempt['created_at']) ? date('F j, Y H:i', strtotime($attempt['created_at'])) : '' ?></p>
            <h3 class="text-lg font-bold text-slate-800 mt-1">
                Quiz: <span class="text-violet-700"><?= esc($attempt['quiz_title'] ?? 'Quiz') ?></span>
                <span class="inline-flex items-center ml-2 px-2.5 py-1 rounded-full text-[11px] font-semibold <?= $badgeClass ?>"><?= $badgeText ?></span>
            </h3>
            <p class="text-sm text-slate-600 mt-1">
                Score: <span class="font-bold <?= $score >= 70 ? 'text-emerald-600' : ($score >= 50 ? 'text-amber-600' : 'text-rose-600') ?>"><?= number_format($score, 1) ?>%</span>
                · Correct: <span class="font-semibold"><?= (int)($attempt['correct_count'] ?? 0) ?>/<?= (int)($attempt['total_questions'] ?? 0) ?></span>
                · Total time: <span class="font-semibold"><?= $durStr ?></span>
            </p>
        </div>
        <a href="<?= site_url('/admin/quiz-attempts' . (!empty($attempt['quiz_setting_id']) ? '/quiz/' . (int)$attempt['quiz_setting_id'] : '')) ?>" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-semibold bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-200 transition">← Back to attempts</a>
    </div>

    <?php if (!empty($attempt['ai_feedback'])): ?>
        <div class="glass rounded-2xl border border-violet-200/60 bg-gradient-to-br from-violet-50/70 to-fuchsia-50/50 p-5">
            <div class="flex items-start gap-3">
                <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-violet-500 to-fuchsia-500 text-white flex items-center justify-center shadow-md shadow-violet-500/20 flex-shrink-0">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /></svg>
                </div>
                <div class="flex-1">
                    <p class="text-xs font-semibold text-violet-700 uppercase tracking-wide mb-2">AI Coach Feedback</p>
                    <div class="text-sm text-slate-700 whitespace-pre-line leading-relaxed"><?= nl2br(esc($attempt['ai_feedback'])) ?></div>
                </div>
            </div>
        </div>
    <?php endif; ?>

    <div class="space-y-4">
        <?php foreach ($questions as $idx => $q):
            $type = ($q['question_type'] ?? '') === 'fill_up' ? 'Fill-Up' : 'Multiple Choice';
            $typeClass = ($q['question_type'] ?? '') === 'fill_up' ? 'bg-sky-100 text-sky-700' : 'bg-indigo-100 text-indigo-700';
            $isCorrect = !empty($q['is_correct']);
            $timedOut = !empty($q['timed_out']);
            $answered = !empty($q['answered']);
            $optArr = !empty($q['options_json']) ? (array)json_decode((string)$q['options_json'], true) : [];
            $userAns = trim((string)($q['user_answer'] ?? ''));
            $correctAns = trim((string)($q['correct_answer'] ?? ''));
        ?>
            <div class="glass rounded-2xl border border-slate-200/60 p-5">
                <div class="flex flex-wrap items-start justify-between gap-3 mb-3">
                    <div class="flex items-center gap-2 flex-wrap">
                        <span class="inline-flex items-center justify-center w-7 h-7 rounded-lg bg-slate-900 text-white text-xs font-bold"><?= $idx + 1 ?></span>
                        <span class="inline-flex items-center px-2 py-0.5 rounded-lg text-[10px] font-semibold <?= $typeClass ?>"><?= $type ?></span>
                        <?php if (!empty($q['time_spent_seconds'])): ?>
                            <span class="inline-flex items-center px-2 py-0.5 rounded-lg text-[10px] font-semibold bg-slate-100 text-slate-600">⏱ <?= (int)$q['time_spent_seconds'] ?>s / <?= (int)($q['timer_seconds'] ?? 0) ?>s</span>
                        <?php endif; ?>
                        <?php if ($timedOut): ?>
                            <span class="inline-flex items-center px-2 py-0.5 rounded-lg text-[10px] font-semibold bg-amber-100 text-amber-700">⏰ Timed out</span>
                        <?php elseif (!$answered): ?>
                            <span class="inline-flex items-center px-2 py-0.5 rounded-lg text-[10px] font-semibold bg-slate-100 text-slate-600">Skipped</span>
                        <?php endif; ?>
                    </div>
                    <div>
                        <?php if ($answered || $timedOut): ?>
                            <?php if ($isCorrect): ?>
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold bg-emerald-100 text-emerald-700">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
                                    Correct
                                </span>
                            <?php else: ?>
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold bg-rose-100 text-rose-700">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
                                    Incorrect
                                </span>
                            <?php endif; ?>
                        <?php endif; ?>
                    </div>
                </div>

                <p class="text-sm font-semibold text-slate-800 leading-relaxed mb-3"><?= esc($q['question_text']) ?></p>

                <?php if ($type === 'Multiple Choice' && !empty($optArr)): ?>
                    <div class="space-y-1.5 mb-3">
                        <?php foreach ($optArr as $o):
                            $letter = strtoupper(trim((string)($o['letter'] ?? '')));
                            $text = trim((string)($o['text'] ?? ''));
                            $isCorrectLetter = $letter === strtoupper($correctAns);
                            $userPicked = strtoupper($userAns) === $letter;
                            $rowClass = 'px-3 py-2 rounded-xl border text-sm ';
                            if ($userPicked && $isCorrectLetter) $rowClass .= 'border-emerald-300 bg-emerald-50';
                            elseif ($userPicked) $rowClass .= 'border-rose-300 bg-rose-50';
                            elseif ($isCorrectLetter) $rowClass .= 'border-violet-300 bg-violet-50';
                            else $rowClass .= 'border-slate-200 bg-slate-50/40';
                        ?>
                            <div class="<?= $rowClass ?> flex items-start gap-2">
                                <span class="inline-flex items-center justify-center w-6 h-6 rounded-lg text-[11px] font-bold <?= $isCorrectLetter ? 'bg-violet-500 text-white' : 'bg-white text-slate-700 border border-slate-200' ?> flex-shrink-0 mt-0.5"><?= $letter ?></span>
                                <span class="flex-1 text-slate-700"><?= esc($text) ?></span>
                                <?php if ($userPicked && !$isCorrectLetter): ?>
                                    <span class="text-[10px] font-semibold text-rose-600 mt-1">your pick</span>
                                <?php elseif ($isCorrectLetter): ?>
                                    <span class="text-[10px] font-semibold text-violet-600 mt-1">answer</span>
                                <?php endif; ?>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php else: ?>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
                        <div class="px-3 py-2 rounded-xl border border-violet-200 bg-violet-50/60">
                            <p class="text-[10px] font-semibold text-violet-700 uppercase tracking-wide mb-1">Correct Answer</p>
                            <p class="text-sm text-slate-800"><?= esc($correctAns) ?></p>
                        </div>
                        <div class="px-3 py-2 rounded-xl border <?= $isCorrect ? 'border-emerald-200 bg-emerald-50/60' : 'border-rose-200 bg-rose-50/60' ?>">
                            <p class="text-[10px] font-semibold uppercase tracking-wide mb-1 <?= $isCorrect ? 'text-emerald-700' : 'text-rose-700' ?>">Agent's Answer</p>
                            <p class="text-sm text-slate-800"><?= $userAns !== '' ? esc($userAns) : '<span class="text-slate-400 italic">(no answer)</span>' ?></p>
                        </div>
                    </div>
                <?php endif; ?>

                <?php if (!empty($q['ai_rationale'])): ?>
                    <div class="mt-2 px-3 py-2 rounded-xl bg-slate-50 border border-slate-200 text-[11.5px] text-slate-600 leading-relaxed">
                        <span class="font-semibold text-slate-700">Rationale: </span><?= esc($q['ai_rationale']) ?>
                    </div>
                <?php endif; ?>
            </div>
        <?php endforeach; ?>
    </div>
</div>
