'use client';

import React, { useState } from 'react';
import { ExamProvider } from '../../contexts/ExamContext';
import InteractiveQuizRenderer from '../../components/quiz/InteractiveQuizRenderer';
import { InteractiveQuestion, AdminQuizConfig } from '../../types';
import { ArrowLeft, ArrowRight, Settings, Play } from 'lucide-react';

const demoQuestions: InteractiveQuestion[] = [
  {
    id: '1',
    type: 'enhanced_mcq',
    content: {
      question: 'Apa prinsip pertama dalam sistem HACCP (Hazard Analysis and Critical Control Points) yang harus diterapkan di dapur BGN?',
      options: [
        { id: 'a', text: 'Melakukan analisis bahaya', isCorrect: true },
        { id: 'b', text: 'Menetapkan titik kendali kritis', isCorrect: false },
        { id: 'c', text: 'Menetapkan batas kritis', isCorrect: false },
        { id: 'd', text: 'Membuat prosedur pemantauan', isCorrect: false }
      ],
      explanation: 'Analisis bahaya adalah fondasi sistem HACCP. Ini melibatkan identifikasi bahaya biologis, kimia, dan fisik yang dapat terjadi dalam proses produksi makanan di dapur BGN.'
    },
    multimedia: {
      type: 'image',
      src: '/images/haccp-bgn.jpg',
      alt: 'Diagram Prinsip HACCP untuk Dapur BGN'
    },
    interactiveElements: [
      {
        type: 'hotspot',
        config: {
          content: 'Pikirkan tentang urutan logis implementasi HACCP di dapur BGN',
          triggerCondition: 'on_request'
        }
      }
    ]
  },
  {
    id: '2',
    type: 'puzzle',
    content: {
      question: 'Susun langkah-langkah persiapan makanan yang aman di dapur BGN dengan urutan yang benar:',
      instructions: 'Seret dan susun langkah-langkah dalam urutan yang benar'
    },
    puzzleData: {
      type: 'sequence',
      instructions: 'Seret dan susun langkah-langkah dalam urutan yang benar',
      pieces: [
        { id: 'p1', content: 'Cuci tangan dengan sabun', correctPosition: 1 },
        { id: 'p2', content: 'Periksa tanggal kedaluwarsa bahan', correctPosition: 0 },
        { id: 'p3', content: 'Gunakan alat pelindung diri', correctPosition: 3 },
        { id: 'p4', content: 'Bersihkan area kerja', correctPosition: 2 },
        { id: 'p5', content: 'Mulai proses memasak', correctPosition: 4 }
      ],
      correctOrder: [0, 1, 2, 3, 4]
    }
  },
  {
    id: '3',
    type: 'scenario',
    content: {
      question: 'Simulasi Dapur BGN: Anda menemukan bahan makanan yang sudah melewati tanggal kedaluwarsa di kulkas, tetapi masih terlihat segar. Dapur sedang sangat sibuk dan bahan tersebut dibutuhkan untuk menu yang sudah dipesan. Apa yang akan Anda lakukan?',
      options: [
        { id: 'a', text: 'Gunakan bahan tersebut karena masih terlihat baik', isCorrect: false },
        { id: 'b', text: 'Buang bahan dan cari alternatif lain', isCorrect: true },
        { id: 'c', text: 'Tanya supervisor dulu sebelum memutuskan', isCorrect: false },
        { id: 'd', text: 'Periksa lebih detail kondisi bahan (bau, tekstur, dll)', isCorrect: false }
      ]
    },
    scenarioData: {
      type: 'kitchen',
      instructions: 'Pilih tindakan yang paling sesuai dengan standar keamanan pangan BGN',
      steps: [
        {
          id: 'step1',
          title: 'Identifikasi Masalah',
          description: 'Bahan makanan kedaluwarsa ditemukan di dapur BGN',
          situation: 'Anda menemukan bahan makanan yang sudah melewati tanggal kedaluwarsa di kulkas, tetapi masih terlihat segar.',
          options: [
            { 
              id: 'opt1', 
              text: 'Abaikan tanggal kedaluwarsa', 
              risk: 'high',
              cost: 0
            },
            { 
              id: 'opt2', 
              text: 'Evaluasi kondisi bahan', 
              risk: 'medium',
              cost: 10
            }
          ],
          consequences: {
            'opt1': {
              scoreChange: -10,
              message: 'Tindakan berbahaya! Mengabaikan tanggal kedaluwarsa dapat menyebabkan keracunan makanan.',
              nextStep: 'step2'
            },
            'opt2': {
              scoreChange: 5,
              message: 'Evaluasi diperlukan, namun tetap harus mengikuti protokol keamanan.',
              nextStep: 'step2'
            }
          }
        },
        {
          id: 'step2', 
          title: 'Pengambilan Keputusan',
          description: 'Tentukan tindakan yang sesuai standar BGN',
          situation: 'Berdasarkan evaluasi, Anda harus memutuskan tindakan selanjutnya.',
          options: [
            { 
              id: 'opt3', 
              text: 'Buang bahan yang kedaluwarsa', 
              risk: 'low',
              cost: 50
            },
            { 
              id: 'opt4', 
              text: 'Gunakan bahan tersebut', 
              risk: 'high',
              cost: 0
            }
          ],
          consequences: {
            'opt3': {
              scoreChange: 10,
              message: 'Keputusan yang tepat! Membuang bahan kedaluwarsa sesuai dengan standar keamanan BGN.',
              nextStep: undefined
            },
            'opt4': {
              scoreChange: -15,
              message: 'Tindakan sangat berbahaya! Ini melanggar protokol keamanan pangan BGN.',
              nextStep: undefined
            }
          }
        }
      ]
    }
  },
  {
    id: '4',
    type: 'enhanced_mcq',
    content: {
      question: 'Suhu penyimpanan yang tepat untuk daging segar di kulkas dapur BGN adalah:',
      options: [
        { id: 'a', text: '0°C hingga 2°C', isCorrect: true },
        { id: 'b', text: '4°C hingga 6°C', isCorrect: false },
        { id: 'c', text: '8°C hingga 10°C', isCorrect: false },
        { id: 'd', text: '10°C hingga 12°C', isCorrect: false }
      ],
      explanation: 'Daging segar harus disimpan pada suhu 0°C hingga 2°C untuk mencegah pertumbuhan bakteri berbahaya dan menjaga kualitas makanan sesuai standar BGN.'
    },
    multimedia: {
      type: 'image',
      src: '/images/temperature-guide-bgn.jpg',
      alt: 'Panduan Suhu Penyimpanan BGN'
    }
  },
  {
    id: '5',
    type: 'puzzle',
    content: {
      question: 'Cocokkan jenis kontaminasi dengan contohnya di dapur BGN:',
      instructions: 'Seret contoh ke kategori kontaminasi yang sesuai'
    },
    puzzleData: {
      type: 'jigsaw',
      instructions: 'Seret contoh ke kategori kontaminasi yang sesuai',
      pieces: [
        { id: 'ex1', content: 'Bakteri E.coli', correctPosition: 0 },
        { id: 'ex2', content: 'Deterjen pembersih', correctPosition: 1 },
        { id: 'ex3', content: 'Pecahan kaca', correctPosition: 2 }
      ],
      correctOrder: [0, 1, 2]
    }
  },
  {
    id: '6',
    type: 'scenario',
    content: {
      question: 'Simulasi Krisis Dapur BGN: Terjadi pemadaman listrik mendadak saat sedang menyiapkan makanan untuk 200 porsi. Apa langkah prioritas yang harus dilakukan?',
      options: [
        { id: 'a', text: 'Lanjutkan memasak dengan kompor gas', isCorrect: false },
        { id: 'b', text: 'Amankan makanan yang sudah dimasak dan hentikan proses memasak', isCorrect: true },
        { id: 'c', text: 'Pindahkan semua bahan ke kulkas lain', isCorrect: false },
        { id: 'd', text: 'Tunggu listrik menyala kembali', isCorrect: false }
      ]
    },
    scenarioData: {
      type: 'kitchen',
      instructions: 'Pilih tindakan darurat yang sesuai protokol BGN',
      steps: [
        {
          id: 'emergency1',
          title: 'Respons Darurat',
          description: 'Pemadaman listrik di dapur BGN',
          situation: 'Terjadi pemadaman listrik mendadak saat sedang menyiapkan makanan untuk 200 porsi.',
          options: [
            { 
              id: 'emr1', 
              text: 'Amankan makanan yang sudah matang', 
              risk: 'low',
              cost: 0
            },
            { 
              id: 'emr2', 
              text: 'Panik dan bingung', 
              risk: 'high',
              cost: 100
            }
          ],
          consequences: {
            'emr1': {
              scoreChange: 10,
              message: 'Tindakan yang tepat! Mengamankan makanan yang sudah matang adalah prioritas utama.',
              nextStep: undefined
            },
            'emr2': {
              scoreChange: -10,
              message: 'Kepanikan tidak membantu situasi darurat. Tetap tenang dan ikuti protokol.',
              nextStep: undefined
            }
          }
        }
      ]
    }
  },
  {
    id: '7',
    type: 'enhanced_mcq',
    content: {
      question: 'Berapa lama maksimal makanan matang dapat disimpan pada suhu ruang di dapur BGN sebelum harus dibuang?',
      options: [
        { id: 'a', text: '1 jam', isCorrect: false },
        { id: 'b', text: '2 jam', isCorrect: true },
        { id: 'c', text: '4 jam', isCorrect: false },
        { id: 'd', text: '6 jam', isCorrect: false }
      ],
      explanation: 'Makanan matang tidak boleh dibiarkan pada suhu ruang lebih dari 2 jam untuk mencegah pertumbuhan bakteri berbahaya. Ini adalah standar keamanan pangan yang diterapkan di BGN.'
    },
    interactiveElements: [
      {
        type: 'hotspot',
        config: {
          content: 'Ingat aturan 2 jam untuk keamanan makanan!',
          triggerCondition: 'on_answer'
        }
      }
    ]
  },
  {
    id: '8',
    type: 'puzzle',
    content: {
      question: 'Susun area kerja dapur BGN berdasarkan prinsip alur kerja yang efisien:',
      instructions: 'Seret area kerja ke urutan yang benar sesuai alur kerja dapur BGN'
    },
    puzzleData: {
      type: 'sequence',
      instructions: 'Seret area kerja ke urutan yang benar sesuai alur kerja dapur BGN',
      pieces: [
        { id: 'area1', content: 'Area Penerimaan Bahan', correctPosition: 0 },
        { id: 'area2', content: 'Area Penyimpanan Dingin', correctPosition: 1 },
        { id: 'area3', content: 'Area Persiapan', correctPosition: 2 },
        { id: 'area4', content: 'Area Memasak', correctPosition: 3 },
        { id: 'area5', content: 'Area Penyajian', correctPosition: 4 }
      ],
      correctOrder: [0, 1, 2, 3, 4]
    }
  },
  {
    id: '9',
    type: 'scenario',
    content: {
      question: 'Skenario Inspeksi BGN: Petugas inspeksi datang tiba-tiba ke dapur. Mereka menemukan beberapa masalah kecil. Bagaimana sikap yang tepat?',
      options: [
        { id: 'a', text: 'Menyembunyikan masalah yang ada', isCorrect: false },
        { id: 'b', text: 'Kooperatif dan berkomitmen memperbaiki', isCorrect: true },
        { id: 'c', text: 'Menyalahkan staff lain', isCorrect: false },
        { id: 'd', text: 'Menolak inspeksi', isCorrect: false }
      ]
    },
    scenarioData: {
      type: 'kitchen',
      instructions: 'Tunjukkan sikap profesional sesuai nilai-nilai BGN',
      steps: [
        {
          id: 'inspect1',
          title: 'Sikap Saat Inspeksi',
          description: 'Petugas menemukan area yang perlu diperbaiki',
          situation: 'Petugas inspeksi datang tiba-tiba ke dapur dan menemukan beberapa masalah kecil.',
          options: [
            { 
              id: 'ins1', 
              text: 'Terima masukan dengan baik', 
              risk: 'low',
              cost: 0
            },
            { 
              id: 'ins2', 
              text: 'Defensif dan menolak kritik', 
              risk: 'high',
              cost: 50
            }
          ],
          consequences: {
            'ins1': {
              scoreChange: 10,
              message: 'Sikap yang sangat baik! Menerima masukan inspeksi dengan profesional menunjukkan komitmen pada kualitas.',
              nextStep: undefined
            },
            'ins2': {
              scoreChange: -10,
              message: 'Sikap defensif tidak membantu perbaikan. Lebih baik terima masukan untuk kemajuan bersama.',
              nextStep: undefined
            }
          }
        }
      ]
    }
  },
  {
    id: '10',
    type: 'enhanced_mcq',
    content: {
      question: 'Apa yang dimaksud dengan "Cross Contamination" dalam konteks dapur BGN dan bagaimana cara mencegahnya?',
      options: [
        { id: 'a', text: 'Pencampuran bahan makanan yang berbeda jenis', isCorrect: false },
        { id: 'b', text: 'Perpindahan bakteri dari makanan mentah ke makanan matang melalui tangan, alat, atau permukaan', isCorrect: true },
        { id: 'c', text: 'Penggunaan alat masak yang sama untuk semua jenis makanan', isCorrect: false },
        { id: 'd', text: 'Penyimpanan makanan dalam satu tempat', isCorrect: false }
      ],
      explanation: 'Cross contamination adalah perpindahan bakteri berbahaya dari makanan mentah ke makanan matang. Pencegahannya dengan memisahkan alat, talenan, dan area kerja untuk bahan mentah dan matang.'
    },
    multimedia: {
      type: 'image',
      src: '/images/cross-contamination-prevention-bgn.jpg',
      alt: 'Pencegahan Kontaminasi Silang di Dapur BGN'
    },
    interactiveElements: [
      {
        type: 'hotspot',
        config: {
          content: 'Checklist pencegahan kontaminasi silang di dapur BGN',
          triggerCondition: 'on_correct_answer'
        }
      }
    ]
  },
  {
    id: '2',
    type: 'puzzle',
    content: {
      question: 'Arrange the HACCP principles in the correct order by dragging them to the right sequence:',
      options: []
    },
    puzzleData: {
      type: 'sequence',
      pieces: [
        { id: '1', content: '1. Conduct hazard analysis', correctPosition: 0 },
        { id: '2', content: '2. Determine Critical Control Points (CCPs)', correctPosition: 1 },
        { id: '3', content: '3. Establish critical limits', correctPosition: 2 },
        { id: '4', content: '4. Establish monitoring procedures', correctPosition: 3 },
        { id: '5', content: '5. Establish corrective actions', correctPosition: 4 },
        { id: '6', content: '6. Establish verification procedures', correctPosition: 5 },
        { id: '7', content: '7. Establish record keeping', correctPosition: 6 },
      ],
      instructions: 'Drag the HACCP principles to arrange them in the correct order'
    }
  },
  {
    id: '3',
    type: 'scenario',
    content: {
      question: 'Kitchen Management Scenario: You are managing a busy restaurant kitchen during lunch rush. Handle the incoming orders efficiently while maintaining food safety standards.',
      options: []
    },
    scenarioData: {
      type: 'kitchen',
      instructions: 'You are managing a busy restaurant kitchen during lunch rush. Handle the incoming orders efficiently while maintaining food safety standards.',
      steps: [
        {
          id: 'start',
          title: 'New Order Received',
          description: 'A new order has arrived during the lunch rush',
          situation: 'New order received: Grilled Chicken with Caesar Salad (Table 5)',
          options: [
            { id: 'assign_head_chef', text: 'Assign Head Chef', risk: 'low' },
            { id: 'assign_line_cook', text: 'Assign Line Cook', risk: 'medium' },
            { id: 'delay_order', text: 'Delay order (kitchen busy)', risk: 'high' },
          ],
          consequences: {
            'assign_head_chef': {
              scoreChange: 10,
              kitchenStateChanges: { efficiency: 90 },
              message: 'Head chef efficiently handles the order',
              nextStep: 'cooking_chicken'
            },
            'assign_line_cook': {
              scoreChange: 5,
              kitchenStateChanges: { efficiency: 80 },
              message: 'Line cook starts preparing the order',
              nextStep: 'cooking_chicken'
            },
            'delay_order': {
              scoreChange: -15,
              kitchenStateChanges: { customerSatisfaction: 60 },
              message: 'Customer satisfaction decreases due to delay'
            }
          }
        },
        {
          id: 'cooking_chicken',
          title: 'Cooking Process',
          description: 'Chef is preparing the grilled chicken',
          situation: 'Chef is preparing the grilled chicken...',
          options: [
            { id: 'continue', text: 'Continue cooking', risk: 'low' },
          ],
          consequences: {
            'continue': {
              scoreChange: 0,
              kitchenStateChanges: {},
              message: 'Cooking process continues',
              nextStep: 'check_temperature'
            }
          }
        },
        {
          id: 'check_temperature',
          title: 'Temperature Check',
          description: 'Time to check the internal temperature of the chicken',
          situation: 'Check internal temperature of chicken',
          options: [
            { id: 'temp_ok', text: 'Temperature is 165°F (safe)', risk: 'low' },
            { id: 'temp_low', text: 'Temperature is 150°F (unsafe)', risk: 'high' },
          ],
          consequences: {
            'temp_ok': {
              scoreChange: 15,
              kitchenStateChanges: { cleanliness: 95 },
              message: 'Food safety maintained, dish ready to serve'
            },
            'temp_low': {
              scoreChange: -20,
              kitchenStateChanges: { cleanliness: 70 },
              message: 'Food safety violation! Must continue cooking'
            }
          }
        }
      ]
    }
  },
];

