import { ArrowLeft, ArrowRight } from 'lucide-react';
import type { PersonalityQuizWorkflow } from '@/components/personality-quiz/types';
import { PersonalityQuestionOption } from '@/components/personality-quiz/PersonalityQuestionOption';
import { PersonalityQuizProgressHeader } from '@/components/personality-quiz/PersonalityQuizProgressHeader';

interface PersonalityQuizQuestionViewProps {
  readonly workflow: PersonalityQuizWorkflow;
}

export function PersonalityQuizQuestionView({ workflow }: PersonalityQuizQuestionViewProps) {
  const question = workflow.currentQuestion;

  return (
    <div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 overflow-hidden">
      <PersonalityQuizProgressHeader workflow={workflow} />

      <div className="p-6">
        <h3 className="text-lg font-semibold text-white mb-5 leading-relaxed">{question.question}</h3>

        <div className="space-y-3">
          <PersonalityQuestionOption
            text={question.optionA.text}
            value={question.optionA.value}
            selected={workflow.selectedAnswer === question.optionA.value}
            onSelect={workflow.handleSelectAnswer}
          />
          <PersonalityQuestionOption
            text={question.optionB.text}
            value={question.optionB.value}
            selected={workflow.selectedAnswer === question.optionB.value}
            onSelect={workflow.handleSelectAnswer}
          />
        </div>

        <div className="flex items-center justify-between mt-6 pt-4 border-t border-slate-700/40">
          <button
            type="button"
            onClick={workflow.handleBack}
            disabled={workflow.currentQuestionIndex === 0}
            className={`flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium transition-all ${
              workflow.currentQuestionIndex === 0
                ? 'text-slate-600 cursor-not-allowed'
                : 'text-slate-400 hover:text-white hover:bg-slate-700/50'
            }`}
          >
            <ArrowLeft size={14} /> Back
          </button>

          <button
            type="button"
            onClick={workflow.handleNext}
            disabled={!workflow.selectedAnswer}
            className={`flex items-center gap-2 px-6 py-2.5 rounded-xl text-sm font-semibold transition-all ${
              workflow.selectedAnswer
                ? 'bg-gradient-to-r from-violet-500 to-indigo-600 text-white hover:shadow-lg hover:shadow-violet-500/25'
                : 'bg-slate-700/50 text-slate-500 cursor-not-allowed'
            }`}
          >
            {workflow.currentQuestionIndex === workflow.totalQuestions - 1 ? 'See My Results' : 'Continue'} <ArrowRight size={14} />
          </button>
        </div>
      </div>
    </div>
  );
}
