'use client';

import React, { useEffect, useState } from 'react';
import { Clock, Flag, ChevronLeft, ChevronRight, AlertTriangle, Settings, BookOpen, Search } from 'lucide-react';
import { cn } from '@/utils/cn';
import Link from 'next/link';
import { ExamProvider, useExam } from '@/contexts/ExamContext';
import { useExamPersistence } from '@/hooks/useExamPersistence';
import { useSearchParams, useRouter } from 'next/navigation';
import { InteractiveQuestion, EnhancedExamData, Question, PuzzleData } from '@/types';

// Feature Flags
import { isFeatureEnabled, isSprint2Enabled } from '@/config/featureFlags';

// Sprint 2 Components (conditionally imported)
import ProgressIndicator from '@/components/quiz/ProgressIndicator';
import EnhancedTimer from '@/components/quiz/EnhancedTimer';
import EnhancedQuestionNavigator from '@/components/quiz/EnhancedQuestionNavigator';
import QuizIntroductionModal from '@/components/quiz/QuizIntroductionModal';
import ConfidenceRating from '@/components/quiz/ConfidenceRating';
import AutoSaveIndicator from '@/components/quiz/AutoSaveIndicator';
import AnswerFeedback from '@/components/quiz/AnswerFeedback';

// Interactive Quiz Components
import InteractiveQuizRenderer from '@/components/quiz/InteractiveQuizRenderer';
import VideoScenario from '@/components/quiz/VideoScenario';
import InteractiveImageHotspot from '@/components/quiz/InteractiveImageHotspot';
import MediaGallery from '@/components/quiz/MediaGallery';

// Legacy Components (fallback)
import QuestionNavigator from '@/components/exam/QuestionNavigator';

