// Question screen + Answer-reveal screen.
// Both live in one component; the `revealed` prop flips between states.

function QuestionScreen({ question, index, total, selected, onSelect, onNext }) {
  const revealed = selected != null;
  const correctIdx = question.choices.findIndex((c) => c.correct);
  const selectedIdx = selected;
  const isCorrect = revealed && question.choices[selectedIdx]?.correct;

  return (
    <div className="dk-screen dk-screen-quiz">
      {/* top: progress + heading */}
      <div className="dk-quiz-head">
        <div className="dk-quiz-head-row">
          <Chip tone="ink">{question.heading}</Chip>
          <div className="dk-quiz-counter">
            <strong>{index + 1}</strong>
            <span>/ {total}</span>
          </div>
        </div>
        <ProgressDots total={total} current={index} />
      </div>

      {/* question card */}
      <div className="dk-qcard">
        <div className="dk-qcard-media">
          {question.image ? (
            <img src={question.image} alt="" className="dk-qcard-img" />
          ) : (
            <div className="dk-qcard-emoji">{question.imageEmoji || "🍽"}</div>
          )}
        </div>
        <p className="dk-qcard-text">{question.question}</p>
      </div>

      {/* choices */}
      <div
        className={`dk-choices dk-choices-${question.choices.length}`}
      >
        {question.choices.map((c, i) => {
          const isSelected = selectedIdx === i;
          const isTheRight = i === correctIdx;
          let state = "idle";
          if (revealed) {
            if (isTheRight) state = "right";
            else if (isSelected) state = "wrong";
            else state = "dim";
          }
          return (
            <button
              key={i}
              className={`dk-choice dk-choice-${state}`}
              onClick={() => !revealed && onSelect(i)}
              disabled={revealed}
            >
              <span className="dk-choice-letter">
                {String.fromCharCode(65 + i)}
              </span>
              <span className="dk-choice-label">{c.label}</span>
              {revealed && isTheRight && (
                <span className="dk-choice-mark dk-choice-mark-ok">◯</span>
              )}
              {revealed && isSelected && !isTheRight && (
                <span className="dk-choice-mark dk-choice-mark-ng">✕</span>
              )}
            </button>
          );
        })}
      </div>

      {/* reveal panel */}
      {revealed && (
        <AnswerReveal
          correct={isCorrect}
          question={question}
          onNext={onNext}
          indexIsLast={index + 1 === total}
        />
      )}
    </div>
  );
}

function AnswerReveal({ correct, question, onNext, indexIsLast }) {
  return (
    <div className="dk-reveal">
      <div className="dk-reveal-stamp">
        <ResultStamp correct={correct} />
        <div
          className="dk-reveal-verdict"
          style={{ color: correct ? DK_RED : "#2B6BFF" }}
        >
          {correct ? "せいかい！" : "ざんねん…"}
        </div>
      </div>

      <div className="dk-reveal-card">
        <div className="dk-reveal-section">
          <div className="dk-reveal-section-label">
            <span className="dk-reveal-dot" />
            解説
          </div>
          <p className="dk-reveal-section-body">{question.explanation}</p>
        </div>
      </div>

      <button className="dk-primary-btn" onClick={onNext}>
        <span>{indexIsLast ? "結果を見る" : "次の問題へ"}</span>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
          <path
            d="M5 12h14M13 6l6 6-6 6"
            stroke="currentColor"
            strokeWidth="2.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      </button>
    </div>
  );
}

window.QuestionScreen = QuestionScreen;