import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { Check, X } from "lucide-react";

const QuizGenerator = () => {
  // Submitted questions history
  const [submittedQuestions] = useState([
    {
      id: 1,
      question: "What is React's Virtual DOM?",
      options: [
        "A complete DOM copy",
        "A lightweight copy of the DOM",
        "A browser feature",
        "A routing system"
      ],
      selectedOption: 0, // User selected
      correctOption: 1,  // Correct answer
    },
    {
      id: 2,
      question: "What hook manages side effects?",
      options: [
        "useState",
        "useReducer",
        "useEffect",
        "useContext"
      ],
      selectedOption: 2,
      correctOption: 2,
    },
  ]);

  // Unsubmitted questions
  const [pendingQuestions, setPendingQuestions] = useState([
    {
      id: 1,
      question: "Which of these is a state management library?",
      options: ["Redux", "Axios", "Lodash", "Moment"],
      selectedOption: null
    },
    {
      id: 2,
      question: "What does CSS stand for?",
      options: [
        "Computer Style Sheets",
        "Cascading Style Sheets",
        "Creative Style Sheets",
        "Colorful Style Sheets"
      ],
      selectedOption: null
    },
  ]);

  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);

  const handleOptionSelect = (value) => {
    const updatedQuestions = [...pendingQuestions];
    updatedQuestions[currentQuestionIndex].selectedOption = parseInt(value);
    setPendingQuestions(updatedQuestions);
  };

  const generateQuiz = () => {
    // Reset selections and shuffle pending questions
    const shuffledQuestions = [...pendingQuestions].map(q => ({
      ...q,
      selectedOption: null
    }));
    setPendingQuestions(shuffledQuestions);
    setCurrentQuestionIndex(0);
  };

  const handleNext = () => {
    if (currentQuestionIndex < pendingQuestions.length - 1) {
      setCurrentQuestionIndex(prev => prev + 1);
    }
  };

  const handlePrevious = () => {
    if (currentQuestionIndex > 0) {
      setCurrentQuestionIndex(prev => prev - 1);
    }
  };

  return (
    <div className="py-6 container mx- mt-8">
      {/* Submitted Questions History */}
      <div className='grid grid-cols-3 space-x-6'>
        <Card className="w-full col-span-2">
          <CardHeader>
            <CardTitle>Quiz History</CardTitle>
          </CardHeader>
          <CardContent>
            <ScrollArea className="h-[400px] pr-4">
              {submittedQuestions.map((q, index) => (
                <div key={q.id} className="mb-4">
                  <div className="p-4 border rounded-lg border-gray-200">
                    <h3 className="font-medium mb-2">{q.question}</h3>
                    <div className="text-sm space-y-2">
                      {q.options.map((option, i) => (
                        <div 
                          key={i} 
                          className={`p-2 rounded flex justify-between items-center ${
                            i === q.correctOption && i === q.selectedOption
                              ? 'bg-green-100'
                              : i === q.correctOption
                              ? 'bg-green-50'
                              : i === q.selectedOption
                              ? 'bg-red-50'
                              : 'bg-gray-50'
                          }`}
                        >
                          <span>{option}</span>
                          {i === q.correctOption && (
                            <Check className="w-4 h-4 text-green-600" />
                          )}
                          {i === q.selectedOption && i !== q.correctOption && (
                            <X className="w-4 h-4 text-red-600" />
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                  {index < submittedQuestions.length - 1 && <Separator className="my-4" />}
                </div>
              ))}
            </ScrollArea>
          </CardContent>
        </Card>

        {/* Pending Questions Interface */}
        <div className="w-full space-y-6">
          <Button 
            onClick={generateQuiz}
            className="w-full bg-purple-700"
          >
            Generate Quiz
          </Button>

          {pendingQuestions.length > 0 ? (
            <Card>
              <CardHeader>
                <CardTitle>
                  Question {currentQuestionIndex + 1} of {pendingQuestions.length}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-6">
                  <h3 className="text-lg font-medium">
                    {pendingQuestions[currentQuestionIndex].question}
                  </h3>

                  <RadioGroup
                    value={pendingQuestions[currentQuestionIndex].selectedOption?.toString()}
                    onValueChange={handleOptionSelect}
                  >
                    {pendingQuestions[currentQuestionIndex].options.map((option, i) => (
                      <div key={i} className="flex items-center space-x-2">
                        <RadioGroupItem value={i.toString()} id={`option-${i}`} />
                        <Label htmlFor={`option-${i}`}>{option}</Label>
                      </div>
                    ))}
                  </RadioGroup>

                  <div className="flex justify-end mt-6">
                    <Button 
                      onClick={handleNext}
                      disabled={currentQuestionIndex === pendingQuestions.length - 1}
                      className='bg-purple-700'
                    >
                      Submit
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ) : (
            <Card>
              <CardContent className="p-6 text-center text-gray-500">
                No pending questions available
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  );
};

export default QuizGenerator;