// Sample interactive quiz data
const sampleInteractiveExamData: EnhancedExamData = {
  id: 'interactive-dapur-mbg-001',
  title: 'Kuis Interaktif Dapur MBG',
  description: 'Kuis interaktif untuk menguji pemahaman tentang standar keamanan pangan di Dapur MBG',
  duration: 60,
  questions: [
    {
      id: '1',
      examId: 'interactive-dapur-mbg-001',
      type: 'multiple_choice' as const,
      question: 'Apa langkah pertama dalam implementasi HACCP di Dapur MBG?',
      options: [
        'Melakukan analisis bahaya',
        'Menetapkan titik kendali kritis',
        'Menetapkan batas kritis',
        'Menetapkan prosedur monitoring'
      ],
      correctAnswer: 0,
      points: 10,
      order: 1
    },
    {
      id: '2',
      examId: 'interactive-dapur-mbg-001',
      type: 'multiple_choice' as const,
      question: 'Susun prinsip HACCP dalam urutan yang benar untuk Dapur MBG',
      options: [
        'Analisis bahaya',
        'Tentukan CCP', 
        'Tetapkan batas kritis',
        'Tetapkan monitoring'
      ],
      correctAnswer: 0,
      points: 10,
      order: 2
    }
  ],
  // Store interactive data separately
  interactiveData: {
    id: 'interactive-exam-1',
    title: 'Interactive Food Safety Exam',
    duration: 60,
    examType: 'interactive' as const,
    adminConfig: {
      language: 'id',
      allowHints: true,
      showExplanations: true,
      enableBehaviorTracking: true,
      confidenceRatingRequired: true,
      timeLimit: 3600,
      shuffleQuestions: false,
      shuffleOptions: false,
      allowReview: true,
      showProgressBar: true,
      customInstructions: '',
      behaviorAnalysis: {
        trackMouseMovements: true,
        trackKeystrokes: true,
        trackScrolling: true,
        trackFocusEvents: true,
        analysisDepth: 'detailed' as const,
      },
      privacySettings: {
        anonymizeData: false,
        dataRetentionDays: 30,
        allowDataExport: true,
      },
    },
    behaviorAnalysis: {
      trackMouseMovements: true,
      trackKeystrokes: true,
      trackScrolling: true,
      trackFocusEvents: true,
      analysisDepth: 'detailed' as const,
    },
    stages: [],
    passingGrade: 70,
    maxAttempts: 3,
    shuffleQuestions: false,
    shuffleOptions: false,
    createdBy: 'admin',
    version: '1.0.0',
    createdAt: new Date(),
    updatedAt: new Date(),
    status: 'published' as const,
    questions: [
      {
        id: '1',
        question: 'Apa langkah pertama dalam memastikan keamanan pangan di Dapur MBG?',
        type: 'enhanced_mcq' as const,
        options: [
          'Melakukan analisis bahaya pada bahan makanan',
          'Menetapkan titik kendali kritis',
          'Menetapkan suhu penyimpanan',
          'Membuat prosedur monitoring'
        ],
        correctAnswer: 0,
        content: {
          question: 'Pilih jawaban yang paling tepat berdasarkan prinsip keamanan pangan di Dapur MBG',
          instructions: 'Pilih jawaban yang paling tepat berdasarkan prinsip keamanan pangan di Dapur MBG.'
        },
        difficulty: 'easy' as const,
        interactiveElements: [
          {
            type: 'hint',
            content: 'Pikirkan tentang langkah awal dalam sistem HACCP'
          },
          {
            type: 'explanation',
            content: 'Analisis bahaya adalah langkah pertama dan paling penting dalam HACCP untuk mengidentifikasi potensi risiko'
          }
        ]
      },
      // Video Scenario Question - NEW REALISTIC SCENARIO
      {
        id: 'video-scenario-1',
        question: 'Analisis Situasi Dapur: Identifikasi Masalah Keamanan Pangan',
        type: 'video_scenario' as const,
        options: [],
        correctAnswer: 0,
        content: {
          question: 'Tonton video situasi dapur berikut dan identifikasi masalah keamanan pangan yang terjadi',
          instructions: 'Video akan berhenti pada titik-titik kritis. Jawab pertanyaan yang muncul untuk melanjutkan.',
          media: {
            type: 'video' as const,
            src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
            alt: 'Simulasi Dapur Komersial - Analisis Keamanan Pangan',
            caption: 'Amati aktivitas dapur selama shift pagi dan identifikasi potensi masalah keamanan pangan'
          }
        },
        difficulty: 'medium' as const,
        timeLimit: 600,
        scenarios: [
          {
            id: 'step1',
            timestamp: 15,
            title: 'Persiapan Bahan Makanan',
            question: 'Berdasarkan simulasi video, apa masalah utama yang dapat terjadi dalam persiapan bahan makanan di dapur komersial?',
            options: [
              { id: 'opt1', text: 'Daging mentah dan sayuran disiapkan di area yang sama tanpa pemisahan', consequence: 'Risiko kontaminasi silang sangat tinggi - dapat menyebabkan foodborne illness' },
              { id: 'opt2', text: 'Suhu ruangan tidak terkontrol dengan baik', consequence: 'Dapat mempercepat pertumbuhan bakteri patogen pada makanan' },
              { id: 'opt3', text: 'Peralatan masak tidak dibersihkan secara proper antara penggunaan', consequence: 'Menjadi sumber kontaminasi utama dan breeding ground bakteri' },
              { id: 'opt4', text: 'Semua masalah di atas dapat terjadi bersamaan', consequence: 'Analisis komprehensif - multiple hazards memerlukan sistem HACCP yang ketat' }
            ],
            correctAnswer: 3,
            explanation: 'Dalam operasional dapur komersial, multiple food safety hazards sering terjadi bersamaan: kontaminasi silang, temperature abuse, dan poor sanitation. Sistem HACCP (Hazard Analysis Critical Control Points) diperlukan untuk mengidentifikasi dan mengontrol semua critical control points.',
            pauseVideo: true
          },
          {
            id: 'step2',
            timestamp: 45,
            title: 'Kontrol Suhu dan Penyimpanan',
            question: 'Dalam konteks keamanan pangan, apa yang harus diperhatikan dalam kontrol suhu?',
            options: [
              { id: 'opt1', text: 'Danger Zone (4°C - 60°C) harus dihindari', consequence: 'Benar - bakteri berkembang pesat di suhu ini' },
              { id: 'opt2', text: 'Cold chain harus dijaga dari supplier hingga serving', consequence: 'Kritis untuk mencegah temperature abuse' },
              { id: 'opt3', text: 'Monitoring suhu harus dilakukan secara berkala', consequence: 'Dokumentasi suhu adalah requirement legal' },
              { id: 'opt4', text: 'Semua aspek kontrol suhu di atas penting', consequence: 'Temperature control adalah fundamental dalam food safety' }
            ],
            correctAnswer: 3,
            explanation: 'Temperature control adalah salah satu pilar utama food safety. Danger zone, cold chain management, dan monitoring berkelanjutan harus diimplementasikan secara sistematis.',
            pauseVideo: true
          }
        ],
        interactiveElements: [
          {
            type: 'hint',
            content: 'Fokus pada prinsip-prinsip HACCP: identifikasi hazards, critical control points, monitoring procedures, dan corrective actions'
          },
          {
            type: 'learning_objective',
            content: 'Setelah menyelesaikan scenario ini, Anda akan mampu mengidentifikasi critical control points dalam operasional dapur dan menerapkan prinsip food safety management'
          }
        ]
      },
      // Image Hotspot Question - NEW REALISTIC SCENARIO
      {
        id: 'hotspot-scenario-1',
        question: 'Identifikasi Area Bermasalah dalam Tata Letak Dapur',
        type: 'image_hotspot' as const,
        options: [],
        correctAnswer: 0,
        content: {
          question: 'Klik pada area-area dalam gambar dapur yang menunjukkan pelanggaran keamanan pangan',
          instructions: 'Temukan dan klik pada 5 area bermasalah dalam tata letak dapur. Setiap area yang benar akan memberikan poin.',
          media: {
            type: 'image' as const,
            src: 'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&h=600',
            alt: 'Tata letak dapur dengan berbagai area bermasalah',
            caption: 'Analisis Tata Letak Dapur MBG - Identifikasi masalah keamanan pangan'
          }
        },
        difficulty: 'hard' as const,
        timeLimit: 300,
        hotspots: [
          {
            id: 'hotspot1',
            x: 15, y: 25, width: 12, height: 15,
            type: 'incorrect',
            title: 'Area Penyimpanan Daging',
            description: 'Daging mentah disimpan di rak atas',
            feedback: 'SALAH! Daging mentah harus disimpan di rak paling bawah untuk mencegah tetesan ke makanan lain.',
            points: 10,
            isRequired: true
          },
          {
            id: 'hotspot2',
            x: 45, y: 35, width: 15, height: 12,
            type: 'incorrect',
            title: 'Area Pencucian Sayuran',
            description: 'Sayuran dicuci bersamaan dengan peralatan kotor',
            feedback: 'SALAH! Sayuran harus dicuci di area terpisah dari peralatan kotor untuk mencegah kontaminasi silang.',
            points: 10,
            isRequired: true
          },
          {
            id: 'hotspot3',
            x: 70, y: 20, width: 18, height: 10,
            type: 'incorrect',
            title: 'Area Penyimpanan Suhu Ruang',
            description: 'Makanan mudah rusak disimpan pada suhu ruang',
            feedback: 'SALAH! Makanan mudah rusak harus disimpan dalam refrigerator pada suhu 4°C atau lebih rendah.',
            points: 10,
            isRequired: true
          },
          {
            id: 'hotspot4',
            x: 25, y: 60, width: 20, height: 8,
            type: 'incorrect',
            title: 'Area Persiapan Makanan',
            description: 'Talenan untuk daging dan sayuran tidak dipisah',
            feedback: 'SALAH! Harus menggunakan talenan terpisah untuk daging mentah dan sayuran untuk mencegah kontaminasi silang.',
            points: 10,
            isRequired: true
          },
          {
            id: 'hotspot5',
            x: 60, y: 70, width: 15, height: 12,
            type: 'incorrect',
            title: 'Area Pembuangan Sampah',
            description: 'Tempat sampah terbuka dekat area persiapan makanan',
            feedback: 'SALAH! Tempat sampah harus tertutup rapat dan dijauhkan dari area persiapan makanan.',
            points: 10,
            isRequired: true
          },
          {
            id: 'hotspot6',
            x: 80, y: 45, width: 12, height: 18,
            type: 'correct',
            title: 'Area Hand Washing Station',
            description: 'Stasiun cuci tangan yang tepat',
            feedback: 'BENAR! Stasiun cuci tangan sudah ditempatkan dengan benar dan mudah diakses oleh staff.',
            points: 15,
            isRequired: false
          }
        ],
        interactiveElements: [
          {
            type: 'hint',
            content: 'Fokus pada prinsip pemisahan: daging mentah, area pencucian, kontrol suhu, dan kebersihan. Cari area yang melanggar prinsip HACCP.'
          }
        ]
      },
      // Media Gallery Question - NEW REALISTIC SCENARIO
      {
        id: 'media-gallery-1',
        question: 'Pelajari Prosedur HACCP Melalui Media Pembelajaran',
        type: 'media_gallery' as const,
        options: [],
        correctAnswer: 0,
        content: {
          question: 'Tinjau semua media pembelajaran tentang implementasi HACCP di Dapur MBG',
          instructions: 'Pelajari setiap media untuk memahami prosedur HACCP secara komprehensif.',
          description: 'Koleksi media pembelajaran untuk implementasi sistem HACCP'
        },
        difficulty: 'medium' as const,
        timeLimit: 480,
        mediaItems: [
          {
            id: 'video1',
            type: 'video',
            src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
            title: 'Pengenalan Sistem HACCP',
            description: 'Video pengenalan konsep dasar HACCP dan implementasinya di industri makanan - 7 prinsip fundamental untuk keamanan pangan',
            thumbnail: 'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=400&h=300&fit=crop',
            duration: 180
          },
          {
            id: 'image1',
            type: 'image',
            src: 'https://images.unsplash.com/photo-1577308856961-8e4e0d5b63b8?w=800&h=600&fit=crop',
            title: 'Diagram Alur HACCP',
            description: 'Flowchart lengkap implementasi 7 prinsip HACCP: Analisis Bahaya, Identifikasi CCP, Penetapan Batas Kritis, Monitoring, Tindakan Koreksi, Verifikasi, dan Dokumentasi'
          },
          {
            id: 'video2',
            type: 'video',
            src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
            title: 'Critical Control Points (CCP)',
            description: 'Panduan identifikasi dan monitoring Critical Control Points dalam operasional dapur komersial',
            thumbnail: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&h=300&fit=crop',
            duration: 240
          },
          {
            id: 'image2',
            type: 'image',
            src: 'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=800&h=600&fit=crop',
            title: 'Temperature Control Chart',
            description: 'Grafik kontrol suhu untuk berbagai jenis makanan - Danger Zone, Safe Storage, dan Cooking Temperatures'
          },
          {
            id: 'document1',
            type: 'document',
            src: 'https://www.fda.gov/media/99016/download',
            title: 'HACCP Implementation Guide',
            description: 'Panduan resmi implementasi HACCP dari FDA - dokumen referensi lengkap untuk industri makanan',
            fileType: 'PDF',
            fileSize: '2.5 MB'
          },
          {
            id: 'image3',
            type: 'image',
            src: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=800&h=600&fit=crop',
            title: 'Food Safety Monitoring Log',
            description: 'Contoh form monitoring harian untuk dokumentasi HACCP - temperature logs, cleaning schedules, dan corrective actions'
          }
        ],
        interactiveElements: [
          {
            type: 'hint',
            content: 'Pelajari setiap media secara berurutan: Video → Diagram → Dokumentasi. Fokus pada 7 prinsip HACCP dan implementasi praktisnya'
          },
          {
            type: 'learning_objective',
            content: 'Setelah mempelajari semua media, Anda akan memahami: (1) 7 Prinsip HACCP, (2) Identifikasi CCP, (3) Sistem Monitoring, (4) Dokumentasi yang diperlukan'
          },
          {
            type: 'assessment_criteria',
            content: 'Pemahaman dinilai berdasarkan: kemampuan mengidentifikasi hazards, menetapkan CCP, merancang monitoring system, dan membuat dokumentasi HACCP'
          }
        ]
      },
      {
        id: '12',
        question: 'Identifikasi Suara Peralatan Dapur yang Bermasalah',
        type: 'enhanced_mcq' as const,
        options: [
          'Suara normal operasional',
          'Suara yang menandakan kerusakan motor',
          'Suara alarm keamanan',
          'Suara ventilasi yang berfungsi baik'
        ],
        correctAnswer: 1,
        content: {
          question: 'Dengarkan audio berikut dan identifikasi jenis suara peralatan dapur',
          instructions: 'Putar audio dan pilih jawaban yang paling tepat menggambarkan kondisi peralatan.',
          media: {
            type: 'audio' as const,
            src: '/audio/kitchen-equipment-malfunction.mp3',
            alt: 'Suara peralatan dapur yang bermasalah',
            caption: 'Audio suara peralatan dapur - identifikasi kondisinya'
          }
        },
        difficulty: 'medium' as const,
        timeLimit: 120,
        interactiveElements: [
          {
            type: 'hint',
            content: 'Dengarkan dengan seksama pola dan intensitas suara yang tidak normal'
          },
          {
            type: 'explanation',
            content: 'Suara yang tidak normal pada peralatan dapur dapat menandakan kerusakan yang perlu segera diperbaiki untuk menjaga keamanan dan efisiensi operasional.'
          }
        ]
      },
      {
        id: '13',
        question: 'Analisis Visual: Kondisi Penyimpanan Makanan',
        type: 'enhanced_mcq' as const,
        options: [
          'Penyimpanan sudah sesuai standar keamanan pangan',
          'Ada pelanggaran suhu penyimpanan',
          'Terdapat risiko kontaminasi silang',
          'Perlu perbaikan sistem labeling dan rotasi stok'
        ],
        correctAnswer: 2,
        content: {
          question: 'Perhatikan gambar kondisi penyimpanan makanan di bawah ini',
          instructions: 'Analisis gambar dan identifikasi masalah utama dalam penyimpanan makanan.',
          media: {
            type: 'image' as const,
            src: '/images/food-storage-analysis.jpg',
            alt: 'Kondisi penyimpanan makanan di lemari es',
            caption: 'Kondisi penyimpanan makanan - identifikasi masalah keamanan pangan'
          }
        },
        difficulty: 'hard' as const,
        timeLimit: 180,
        interactiveElements: [
          {
            type: 'hint',
            content: 'Perhatikan posisi makanan mentah dan matang, serta sistem penyimpanan yang digunakan'
          },
          {
            type: 'explanation',
            content: 'Gambar menunjukkan makanan mentah disimpan di atas makanan matang, yang dapat menyebabkan kontaminasi silang melalui tetesan cairan.'
          }
        ]
      },
      {
        id: '14',
        question: 'Prosedur Keamanan Berdasarkan Video Demonstrasi',
        type: 'enhanced_mcq' as const,
        options: [
          'Prosedur pembersihan peralatan',
          'Prosedur penanganan makanan mentah',
          'Prosedur sanitasi tangan',
          'Prosedur penyimpanan makanan dingin'
        ],
        correctAnswer: 2,
        content: {
          question: 'Tonton video demonstrasi berikut dan identifikasi prosedur keamanan yang ditunjukkan',
          instructions: 'Putar video dan pilih prosedur keamanan pangan yang sedang didemonstrasikan.',
          media: {
            type: 'video' as const,
            src: '/videos/hand-sanitization-procedure.mp4',
            alt: 'Video demonstrasi prosedur keamanan pangan',
            caption: 'Demonstrasi prosedur keamanan pangan - identifikasi jenisnya'
          }
        },
        difficulty: 'easy' as const,
        timeLimit: 150,
        interactiveElements: [
          {
            type: 'hint',
            content: 'Perhatikan langkah-langkah yang dilakukan dan fokus pada tujuan utama prosedur'
          },
          {
            type: 'explanation',
            content: 'Video mendemonstrasikan prosedur sanitasi tangan yang benar, termasuk penggunaan sabun, durasi pencucian, dan pengeringan yang tepat.'
          }
        ]
      },
      {
        id: '2',
        question: 'Berapa suhu yang aman untuk menyimpan daging mentah di Dapur MBG?',
        type: 'enhanced_mcq' as const,
        options: [
          'Di atas 5°C',
          'Di bawah 4°C', 
          'Suhu ruangan',
          'Di atas 10°C'
        ],
        correctAnswer: 1,
        content: {
          question: 'Pilih suhu yang tepat untuk keamanan pangan',
          instructions: 'Pilih rentang suhu yang benar untuk keamanan pangan.'
        },
        difficulty: 'easy' as const,
        interactiveElements: [
          {
            type: 'hint',
            content: 'Pikirkan tentang suhu lemari es yang ideal'
          },
          {
            type: 'explanation',
            content: 'Daging mentah harus disimpan di bawah 4°C untuk mencegah pertumbuhan bakteri berbahaya'
          }
        ]
      },
      {
        id: '3',
        question: 'Cocokkan istilah keamanan pangan dengan definisinya',
        type: 'puzzle' as const,
        options: [],
        correctAnswer: 0,
        content: {
          question: 'Seret setiap istilah untuk mencocokkan dengan definisi yang benar',
          instructions: 'Seret setiap istilah untuk mencocokkan dengan definisi yang benar.',
          puzzleType: 'matching' as const
        },
        difficulty: 'medium' as const,
        puzzleData: {
          type: 'jigsaw' as const,
          instructions: 'Cocokkan setiap istilah keamanan pangan dengan definisi yang tepat.',
          pieces: [
            {
              id: 'ccp',
              content: 'Titik Kendali Kritis (CCP)',
              correctPosition: 'def1',
              isLocked: false
            },
            {
              id: 'haccp',
              content: 'Analisis Bahaya dan Titik Kendali Kritis',
              correctPosition: 'def2',
              isLocked: false
            },
            {
              id: 'sanitasi',
              content: 'Proses pembersihan dan desinfeksi',
              correctPosition: 'def3',
              isLocked: false
            },
            {
              id: 'kontaminasi',
              content: 'Pencemaran makanan oleh zat berbahaya',
              correctPosition: 'def4',
              isLocked: false
            }
          ],
          targetAreas: [
            { id: 'def1', label: 'Titik dalam proses produksi makanan di mana bahaya dapat dicegah, dieliminasi, atau dikurangi' },
            { id: 'def2', label: 'Sistem manajemen keamanan pangan yang mengidentifikasi, mengevaluasi, dan mengendalikan bahaya' },
            { id: 'def3', label: 'Tindakan untuk menghilangkan kotoran dan mikroorganisme dari permukaan' },
            { id: 'def4', label: 'Masuknya bahan kimia, fisik, atau biologis yang dapat membahayakan kesehatan' }
          ]
        }
      },
      {
        id: '8',
        question: 'Identifikasi Risiko Kontaminasi Silang di Dapur MBG',
        type: 'enhanced_mcq' as const,
        options: [
          'Menggunakan talenan yang sama untuk daging dan sayuran',
          'Menyimpan makanan matang di atas makanan mentah',
          'Tidak mencuci tangan setelah memegang daging mentah',
          'Semua jawaban di atas benar'
        ],
        correctAnswer: 3,
        content: {
          question: 'Manakah dari praktik berikut yang dapat menyebabkan kontaminasi silang?',
          instructions: 'Pilih jawaban yang paling lengkap dan tepat.',
          media: {
            type: 'image' as const,
            src: '/images/cross-contamination-example.jpg',
            alt: 'Contoh kontaminasi silang di dapur',
            caption: 'Berbagai sumber kontaminasi silang yang harus dihindari'
          }
        },
        difficulty: 'medium' as const,
        timeLimit: 90,
        interactiveElements: [
          {
            type: 'hint',
            content: 'Kontaminasi silang terjadi ketika bakteri berpindah dari satu makanan ke makanan lain'
          },
          {
            type: 'explanation',
            content: 'Semua praktik tersebut dapat menyebabkan kontaminasi silang. Pencegahan meliputi: pisahkan peralatan, simpan makanan dengan benar, dan jaga kebersihan tangan.'
          }
        ]
      },
      {
        id: '9',
        question: 'Evaluasi Tingkat Kepercayaan: Suhu Danger Zone',
        type: 'enhanced_mcq' as const,
        options: [
          '0°C - 5°C',
          '5°C - 60°C',
          '60°C - 75°C',
          '75°C - 100°C'
        ],
        correctAnswer: 1,
        content: {
          question: 'Pada rentang suhu berapa bakteri berkembang paling cepat (Danger Zone)?',
          instructions: 'Pilih rentang suhu yang tepat dan berikan tingkat kepercayaan Anda.',
          requiresConfidence: true
        },
        difficulty: 'easy' as const,
        timeLimit: 60,
        interactiveElements: [
          {
            type: 'hint',
            content: 'Danger Zone adalah rentang suhu dimana bakteri berkembang biak dengan sangat cepat'
          },
          {
            type: 'explanation',
            content: 'Danger Zone adalah 5°C - 60°C. Makanan tidak boleh berada dalam rentang suhu ini lebih dari 2 jam.'
          }
        ]
      },
      {
        id: '4',
        question: 'Urutkan langkah-langkah mencuci tangan yang benar di Dapur MBG',
        type: 'puzzle' as const,
        options: [],
        correctAnswer: 0,
        content: {
          question: 'Susun langkah mencuci tangan dalam urutan yang benar',
          instructions: 'Seret setiap langkah ke urutan yang benar (1-5).',
          puzzleType: 'matching' as const
        },
        difficulty: 'easy' as const,
        puzzleData: {
          type: 'jigsaw' as const,
          instructions: 'Urutkan langkah-langkah mencuci tangan sesuai standar Dapur MBG.',
          pieces: [
            {
              id: 'step1',
              content: 'Basahi tangan dengan air bersih',
              correctPosition: 'pos1',
              isLocked: false
            },
            {
              id: 'step2',
              content: 'Gunakan sabun dan gosok hingga berbusa',
              correctPosition: 'pos2',
              isLocked: false
            },
            {
              id: 'step3',
              content: 'Gosok selama minimal 20 detik',
              correctPosition: 'pos3',
              isLocked: false
            },
            {
              id: 'step4',
              content: 'Bilas hingga bersih',
              correctPosition: 'pos4',
              isLocked: false
            },
            {
              id: 'step5',
              content: 'Keringkan dengan handuk bersih',
              correctPosition: 'pos5',
              isLocked: false
            }
          ],
          targetAreas: [
            { id: 'pos1', label: 'Langkah 1' },
            { id: 'pos2', label: 'Langkah 2' },
            { id: 'pos3', label: 'Langkah 3' },
            { id: 'pos4', label: 'Langkah 4' },
            { id: 'pos5', label: 'Langkah 5' }
          ]
        }
      },
      {
        id: '5',
        question: 'Susun tahapan persiapan makanan bergizi gratis sesuai standar MBG',
        type: 'puzzle' as const,
        options: [],
        correctAnswer: 0,
        content: {
          question: 'Urutkan tahapan persiapan makanan dari awal hingga penyajian',
          instructions: 'Seret setiap tahapan ke urutan yang benar (1-5).',
          puzzleType: 'matching' as const
        },
        difficulty: 'hard' as const,
        puzzleData: {
          type: 'jigsaw' as const,
          instructions: 'Urutkan tahapan persiapan makanan bergizi gratis sesuai standar MBG.',
          pieces: [
            {
              id: 'stage1',
              content: 'Perencanaan menu bergizi seimbang',
              correctPosition: 'order1',
              isLocked: false
            },
            {
              id: 'stage2',
              content: 'Pemilihan dan pemeriksaan bahan baku',
              correctPosition: 'order2',
              isLocked: false
            },
            {
              id: 'stage3',
              content: 'Persiapan dan pengolahan makanan',
              correctPosition: 'order3',
              isLocked: false
            },
            {
              id: 'stage4',
              content: 'Kontrol kualitas dan suhu',
              correctPosition: 'order4',
              isLocked: false
            },
            {
              id: 'stage5',
              content: 'Penyajian dan distribusi',
              correctPosition: 'order5',
              isLocked: false
            }
          ],
          targetAreas: [
            { id: 'order1', label: 'Tahap 1' },
            { id: 'order2', label: 'Tahap 2' },
            { id: 'order3', label: 'Tahap 3' },
            { id: 'order4', label: 'Tahap 4' },
            { id: 'order5', label: 'Tahap 5' }
          ]
        }
      },
      {
        id: '6',
        question: 'Simulasi Krisis Keamanan Pangan di Dapur MBG',
        type: 'scenario' as const,
        options: [],
        correctAnswer: 0,
        content: {
          question: 'Anda menemukan bahan makanan yang sudah melewati tanggal kedaluwarsa di kulkas, tetapi masih terlihat segar. Dapur sedang sangat sibuk dan bahan tersebut dibutuhkan untuk pesanan yang sudah menunggu 20 menit. Apa yang akan Anda lakukan?',
          instructions: 'Pilih keputusan terbaik berdasarkan prinsip keamanan pangan dan situasi yang ada.'
        },
        difficulty: 'hard' as const,
        scenarioData: {
          type: 'kitchen' as const,
          instructions: 'Buat keputusan yang tepat dalam situasi darurat di dapur dengan mempertimbangkan keamanan pangan dan kepuasan pelanggan.',
          steps: [
            {
              id: 'step1',
              title: 'Evaluasi Situasi',
              description: 'Anda menemukan bahan makanan expired saat dapur sedang sibuk',
              situation: 'Bahan makanan sudah melewati tanggal kedaluwarsa 2 hari, tetapi masih terlihat dan tercium segar. Ada 5 pesanan yang menunggu dan pelanggan mulai mengeluh.',
              options: [
                {
                  id: 'option1',
                  text: 'Gunakan bahan tersebut karena masih terlihat baik',
                  icon: 'fast-forward',
                  risk: 'high' as const,
                  cost: 0,
                  timeRequired: 5
                },
                {
                  id: 'option2',
                  text: 'Buang bahan dan cari alternatif lain',
                  icon: 'trash',
                  risk: 'low' as const,
                  cost: 50000,
                  timeRequired: 15
                },
                {
                  id: 'option3',
                  text: 'Tanya supervisor dulu sebelum memutuskan',
                  icon: 'help-circle',
                  risk: 'medium' as const,
                  cost: 0,
                  timeRequired: 10
                },
                {
                  id: 'option4',
                  text: 'Cek lebih detail kondisi bahan (smell, texture, dll)',
                  icon: 'search',
                  risk: 'medium' as const,
                  cost: 0,
                  timeRequired: 8
                }
               ],
              timeLimit: 45,
              consequences: {
                'option1': {
                  scoreChange: -30,
                  message: 'Keputusan berbahaya! Menggunakan bahan expired dapat menyebabkan keracunan makanan.',
                  nextStep: 'step2_bad'
                },
                'option2': {
                  scoreChange: 20,
                  message: 'Keputusan yang tepat! Keamanan pangan adalah prioritas utama.',
                  nextStep: 'step2_good'
                },
                'option3': {
                  scoreChange: 10,
                  message: 'Baik untuk berkonsultasi, tetapi dalam situasi darurat Anda harus bisa memutuskan sendiri.',
                  nextStep: 'step2_medium'
                },
                'option4': {
                  scoreChange: 5,
                  message: 'Pemeriksaan visual dan aroma tidak cukup untuk memastikan keamanan bahan expired.',
                  nextStep: 'step2_medium'
                }
              }
            }
          ],
          initialState: {
            temperature: 25,
            cleanliness: 85,
            inventory: {
              'daging_sapi': 0,
              'sayuran': 10,
              'bumbu': 15
            },
            equipment: {
              'kompor': true,
              'kulkas': true,
              'freezer': true
            },
            staff: {
              'chef': true,
              'assistant': true,
              'supervisor': false
            },
            orders: []
          }
        }
      },
      {
        id: '7',
        question: 'Manajemen Suhu dan Waktu dalam Persiapan Makanan Bergizi',
        type: 'scenario' as const,
        options: [],
        correctAnswer: 0,
        content: {
          question: 'Anda harus menyiapkan 100 porsi makanan bergizi untuk program MBG. Kompor utama tiba-tiba rusak dan hanya tersisa 2 kompor kecil. Bagaimana strategi Anda?',
          instructions: 'Kelola sumber daya yang terbatas untuk tetap memenuhi target waktu dan kualitas makanan.'
        },
        difficulty: 'hard' as const,
        scenarioData: {
          type: 'kitchen' as const,
          instructions: 'Kelola dapur dengan keterbatasan peralatan untuk memenuhi target produksi makanan bergizi.',
          steps: [
            {
              id: 'step1',
              title: 'Strategi Memasak',
              description: 'Kompor utama rusak, hanya tersisa 2 kompor kecil untuk 100 porsi',
              situation: 'Target: 100 porsi dalam 2 jam. Peralatan: 2 kompor kecil, 1 oven, 1 steamer. Menu: nasi, sayur, protein.',
              options: [
                {
                  id: 'option1',
                  text: 'Masak secara berurutan, satu jenis makanan selesai baru yang lain',
                  icon: 'list',
                  risk: 'high' as const,
                  cost: 0,
                  timeRequired: 180
                },
                {
                  id: 'option2',
                  text: 'Gunakan semua peralatan secara bersamaan dengan pembagian tugas',
                  icon: 'users',
                  risk: 'low' as const,
                  cost: 0,
                  timeRequired: 120
                },
                {
                  id: 'option3',
                  text: 'Kurangi porsi menjadi 80 untuk memastikan kualitas',
                  icon: 'minus-circle',
                  risk: 'medium' as const,
                  cost: 0,
                  timeRequired: 100
                },
                {
                  id: 'option4',
                  text: 'Pinjam kompor dari dapur lain atau sewa peralatan tambahan',
                  icon: 'plus-circle',
                  risk: 'low' as const,
                  cost: 200000,
                  timeRequired: 90
                }
              ],
              timeLimit: 60,
              consequences: {
                'option1': {
                  scoreChange: -10,
                  message: 'Strategi tidak efisien, makanan akan terlambat dan beberapa akan dingin saat disajikan.',
                  nextStep: 'step2_bad'
                },
                'option2': {
                  scoreChange: 25,
                  message: 'Strategi yang sangat baik! Pemanfaatan optimal semua peralatan yang tersedia.',
                  nextStep: 'step2_excellent'
                },
                'option3': {
                  scoreChange: 5,
                  message: 'Keputusan aman tetapi tidak memenuhi target. Cari solusi yang lebih kreatif.',
                  nextStep: 'step2_medium'
                },
                'option4': {
                  scoreChange: 15,
                  message: 'Solusi praktis dengan biaya tambahan, tetapi memastikan target tercapai.',
                  nextStep: 'step2_good'
                }
              }
            }
          ],
          initialState: {
            temperature: 28,
            cleanliness: 90,
            inventory: {
              'beras': 20,
              'sayuran': 25,
              'protein': 15,
              'bumbu': 20
            },
            equipment: {
              'kompor_utama': false,
              'kompor_kecil_1': true,
              'kompor_kecil_2': true,
              'oven': true,
              'steamer': true
            },
            staff: {
              'chef': true,
              'assistant_1': true,
              'assistant_2': true
            },
            orders: []
          }
        }
      },
      {
        id: '10',
        question: 'Puzzle Matching: Peralatan Dapur dan Fungsinya',
        type: 'puzzle' as const,
        content: {
          question: 'Cocokkan setiap peralatan dapur dengan fungsi utamanya dalam keamanan pangan',
          instructions: 'Tarik dan lepas setiap peralatan ke fungsi yang sesuai',
          puzzleType: 'matching' as const
        },
        difficulty: 'medium' as const,
        timeLimit: 180,
        puzzleData: {
          type: 'jigsaw' as const,
          pieces: [
            { id: 'p1', content: 'Termometer Digital', correctPosition: 'f1', isLocked: false },
            { id: 'p2', content: 'Cutting Board Warna-warni', correctPosition: 'f2', isLocked: false },
            { id: 'p3', content: 'Timer Dapur', correctPosition: 'f3', isLocked: false },
            { id: 'p4', content: 'Sarung Tangan Sekali Pakai', correctPosition: 'f4', isLocked: false }
          ],
          targetAreas: [
            { id: 'f1', label: 'Mengukur suhu makanan untuk memastikan keamanan' },
            { id: 'f2', label: 'Mencegah kontaminasi silang antar jenis makanan' },
            { id: 'f3', label: 'Memantau waktu memasak dan penyimpanan' },
            { id: 'f4', label: 'Melindungi tangan dari kontaminasi' }
          ]
        },
        interactiveElements: [
          {
            type: 'hint',
            content: 'Perhatikan warna coding pada cutting board dan fungsi termometer dalam HACCP'
          }
        ]
      },
      // New Quiz Type 1: Puzzle Gambar/Icon Match
      {
        id: '15',
        question: 'Cocokkan Gambar Peralatan dengan Fungsi Keamanan Pangan',
        type: 'puzzle_gambar_icon' as const,
        options: [],
        correctAnswer: 0,
        content: {
          question: 'Seret setiap gambar peralatan ke fungsi keamanan pangan yang sesuai',
          instructions: 'Tarik dan lepas gambar peralatan dapur ke area fungsi yang tepat untuk memastikan keamanan pangan.'
        },
        difficulty: 'easy' as const,
        timeLimit: 180,
        visualElements: {
          matchingPairs: [
            {
              id: 'pair1',
              leftItem: {
                id: 'img1',
                content: 'Termometer Digital',
                image: 'https://cdn-icons-png.flaticon.com/512/2913/2913465.png'
              },
              rightItem: {
                id: 'area1',
                content: 'Mengukur suhu makanan untuk memastikan keamanan'
              }
            },
            {
              id: 'pair2',
              leftItem: {
                id: 'img2',
                content: 'Cutting Board Berwarna',
                image: 'https://cdn-icons-png.flaticon.com/512/2515/2515183.png'
              },
              rightItem: {
                id: 'area2',
                content: 'Mencegah kontaminasi silang'
              }
            },
            {
              id: 'pair3',
              leftItem: {
                id: 'img3',
                content: 'Timer Dapur',
                image: 'https://cdn-icons-png.flaticon.com/512/2921/2921222.png'
              },
              rightItem: {
                id: 'area3',
                content: 'Memantau waktu memasak'
              }
            },
            {
              id: 'pair4',
              leftItem: {
                id: 'img4',
                content: 'Sarung Tangan Sekali Pakai',
                image: 'https://cdn-icons-png.flaticon.com/512/2913/2913423.png'
              },
              rightItem: {
                id: 'area4',
                content: 'Melindungi dari kontaminasi'
              }
            },
            {
              id: 'pair5',
              leftItem: {
                id: 'img5',
                content: 'Topi Chef',
                image: 'https://cdn-icons-png.flaticon.com/512/2515/2515191.png'
              },
              rightItem: {
                id: 'area5',
                content: 'Menjaga kebersihan rambut'
              }
            },
            {
              id: 'pair6',
              leftItem: {
                id: 'img6',
                content: 'Apron/Celemek',
                image: 'https://cdn-icons-png.flaticon.com/512/2515/2515189.png'
              },
              rightItem: {
                id: 'area6',
                content: 'Melindungi pakaian dari kontaminasi'
              }
            }
          ],
          allowDragDrop: true,
          showHints: true,
          maxAttempts: 3,
          visualStyle: 'grid'
        },
        interactiveElements: [
          {
            type: 'hint',
            content: 'Perhatikan warna coding dan fungsi utama setiap peralatan dalam sistem HACCP'
          },
          {
            type: 'explanation',
            content: 'Setiap peralatan memiliki peran khusus dalam menjaga keamanan pangan sesuai standar HACCP'
          }
        ]
      },
      // New Quiz Type 2: True or False (Cepat-Tepat)
      {
        id: '16',
        question: 'Benar atau Salah: Suhu Penyimpanan Makanan',
        type: 'true_false_cepat' as const,
        options: ['Benar', 'Salah'],
        correctAnswer: 0,
        content: {
          question: 'Daging mentah boleh disimpan pada suhu 8°C selama 2 hari',
          instructions: 'Jawab sesuai kecepatan Anda untuk testing.'
        },
        difficulty: 'easy' as const,
        timeLimit: 300, // 5 minutes - very long time limit
        reactionTimeConfig: {
          timeLimit: 300000, // 5 minutes in milliseconds
          showCountdown: false, // Hide countdown timer
          trackReactionTime: true, // Still track reaction time for testing
          instantFeedback: true,
          penaltyForWrongAnswer: 0, // No penalty since this is for testing
          bonusForQuickAnswer: 5,
          quickAnswerThreshold: 3000 // 3 seconds threshold
        },
        interactiveElements: [
          {
            type: 'explanation',
            content: 'SALAH! Daging mentah harus disimpan di bawah 4°C untuk mencegah pertumbuhan bakteri berbahaya'
          }
        ]
      },
      // New Quiz Type 3: Mini Simulation (Role Play Game)
      {
        id: '17',
        question: 'Simulasi: Manajer Dapur Menghadapi Krisis',
        type: 'mini_simulation_rpg' as const,
        options: [],
        correctAnswer: 0,
        content: {
          question: 'Anda adalah manajer dapur MBG. Tiba-tiba ada laporan keracunan makanan dari pelanggan. Bagaimana tindakan Anda?',
          instructions: 'Pilih tindakan yang tepat. Setiap keputusan akan mempengaruhi reputasi dan keamanan dapur.'
        },
        difficulty: 'hard' as const,
        timeLimit: 300,
        rpgElements: {
          character: {
            name: 'Manajer Dapur MBG',
            role: 'Kitchen Manager',
            initialStats: {
              empathy: 70,
              leadership: 80,
              problemSolving: 60,
              communication: 75
            },
            avatar: 'https://cdn-icons-png.flaticon.com/512/3135/3135715.png'
          },
          scenario: 'Anda adalah manajer dapur MBG yang menghadapi situasi krisis keracunan makanan. Setiap keputusan yang Anda buat akan mempengaruhi reputasi dapur dan keselamatan pelanggan.',
          maxSteps: 3,
          decisions: [
            {
              id: 'decision1',
              step: 0,
              situation: 'Laporan keracunan makanan masuk. Apa langkah pertama Anda?',
              options: [
                {
                  id: 'opt1',
                  text: 'Segera hentikan semua operasi dapur',
                  difficulty: 'medium',
                  icon: '🛑'
                },
                {
                  id: 'opt2',
                  text: 'Investigasi sumber makanan yang dicurigai',
                  difficulty: 'easy',
                  icon: '🔍'
                },
                {
                  id: 'opt3',
                  text: 'Hubungi manajemen dan otoritas kesehatan',
                  difficulty: 'medium',
                  icon: '📞'
                }
              ],
              consequences: {
                'opt1': {
                  message: 'Tindakan pencegahan yang baik, tetapi mungkin terlalu drastis',
                  statChanges: {
                    leadership: -5,
                    empathy: 15,
                    problemSolving: 10,
                    communication: 0
                  },
                  nextStep: 'decision2a'
                },
                'opt2': {
                  message: 'Pendekatan yang sistematis dan profesional',
                  statChanges: {
                    leadership: 10,
                    empathy: 10,
                    problemSolving: 5,
                    communication: 5
                  },
                  nextStep: 'decision2b'
                },
                'opt3': {
                  message: 'Transparansi yang baik, menunjukkan tanggung jawab',
                  statChanges: {
                    leadership: 5,
                    empathy: 5,
                    problemSolving: 15,
                    communication: 10
                  },
                  nextStep: 'decision2c'
                }
              }
            },
            {
              id: 'decision2',
              step: 1,
              situation: 'Tim dapur mulai panik. Bagaimana Anda mengelola situasi ini?',
              options: [
                {
                  id: 'opt1',
                  text: 'Berikan instruksi tegas dan jelas kepada semua staff',
                  difficulty: 'medium',
                  icon: '👨‍💼'
                },
                {
                  id: 'opt2',
                  text: 'Tenangkan tim dan jelaskan situasi dengan empati',
                  difficulty: 'easy',
                  icon: '🤝'
                },
                {
                  id: 'opt3',
                  text: 'Fokus pada dokumentasi dan bukti',
                  difficulty: 'hard',
                  icon: '📋'
                }
              ],
              consequences: {
                'opt1': {
                  message: 'Tim mengikuti instruksi dengan baik',
                  statChanges: {
                    leadership: 10,
                    empathy: -5,
                    problemSolving: 5,
                    communication: 5
                  },
                  isEndingPath: false
                },
                'opt2': {
                  message: 'Tim merasa didukung dan bekerja lebih tenang',
                  statChanges: {
                    leadership: 5,
                    empathy: 15,
                    problemSolving: 0,
                    communication: 10
                  },
                  isEndingPath: false
                },
                'opt3': {
                  message: 'Dokumentasi lengkap membantu investigasi',
                  statChanges: {
                    leadership: 0,
                    empathy: -5,
                    problemSolving: 20,
                    communication: -5
                  },
                  isEndingPath: false
                }
              }
            },
            {
              id: 'decision3',
              step: 2,
              situation: 'Media mulai meliput kasus ini. Bagaimana respons Anda?',
              options: [
                {
                  id: 'opt1',
                  text: 'Berikan pernyataan transparan kepada media',
                  difficulty: 'hard',
                  icon: '📺'
                },
                {
                  id: 'opt2',
                  text: 'Hindari media dan fokus pada penyelesaian internal',
                  difficulty: 'medium',
                  icon: '🚫'
                },
                {
                  id: 'opt3',
                  text: 'Koordinasi dengan tim PR perusahaan',
                  difficulty: 'easy',
                  icon: '💼'
                }
              ],
              consequences: {
                'opt1': {
                  message: 'Transparansi meningkatkan kepercayaan publik',
                  statChanges: {
                    leadership: 15,
                    empathy: 10,
                    problemSolving: 5,
                    communication: 20
                  },
                  isEndingPath: true,
                  endingType: 'success'
                },
                'opt2': {
                  message: 'Spekulasi media meningkat, reputasi terpengaruh',
                  statChanges: {
                    leadership: -10,
                    empathy: -5,
                    problemSolving: 10,
                    communication: -15
                  },
                  isEndingPath: true,
                  endingType: 'failure'
                },
                'opt3': {
                  message: 'Respons terkoordinasi dengan baik',
                  statChanges: {
                    leadership: 5,
                    empathy: 5,
                    problemSolving: 10,
                    communication: 15
                  },
                  isEndingPath: true,
                  endingType: 'neutral'
                }
              }
            }
          ],
          scoringSystem: {
            empathy: 10,
            leadership: 15,
            problemSolving: 20,
            communication: 10
          }
        },
        interactiveElements: [
          {
            type: 'hint',
            content: 'Pikirkan tentang protokol keamanan pangan dan tanggung jawab manajer dalam situasi krisis'
          },
          {
            type: 'explanation',
            content: 'Dalam situasi keracunan makanan, prioritas utama adalah keamanan pelanggan dan transparansi dalam penanganan krisis'
          }
        ]
      },
      // New Quiz Type 4: Mini Survey Reflection (Self-score Check)
      {
        id: '18',
        question: 'Refleksi Diri: Kebiasaan Keamanan Pangan Anda',
        type: 'mini_survey_reflection' as const,
        options: [],
        correctAnswer: 0,
        content: {
          question: 'Seberapa sering Anda mencuci tangan sebelum menangani makanan?',
          instructions: 'Pilih emoji yang paling menggambarkan kebiasaan Anda. Jawaban ini untuk refleksi pribadi.'
        },
        difficulty: 'easy' as const,
        timeLimit: 60,
        reflectionConfig: {
          questions: [
            {
              id: 'q1',
              question: 'Seberapa sering Anda mencuci tangan sebelum menangani makanan?',
              category: 'behavior',
              required: true
            },
            {
              id: 'q2', 
              question: 'Seberapa konsisten Anda memeriksa suhu makanan saat memasak?',
              category: 'behavior',
              required: true
            },
            {
              id: 'q3',
              question: 'Seberapa sering Anda membersihkan peralatan setelah digunakan?',
              category: 'behavior',
              required: true
            }
          ],
          scaleType: 'emoji',
          emojiScale: {
            showLabels: true,
            allowHalfSteps: false,
            options: [
              {
                value: 1,
                emoji: '😞',
                label: 'Jarang',
                description: 'Kurang dari 25% waktu'
              },
              {
                value: 2,
                emoji: '🙂',
                label: 'Kadang-kadang',
                description: '25-50% waktu'
              },
              {
                value: 3,
                emoji: '😃',
                label: 'Sering',
                description: '50-75% waktu'
              },
              {
                value: 4,
                emoji: '🤩',
                label: 'Selalu',
                description: 'Lebih dari 75% waktu'
              }
            ]
          },
          allowComments: false,
          isAnonymous: true
        },
        interactiveElements: [
          {
            type: 'explanation',
            content: 'Refleksi diri membantu meningkatkan kesadaran tentang praktik keamanan pangan dalam kehidupan sehari-hari'
          }
        ]
      }
    ]
  },
  adminConfig: {
    language: 'id' as const,
    allowHints: true,
    showExplanations: true,
    enableBehaviorTracking: false,
    confidenceRatingRequired: true,
    timeLimit: 3600,
    shuffleQuestions: false,
    shuffleOptions: false,
    allowReview: true,
    showProgressBar: true,
    customInstructions: 'Complete all interactive questions to proceed.',
    behaviorAnalysis: {
      trackMouseMovements: false,
      trackKeystrokes: false,
      trackScrolling: false,
      trackFocusEvents: false,
      analysisDepth: 'basic' as const
    },
    privacySettings: {
      anonymizeData: true,
      dataRetentionDays: 30,
      allowDataExport: false
    }
  }
};

