import React from 'react'; import { Head, Link, usePage } from '@inertiajs/react'; import { Trophy, Target, Clock, Repeat, CheckCircle, XCircle, ArrowLeft, Globe } from 'lucide-react'; import StudentLayout from '@/layouts/StudentLayout'; import { cn } from '@/lib/utils'; import type { PageProps } from '@/types'; import RichTextContent from '@/components/RichTextContent'; interface LeaderboardEntry { rank: number; student_name: string; grade: number; points: number; attempt_number: number; time_taken_seconds: number; is_current_user: boolean; } interface ReviewItem { question_text: string; selected_index: number | null; correct_index: number | null; is_correct: boolean; options: Array<{ text: string; is_correct?: boolean }>; } interface QuizResultProps extends PageProps { assignment: { id: number; title: string; material: { id: number; title: string }; }; bestSubmission: { grade: number; points: number; attempt_number: number; time_taken_seconds: number; status?: string; is_late?: boolean; } | null; leaderboard: LeaderboardEntry[]; totalParticipants: number; averageGrade: number; attemptCount: number; maxAttempts: number; showReview: boolean; review: ReviewItem[] | null; } export default function QuizResult() { const { assignment, bestSubmission, leaderboard, totalParticipants, averageGrade, attemptCount, maxAttempts, showReview, review, } = usePage().props; const formatTime = (seconds: number) => { const m = Math.floor(seconds / 60); const s = seconds % 60; return `${m}m ${s}s`; }; const getRankBadge = (rank: number) => { if (rank === 1) return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30'; if (rank === 2) return 'bg-slate-400/20 text-slate-300 border-slate-400/30'; if (rank === 3) return 'bg-amber-700/20 text-amber-600 border-amber-700/30'; return 'bg-surface border-border/50 text-text-muted'; }; return ( <>
{/* Back */} Kembali ke Materi {/* Score Card */} {bestSubmission && (

{bestSubmission.grade}%

Skor Terbaik

{bestSubmission.points.toLocaleString()}

Poin

{bestSubmission.attempt_number}

Attempt

{formatTime(bestSubmission.time_taken_seconds)}

Waktu

Attempt {attemptCount} dari {maxAttempts} digunakan

{bestSubmission.is_late && (

Dikirim setelah tenggat waktu (terlambat)

)} {attemptCount < maxAttempts && ( Coba Lagi ({maxAttempts - attemptCount} attempt tersisa) )}
)} {/* Leaderboard */}

Leaderboard

{totalParticipants} peserta • Rata-rata: {averageGrade}%

{leaderboard.length > 0 ? ( leaderboard.map((entry) => (
{entry.rank}

{entry.student_name} {entry.is_current_user && (Kamu)}

Attempt {entry.attempt_number} • {formatTime(entry.time_taken_seconds)}

{entry.grade}%

{entry.points.toLocaleString()} poin

)) ) : (
Belum ada peserta.
)}
{/* Review (setelah semua attempt habis) */} {showReview && review && (

Pembahasan

Semua attempt sudah digunakan

{review.map((item, idx) => (
{item.is_correct ? ( ) : ( )}
{item.options.map((opt, optIdx) => (

{optIdx === item.selected_index && !item.is_correct && '✗ '} {optIdx === item.correct_index && '✓ '} {opt.text}

))}
))}
)} {/* Global Leaderboard Link */}
Lihat Leaderboard Global
); } QuizResult.layout = (page: any) => {page};