import { ArrowRight, CheckCircle, XCircle } from 'lucide-react';

import { calculateSafetyQuizProgress } from '@/business/safety-quiz/selectors';
import { Button } from '@/components/ui/button';
import type { QuizQuestion } from '@/shared/types/app';

interface SafetyQuizQuestionPanelProps {
  readonly question: QuizQuestion;
  readonly questionIndex: number;
  readonly questionCount: number;
  readonly score: number;
  readonly selectedAnswer: number | null;
  readonly showExplanation: boolean;
  readonly onSelectAnswer: (answerIndex: number) => void;
  readonly onNextQuestion: () => void;
}

export function SafetyQuizQuestionPanel({
  question,
  questionIndex,
  questionCount,
  score,
  selectedAnswer,
  showExplanation,
  onSelectAnswer,
  onNextQuestion,
}: SafetyQuizQuestionPanelProps) {
  const progress = calculateSafetyQuizProgress(questionIndex, questionCount);

  return (
    <div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-6">
      <div className="flex items-center justify-between mb-4">
        <span className="text-sm font-medium text-slate-400">
          Question {questionIndex + 1} of {questionCount}
        </span>
        <span className="text-sm font-medium text-blue-400">Score: {score}</span>
      </div>
      <div className="h-2 bg-slate-700/50 rounded-full mb-6">
        <div
          className="h-full bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full transition-all duration-500"
          style={{ width: `${progress}%` }}
        />
      </div>
      <h3 className="text-lg font-semibold text-white mb-4">{question.question}</h3>
      <div className="space-y-3 mb-4">
        {question.options.map((option, optionIndex) => (
          <SafetyQuizAnswerOption
            key={option}
            option={option}
            optionIndex={optionIndex}
            correctIndex={question.correctIndex}
            selectedAnswer={selectedAnswer}
            showExplanation={showExplanation}
            onSelectAnswer={onSelectAnswer}
          />
        ))}
      </div>
      {showExplanation && (
        <div className="bg-blue-500/10 rounded-xl p-4 mb-4 border border-blue-500/20">
          <p className="text-sm text-blue-400 font-medium">Explanation:</p>
          <p className="text-sm text-slate-300 mt-1">{question.explanation}</p>
        </div>
      )}
      {showExplanation && (
        <Button
          type="button"
          onClick={onNextQuestion}
          leadingIcon={<ArrowRight size={14} />}
          className="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-xl font-medium text-sm hover:shadow-lg hover:shadow-blue-500/25 transition-all"
        >
          {questionIndex < questionCount - 1 ? 'Next Question' : 'See Results'}
        </Button>
      )}
    </div>
  );
}

interface SafetyQuizAnswerOptionProps {
  readonly option: string;
  readonly optionIndex: number;
  readonly correctIndex: number;
  readonly selectedAnswer: number | null;
  readonly showExplanation: boolean;
  readonly onSelectAnswer: (answerIndex: number) => void;
}

function SafetyQuizAnswerOption({
  option,
  optionIndex,
  correctIndex,
  selectedAnswer,
  showExplanation,
  onSelectAnswer,
}: SafetyQuizAnswerOptionProps) {
  const optionClass = getAnswerOptionClass({
    optionIndex,
    correctIndex,
    selectedAnswer,
    showExplanation,
  });

  return (
    <Button
      type="button"
      onClick={() => onSelectAnswer(optionIndex)}
      className={`w-full h-auto text-left p-4 rounded-xl border-2 transition-all justify-start ${optionClass}`}
    >
      <div className="flex items-center gap-3 w-full">
        <span className="w-7 h-7 rounded-full bg-slate-600/50 border-2 border-slate-500/50 flex items-center justify-center text-xs font-bold text-slate-300 flex-shrink-0">
          {String.fromCharCode(65 + optionIndex)}
        </span>
        <span className="text-sm text-slate-200">{option}</span>
        {showExplanation && optionIndex === correctIndex && (
          <CheckCircle size={18} className="text-emerald-400 ml-auto flex-shrink-0" />
        )}
        {showExplanation && optionIndex === selectedAnswer && optionIndex !== correctIndex && (
          <XCircle size={18} className="text-red-400 ml-auto flex-shrink-0" />
        )}
      </div>
    </Button>
  );
}

interface AnswerOptionClassInput {
  readonly optionIndex: number;
  readonly correctIndex: number;
  readonly selectedAnswer: number | null;
  readonly showExplanation: boolean;
}

function getAnswerOptionClass({
  optionIndex,
  correctIndex,
  selectedAnswer,
  showExplanation,
}: AnswerOptionClassInput): string {
  if (!showExplanation) {
    return 'bg-slate-700/30 border-slate-600/40 hover:bg-slate-700/50 hover:border-violet-500/30 cursor-pointer';
  }

  if (optionIndex === correctIndex) {
    return 'bg-emerald-500/15 border-emerald-500/30 ring-2 ring-emerald-500/20';
  }

  if (optionIndex === selectedAnswer) {
    return 'bg-red-500/15 border-red-500/30 ring-2 ring-red-500/20';
  }

  return 'bg-slate-700/20 border-slate-700/30 opacity-50';
}
