"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsxs, jsx } from 'react/jsx-runtime';

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function Quiz({
  question,
  options,
  selectionMode = "single",
  submitLabel = "Submit",
  onAnswer,
  className,
  ...rest
}) {
  const [selected, setSelected] = React.useState(() => /* @__PURE__ */ new Set());
  const [submitted, setSubmitted] = React.useState(false);
  const onAnswerRef = React.useRef(onAnswer);
  onAnswerRef.current = onAnswer;
  const groupName = React.useId();
  const correctIds = React.useMemo(
    () => new Set(options.filter((o) => o.correct).map((o) => o.id)),
    [options]
  );
  const allCorrect = React.useMemo(() => {
    if (selected.size !== correctIds.size) return false;
    for (const id of correctIds) if (!selected.has(id)) return false;
    return true;
  }, [selected, correctIds]);
  const stateFor = (option) => {
    if (!submitted) return "unanswered";
    const picked = selected.has(option.id);
    const isCorrect = correctIds.has(option.id);
    if (picked && isCorrect) return "correct";
    if (picked && !isCorrect) return "incorrect";
    if (!picked && isCorrect) return "missed";
    return "unanswered";
  };
  const toggle = (id) => {
    setSelected((prev) => {
      if (selectionMode === "single") return /* @__PURE__ */ new Set([id]);
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };
  const handleSubmit = () => {
    setSubmitted(true);
    onAnswerRef.current?.(Array.from(selected), allCorrect);
  };
  const canSubmit = selected.size > 0;
  const statusText = submitted ? allCorrect ? "Correct \u2014 well done." : "Some selections are incorrect or missed. Review the highlighted options." : "";
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ...rest,
      "data-hex-quiz": true,
      "data-submitted": submitted,
      "data-all-correct": submitted && allCorrect,
      className: cn("rounded-lg border bg-card p-4 text-card-foreground", className),
      children: [
        /* @__PURE__ */ jsx("div", { "data-hex-quiz-question": true, className: "mb-3 text-base font-medium", children: question }),
        /* @__PURE__ */ jsx("div", { "data-hex-quiz-options": true, className: "space-y-2", role: selectionMode === "single" ? "radiogroup" : "group", children: options.map((option) => {
          const state = stateFor(option);
          const isPicked = selected.has(option.id);
          return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
            "label",
            {
              "data-hex-quiz-option": true,
              "data-state": state,
              "data-picked": isPicked,
              className: cn(
                "flex cursor-pointer items-start gap-2 rounded-md border bg-background p-2 transition-all duration-[var(--duration-normal,200ms)] ease-out active:scale-[0.98]",
                "hover:bg-muted/50",
                state === "correct" && "border-primary bg-primary/10",
                state === "incorrect" && "border-destructive bg-destructive/10",
                state === "missed" && "border-primary/60 bg-primary/5 ring-1 ring-primary/40"
              ),
              children: [
                /* @__PURE__ */ jsx(
                  "input",
                  {
                    type: selectionMode === "single" ? "radio" : "checkbox",
                    name: selectionMode === "single" ? groupName : void 0,
                    value: option.id,
                    checked: isPicked,
                    onChange: () => toggle(option.id),
                    className: "mt-0.5"
                  }
                ),
                /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
                  /* @__PURE__ */ jsx("div", { "data-hex-quiz-label": true, children: option.label }),
                  submitted && option.explanation && (state === "correct" || state === "incorrect" || state === "missed") ? /* @__PURE__ */ jsx("div", { "data-hex-quiz-explanation": true, className: "mt-1 text-xs text-muted-foreground", children: option.explanation }) : null
                ] })
              ]
            }
          ) }, option.id);
        }) }),
        /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-3", children: [
          /* @__PURE__ */ jsx(
            "button",
            {
              type: "button",
              "data-hex-quiz-submit": true,
              disabled: !canSubmit,
              onClick: handleSubmit,
              className: cn(
                "inline-flex h-9 items-center justify-center rounded-md bg-primary px-3 text-sm font-medium text-primary-foreground transition-all duration-[var(--duration-normal,200ms)] ease-out active:scale-[0.98]",
                "hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
                "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
              ),
              children: submitLabel
            }
          ),
          /* @__PURE__ */ jsx("div", { "data-hex-quiz-status": true, role: "status", "aria-live": "polite", className: "text-sm text-muted-foreground", children: statusText })
        ] })
      ]
    }
  );
}

export { Quiz };
//# sourceMappingURL=quiz.js.map
//# sourceMappingURL=quiz.js.map