"use client";

import { createElement } from "react";
import { motion } from "framer-motion";
import { AnswerButton } from "./AnswerButton";
import { getCategoryIcon } from "@/lib/category-icons";
import { useCosmeticContext } from "@/components/cosmetics/CosmeticProvider";
import type { ShuffledQuestion, Difficulty } from "@/lib/game/types";

type AnswerState = "idle" | "correct" | "wrong" | "disabled";

interface QuestionCardProps {
  question: ShuffledQuestion;
  answerStates: Record<string, AnswerState>;
  onAnswer: (answer: string) => void;
}

const difficultyColors: Record<Difficulty, string> = {
  easy: "bg-green-500/80",
  medium: "bg-gold/80 text-black",
  hard: "bg-red-500/80",
};

export function QuestionCard({ question, answerStates, onAnswer }: QuestionCardProps) {
  const { equipped } = useCosmeticContext();
  const hasCardTheme = equipped.card_theme !== null;

  const cardThemeStyle: React.CSSProperties | undefined = hasCardTheme
    ? {
        background: "var(--cosmetic-card-bg)",
        borderColor: "var(--cosmetic-card-border)",
        boxShadow: "var(--cosmetic-card-glow)",
      }
    : undefined;

  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      className="w-full max-w-2xl"
    >
      <div className="glass-card p-6 mb-6" style={cardThemeStyle}>
        <div className="flex items-center gap-2 mb-4">
          {createElement(getCategoryIcon(question.category), {
            size: 14,
            className: "text-gray-400",
          })}
          <span className={`inline-block px-3 py-1 rounded-full text-xs font-bold uppercase ${difficultyColors[question.difficulty]}`}>
            {question.difficulty}
          </span>
        </div>
        <h2 className="text-xl md:text-2xl font-bold leading-relaxed">
          {question.questionText}
        </h2>
      </div>
      <div className={question.allAnswers.length === 2 ? "grid grid-cols-2 gap-3" : "grid grid-cols-1 md:grid-cols-2 gap-3"}>
        {question.allAnswers.map((answer, i) => (
          <AnswerButton
            key={answer}
            text={answer}
            state={answerStates[answer] ?? "idle"}
            onClick={() => onAnswer(answer)}
            index={i}
            showBadge={question.allAnswers.length !== 2}
          />
        ))}
      </div>
    </motion.div>
  );
}