// ============================================
// 鉄道情報検索に関する処理
// ============================================
window.addEventListener("DOMContentLoaded", function () {
  // ----------------------------------------
  // 検索UIのタブ切り替え
  // ----------------------------------------
  function railwaySearchTab() {
    if (!$(".p-railway-search-wrap-tabbtn").length) return;

    $(".p-railway-search-wrap-tabbtn").click(function () {
      var index = $(".p-railway-search-wrap-tabbtn").index(this);
      $(
        ".p-railway-search-wrap-tabbtn, .p-railway-search-wrap-panel"
      ).removeClass("active");
      $(this).addClass("active");
      $(".p-railway-search-wrap-panel").eq(index).addClass("active");
    });
  }
  railwaySearchTab();
  // ----------------------------------------

  // ----------------------------------------
  // ラジオボタンの処理(JS制御)
  // ----------------------------------------
  function railwaySearchRadio() {
    const radioGroups = [].slice.call(
      document.querySelectorAll(".js-radio-group")
    );

    if (!radioGroups) return;

    radioGroups.forEach(function (radioGroup) {
      const labels = [].slice.call(radioGroup.querySelectorAll("label"));

      labels.forEach(function (label, i, arr) {
        let radio = label.querySelector('input[type="radio"]');

        if (radio.checked === true) {
          label.classList.add("is-checked");
        }

        label.addEventListener("click", function (e) {
          // 全ての radio を初期化
          labels.forEach(function (label) {
            let radio = label.querySelector('input[type="radio"]');
            label.classList.remove("is-checked");
            radio.removeAttribute("checked");
          });

          label.classList.add("is-checked");
          radio.setAttribute("checked", "checked");
        });
      });
    });
  }
  railwaySearchRadio();
  // ----------------------------------------

  // ----------------------------------------
  // 駅名候補のレスポンシブ処理
  // ----------------------------------------
  function railwayStationSelectMq() {
    const stationSelects = [].slice.call(
      document.querySelectorAll(
        ".p-railway-search-station__form-item > .p-form-select"
      )
    );

    if (!stationSelects) return;

    // 幅が768px以下のビューポートをターゲットとする条件を作成
    const mediaQuery = window.matchMedia("(max-width: 768px)");
    function handleTabletChange(e) {
      // メディアクエリがtrueかどうかを確認
      if (e.matches) {
        stationSelects.forEach(function (select) {
          select.size = 0;
        });
      } else {
        stationSelects.forEach(function (select) {
          select.size = 5;
        });
      }
    }
    mediaQuery.addListener(handleTabletChange);
    handleTabletChange(mediaQuery);
  }
  railwayStationSelectMq();

  //------------------------------------------
  //221125 overwirite START ------------------------

  //時刻表検索 初期表示
  $("#directions select").append(
    '<option class="mainline to-osaka" label="神戸・大阪方面" value="1">神戸・大阪方面</option><option class="mainline to-himeji" label="姫路方面" value="2">姫路方面</option>'
  );

  $("#directions_current select").append(
    '<option class="mainline to-osaka" label="神戸・大阪方面" value="1">神戸・大阪方面</option><option class="mainline to-himeji" label="姫路方面" value="2">姫路方面</option>'
  );

  //駅が変更されたら
  $(document).on("change", "#select_station", function () {
    //現在のメニューをチェック
    var nowmenu = $(this).parent().attr("id");
    var target_direction = "#directions";

    //ターゲットとするdirectionsを設定
    if (nowmenu == "time-table-station-menu_current") {
      target_direction = "#directions_current";
    }

    $(this)
      .find("option:selected")
      .each(function () {
        //選択された駅情報セット
        newhonsen = $(this).parent().attr("label");
        var stId = $(this).attr("value");
        var stClass = $(this).attr("class");

        //選択の条件によって要素出し分け
        selectmanager(newhonsen, stId, target_direction);
      });
  });

  //表示切り替え関数
  function selectmanager(newhonsen, stId, target_direction) {
    //一旦表示
    $(target_direction + " select option").remove();
    $(target_direction + " select").append(
      '<option class="mainline to-osaka" label="神戸・大阪方面" value="1">神戸・大阪方面</option><option class="mainline to-himeji" label="姫路方面" value="2">姫路方面</option><option class="aboshiline to-shikama" label="飾磨方面" value="1">飾磨方面</option><option class="aboshiline to-aboshi" label="網干方面" value="2">網干方面</option>'
    );

    if (newhonsen == "山陽電鉄網干線") {
      $(target_direction + " .mainline").remove();

      //飾磨駅の場合
      if (stId == "374-0") {
        $(target_direction + " .to-shikama").remove();
      }
      //網干駅の場合
      if (stId == "374-6") {
        $(target_direction + " .to-aboshi").remove();
      }
    } else if (newhonsen == "山陽電鉄本線") {
      $(target_direction + " .aboshiline").remove();

      //姫路駅の場合
      if (stId == "334-41") {
        $(target_direction + " .to-himeji").remove();
      }
    }
  }
  //------------------------------------------
  //221125 overwirite END ------------------------
});

