// スタートボタン要素を取得します
const startBtn = document.getElementById("startBtn");
// リスタートボタン要素を取得します
const restartBtn = document.getElementById("restartBtn");
// スタート画面全体の要素です
const startScreen = document.getElementById("startScreen");
// クイズ画面全体の要素です
const quizScreen = document.getElementById("quizScreen");
// 結果表示エリアの要素です
const resultBox = document.getElementById("resultBox");

// 問題文を表示する要素です
const questionText = document.getElementById("questionText");
// 現在のスコアを表示する要素です
const scoreEl = document.getElementById("score");
// 最終スコアを表示する要素です
const finalScoreEl = document.getElementById("finalScore");
// 全問正解メッセージの要素です
const perfectText = document.getElementById("perfectText");

// 左右の選択肢ボタンを取得します
const leftChoice = document.getElementById("leftChoice");
const rightChoice = document.getElementById("rightChoice");
// 左右の画像表示エリアを取得します
const leftImage = document.getElementById("leftImage");
const rightImage = document.getElementById("rightImage");
// 左右のラベル表示エリアを取得します
const leftLabel = document.getElementById("leftLabel");
const rightLabel = document.getElementById("rightLabel");
// 左右の正解マーク表示エリアを取得します
const leftMark = document.getElementById("leftMark");
const rightMark = document.getElementById("rightMark");

// 1回のゲームで出題する問題数です
const QUESTIONS_PER_GAME = 10;
// 回答後、次の問題へ進むまでの待ち時間です（ミリ秒）
const NEXT_DELAY = 1400;

// 似ているもの2つを1セットにした出題データです。
// pairId は管理用です。left / right の label と file を差し替えて使ってください。
const pairMaster = [
  {
    pairId: "tako_ika",
    correctId: "tako",
    prompt: "たこはどっち？",
    left: { id: "tako", label: "たこ", file: "assets/tako.png" },
    right: { id: "ika", label: "いか", file: "assets/ika.png" }
  },
  {
    pairId: "medaka_kingyo",
    correctId: "medaka",
    prompt: "メダカはどっち？",
    left: { id: "medaka", label: "メダカ", file: "assets/medaka.png" },
    right: { id: "kingyo", label: "きんぎょ", file: "assets/kingyo.png" }
  },
  {
    pairId: "lion_tiger",
    correctId: "lion",
    prompt: "らいおんはどっち？",
    left: { id: "lion", label: "らいおん", file: "assets/lion.png" },
    right: { id: "tiger", label: "とら", file: "assets/tiger.png" }
  },
  {
    pairId: "iruka_shachi",
    correctId: "iruka",
    prompt: "イルカはどっち？",
    left: { id: "shachi", label: "シャチ", file: "assets/shachi.png" },
    right: { id: "iruka", label: "イルカ", file: "assets/iruka.png" }
  },
  {
    pairId: "kaba_sai",
    correctId: "kaba",
    prompt: "カバはどっち？",
    left: { id: "kaba", label: "カバ", file: "assets/kaba.png" },
    right: { id: "sai", label: "サイ", file: "assets/sai.png" }
  },
  {
    pairId: "tanuki_redpanda",
    correctId: "tanuki",
    prompt: "たぬきはどっち？",
    left: { id: "tanuki", label: "たぬき", file: "assets/tanuki.png" },
    right: { id: "redpanda", label: "レッサーパンダ", file: "assets/redpanda.png" }
  },
  {
    pairId: "monkey_gorilla",
    correctId: "monkey",
    prompt: "さるはどっち？",
    left: { id: "monkey", label: "さる", file: "assets/monkey.png" },
    right: { id: "gorilla", label: "ゴリラ", file: "assets/gorilla.png" }
  },
  {
    pairId: "squirrel_hamster",
    correctId: "squirrel",
    prompt: "りすはどっち？",
    left: { id: "squirrel", label: "りす", file: "assets/squirrel.png" },
    right: { id: "hamster", label: "ハムスター", file: "assets/hamster.png" }
  },
  {
    pairId: "maguro_iwashi",
    correctId: "maguro",
    prompt: "マグロはどっち？",
    left: { id: "maguro", label: "マグロ", file: "assets/maguro.png" },
    right: { id: "iwashi", label: "イワシ", file: "assets/iwashi.png" }
  },
  {
    pairId: "washi_taka",
    correctId: "washi",
    prompt: "ワシはどっち？",
    left: { id: "washi", label: "ワシ", file: "assets/washi.png" },
    right: { id: "taka", label: "タカ", file: "assets/taka.png" }
  },
  {
    pairId: "tokage_yamori",
    correctId: "tokage",
    prompt: "トカゲはどっち？",
    left: { id: "tokage", label: "トカゲ", file: "assets/tokage.png" },
    right: { id: "yamori", label: "ヤモリ", file: "assets/yamori.png" }
  },
  {
    pairId: "kabutomushi_kuwagata",
    correctId: "kabutomushi",
    prompt: "かぶとむしはどっち？",
    left: { id: "kabutomushi", label: "かぶとむし", file: "assets/kabutomushi.png" },
    right: { id: "kuwagata", label: "くわがた", file: "assets/kuwagata.png" }
  }
];

