'use client';

import React from 'react';
import { useExam } from '@/contexts/ExamContext';
import { CheckCircle, Circle, Flag, Bookmark } from 'lucide-react';

interface ProgressIndicatorProps {
  className?: string;
  showDetails?: boolean;
}

export default function ProgressIndicator({ 
  className = '', 
  showDetails = true 
}: ProgressIndicatorProps) {
  const { 
    state, 
    answeredCount, 
    flaggedCount, 
    bookmarkedCount, 
    progressPercentage 
  } = useExam();

  if (!state.examData) {
    return null;
  }

  const totalQuestions = state.examData.questions.length;
  const unansweredCount = totalQuestions - answeredCount;

  return (
    <div className={`bg-white rounded-lg shadow-sm border p-4 ${className}`}>
      {/* Progress Bar */}
      <div className="mb-4">
        <div className="flex justify-between items-center mb-2">
          <h3 className="text-sm font-medium text-gray-700">Progress Ujian</h3>
          <span className="text-sm text-gray-500">
            {answeredCount} dari {totalQuestions} soal
          </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 ease-out"
            style={{ width: `${progressPercentage}%` }}
          />
        </div>
        
        <div className="text-right mt-1">
          <span className="text-xs text-gray-500">
            {Math.round(progressPercentage)}% selesai
          </span>
        </div>
      </div>

      {/* Detailed Statistics */}
      {showDetails && (
        <div className="grid grid-cols-2 gap-4">
          <div className="flex items-center space-x-2">
            <CheckCircle className="w-4 h-4 text-green-500" />
            <div>
              <div className="text-sm font-medium text-gray-900">
                {answeredCount}
              </div>
              <div className="text-xs text-gray-500">Terjawab</div>
            </div>
          </div>

          <div className="flex items-center space-x-2">
            <Circle className="w-4 h-4 text-gray-400" />
            <div>
              <div className="text-sm font-medium text-gray-900">
                {unansweredCount}
              </div>
              <div className="text-xs text-gray-500">Belum Dijawab</div>
            </div>
          </div>

          <div className="flex items-center space-x-2">
            <Flag className="w-4 h-4 text-orange-500" />
            <div>
              <div className="text-sm font-medium text-gray-900">
                {flaggedCount}
              </div>
              <div className="text-xs text-gray-500">Ditandai</div>
            </div>
          </div>

          <div className="flex items-center space-x-2">
            <Bookmark className="w-4 h-4 text-purple-500" />
            <div>
              <div className="text-sm font-medium text-gray-900">
                {bookmarkedCount}
              </div>
              <div className="text-xs text-gray-500">Bookmark</div>
            </div>
          </div>
        </div>
      )}

      {/* Progress Status Message */}
      <div className="mt-4 p-3 rounded-md bg-gray-50">
        {progressPercentage === 100 ? (
          <div className="flex items-center space-x-2 text-green-700">
            <CheckCircle className="w-4 h-4" />
            <span className="text-sm font-medium">
              Semua soal telah dijawab! Anda dapat mensubmit ujian.
            </span>
          </div>
        ) : progressPercentage >= 50 ? (
          <div className="flex items-center space-x-2 text-blue-700">
            <Circle className="w-4 h-4" />
            <span className="text-sm">
              Anda sudah menjawab lebih dari setengah soal. Terus semangat!
            </span>
          </div>
        ) : (
          <div className="flex items-center space-x-2 text-orange-700">
            <Circle className="w-4 h-4" />
            <span className="text-sm">
              Masih ada {unansweredCount} soal yang belum dijawab.
            </span>
          </div>
        )}
      </div>
    </div>
  );
}