// ----------------------------------------
// マップ→駅名入力処理
// ----------------------------------------
function stationInput(stationName) {
  const fromStationInput = document.getElementById("station_from");
  const toStationInput = document.getElementById("station_to");

  if (!fromStationInput || !toStationInput) return;

  if (toStationInput.classList.contains("is-focused")) {
    // 到着駅にフォーカスがある場合の処理（出発駅選択以降の処理）
    toStationInput.value = stationName;
    toStationInput.classList.remove("is-focused");
  } else if (fromStationInput.classList.contains("is-focused")) {
    // 初回選択時 or 出発駅にフォーカスがある場合
    fromStationInput.value = stationName;
    fromStationInput.classList.remove("is-focused");

    // 到着駅をフォーカスする
    toStationInput.focus();
    toStationInput.classList.add("is-focused");
  }

  // focus で class付与
  fromStationInput.addEventListener("focus", function (e) {
    fromStationInput.classList.add("is-focused");
    toStationInput.classList.remove("is-focused");
  });
  toStationInput.addEventListener("focus", function (e) {
    toStationInput.classList.add("is-focused");
    fromStationInput.classList.remove("is-focused");
  });
}

// ============================================
// 検索結果画面に検索駅に応じてバナーを表示
// ============================================
async function initResultAdBanner() {

  const cache_ver = "20260402";

  const bannerArea = document.getElementById(
    "js-search-result-banner-container"
  );

  if (!bannerArea) return;

  const fromStationName = bannerArea.dataset.stationFrom;
  const toStationName = bannerArea.dataset.stationTo;
  const stationLine = bannerArea.dataset.stationLine;

  // console.log(`出発駅は：${fromStationName}、到着駅は：${toStationName}`);

  // 📂 JSONファイルのパス（同じ階層の "json" フォルダ内）
  const stationBannersURL = `/assets/js/json/station_banners.json?ver=${cache_ver}`;
  const bannerListURL = `/assets/js/json/banner_list.json?ver=${cache_ver}`;

  try {
    // 🚀 JSONデータを取得
    const [stationResponse, bannerResponse] = await Promise.all([
      fetch(stationBannersURL),
      fetch(bannerListURL),
    ]);

    const stationBanners = await stationResponse.json();
    const bannerList = await bannerResponse.json();

    // 🚂 駅検索バナーのデータを取得
    let searchToStationName = toStationName;

    // // イレギュラーなケースはここに
    // if (searchToStationName === "御影(阪神)") {
    //   searchToStationName = "阪神御影";
    // } else if (searchToStationName === "六甲") {
    //   searchToStationName = "阪急六甲";
    // } else if (searchToStationName === "三宮(神戸市営)") {
    //   searchToStationName = "三宮（神戸市営）";
    // }

    let bannerIds = stationBanners[fromStationName]?.[searchToStationName];

    // 🔄 もし `toStationName` が存在しなければ `stationLine` で再検索
    if (!bannerIds) {
      let searchString = "";

      if (stationLine.includes("阪神")) {
        searchString = "元町・三宮・御影を除く阪神全駅";
      } else if (stationLine.includes("阪急")) {
        searchString = "三宮・六甲を除く阪急全駅";
      } else if (stationLine.includes("神戸電鉄")) {
        searchString = "神戸電鉄全駅";
      } else if (stationLine.includes("神戸市営地下鉄")) {
        searchString = "新神戸・三宮を除く神戸地下鉄全駅";
      } else if (stationLine.includes("近鉄")) {
        searchString = "近鉄全駅";
      }

      // console.log(
      //   `"${searchToStationName}" にバナーが見つからなかったため、"${searchString}" を使用`
      // );

      bannerIds = stationBanners[fromStationName]?.[searchString] || [];
    }

    // 🚀 表示フラグが `true` もしくは有効期間前のバナーのみを取得
    let filteredBanners = bannerIds.filter((bannerId) => {
      const banner = bannerList[bannerId];
      return banner && isBannerVisible(banner.flag);
    });

    // 📌 すべて非表示フラグだった場合はエリアごと非表示
    if (filteredBanners.length === 0) {
      // console.log("有効なバナーが見つかりませんでした");
      bannerArea.style.display = "none";
      return;
    }

    // 🚀 バナーのHTMLを作成（テンプレートリテラルを使用）
    const bannerHTML = `
      <h3 class="c-ring-heading u-mb-1em">お出かけに便利な情報</h3>
      <div class="c-grid" data-gutter="20">
        ${bannerIds
          .filter((bannerId) => {
            const banner = bannerList[bannerId];
            return banner && isBannerVisible(banner.flag);
          })
          .slice(0, 2) // 最大2件まで
          .map((bannerId) => {
            const { url, name } = bannerList[bannerId];

            // URLが外部ドメインの場合はブランクマークに
            const linkTarget = url.includes("sanyo-railway.co.jp")
              ? ""
              : "target='_blank'";
            const linkClass = url.includes("sanyo-railway.co.jp")
              ? "-arrow--red"
              : "-blank";

            return `
              <div class="c-grid__item" data-grid="6 sm:12">
                <a id="result-banner-${bannerId}" href="${url}" ${linkTarget} class="p-railway-untin-ticket-top__link-box" style="padding: 20px; background-color: #fff;" onclick="virtualPv('/検索バナー/${name}（${fromStationName}→${toStationName}）')">
                    <div class="p-railway-untin-ticket-top__media" style="align-items: center;">
                      <div class="p-railway-untin-ticket-top__media-side">
                        <div class="p-railway-untin-ticket-top__media-pic l-center">
                          <figure>
                            <img src="/assets/img/railway/search-banner/banner_${bannerId}.jpg?ver=${cache_ver}" alt="" width="220">
                          </figure>
                        </div>
                      </div>
                      <div class="p-railway-untin-ticket-top__media-body">
                        <h3 class="u-mt-05em">
                          <span style="display: grid; grid-template-columns: 1fr auto; align-items: center;" class="c-em-txt c-icon-txt-link ${linkClass}">${name}</span>
                        </h3>
                      </div>
                    </div>
                  </a>
                </div>
            `;
          })
          .join("")}
      </div>
    `;

    // バナーエリアにHTMLを追加
    bannerArea.innerHTML = bannerHTML;
  } catch (error) {
    console.error("JSONの取得に失敗しました:", error);
  }

  // バナーが有効化どうかチェックする関数
  function isBannerVisible(flag) {
    if (flag === true) return true;

    const datePattern = /^\d{4}\/\d{1,2}\/\d{1,2}$/;
    if (typeof flag === "string" && datePattern.test(flag)) {
      const today = new Date();

      // 指定日 + 23:59:59 に変換
      const [y, m, d] = flag.split("/").map(Number);
      const endDate = new Date(y, m - 1, d, 23, 59, 59);

      return today <= endDate;
    }

    return false;
  }
}

// 初期化処理
initResultAdBanner();