// 出題される問題一覧を入れる配列です
let questions = [];
// 今何問目かを表す番号です
let currentIndex = 0;
// 現在の正解数です
let score = 0;
// 回答受付中かどうかを管理するフラグです
let isAnswering = false;
// 次の問題へ進むためのタイマーIDを保存します
let nextTimer = null;

// スタートボタンが押されたらゲームを開始します
startBtn.addEventListener("click", startGame);
// リスタートボタンが押されたら再びゲームを開始します
restartBtn.addEventListener("click", startGame);
// 左の選択肢が押されたときの処理です
leftChoice.addEventListener("pointerdown", () => handleChoice("left"));
// 右の選択肢が押されたときの処理です
rightChoice.addEventListener("pointerdown", () => handleChoice("right"));

// ゲームを初期状態から開始する関数です
function startGame() {
  // 前回のタイマーが残っていたら停止します
  clearTimeout(nextTimer);

  // 問題を作成して状態を初期化します
  questions = buildQuestions(pairMaster, QUESTIONS_PER_GAME);
  currentIndex = 0;
  score = 0;
  isAnswering = false;

  // 画面表示を初期状態に戻します
  scoreEl.textContent = String(score);
  questionText.textContent = "";
  perfectText.style.display = "none";
  resultBox.style.display = "none";
  startScreen.style.display = "none";
  quizScreen.style.display = "grid";

  // 最初の問題を表示します
  showQuestion();
}

// 問題データから、今回出題する問題一覧を作る関数です
function buildQuestions(master, count) {
  return shuffle([...master])
    .slice(0, Math.min(count, master.length))
    .map((pair) => {
      // 左右どちらに元のleftを置くかをランダムで決めます
      const leftIsOriginal = Math.random() < 0.5;
      const leftItem = leftIsOriginal ? pair.left : pair.right;
      const rightItem = leftIsOriginal ? pair.right : pair.left;

      // 実際に表示する問題の形に整えて返します
      return {
        prompt: pair.prompt,
        correctId: pair.correctId,
        left: leftItem,
        right: rightItem
      };
    });
}

// 現在の問題を画面に表示する関数です
function showQuestion() {
  const question = questions[currentIndex];

  // 問題がなければゲーム終了です
  if (!question) {
    endGame();
    return;
  }

  // 回答を受け付けられる状態にします
  isAnswering = true;
  // 問題文を表示します
  questionText.textContent = question.prompt;

  // 左右の選択肢の見た目を設定します
  setChoiceVisual(leftChoice, leftImage, leftLabel, leftMark, question.left);
  setChoiceVisual(rightChoice, rightImage, rightLabel, rightMark, question.right);

  // 前の問題の状態が残らないようにクラスを外します
  leftChoice.classList.remove("is-disabled", "is-dim");
  rightChoice.classList.remove("is-disabled", "is-dim");
}