// Sample exam data
const sampleExamData = {
  id: 'haccp-001',
  title: 'Ujian Sertifikasi HACCP',
  duration: 90, // minutes
  questions: [
    {
      id: '1',
      examId: 'haccp-001',
      type: 'multiple_choice' as const,
      question: 'Dalam sistem HACCP Critical Control Point (CCP) adalah tahapan di mana produk yang tidak memenuhi pengawasan bahaya biologis dapat dikendalikan atau dieliminasi. Penilaian dan penentuan berfokus pada HACCP menggunakan keputusan CCP.',
      options: [
        'CCP adalah tahap dimana bahaya produk yang tidak memenuhi pengawasan bahaya biologis dapat dikendalikan',
        'CCP adalah tahapan dimana di mana produk yang tidak memenuhi pengawasan bahaya biologis dapat dikendalikan',
        'CCP adalah tahapan dimana bahaya yang memerlukan intervensi dalam sistem pengawasan makanan',
        'CCP adalah tahapan yang harus dilakukan dengan menggunakan bahaya produk yang memerlukan'
      ],
      correctAnswer: 2,
      points: 10,
      order: 1
    },
    // Add more questions as needed
    ...Array.from({ length: 49 }, (_, i) => ({
      id: `${i + 2}`,
      examId: 'haccp-001',
      type: 'multiple_choice' as const,
      question: `Soal nomor ${i + 2} tentang HACCP dan sistem keamanan pangan.`,
      options: [
        `Pilihan A untuk soal ${i + 2}`,
        `Pilihan B untuk soal ${i + 2}`,
        `Pilihan C untuk soal ${i + 2}`,
        `Pilihan D untuk soal ${i + 2}`
      ],
      correctAnswer: Math.floor(Math.random() * 4),
      points: 10,
      order: i + 2
    }))
  ]
};

