| import { useState } from 'react'; |
| import { Button } from '@/components/ui/button'; |
| import { Card } from '@/components/ui/card'; |
| import { Progress } from '@/components/ui/progress'; |
| import { CheckCircle, XCircle, AlertCircle, ChevronRight, BookOpen } from 'lucide-react'; |
| import { Scenario, DecisionPoint, ScenarioOption } from '@/data/scenariosData'; |
|
|
| interface ScenarioComponentProps { |
| scenario: Scenario; |
| onComplete: (score: number) => void; |
| } |
|
|
| export function ScenarioComponent({ scenario, onComplete }: ScenarioComponentProps) { |
| const [currentDecisionIndex, setCurrentDecisionIndex] = useState(0); |
| const [selectedOption, setSelectedOption] = useState<string | null>(null); |
| const [answered, setAnswered] = useState(false); |
| const [score, setScore] = useState(0); |
| const [decisions, setDecisions] = useState<Record<string, string>>({}); |
|
|
| const currentDecision = scenario.decisionPoints[currentDecisionIndex]; |
| const progress = ((currentDecisionIndex + 1) / scenario.decisionPoints.length) * 100; |
|
|
| const handleSelectOption = (optionId: string) => { |
| if (!answered) { |
| setSelectedOption(optionId); |
| } |
| }; |
|
|
| const handleSubmitDecision = () => { |
| if (!selectedOption) return; |
|
|
| const option = currentDecision.options.find(o => o.id === selectedOption); |
| if (option?.isCorrect) { |
| setScore(score + 1); |
| } |
|
|
| setDecisions({ |
| ...decisions, |
| [currentDecision.id]: selectedOption |
| }); |
| setAnswered(true); |
| }; |
|
|
| const handleNext = () => { |
| if (currentDecisionIndex < scenario.decisionPoints.length - 1) { |
| setCurrentDecisionIndex(currentDecisionIndex + 1); |
| setSelectedOption(null); |
| setAnswered(false); |
| } else { |
| |
| const lastDecisionCorrect = selectedOptionData?.isCorrect ? 1 : 0; |
| const finalScore = Math.round(((score + lastDecisionCorrect) / scenario.decisionPoints.length) * 100); |
| onComplete(finalScore); |
| } |
| }; |
|
|
| const selectedOptionData = currentDecision.options.find(o => o.id === selectedOption); |
| const correctOption = currentDecision.options.find(o => o.isCorrect); |
|
|
| return ( |
| <div className="space-y-6"> |
| {/* Progress */} |
| <div className="space-y-2"> |
| <div className="flex justify-between items-center"> |
| <span className="text-sm font-medium text-slate-600"> |
| Decision {currentDecisionIndex + 1} of {scenario.decisionPoints.length} |
| </span> |
| <span className="text-sm font-medium text-blue-600"> |
| {Math.round(progress)}% |
| </span> |
| </div> |
| <Progress value={progress} className="h-2" /> |
| </div> |
| |
| {/* Scenario Context */} |
| <Card className="p-6 bg-gradient-to-br from-blue-50 to-teal-50 border-blue-200 space-y-3"> |
| <div className="flex items-start gap-3"> |
| <BookOpen className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" /> |
| <div> |
| <h3 className="font-semibold text-slate-900 mb-1">{scenario.title}</h3> |
| <p className="text-sm text-slate-700">{currentDecision.context}</p> |
| </div> |
| </div> |
| </Card> |
| |
| {/* Decision Point */} |
| <Card className="p-8 space-y-6 border-slate-200"> |
| {/* Decision Header */} |
| <div className="space-y-3"> |
| <div className="flex flex-wrap items-center gap-2"> |
| {currentDecision.relatedPillars.map(pillar => ( |
| <span key={pillar} className="px-2 py-1 bg-purple-100 text-purple-700 rounded text-xs font-semibold"> |
| {pillar} |
| </span> |
| ))} |
| </div> |
| <h2 className="text-2xl font-bold text-slate-900"> |
| {currentDecision.question} |
| </h2> |
| </div> |
| |
| {/* Options */} |
| <div className="space-y-3"> |
| {currentDecision.options.map((option) => { |
| const isSelected = selectedOption === option.id; |
| const isCorrect = option.isCorrect; |
| const showResult = answered && (isSelected || isCorrect); |
| |
| return ( |
| <button |
| key={option.id} |
| onClick={() => handleSelectOption(option.id)} |
| disabled={answered} |
| className={`w-full text-left p-4 rounded-lg border-2 transition-all ${ |
| isSelected && !answered |
| ? 'border-blue-500 bg-blue-50' |
| : answered && isCorrect |
| ? 'border-green-500 bg-green-50' |
| : answered && isSelected && !isCorrect |
| ? 'border-red-500 bg-red-50' |
| : 'border-slate-200 hover:border-slate-300 hover:bg-slate-50' |
| } ${answered ? 'cursor-default' : 'cursor-pointer'}`} |
| > |
| <div className="flex items-start gap-3"> |
| <div className={`flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center mt-0.5 ${ |
| isSelected && !answered |
| ? 'border-blue-500 bg-blue-500' |
| : answered && isCorrect |
| ? 'border-green-500 bg-green-500' |
| : answered && isSelected && !isCorrect |
| ? 'border-red-500 bg-red-500' |
| : 'border-slate-300' |
| }`}> |
| {showResult && ( |
| isCorrect ? ( |
| <CheckCircle className="w-5 h-5 text-white" /> |
| ) : ( |
| <XCircle className="w-5 h-5 text-white" /> |
| ) |
| )} |
| </div> |
| <div className="flex-1"> |
| <p className={`font-medium ${ |
| isSelected && !answered |
| ? 'text-blue-900' |
| : answered && isCorrect |
| ? 'text-green-900' |
| : answered && isSelected && !isCorrect |
| ? 'text-red-900' |
| : 'text-slate-900' |
| }`}> |
| {option.text} |
| </p> |
| {option.riskLevel && answered && ( |
| <div className="flex items-center gap-2 mt-2"> |
| <AlertCircle className="w-4 h-4 text-amber-600" /> |
| <span className={`text-xs font-semibold capitalize ${ |
| option.riskLevel === 'critical' ? 'text-red-700' : |
| option.riskLevel === 'high' ? 'text-orange-700' : |
| option.riskLevel === 'medium' ? 'text-amber-700' : |
| 'text-green-700' |
| }`}> |
| Risk: {option.riskLevel} |
| </span> |
| </div> |
| )} |
| </div> |
| </div> |
| </button> |
| ); |
| })} |
| </div> |
| |
| {/* Explanation */} |
| {answered && selectedOptionData && ( |
| <div className={`p-4 rounded-lg ${ |
| selectedOptionData.isCorrect |
| ? 'bg-green-50 border border-green-200' |
| : 'bg-amber-50 border border-amber-200' |
| }`}> |
| <p className={`text-sm font-semibold mb-2 ${ |
| selectedOptionData.isCorrect |
| ? 'text-green-900' |
| : 'text-amber-900' |
| }`}> |
| {selectedOptionData.isCorrect ? '✓ Optimal Decision' : 'Why This Isn\'t Optimal:'} |
| </p> |
| <p className={`text-sm mb-3 ${ |
| selectedOptionData.isCorrect |
| ? 'text-green-800' |
| : 'text-amber-800' |
| }`}> |
| {selectedOptionData.explanation} |
| </p> |
| {!selectedOptionData.isCorrect && correctOption && ( |
| <div className="mt-3 pt-3 border-t border-amber-200"> |
| <p className="text-sm font-semibold text-green-900 mb-1">Better Approach:</p> |
| <p className="text-sm text-green-800">{correctOption.explanation}</p> |
| </div> |
| )} |
| </div> |
| )} |
| |
| {/* Action Buttons */} |
| <div className="flex gap-3 pt-4"> |
| {!answered ? ( |
| <Button |
| onClick={handleSubmitDecision} |
| disabled={selectedOption === null} |
| className="flex-1" |
| > |
| Submit Decision |
| </Button> |
| ) : ( |
| <Button |
| onClick={handleNext} |
| className="flex-1 gap-2" |
| > |
| {currentDecisionIndex < scenario.decisionPoints.length - 1 ? 'Next Decision' : 'Complete Scenario'} |
| <ChevronRight size={18} /> |
| </Button> |
| )} |
| </div> |
| </Card> |
| |
| {/* Score Summary */} |
| {answered && ( |
| <div className="bg-gradient-to-r from-blue-50 to-teal-50 rounded-lg p-4 border border-blue-200"> |
| <p className="text-sm text-slate-600"> |
| Decisions Made: <span className="font-bold text-blue-600">{currentDecisionIndex + 1} / {scenario.decisionPoints.length}</span> |
| </p> |
| </div> |
| )} |
| </div> |
| ); |
| } |
|
|