// 1つの選択肢カードの表示内容を設定する関数です
function setChoiceVisual(cardEl, imageEl, labelEl, markEl, item) {
  // 後で正誤判定に使うため、選択肢のIDを保存します
  cardEl.dataset.itemId = item.id;
  // 背景画像として選択肢の画像を設定します
  imageEl.style.backgroundImage = `url("${item.file}")`;
  // ラベルに選択肢名を設定します
  labelEl.textContent = item.label;
  // ラベルは初期状態では隠しておきます
  labelEl.classList.remove("is-visible");
  // 正解マークも初期状態では隠しておきます
  markEl.classList.remove("is-visible");
}

// 選択肢が押されたときの処理です
function handleChoice(side) {
  // 回答受付中でなければ何もしません
  if (!isAnswering) return;

  // 連打防止のため、すぐに受付を止めます
  isAnswering = false;

  const question = questions[currentIndex];
  const selectedCard = side === "left" ? leftChoice : rightChoice;
  const otherCard = side === "left" ? rightChoice : leftChoice;

  // 押されたカードに保存してあるIDを取得します
  const selectedId = selectedCard.dataset.itemId;
  // 正解かどうかを判定します
  const isCorrect = selectedId === question.correctId;

  // 正解ならスコアを増やします
  if (isCorrect) {
    score += 1;
    scoreEl.textContent = String(score);
  }

  // 答え合わせの見た目に切り替えます
  revealAnswer(question, selectedCard, otherCard);

  // 少し待ってから次の問題へ進みます
  nextTimer = setTimeout(() => {
    currentIndex += 1;

    // 規定問題数に達したか、問題が尽きたら終了します
    if (currentIndex >= QUESTIONS_PER_GAME || currentIndex >= questions.length) {
      endGame();
      return;
    }

    // 次の問題を表示します
    showQuestion();
  }, NEXT_DELAY);
}

// 正解と不正解の見た目を表示する関数です
function revealAnswer(question, selectedCard, otherCard) {
  // 答え合わせ中は両方のカードを押せないようにします
  leftChoice.classList.add("is-disabled");
  rightChoice.classList.add("is-disabled");

  // 左右のラベルを表示します
  leftLabel.classList.add("is-visible");
  rightLabel.classList.add("is-visible");

  // 正解カードが左か右かを判定します
  const correctCard = question.left.id === question.correctId ? leftChoice : rightChoice;
  const wrongCard = correctCard === leftChoice ? rightChoice : leftChoice;
  const correctMark = correctCard === leftChoice ? leftMark : rightMark;

  // 正解側には丸印を表示し、不正解側は薄くします
  correctMark.classList.add("is-visible");
  wrongCard.classList.add("is-dim");
}

// ゲーム終了時の画面切り替えを行う関数です
function endGame() {
  // 念のためタイマーを止めます
  clearTimeout(nextTimer);
  // 回答受付を終了します
  isAnswering = false;
  // クイズ画面を隠して結果画面を表示します
  quizScreen.style.display = "none";
  resultBox.style.display = "flex";
  // 最終スコアを表示します
  finalScoreEl.textContent = String(score);
  // 全問正解なら特別メッセージを表示します
  perfectText.style.display = score === QUESTIONS_PER_GAME ? "block" : "none";
  // ヘッダーの問題文は空に戻します
  questionText.textContent = "";
}

// 配列の中身をランダムに並び替える関数です
function shuffle(array) {
  for (let i = array.length - 1; i > 0; i -= 1) {
    const j = Math.floor(Math.random() * (i + 1));
    // 分割代入を使って2つの要素を入れ替えています
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}