import { SingleChoice } from "@/components";
import { getBackgroundImage } from "@/lib/utils";
import type { QuizPanelProps } from "./types";

/** 单选题展示面板：题干使用“底板”背景，点击即选，hover 高亮 */
const QuizPanel = ({
  visible,
  zIndex = 10000,
  title,
  options,
  value,
  error,
  onChange,
}: QuizPanelProps) => {
  if (!visible) return null;

  return (
    <div
      className="fixed inset-0 flex items-center justify-center bg-black/40"
      style={{ zIndex }}
    >
      <div className="relative w-[1728px] h-[972px] flex flex-col items-center justify-center">
        {/* 题干卡片 */}
        <div className="w-[1600px] min-h-[260px] rounded-[32px] bg-black px-20 py-14 shadow-[0_20px_60px_rgba(240,190,117,0.8)] border-4 border-[#d4c5a9]">
          <div className="text-[34px] leading-relaxed text-white">{title}</div>
        </div>

        {/* 选项区域 */}
        <div className="mt-16 w-[1500px]">
          <SingleChoice
            options={options}
            value={value}
            renderOption={(option, isSelected) => (
              <div
                key={option.value}
                className="mb-6 cursor-pointer"
                onClick={() => onChange?.(option.value)}
              >
                <div
                  className="w-[1431px] h-[156px] flex items-center px-16 text-[28px] leading-snug text-[#fdf5e6] bg-cover bg-center bg-no-repeat transition-all duration-150"
                  style={{
                    backgroundImage: getBackgroundImage(
                      isSelected
                        ? "components/quiz/选中"
                        : "components/quiz/未选择"
                    ),
                    filter: isSelected ? undefined : "brightness(0.96)",
                  }}
                  onMouseEnter={(e) => {
                    if (isSelected) return;
                    (e.currentTarget as HTMLDivElement).style.backgroundImage =
                      getBackgroundImage("components/quiz/选中");
                    (e.currentTarget as HTMLDivElement).style.filter = "";
                  }}
                  onMouseLeave={(e) => {
                    if (isSelected) return;
                    (e.currentTarget as HTMLDivElement).style.backgroundImage =
                      getBackgroundImage("components/quiz/未选择");
                    (e.currentTarget as HTMLDivElement).style.filter =
                      "brightness(0.96)";
                  }}
                >
                  {option.label}
                </div>
              </div>
            )}
          />

          {/* 答案反馈 */}
          {error && (
            <div className="mt-6 text-center text-[26px] text-[#ff4d4f]">
              {error}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default QuizPanel;