'use client';

import React from 'react';
import { cn } from '@/utils/cn';

interface QuestionNavigatorProps {
  totalQuestions: number;
  currentQuestion: number;
  answeredQuestions: Set<number>;
  flaggedQuestions: Set<number>;
  onQuestionSelect: (questionNumber: number) => void;
}

const QuestionNavigator: React.FC<QuestionNavigatorProps> = ({
  totalQuestions,
  currentQuestion,
  answeredQuestions,
  flaggedQuestions,
  onQuestionSelect,
}) => {
  const getQuestionStatus = (questionNumber: number) => {
    if (questionNumber === currentQuestion) {
      return 'current';
    }
    if (answeredQuestions.has(questionNumber)) {
      return flaggedQuestions.has(questionNumber) ? 'answered-flagged' : 'answered';
    }
    if (flaggedQuestions.has(questionNumber)) {
      return 'flagged';
    }
    return 'unanswered';
  };

  const getQuestionButtonClass = (status: string) => {
    const baseClass = 'w-10 h-10 rounded-lg border-2 flex items-center justify-center text-sm font-medium cursor-pointer transition-all duration-200 hover:scale-105';
    
    switch (status) {
      case 'current':
        return cn(baseClass, 'bg-blue-500 border-blue-500 text-white shadow-lg');
      case 'answered':
        return cn(baseClass, 'bg-green-500 border-green-500 text-white');
      case 'answered-flagged':
        return cn(baseClass, 'bg-orange-500 border-orange-500 text-white');
      case 'flagged':
        return cn(baseClass, 'bg-yellow-400 border-yellow-400 text-gray-800');
      case 'unanswered':
      default:
        return cn(baseClass, 'bg-gray-100 border-gray-300 text-gray-600 hover:bg-gray-200');
    }
  };

  const questions = Array.from({ length: totalQuestions }, (_, i) => i + 1);

  return (
    <div className="bg-white rounded-lg p-6 shadow-sm border">
      <h3 className="text-lg font-semibold text-gray-800 mb-4">Navigasi Soal</h3>
      
      {/* Question Grid */}
      <div className="grid grid-cols-5 gap-3 mb-6">
        {questions.map((questionNumber) => {
          const status = getQuestionStatus(questionNumber);
          return (
            <button
              key={questionNumber}
              onClick={() => onQuestionSelect(questionNumber)}
              className={getQuestionButtonClass(status)}
              title={`Soal ${questionNumber} - ${status}`}
            >
              {questionNumber}
            </button>
          );
        })}
      </div>

      {/* Legend */}
      <div className="space-y-3">
        <h4 className="text-sm font-medium text-gray-700 mb-2">Keterangan:</h4>
        <div className="grid grid-cols-2 gap-2 text-xs">
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 rounded bg-blue-500"></div>
            <span className="text-gray-600">Soal Aktif</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 rounded bg-green-500"></div>
            <span className="text-gray-600">Terjawab</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 rounded bg-yellow-400"></div>
            <span className="text-gray-600">Ditandai</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 rounded bg-orange-500"></div>
            <span className="text-gray-600">Terjawab & Ditandai</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 rounded bg-gray-100 border border-gray-300"></div>
            <span className="text-gray-600">Belum Dijawab</span>
          </div>
        </div>
      </div>

      {/* Statistics */}
      <div className="mt-6 pt-4 border-t border-gray-200">
        <div className="grid grid-cols-2 gap-4 text-sm">
          <div className="text-center">
            <div className="text-2xl font-bold text-green-600">{answeredQuestions.size}</div>
            <div className="text-gray-500">Terjawab</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold text-gray-400">{totalQuestions - answeredQuestions.size}</div>
            <div className="text-gray-500">Belum Dijawab</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default QuestionNavigator;