// thinking-overlay.jsx — 質問間の「考えている」演出（約20秒）
//
// ・スワイプした方向(A/B)から液体メタルが流れ込み、中央で粒子の渦
// ・5秒ごとにメッセージが切り替わる（4ステップ）
// ・最後の0.8秒でフェードアウト→次の質問へ

const THINKING_PHASES = [
  // qIdx ごとに4つのメッセージ（5秒ずつ）
  ["選択を読み取っています", "感情の輪郭を捉えました", "深層を辿っています", "次の問いを準備中"],
  ["印象を記録しました", "好みの粒度を上げています", "感覚の層を重ねています", "もう少しで見えてきます"],
  ["潜在意識に触れました", "気配を編み込んでいます", "解像度が高まっています", "残りわずかです"],
  ["核に近づいています", "あなたの色が滲んでいます", "輪郭が定まりつつあります", "次の扉を開きます"],
];

function ThinkingOverlay({ choice, tags, qIdx }) {
  const phaseSet = THINKING_PHASES[qIdx % THINKING_PHASES.length];
  const [msgIdx, setMsgIdx] = React.useState(0);

  React.useEffect(() => {
    setMsgIdx(0);
    const ids = [];
    // 5秒、10秒、15秒の3回切り替え
    [5000, 10000, 15000].forEach((ms, i) => {
      ids.push(setTimeout(() => setMsgIdx(i + 1), ms));
    });
    return () => ids.forEach(clearTimeout);
  }, [qIdx]);

  const msg = phaseSet[msgIdx];
  const firstTag = tags ? Object.keys(tags)[0] : null;
  const totalSteps = phaseSet.length;

  return (
    <div className={`tk-overlay tk-from-${choice}`}>
      {/* 液体メタルが選択方向から流れ込む（ループ） */}
      <div className="tk-stream tk-stream-1" />
      <div className="tk-stream tk-stream-2" />
      <div className="tk-stream tk-stream-3" />

      {/* 中央の渦（粒子化した液体メタル） */}
      <div className="tk-core">
        <div className="tk-core-ring tk-core-ring-1" />
        <div className="tk-core-ring tk-core-ring-2" />
        <div className="tk-core-ring tk-core-ring-3" />
        <div className="tk-core-pulse" />
        {Array.from({ length: 8 }).map((_, i) => (
          <span
            key={i}
            className="tk-particle"
            style={{
              "--angle": `${(360 / 8) * i}deg`,
              "--delay": `${i * 0.08}s`,
            }}
          />
        ))}
      </div>

      {/* メッセージ（5秒ごとにフェード切替） */}
      <div className="tk-msg">
        <span className="tk-msg-bar" />
        <span className="tk-msg-text" key={msgIdx}>{msg}</span>
        <span className="tk-msg-dots"><i></i><i></i><i></i></span>
      </div>

      {/* メッセージ進行ドット */}
      <div className="tk-steps">
        {Array.from({ length: totalSteps }).map((_, i) => (
          <span
            key={i}
            className={`tk-step ${i === msgIdx ? "is-active" : ""} ${i < msgIdx ? "is-done" : ""}`}
          />
        ))}
      </div>

      {/* 取得タグの小さなチップ */}
      {firstTag && (
        <div className="tk-tag">
          <span className="tk-tag-plus">+</span>
          <span className="tk-tag-name">{firstTag}</span>
        </div>
      )}

      {/* 全体タイムラインのプログレスバー */}
      <div className="tk-progress">
        <div className="tk-progress-fill" />
      </div>

      <div className="tk-flash" />
    </div>
  );
}

window.ThinkingOverlay = ThinkingOverlay;