import React, { useState } from 'react';

import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

import { Button } from '@/components/ui/button';

function YerkesDodsonAssessment() {
const [started, setStarted] = useState(false);
const [demographics, setDemographics] = useState(null);
const [currentQuestion, setCurrentQuestion] = useState(0);
const [answers, setAnswers] = useState([]);
const [showResults, setShowResults] = useState(false);

const resetQuiz = () => {

setCurrentQuestion(0);
setAnswers([]);
setShowResults(false);
setStarted(false);
setDemographics(null);
};

const handleAnswer = (optionIndex) => {

setAnswers([...answers, optionIndex]);
if (currentQuestion < questions.length - 1) {
setCurrentQuestion(currentQuestion + 1);
} else {
setShowResults(true);
}
};

function Introduction() {
return (
 <div className="space-y-4">
<p className="text-lg">This quick assessment helps you understand your
current level of "eustress" - like finding the right temperature for optimal comfort,
we'll explore if your stress levels are helping or hindering your startup
performance.</p>
<Button onClick={() => setStarted(true)} className="w-full mt-4">
Let's Begin
</Button>
</div>
);
}

function DemographicsForm() {
const [age, setAge] = useState('');
const [taskComplexity, setTaskComplexity] = useState('');

const handleSubmit = () => {

setDemographics({ age, taskComplexity });
setCurrentQuestion(0);
};

return (
<div className="space-y-6">
<div className="space-y-2">
<p className="text-lg font-medium">First, tell us a bit about yourself:</p>
<div className="space-y-4">
<div>
<p className="mb-2">Your age group:</p>
{["18-30", "31-45", "46-60", "60+"].map((ageGroup) => (
<Button
key={ageGroup}
 onClick={() => setAge(ageGroup)}
className={`w-full justify-start text-left mb-2 ${age === ageGroup ?
'bg-blue-100' : ''}`}
variant="outline"
>
{ageGroup}
</Button>
))}
</div>
<div>
<p className="mb-2">The complexity of tasks you're currently working
on:</p>
{[
{label: "Simple, routine tasks", value: "simple"},
{label: "Moderately complex tasks", value: "moderate"},
{label: "Complex, challenging tasks", value: "complex"},
{label: "Highly complex or novel tasks", value: "very-complex"}
].map((option) => (
<Button
key={option.value}
onClick={() => setTaskComplexity(option.value)}
className={`w-full justify-start text-left mb-2 ${taskComplexity ===
option.value ? 'bg-blue-100' : ''}`}
variant="outline"
>
{option.label}
</Button>
))}
</div>
</div>
</div>
 <Button
onClick={handleSubmit}
className="w-full"
disabled={!age || !taskComplexity}
>
Continue to Assessment
</Button>
</div>
);
}

function Assessment() {
return (
<div className="space-y-4">
<h2 className="text-xl font-semibold mb-4">
Question {currentQuestion + 1} of {questions.length}
</h2>
<p className="text-lg mb-4">{questions[currentQuestion].text}</p>
<div className="space-y-2">
{questions[currentQuestion].options.map((option, index) => (
<Button
key={index}
onClick={() => handleAnswer(index)}
className="w-full justify-start text-left mb-2"
variant="outline"
>
{option}
</Button>
))}
</div>
 {questions[currentQuestion].encouragement && (
<div className="mt-4 p-4 bg-blue-50 rounded-lg">
<p className="text-sm text-blue-
800">{questions[currentQuestion].encouragement}</p>
</div>
)}
</div>
);
}

function ResultsDisplay({ result }) {

const zoneOrder = ["Under-activated Zone", "Approaching Flow Zone", "Flow
Zone", "Anxiety Zone", "Over-activated Zone"];

return (
<div className="space-y-6">
<div className="relative py-6 bg-gradient-to-b from-blue-50 to-white
rounded-lg">
<div className="flex justify-between items-center px-4">
{zoneOrder.map((zoneName) => (
<div
key={zoneName}
className="relative"
style={{width: '19%'}}
>
<div className={`
h-20 rounded-lg transition-all duration-300
${zoneName === result.zone ?
'bg-gradient-to-b from-blue-500 to-blue-600 transform -translate-y-2
shadow-lg' :
'bg-gray-100'
 }
${zoneName === 'Flow Zone' ? 'border-2 border-transparent
hover:border-blue-300' : ''}
`}>
<div className="absolute inset-x-0 bottom-full mb-2">
{zoneName === result.zone && (
<div className="flex justify-center">
<div className="animate-bounce bg-blue-500 text-white px-3 py-1
rounded-full text-xs font-medium shadow-sm">
You are here
</div>
</div>
)}
</div>
<div className={`
text-center p-2 text-xs font-medium h-full flex flex-col justify-center
${zoneName === result.zone ? 'text-white' : 'text-gray-600'}
`}>
{zoneName}
{zoneName === 'Flow Zone' && (
<div className="text-xs mt-1 opacity-75">Optimal</div>
)}
</div>
</div>
{zoneName === result.zone && (
<div className="h-1 bg-blue-500 rounded-full mt-2 animate-pulse"/>
)}
</div>
))}
</div>
 </div>

<div className="bg-white rounded-xl shadow-sm border p-6 space-y-4">

{getZoneDescription(result)}
</div>

<div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-6

text-center space-y-3">
<p className="text-gray-800 font-medium">
Want to better develop and maintain your positive stress?
</p>
<Button
onClick={() => window.open('YOUR_BOOKING_LINK', '_blank')}
className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2"
>
Book a Free Discovery Call
</Button>
</div>

<div className="text-center">
<p className="text-sm text-gray-500">
While these insights can help with daily performance, remember that a
mental health professional
can provide personalized guidance if you're facing persistent challenges.
</p>
</div>
</div>
);
}
 function Results() {
const result = calculateResult();
return (
<div className="space-y-4">
<h2 className="text-xl font-semibold">Your Personal Insights</h2>
<ResultsDisplay result={result} />
</div>
);
}

return (
<Card className="w-full max-w-2xl mx-auto">
<CardHeader>
<CardTitle>Finding Your Performance Sweet Spot</CardTitle>
</CardHeader>
<CardContent>
{!started ? <Introduction /> :
!demographics ? <DemographicsForm /> :
!showResults ? <Assessment /> :
<Results />}
</CardContent>
</Card>
);
}

export default YerkesDodsonAssessment;