// Quiz screen — agora com suporte multi-select + microcopy
const { CheckIcon: QCheck, ArrowLeft: QArrowLeft, ArrowRight: QArrowRight } = window.UI;

function QuizScreen({ step, total, question, answers, onSelect, onBack }) {
  const isMulti = !!question.multi;
  const [selected, setSelected] = React.useState(null);
  const [picked, setPicked] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const progressPct = Math.round((step / total) * 100);

  React.useEffect(() => {
    setSelected(null);
    setPicked([]);
    setLoading(false);
  }, [step]);

  const handlePickSingle = (opt) => {
    if (selected) return;
    setSelected(opt.label);
    setLoading(true);
    setTimeout(() => onSelect(opt.label), 600);
  };

  const togglePickMulti = (opt) => {
    if (loading) return;
    setPicked((prev) =>
      prev.includes(opt.label)
        ? prev.filter((x) => x !== opt.label)
        : [...prev, opt.label]
    );
  };

  const handleContinueMulti = () => {
    if (picked.length === 0) return;
    setLoading(true);
    setTimeout(() => onSelect(picked), 600);
  };

  const isOptionSelected = (label) =>
    isMulti ? picked.includes(label) : selected === label;

  return (
    <div className="screen-wrap quiz">
      <div className="progress-shell">
        <div className="progress-meta-clean">
          <button className="back-btn" onClick={onBack} aria-label="Voltar">
            <QArrowLeft size={18} />
          </button>
          <div className="progress-track">
            <div className="progress-fill" style={{ width: progressPct + "%" }}></div>
          </div>
        </div>
      </div>

      <div className="quiz-card" key={step}>
        <h2 className="q-title">{question.title}</h2>
        {question.subtitle && (
          <p className="q-subtitle">{question.subtitle}</p>
        )}

        <div className="options">
          {question.options.map((opt, idx) => {
            const isSel = isOptionSelected(opt.label);
            const dim = !isMulti && selected && !isSel;
            return (
              <button
                key={idx}
                className={"option " + (isSel ? "option-selected" : "") + (dim ? " option-dim" : "")}
                onClick={() => isMulti ? togglePickMulti(opt) : handlePickSingle(opt)}
                disabled={!isMulti && !!selected}
              >
                <span className="opt-letter">{String.fromCharCode(65 + idx)}</span>
                <span className="opt-text">{opt.label}</span>
                <span className="opt-check">
                  {isSel && <QCheck size={20} color="#15803D" />}
                </span>
              </button>
            );
          })}
        </div>

        {isMulti && (
          <div className="multi-footer">
            {question.helper && (
              <p className="multi-helper">{question.helper}</p>
            )}
            <button
              className="btn-primary full"
              disabled={picked.length === 0 || loading}
              onClick={handleContinueMulti}
            >
              {loading ? "Salvando..." : <>Continuar <QArrowRight size={16} /></>}
            </button>
          </div>
        )}

        {loading && !isMulti && (
          <p className="loading-microcopy">Salvando sua resposta...</p>
        )}
      </div>
    </div>
  );
}

window.QuizScreen = QuizScreen;