import React, { useState } from "react";
import { type QuizData } from "../../types/lesson";
import { CheckCircle2, XCircle, ChevronRight } from "lucide-react";

interface QuizProps {
  data: QuizData;
  onComplete?: () => void;
}

const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleOptionClick = (id: string) => {
    if (isSubmitted && selectedId === id) return; // Allow changing selection if not correct? No, lock after submit usually. Let's strictly lock.
    if (!isSubmitted) {
      setSelectedId(id);
    }
  };

  const handleSubmit = () => {
    if (!selectedId) return;
    setIsSubmitted(true);
    const selectedOption = data.options.find((opt) => opt.id === selectedId);
    const selectedOption = data.options.find((opt) => opt.id === selectedId);
    if (selectedOption?.isCorrect && onComplete) {
      onComplete();
    }
  };

  const selectedOption = data.options.find((opt) => opt.id === selectedId);
  const selectedOption = data.options.find((opt) => opt.id === selectedId);
  const isCorrect = selectedOption?.isCorrect;

  return (
    <div className="w-full max-w-2xl mx-auto bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden mt-6">
      <div className="p-6">
        <h4 className="text-sm font-bold text-slate-400 uppercase tracking-wider mb-2">
          Concept Check
        </h4>
        <p className="text-lg font-medium text-slate-900 mb-6 whitespace-pre-line">
          {data.question}
        </p>
        <h4 className="text-sm font-bold text-slate-400 uppercase tracking-wider mb-2">
          Concept Check
        </h4>
        <p className="text-lg font-medium text-slate-900 mb-6 whitespace-pre-line">
          {data.question}
        </p>

        <div className="space-y-3">
          {data.options.map((option) => {
            let borderClass = "border-slate-200 hover:border-indigo-300";
            let bgClass = "bg-white hover:bg-slate-50";
            let icon = null;

            if (isSubmitted) {
              if (option.id === selectedId) {
                if (option.isCorrect) {
                  borderClass = "border-green-500 bg-green-50";
                  icon = <CheckCircle2 className="w-5 h-5 text-green-600" />;
                } else {
                  borderClass = "border-red-500 bg-red-50";
                  icon = <XCircle className="w-5 h-5 text-red-600" />;
                }
              } else if (option.isCorrect) {
                // Highlight correct answer if wrong one was picked
                borderClass = "border-green-200 bg-green-50/50";
                // Highlight correct answer if wrong one was picked
                borderClass = "border-green-200 bg-green-50/50";
              }
            } else if (selectedId === option.id) {
              borderClass = "border-indigo-600 bg-indigo-50";
              borderClass = "border-indigo-600 bg-indigo-50";
            }

            return (
              <button
                key={option.id}
                onClick={() => handleOptionClick(option.id)}
                disabled={isSubmitted}
                className={`w-full text-left p-4 rounded-lg border-2 transition-all duration-200 flex items-center justify-between group ${borderClass} ${bgClass}`}
              >
                <div className="flex items-center">
                  <span
                    className={`w-6 h-6 flex items-center justify-center rounded-full text-xs font-bold mr-3 ${
                      isSubmitted && option.isCorrect
                        ? "bg-green-200 text-green-800"
                        : isSubmitted && option.id === selectedId
                          ? "bg-red-200 text-red-800"
                          : selectedId === option.id
                            ? "bg-indigo-600 text-white"
                            : "bg-slate-100 text-slate-500"
                    }`}
                  >
                  <span
                    className={`w-6 h-6 flex items-center justify-center rounded-full text-xs font-bold mr-3 ${
                      isSubmitted && option.isCorrect
                        ? "bg-green-200 text-green-800"
                        : isSubmitted && option.id === selectedId
                          ? "bg-red-200 text-red-800"
                          : selectedId === option.id
                            ? "bg-indigo-600 text-white"
                            : "bg-slate-100 text-slate-500"
                    }`}
                  >
                    {option.id}
                  </span>
                  <span className="text-slate-700 group-hover:text-slate-900">
                    {option.text}
                  </span>
                  <span className="text-slate-700 group-hover:text-slate-900">
                    {option.text}
                  </span>
                </div>
                {icon}
              </button>
            );
          })}
        </div>
      </div>

      {/* Feedback Section */}
      {isSubmitted && (
        <div
          className={`p-6 border-t ${isCorrect ? "bg-green-50 border-green-100" : "bg-slate-50 border-slate-100"}`}
        >
        <div
          className={`p-6 border-t ${isCorrect ? "bg-green-50 border-green-100" : "bg-slate-50 border-slate-100"}`}
        >
          <div className="flex items-start gap-3">
            <div
              className={`mt-1 p-1 rounded-full ${isCorrect ? "bg-green-200" : "bg-slate-200"}`}
            >
              {isCorrect ? (
                <CheckCircle2 className="w-4 h-4 text-green-700" />
              ) : (
                <div className="w-4 h-4 text-slate-500 font-bold text-center leading-4">
                  i
                </div>
              )}
            </div>
            <div>
              <p
                className={`font-bold ${isCorrect ? "text-green-800" : "text-slate-800"} mb-1`}
              >
                {isCorrect ? "That's right!" : "Not quite."}
              </p>
              <p className="text-slate-600 mb-2">{selectedOption?.feedback}</p>
              <div className="text-sm text-slate-500 bg-white p-3 rounded border border-slate-200">
                <span className="font-semibold block mb-1">Explanation:</span>
                {data.explanation}
              </div>
            </div>
            <div
              className={`mt-1 p-1 rounded-full ${isCorrect ? "bg-green-200" : "bg-slate-200"}`}
            >
              {isCorrect ? (
                <CheckCircle2 className="w-4 h-4 text-green-700" />
              ) : (
                <div className="w-4 h-4 text-slate-500 font-bold text-center leading-4">
                  i
                </div>
              )}
            </div>
            <div>
              <p
                className={`font-bold ${isCorrect ? "text-green-800" : "text-slate-800"} mb-1`}
              >
                {isCorrect ? "That's right!" : "Not quite."}
              </p>
              <p className="text-slate-600 mb-2">{selectedOption?.feedback}</p>
              <div className="text-sm text-slate-500 bg-white p-3 rounded border border-slate-200">
                <span className="font-semibold block mb-1">Explanation:</span>
                {data.explanation}
              </div>
            </div>
          </div>
        </div>
      )}

      {!isSubmitted && (
        <div className="p-4 bg-slate-50 border-t border-slate-100 flex justify-end">
          <button
            onClick={handleSubmit}
            disabled={!selectedId}
            className={`px-6 py-2 rounded-full font-semibold transition-all flex items-center ${
              selectedId
                ? "bg-slate-900 text-white hover:bg-slate-800 shadow-md transform hover:-translate-y-0.5"
                : "bg-slate-200 text-slate-400 cursor-not-allowed"
              selectedId
                ? "bg-slate-900 text-white hover:bg-slate-800 shadow-md transform hover:-translate-y-0.5"
                : "bg-slate-200 text-slate-400 cursor-not-allowed"
            }`}
          >
            Check Answer <ChevronRight className="w-4 h-4 ml-1" />
          </button>
        </div>
      )}
    </div>
  );
};

export default Quiz;