const defaultAdminConfig: AdminQuizConfig = {
  language: 'id',
  allowHints: true,
  showExplanations: true,
  enableBehaviorTracking: true,
  confidenceRatingRequired: true,
  timeLimit: 1800, // 30 minutes
  shuffleQuestions: false,
  shuffleOptions: false,
  allowReview: true,
  showProgressBar: true,
  customInstructions: 'This is a demo of the interactive quiz system. Please explore all features.',
  behaviorAnalysis: {
    trackMouseMovements: true,
    trackKeystrokes: true,
    trackScrolling: true,
    trackFocusEvents: true,
    analysisDepth: 'detailed',
  },
  privacySettings: {
    anonymizeData: false,
    dataRetentionDays: 30,
    allowDataExport: true,
  },
};

export default function InteractiveQuizDemo() {
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [answers, setAnswers] = useState<{ [key: number]: any }>({});
  const [confidenceLevels, setConfidenceLevels] = useState<{ [key: number]: number }>({});
  const [adminConfig, setAdminConfig] = useState<AdminQuizConfig>(defaultAdminConfig);
  const [showSettings, setShowSettings] = useState(false);

  const currentQuestion = demoQuestions[currentQuestionIndex];
  const isLastQuestion = currentQuestionIndex === demoQuestions.length - 1;
  const isFirstQuestion = currentQuestionIndex === 0;

  const handleAnswerChange = (answer: any) => {
    setAnswers(prev => ({
      ...prev,
      [currentQuestionIndex]: answer
    }));
    console.log('Answer changed:', { questionIndex: currentQuestionIndex, answer });
  };

  const handleConfidenceChange = (confidence: number) => {
    setConfidenceLevels(prev => ({
      ...prev,
      [currentQuestionIndex]: confidence
    }));
    console.log('Confidence changed:', { questionIndex: currentQuestionIndex, confidence });
  };

  const handleNextQuestion = () => {
    if (!isLastQuestion) {
      setCurrentQuestionIndex(prev => prev + 1);
    }
  };

  const handlePrevQuestion = () => {
    if (!isFirstQuestion) {
      setCurrentQuestionIndex(prev => prev - 1);
    }
  };

  const handleConfigChange = (key: keyof AdminQuizConfig, value: any) => {
    setAdminConfig(prev => ({
      ...prev,
      [key]: value
    }));
  };

  return (
    <ExamProvider>
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
        {/* Header */}
        <div className="bg-white shadow-sm border-b">
          <div className="max-w-6xl mx-auto px-4 py-4">
            <div className="flex items-center justify-between">
              <div>
                <h1 className="text-2xl font-bold text-gray-900">Interactive Quiz Demo</h1>
                <p className="text-gray-600">Testing interactive quiz components and features</p>
              </div>
              <div className="flex items-center gap-4">
                <button
                  onClick={() => setShowSettings(!showSettings)}
                  className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
                >
                  <Settings className="w-4 h-4" />
                  Settings
                </button>
                <div className="text-sm text-gray-500">
                  Question {currentQuestionIndex + 1} of {demoQuestions.length}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="max-w-6xl mx-auto px-4 py-8">
          <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
            {/* Settings Panel */}
            {showSettings && (
              <div className="lg:col-span-1">
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <h3 className="text-lg font-semibold mb-4">Admin Configuration</h3>
                  <div className="space-y-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        Language
                      </label>
                      <select
                        value={adminConfig.language}
                        onChange={(e) => handleConfigChange('language', e.target.value)}
                        className="w-full px-3 py-2 border border-gray-300 rounded-md"
                      >
                        <option value="id">Indonesian</option>
                        <option value="en">English</option>
                      </select>
                    </div>

                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        id="allowHints"
                        checked={adminConfig.allowHints}
                        onChange={(e) => handleConfigChange('allowHints', e.target.checked)}
                        className="mr-2"
                      />
                      <label htmlFor="allowHints" className="text-sm text-gray-700">
                        Allow Hints
                      </label>
                    </div>

                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        id="showExplanations"
                        checked={adminConfig.showExplanations}
                        onChange={(e) => handleConfigChange('showExplanations', e.target.checked)}
                        className="mr-2"
                      />
                      <label htmlFor="showExplanations" className="text-sm text-gray-700">
                        Show Explanations
                      </label>
                    </div>

                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        id="confidenceRatingRequired"
                        checked={adminConfig.confidenceRatingRequired}
                        onChange={(e) => handleConfigChange('confidenceRatingRequired', e.target.checked)}
                        className="mr-2"
                      />
                      <label htmlFor="confidenceRatingRequired" className="text-sm text-gray-700">
                        Require Confidence Rating
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Main Quiz Area */}
            <div className={showSettings ? "lg:col-span-3" : "lg:col-span-4"}>
              <div className="bg-white rounded-lg shadow-sm">
                {/* Progress Bar */}
                <div className="p-6 border-b">
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-sm font-medium text-gray-700">Progress</span>
                    <span className="text-sm text-gray-500">
                      {Math.round(((currentQuestionIndex + 1) / demoQuestions.length) * 100)}%
                    </span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2">
                    <div
                      className="bg-blue-600 h-2 rounded-full transition-all duration-300"
                      style={{
                        width: `${((currentQuestionIndex + 1) / demoQuestions.length) * 100}%`
                      }}
                    />
                  </div>
                </div>

                {/* Question Content */}
                <div className="p-6">
                  <InteractiveQuizRenderer
                    question={currentQuestion}
                    questionIndex={currentQuestionIndex}
                    adminConfig={adminConfig}
                    onAnswerChange={handleAnswerChange}
                    onConfidenceChange={handleConfidenceChange}
                  />
                </div>

                {/* Navigation */}
                <div className="p-6 border-t bg-gray-50 flex items-center justify-between">
                  <button
                    onClick={handlePrevQuestion}
                    disabled={isFirstQuestion}
                    className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
                      isFirstQuestion
                        ? 'bg-gray-200 text-gray-400 cursor-not-allowed'
                        : 'bg-gray-300 text-gray-700 hover:bg-gray-400'
                    }`}
                  >
                    <ArrowLeft className="w-4 h-4" />
                    Previous
                  </button>

                  <div className="flex items-center gap-2">
                    {demoQuestions.map((_, index) => (
                      <button
                        key={index}
                        onClick={() => setCurrentQuestionIndex(index)}
                        className={`w-8 h-8 rounded-full text-sm font-medium transition-colors ${
                          index === currentQuestionIndex
                            ? 'bg-blue-600 text-white'
                            : answers[index] !== undefined
                            ? 'bg-green-100 text-green-700'
                            : 'bg-gray-200 text-gray-600 hover:bg-gray-300'
                        }`}
                      >
                        {index + 1}
                      </button>
                    ))}
                  </div>

                  <button
                    onClick={handleNextQuestion}
                    disabled={isLastQuestion}
                    className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
                      isLastQuestion
                        ? 'bg-gray-200 text-gray-400 cursor-not-allowed'
                        : 'bg-blue-600 text-white hover:bg-blue-700'
                    }`}
                  >
                    Next
                    <ArrowRight className="w-4 h-4" />
                  </button>
                </div>
              </div>

              {/* Debug Info */}
              <div className="mt-6 bg-gray-100 rounded-lg p-4">
                <h4 className="font-medium text-gray-900 mb-2">Debug Information</h4>
                <div className="text-sm text-gray-600 space-y-1">
                  <div>Current Question Type: <span className="font-mono">{currentQuestion.type}</span></div>
                  <div>Answers: <span className="font-mono">{JSON.stringify(answers)}</span></div>
                  <div>Confidence Levels: <span className="font-mono">{JSON.stringify(confidenceLevels)}</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ExamProvider>
  );
}