'use client';

import { useState } from 'react';
import type { Meta, StoryObj } from "@storybook/react";
import { getPublicClient } from "../api";

const client = getPublicClient('f5d86791-d513-48de-8fd2-b6dbdd4abe9b');

const QuizGenerator = () => {
  const [topic, setTopic] = useState('');
  const [quizQuestions, setQuizQuestions] = useState([]) as any;
  const [userAnswers, setUserAnswers] = useState({}) as any;
  const [quizSubmitted, setQuizSubmitted] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [score, setScore] = useState(0);

  const handleTopicChange = (e: any) => {
    setTopic(e.target.value);
  };

  const generateQuiz = async () => {
    setIsLoading(true);
    try {
      const response = await client?.getCompletion({
        model: 'gpt-3.5-turbo',
        messages: [{
          role: 'system',
          content: `Generate a 5-question multiple-choice quiz on the topic of ${topic}. Each question should be structured as follows: a question followed by four options marked A, B, C, D and the correct answer marked as 'Correct answer: X'.`
        }],
      });

      if (response && response.choices && response.choices.length > 0) {
        const rawQuestions = response.choices[0].message.content;
        console.log('Raw questions:', rawQuestions);
        // Parse the structured text into question objects
        const questions = parseQuestions(rawQuestions);
        console.log('Parsed questions:', questions);
        setQuizQuestions(questions);
      }
    } catch (error) {
      console.error("Error generating quiz:", error);
    }
    setIsLoading(false);
  };

  const parseQuestions = (text: string) => {
    const questionBlocks = text.split('\n\n').map(block => block.trim());
    return questionBlocks.map(block => {
      const lines = block.split('\n');
      const question = lines[0];
      const options = lines.slice(1, 5);
      const correctAnswer = lines[5].replace('Correct answer: ', '');
      return {
        question,
        options,
        correctAnswer
      };
    });
  };

  const handleAnswerChange = (questionIndex: any, answer: any) => {
    setUserAnswers((prev: any) => ({ ...prev, [questionIndex]: answer }));
  };

  const handleSubmitQuiz = () => {
    let correctCount = 0;
    console.log('User answers:', userAnswers);
    quizQuestions.forEach((question: any, index: any) => {
      if (question.correctAnswer === userAnswers[index]) {
        correctCount++;
      }
    });
    setScore(correctCount);
    setQuizSubmitted(true);
  };

  const restartQuiz = () => {
    setTopic('');
    setQuizQuestions([]);
    setUserAnswers({});
    setQuizSubmitted(false);
    setScore(0);
  };

  return (
    <div className="p-4 max-w-lg mx-auto bg-white rounded-xl shadow-lg flex flex-col border">
      {!quizSubmitted ? (
        <>
          <input
            type="text"
            value={topic}
            onChange={handleTopicChange}
            className="mb-4 p-2 border rounded focus:outline-none focus:ring focus:border-blue-300"
            placeholder="Enter a topic..."
          />
          { quizQuestions.length === 0 &&
            <button onClick={generateQuiz} className="mb-4 px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-900 focus:outline-none">
              {
                isLoading ? 'Generating...' : 'Generate Quiz'
              }
            </button>
          }
          {quizQuestions.map((question: any, index: any) => (
            <div key={index} className="mb-4">
              <div>{question.question}</div>
              {question.options.map((option: any, idx: any) => (
                <label key={idx} className="block">
                  <input
                    type="radio"
                    name={`question-${index}`}
                    value={option[0]}
                    checked={userAnswers[index] === option[0]}
                    onChange={() => handleAnswerChange(index, option[0])}
                    className="mr-2"
                  />
                  {option}
                </label>
              ))}
            </div>
          ))}
          { quizQuestions.length > 0 &&
            <button onClick={handleSubmitQuiz} className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 focus:outline-none">
              Submit Quiz
            </button>
          }
        </>
      ) : (
        <>
          <div className="mb-4">Your Score: {score} / {quizQuestions.length}</div>
          <button onClick={restartQuiz} className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 focus:outline-none">
            Restart Quiz
          </button>
        </>
      )}
    </div>
  );
};

function TextCompleterStory() {
  // client?.getCompletion({
  //   model: "gpt-3.5-turbo",
  //   messages: [
  //     {
  //       role: "system",
  //       content: "You are a friendly bot.",
  //     },
  //   ],
  // }).then((response) => {
  //   console.log(response);
  // }).catch((error) => {
  //   console.error(error);
  // });
  // React.useEffect(() => {
  //   const getCompletion = async () => {
  //     client?.getCompletion({
  //       model: "gpt-3.5-turbo",
  //       messages: [
  //         {
  //           role: "system",
  //           content: "You are a friendly bot.",
  //         },
  //       ],
  //     }).then((response) => {
  //       console.log(response);
  //     });
  //   };
  //   getCompletion();
  // }, [botId]);
  return (
    <div>
      <h1
        className="text-2xl font-bold"
      >Quiz Generator</h1>
      <QuizGenerator />
    </div>
  );
}

//👇 This default export determines where your story goes in the story list
const meta: Meta<typeof TextCompleterStory> = {
  component: TextCompleterStory,
};

export default meta;

export const DefaultStory: StoryObj<typeof TextCompleterStory> = {
  // harded code values for now 😬
  args: {},
};