function InteractiveQuizWrapper() {
  const router = useRouter();
  const { 
    state, 
    dispatch,
    setExamData,
    setAdminConfig,
    setInteractiveState,
    submitExam
  } = useExam();

  const handleSubmitExam = () => {
    submitExam();
    router.push('/exam-summary');
  };

  useEffect(() => {
    // Set up interactive exam data
    setExamData(sampleInteractiveExamData);
    if (sampleInteractiveExamData.adminConfig) {
      setAdminConfig(sampleInteractiveExamData.adminConfig);
    }
  }, []); // Empty dependency array - only run once on mount

  if (!state.examData || !state.adminSettings.config) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <p className="text-gray-600">Loading interactive quiz...</p>
        </div>
      </div>
    );
  }

  const currentQuestion = state.examData.interactiveData?.questions[state.currentQuestion] as InteractiveQuestion;

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-4xl mx-auto p-6">
        <div className="bg-white rounded-lg shadow-lg p-6">
          <div className="mb-6">
            <h1 className="text-2xl font-bold text-gray-900 mb-2">
              {state.examData.title}
            </h1>
            <div className="flex items-center gap-4 text-sm text-gray-600">
              <span>Question {state.currentQuestion + 1} of {state.examData.interactiveData?.questions.length || state.examData.questions.length}</span>
              <span>•</span>
              <span>Interactive Quiz</span>
            </div>
          </div>

          <InteractiveQuizRenderer
            question={currentQuestion}
            questionIndex={state.currentQuestion}
            adminConfig={state.adminSettings.config}
            onAnswerChange={(answer) => {
              dispatch({
                type: 'SET_ANSWER',
                payload: { questionIndex: state.currentQuestion, answer }
              });
            }}
            onConfidenceChange={(confidence) => {
              console.log('Confidence changed:', confidence);
            }}
          />

          <div className="mt-6 flex justify-between">
            <button
              onClick={() => dispatch({ type: 'SET_CURRENT_QUESTION', payload: state.currentQuestion - 1 })}
              disabled={state.currentQuestion === 0}
              className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-300 transition-colors"
            >
              Previous
            </button>
            {state.currentQuestion >= (state.examData.interactiveData?.questions.length || state.examData.questions.length) - 1 ? (
              <button
                onClick={handleSubmitExam}
                disabled={state.answers[state.currentQuestion] === undefined}
                className={cn(
                  "px-4 py-2 rounded-lg transition-colors",
                  state.answers[state.currentQuestion] !== undefined
                    ? "bg-green-600 text-white hover:bg-green-700"
                    : "bg-gray-300 text-gray-500 cursor-not-allowed disabled:opacity-50"
                )}
              >
                Finish
              </button>
            ) : (
              <button
                onClick={() => dispatch({ type: 'SET_CURRENT_QUESTION', payload: state.currentQuestion + 1 })}
                disabled={state.answers[state.currentQuestion] === undefined}
                className={cn(
                  "px-4 py-2 rounded-lg transition-colors",
                  state.answers[state.currentQuestion] !== undefined
                    ? "bg-blue-600 text-white hover:bg-blue-700"
                    : "bg-gray-300 text-gray-500 cursor-not-allowed disabled:opacity-50"
                )}
              >
                Next
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function ExamSessionContent() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const isInteractive = searchParams.get('type') === 'interactive';
  
  // If this is an interactive quiz, render the InteractiveQuizWrapper
  if (isInteractive) {
    return <InteractiveQuizWrapper />;
  }
  
  // Otherwise, render the regular exam session
  const { 
    state, 
    dispatch, 
    goToQuestion, 
    selectAnswer, 
    toggleFlag, 
    submitExam,
    formattedTimeRemaining,
    answeredCount,
    flaggedCount,
    progressPercentage,
    // Sprint 2 features
    toggleBookmark,
    bookmarkedCount,
    setViewMode,
    setUIState,
    canSubmit,
    hasUnsavedChanges
  } = useExam();

  const handleSubmitExam = () => {
    submitExam();
    router.push('/exam-summary');
  };
  
  const [showIntroModal, setShowIntroModal] = useState(true);
  const [showSettings, setShowSettings] = useState(false);
  const [lastAnsweredQuestion, setLastAnsweredQuestion] = useState<number | null>(null);
  
  useExamPersistence(sampleExamData.id, state, dispatch);

  useEffect(() => {
    dispatch({ type: 'SET_EXAM_DATA', payload: sampleExamData });
  }, []); // Empty dependency array - only run once on mount

  // Early return if exam data is not loaded yet
  if (!state.examData) {
    return <div className="flex items-center justify-center min-h-screen">Loading...</div>;
  }

  const currentQuestionData = state.examData.questions[state.currentQuestion];
  const isLastQuestion = state.currentQuestion === state.examData.questions.length - 1;
  const isFirstQuestion = state.currentQuestion === 0;

  const handleAnswerSelect = (answerIndex: number) => {
    selectAnswer(state.currentQuestion, answerIndex);
    setLastAnsweredQuestion(state.currentQuestion);
  };

  const handleFlagQuestion = () => {
    toggleFlag(state.currentQuestion);
  };

  const handleBookmarkQuestion = () => {
    toggleBookmark(state.currentQuestion);
  };

  const handleNextQuestion = () => {
    if (!isLastQuestion) {
      goToQuestion(state.currentQuestion + 1);
    }
  };

  const handlePrevQuestion = () => {
    if (!isFirstQuestion) {
      goToQuestion(state.currentQuestion - 1);
    }
  };

  const handleStartExam = () => {
    setShowIntroModal(false);
    // Remove the invalid START_EXAM dispatch - not needed as the exam starts when intro modal closes
  };

  // Don't render main content if intro modal is showing and feature is enabled
  if (showIntroModal && isFeatureEnabled('quizIntroductionModal')) {
    return (
      <QuizIntroductionModal
        isOpen={showIntroModal}
        onStart={handleStartExam}
        onClose={() => window.history.back()}
      />
    );
  }

  // Use modern or legacy layout based on feature flags
  const useModernLayout = isSprint2Enabled() && isFeatureEnabled('modernDesign');

  return (
    <div className={cn(
      "min-h-screen",
      useModernLayout 
        ? "bg-gradient-to-br from-gray-50 to-blue-50" 
        : "bg-gray-50"
    )}>
      {/* Enhanced Header */}
      <div className={cn(
        "bg-white border-b",
        useModernLayout 
          ? "shadow-lg border-gray-200" 
          : "shadow-sm"
      )}>
        <div className="max-w-7xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <Link href="/exams" className="text-gray-600 hover:text-gray-800 transition-colors">
                <ChevronLeft className="w-6 h-6" />
              </Link>
              <div>
                <h1 className="text-xl font-bold text-gray-900">{state.examData.title}</h1>
                <p className="text-sm text-gray-600">Hazard Analysis and Critical Control Point - Level Basic</p>
              </div>
            </div>
            
            <div className="flex items-center gap-4">
              {/* Conditional Sprint 2 Components */}
              {isFeatureEnabled('autoSaveIndicator') && <AutoSaveIndicator />}
              
              {isFeatureEnabled('enhancedTimer') ? (
                <EnhancedTimer 
                  enableAlerts={true}
                  autoSubmitEnabled={true}
                />
              ) : (
                <div className="flex items-center gap-2 text-xl font-mono">
                  <Clock className="w-6 h-6 text-gray-600" />
                  <span className={cn(
                    "font-bold",
                    state.timeRemaining < 300 && "text-red-600 animate-pulse"
                  )}>
                    {formattedTimeRemaining}
                  </span>
                </div>
              )}
              
              {useModernLayout && (
                <button
                  onClick={() => setShowSettings(!showSettings)}
                  className="p-2 text-gray-600 hover:text-gray-800 hover:bg-gray-100 transition-colors"
                >
                  <Settings className="w-5 h-5" />
                </button>
              )}
            </div>
          </div>
          
          {/* Progress Bar - Sprint 2 Feature */}
          {isFeatureEnabled('progressIndicator') && (
            <div className="mt-4">
              <ProgressIndicator />
            </div>
          )}
        </div>
      </div>

      {/* Main Content */}
      <div className="max-w-7xl mx-auto px-6 py-6">
        <div className={cn(
          "grid gap-6",
          useModernLayout ? "grid-cols-1 lg:grid-cols-4" : "grid-cols-1 lg:grid-cols-4"
        )}>
          {/* Question Area */}
          <div className="lg:col-span-3">
            <div className={cn(
              "bg-white overflow-hidden",
              useModernLayout ? "rounded-xl shadow-lg" : "rounded-lg shadow"
            )}>
              {/* Question Header */}
              {useModernLayout ? (
                <div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white p-6">
                  <div className="flex items-center justify-between mb-4">
                    <div>
                      <h2 className="text-2xl font-bold">
                        Soal {state.currentQuestion + 1} dari {state.examData.questions.length}
                      </h2>
                      <div className="flex items-center gap-4 mt-2 text-blue-100">
                        <span className="flex items-center gap-1">
                          <BookOpen className="w-4 h-4" />
                          {answeredCount} Terjawab
                        </span>
                        <span className="flex items-center gap-1">
                          <Flag className="w-4 h-4" />
                          {flaggedCount} Ditandai
                        </span>
                        {isFeatureEnabled('bookmarkFeature') && (
                          <span className="flex items-center gap-1">
                            <BookOpen className="w-4 h-4" />
                            {bookmarkedCount} Bookmark
                          </span>
                        )}
                      </div>
                    </div>
                    
                    <div className="flex gap-2">
                      <button
                        onClick={handleFlagQuestion}
                        className={cn(
                          "flex items-center gap-2 px-4 py-2 rounded-lg border-2 transition-all",
                          state.flaggedQuestions.has(state.currentQuestion)
                            ? "bg-yellow-100 border-yellow-300 text-yellow-700"
                            : "bg-white/10 border-white/20 text-white hover:bg-white/20"
                        )}
                      >
                        <Flag className="w-4 h-4" />
                        {state.flaggedQuestions.has(state.currentQuestion) ? 'Batal Tandai' : 'Tandai'}
                      </button>
                      
                      {isFeatureEnabled('bookmarkFeature') && (
                        <button
                          onClick={handleBookmarkQuestion}
                          className={cn(
                            "flex items-center gap-2 px-4 py-2 rounded-lg border-2 transition-all",
                            state.bookmarkedQuestions?.has(state.currentQuestion)
                              ? "bg-blue-100 border-blue-300 text-blue-700"
                              : "bg-white/10 border-white/20 text-white hover:bg-white/20"
                          )}
                        >
                          <BookOpen className="w-4 h-4" />
                          {state.bookmarkedQuestions?.has(state.currentQuestion) ? 'Hapus Bookmark' : 'Bookmark'}
                        </button>
                      )}
                    </div>
                  </div>
                </div>
              ) : (
                <div className="p-6 border-b">
                  <div className="flex items-center justify-between">
                    <h2 className="text-xl font-semibold text-gray-800">
                      Soal {state.currentQuestion + 1} dari {state.examData.questions.length}
                    </h2>
                    <button
                      onClick={handleFlagQuestion}
                      className={cn(
                        "flex items-center gap-2 px-4 py-2 rounded-lg border-2 transition-colors",
                        state.flaggedQuestions.has(state.currentQuestion)
                          ? "bg-yellow-100 border-yellow-400 text-yellow-700"
                          : "bg-gray-100 border-gray-300 text-gray-600 hover:bg-gray-200"
                      )}
                    >
                      <Flag className="w-4 h-4" />
                      {state.flaggedQuestions.has(state.currentQuestion) ? 'Batal Tandai' : 'Tandai Soal'}
                    </button>
                  </div>
                </div>
              )}

              {/* Question Content */}
              <div className="p-6">
                <div className="mb-8">
                  <p className="text-lg text-gray-900 leading-relaxed">
                    {currentQuestionData.question}
                  </p>
                </div>

                {/* Answer Options */}
                {currentQuestionData.options && currentQuestionData.options.length > 0 && (
                  <div className="space-y-4 mb-8">
                    {currentQuestionData.options.map((option, index) => {
                    const isSelected = state.answers[state.currentQuestion] === index;
                    return (
                      <button
                        key={index}
                        onClick={() => handleAnswerSelect(index)}
                        className={cn(
                          "w-full text-left p-4 rounded-lg border-2 transition-all duration-200",
                          useModernLayout && "group",
                          isSelected
                            ? useModernLayout 
                              ? "bg-blue-50 border-blue-500 text-blue-700 shadow-md"
                              : "bg-blue-50 border-blue-500 text-blue-700"
                            : useModernLayout
                              ? "bg-white border-gray-200 hover:border-blue-300 hover:bg-blue-50/50"
                              : "bg-white border-gray-200 hover:border-gray-300 hover:bg-gray-50"
                        )}
                      >
                        <div className="flex items-start gap-3">
                          <span className={cn(
                            "flex-shrink-0 rounded-full border-2 flex items-center justify-center text-sm font-bold transition-all",
                            useModernLayout ? "w-8 h-8" : "w-6 h-6",
                            isSelected
                              ? "bg-blue-500 border-blue-500 text-white"
                              : useModernLayout
                                ? "border-gray-300 text-gray-500 group-hover:border-blue-400 group-hover:text-blue-600"
                                : "border-gray-300 text-gray-500"
                          )}>
                            {String.fromCharCode(65 + index)}
                          </span>
                          <span className={cn(
                            "text-gray-700",
                            useModernLayout && "group-hover:text-gray-900"
                          )}>
                            {option}
                          </span>
                        </div>
                      </button>
                    );
                  })}
                  </div>
                )}

                {/* Confidence Rating - Sprint 2 Feature */}
                {isFeatureEnabled('confidenceRating') && (
                  <div className="mb-6 p-4 bg-gray-50 rounded-lg">
                    <ConfidenceRating
                      questionIndex={state.currentQuestion}
                      variant="scale"
                      onRatingChange={(rating) => {
                        // Handle confidence rating
                        console.log('Confidence rating:', rating);
                      }}
                    />
                  </div>
                )}

                {/* Navigation Buttons */}
                <div className="flex items-center justify-between pt-6 border-t border-gray-200">
                  <button
                    onClick={handlePrevQuestion}
                    disabled={isFirstQuestion}
                    className={cn(
                      "flex items-center gap-2 px-6 py-3 rounded-lg transition-colors font-medium",
                      isFirstQuestion
                        ? "bg-gray-100 text-gray-400 cursor-not-allowed"
                        : "bg-gray-200 text-gray-700 hover:bg-gray-300"
                    )}
                  >
                    <ChevronLeft className="w-4 h-4" />
                    Sebelumnya
                  </button>

                  <div className="flex gap-3">
                    {isLastQuestion ? (
                      <button
                        onClick={() => dispatch({ type: 'SHOW_SUBMIT_MODAL', payload: true })}
                        disabled={state.answers[state.currentQuestion] === undefined}
                        className={cn(
                          "flex items-center gap-2 px-6 py-3 rounded-lg transition-colors font-medium",
                          state.answers[state.currentQuestion] !== undefined
                            ? "bg-green-600 text-white hover:bg-green-700"
                            : "bg-gray-300 text-gray-500 cursor-not-allowed"
                        )}
                      >
                        <AlertTriangle className="w-4 h-4" />
                        Selesai Ujian
                      </button>
                    ) : (
                      <button
                        onClick={handleNextQuestion}
                        disabled={state.answers[state.currentQuestion] === undefined}
                        className={cn(
                          "flex items-center gap-2 px-6 py-3 rounded-lg transition-colors font-medium",
                          state.answers[state.currentQuestion] !== undefined
                            ? "bg-blue-600 text-white hover:bg-blue-700"
                            : "bg-gray-300 text-gray-500 cursor-not-allowed"
                        )}
                      >
                        Selanjutnya
                        <ChevronRight className="w-4 h-4" />
                      </button>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Sidebar */}
          <div className="lg:col-span-1 space-y-6">
            {/* Question Navigator */}
            <div className={cn(
              "bg-white overflow-hidden",
              useModernLayout ? "rounded-xl shadow-lg" : "rounded-lg shadow"
            )}>
              {useModernLayout && (
                <div className="p-4 bg-gray-50 border-b">
                  <h3 className="font-semibold text-gray-900 flex items-center gap-2">
                    <Search className="w-4 h-4" />
                    Navigasi Soal
                  </h3>
                </div>
              )}
              <div className="p-4">
                {isFeatureEnabled('enhancedQuestionNavigator') ? (
                  <EnhancedQuestionNavigator />
                ) : (
                  <QuestionNavigator
                    totalQuestions={state.examData.questions.length}
                    currentQuestion={state.currentQuestion + 1}
                    answeredQuestions={new Set(Object.keys(state.answers).map(key => parseInt(key) + 1))}
                    flaggedQuestions={new Set(Array.from(state.flaggedQuestions).map(q => q + 1))}
                    onQuestionSelect={(questionNumber) => goToQuestion(questionNumber - 1)}
                  />
                )}
              </div>
            </div>

            {/* Quick Stats - Sprint 2 Feature */}
            {useModernLayout && (
              <div className="bg-white rounded-xl shadow-lg p-6">
                <h3 className="font-semibold text-gray-900 mb-4">Statistik Cepat</h3>
                <div className="space-y-3">
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">Progress:</span>
                    <span className="font-semibold text-blue-600">{Math.round(progressPercentage)}%</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">Terjawab:</span>
                    <span className="font-semibold text-green-600">{answeredCount}</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">Ditandai:</span>
                    <span className="font-semibold text-yellow-600">{flaggedCount}</span>
                  </div>
                  {isFeatureEnabled('bookmarkFeature') && (
                    <div className="flex justify-between items-center">
                      <span className="text-gray-600">Bookmark:</span>
                      <span className="font-semibold text-purple-600">{bookmarkedCount}</span>
                    </div>
                  )}
                  {hasUnsavedChanges && (
                    <div className="flex justify-between items-center">
                      <span className="text-gray-600">Status:</span>
                      <span className="font-semibold text-orange-600">Belum Tersimpan</span>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Answer Feedback - Sprint 2 Feature */}
      {isFeatureEnabled('answerFeedback') && lastAnsweredQuestion !== null && (
        <AnswerFeedback
          questionIndex={lastAnsweredQuestion}
          selectedAnswer={state.answers[lastAnsweredQuestion]?.toString()}
          showAnimation={true}
          feedbackType="instant"
        />
      )}

      {/* Enhanced Submit Modal */}
      {state.showSubmitModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className={cn(
            "bg-white max-w-lg w-full mx-4 shadow-2xl",
            useModernLayout ? "rounded-xl" : "rounded-lg"
          )}>
            <div className="p-8">
              <div className="text-center">
                <div className={cn(
                  "w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6",
                  useModernLayout 
                    ? "bg-gradient-to-r from-green-400 to-blue-500" 
                    : "bg-green-500"
                )}>
                  <AlertTriangle className="w-10 h-10 text-white" />
                </div>
                <h3 className="text-2xl font-bold text-gray-900 mb-3">Konfirmasi Selesai Ujian</h3>
                <p className="text-gray-600 mb-6">
                  Pastikan Anda telah memeriksa semua jawaban sebelum menyelesaikan ujian. 
                  Setelah dikonfirmasi, Anda tidak dapat mengubah jawaban lagi.
                </p>
                
                {/* Enhanced Stats */}
                <div className={cn(
                  "rounded-lg p-6 mb-6",
                  useModernLayout ? "bg-gray-50" : "bg-gray-100"
                )}>
                  <div className="grid grid-cols-2 gap-4 text-sm">
                    <div className="text-center">
                      <div className="text-2xl font-bold text-gray-900">{state.examData.questions.length}</div>
                      <div className="text-gray-600">Total Soal</div>
                    </div>
                    <div className="text-center">
                      <div className="text-2xl font-bold text-green-600">{answeredCount}</div>
                      <div className="text-gray-600">Terjawab</div>
                    </div>
                    <div className="text-center">
                      <div className="text-2xl font-bold text-yellow-600">{flaggedCount}</div>
                      <div className="text-gray-600">Ditandai</div>
                    </div>
                    {isFeatureEnabled('bookmarkFeature') && (
                      <div className="text-center">
                        <div className="text-2xl font-bold text-purple-600">{bookmarkedCount}</div>
                        <div className="text-gray-600">Bookmark</div>
                      </div>
                    )}
                  </div>
                  
                  {/* Progress Bar */}
                  <div className="mt-4">
                    <div className="flex justify-between text-sm text-gray-600 mb-2">
                      <span>Progress Pengerjaan</span>
                      <span>{Math.round(progressPercentage)}%</span>
                    </div>
                    <div className="w-full bg-gray-200 rounded-full h-3">
                      <div 
                        className="bg-gradient-to-r from-blue-500 to-green-500 h-3 rounded-full transition-all duration-300"
                        style={{ width: `${progressPercentage}%` }}
                      ></div>
                    </div>
                  </div>
                  
                  {/* Warnings */}
                  {answeredCount < state.examData.questions.length && (
                    <div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
                      <p className="text-yellow-800 text-sm">
                        ⚠️ Masih ada {state.examData.questions.length - answeredCount} soal yang belum dijawab
                      </p>
                    </div>
                  )}
                  
                  {flaggedCount > 0 && (
                    <div className="mt-2 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                      <p className="text-blue-800 text-sm">
                        🏁 Ada {flaggedCount} soal yang ditandai untuk ditinjau ulang
                      </p>
                    </div>
                  )}
                </div>
                
                <div className="flex gap-3">
                  <button
                    onClick={() => dispatch({ type: 'SHOW_SUBMIT_MODAL', payload: false })}
                    className="flex-1 px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-medium"
                  >
                    Batal
                  </button>
                  <button
                    onClick={handleSubmitExam}
                    className={cn(
                      "flex-1 px-6 py-3 text-white rounded-lg transition-all font-medium",
                      useModernLayout
                        ? "bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 shadow-lg"
                        : "bg-green-600 hover:bg-green-700"
                    )}
                  >
                    Selesai Ujian
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default function ExamSessionPage() {
  return (
    <ExamProvider>
      <ExamSessionContent />
    </ExamProvider>
  );
}