// Final result screen with score + X share button.

function ResultScreen({ data, answers }) {
  const score = answers.filter(Boolean).length;
  const total = data.questions.length;

  const shareText = data.shareTextTemplate
    .replace("{score}", String(score))
    .replace("{total}", String(total));
  const shareUrl = data.shareUrl || (typeof window !== "undefined" ? window.location.href : "");
  const xIntent = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
    shareText
  )}&url=${encodeURIComponent(shareUrl)}`;

  return (
    <div className="dk-screen dk-screen-result">
      <Confetti count={score === 3 ? 40 : 24} />

      <div className="dk-result-top">
        <Chip tone="ink">{data.eventTag}</Chip>
        <div className="dk-result-sub">あなたの診断結果</div>
      </div>

      {/* big score display */}
      <div className="dk-result-scoreblock">
        <div className="dk-result-score-row">
          <div className="dk-result-score-num">{score}</div>
          <div className="dk-result-score-total">/ {total}</div>
        </div>
        <div className="dk-result-score-label">CORRECT</div>

        {/* per-question dots */}
        <div className="dk-result-answers">
          {answers.map((a, i) => (
            <div
              key={i}
              className={`dk-result-ansdot ${
                a ? "dk-result-ansdot-ok" : "dk-result-ansdot-ng"
              }`}
            >
              <span>Lv.{i + 1}</span>
              <span className="dk-result-ansmark">{a ? "◯" : "✕"}</span>
            </div>
          ))}
        </div>
      </div>

      {/* X share — with bonus hint */}
      <div className="dk-share-wrap">
        <div className="dk-share-bonus">
          <span className="dk-share-bonus-emoji" aria-hidden>🎟️</span>
          <span className="dk-share-bonus-text">
            シェアで <strong>くじ引き +1枚</strong>
          </span>
        </div>
        <a
          className="dk-share-btn"
          href={xIntent}
          target="_blank"
          rel="noopener noreferrer"
        >
          <span className="dk-share-btn-inner">
            <svg
              className="dk-share-btn-icon"
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden
            >
              <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
            </svg>
            <span>結果をXでシェア</span>
          </span>
        </a>
      </div>

      <div className="dk-start-footer">
        <span>Powered by</span>
        <img
          src="assets/delish-wordmark.png"
          alt="デリッシュキッチン"
          className="dk-wordmark"
        />
      </div>
    </div>
  );
}

window.ResultScreen = ResultScreen;