(function () {
  var panel = document.querySelector("[data-mobile-search-landing]");
  var mobileMedia = window.matchMedia && window.matchMedia("(max-width: 767px)");
  if (!panel || !mobileMedia || !mobileMedia.matches) return;

  var PLACEHOLDER = "/static/images/placeholder.png?v=2";
  var historySection = panel.querySelector("[data-mobile-search-history]");
  var historyList = panel.querySelector("[data-mobile-search-history-list]");
  var clearButton = panel.querySelector("[data-mobile-search-history-clear]");
  var hotSection = panel.querySelector("[data-mobile-search-hot]");
  var hotList = panel.querySelector("[data-mobile-search-hot-list]");
  var guessSection = panel.querySelector("[data-mobile-search-guess]");
  var guessList = panel.querySelector("[data-mobile-search-guess-list]");
  var changeButton = panel.querySelector("[data-mobile-search-guess-change]");
  var historyDivider = panel.querySelector('[data-mobile-search-divider="history"]');
  var hotDivider = panel.querySelector('[data-mobile-search-divider="hot"]');
  var hotLikeData = {};
  var guessOffset = 0;

  function searchKeyword(keyword) {
    keyword = String(keyword || "").trim();
    if (!keyword) return;
    if (window.SearchHistory && typeof window.SearchHistory.add === "function") {
      window.SearchHistory.add(keyword);
    }
    window.location.href = "/search/" + encodeURIComponent(keyword) + "/";
  }

  function syncDividers() {
    var hasHistory = historySection && !historySection.hidden;
    var hasHot = hotSection && !hotSection.hidden;
    var hasGuess = guessSection && !guessSection.hidden;
    if (historyDivider) historyDivider.hidden = !(hasHistory && (hasHot || hasGuess));
    if (hotDivider) hotDivider.hidden = !(hasHot && hasGuess);
  }

  function renderHistory() {
    if (!historyList || !historySection) return;
    var history = window.SearchHistory && typeof window.SearchHistory.get === "function"
      ? window.SearchHistory.get()
      : [];
    historyList.textContent = "";
    historySection.hidden = history.length === 0;
    history.forEach(function (keyword) {
      var button = document.createElement("button");
      button.type = "button";
      button.className = "mobile-search-history-tag";
      button.textContent = keyword;
      button.addEventListener("click", function () {
        searchKeyword(keyword);
      });
      historyList.appendChild(button);
    });
    syncDividers();
  }

  function formatCount(value) {
    var count = Math.max(0, Number(value) || 0);
    if (count >= 10000) {
      return (count / 10000).toFixed(1).replace(/\.0$/, "") + "w";
    }
    return String(count);
  }

  function renderHotSearch() {
    if (!hotList || !hotSection) return;
    var source = Array.isArray(hotLikeData.hotSearch) ? hotLikeData.hotSearch : [];
    var items = source.filter(function (item) {
      return item && String(item.keyword || "").trim();
    }).slice(0, 6);
    hotList.textContent = "";
    hotSection.hidden = items.length === 0;
    items.forEach(function (item, index) {
      var button = document.createElement("button");
      var rank = document.createElement("span");
      var keyword = document.createElement("span");
      var count = document.createElement("span");
      var keywordText = String(item.keyword || "").trim();

      button.type = "button";
      button.className = "mobile-search-hot-item";
      rank.className = "mobile-search-hot-rank";
      keyword.className = "mobile-search-hot-keyword";
      count.className = "mobile-search-hot-count";
      rank.textContent = String(index + 1);
      keyword.textContent = keywordText;
      count.textContent = formatCount(item.count);
      button.appendChild(rank);
      button.appendChild(keyword);
      button.appendChild(count);
      button.addEventListener("click", function () {
        searchKeyword(keywordText);
      });
      hotList.appendChild(button);
    });
    syncDividers();
  }

  function detailHref(item) {
    var slug = String((item && item.slug) || "").trim();
    var id = Number(item && item.id);
    var key = slug || (id > 0 ? String(id) : "");
    return key ? "/detail/" + encodeURIComponent(key) + "/" : "#";
  }

  function firstCardTag(item) {
    var tags = item && Array.isArray(item.tagNames) ? item.tagNames : [];
    var themes = item && Array.isArray(item.themeNames) ? item.themeNames : [];
    return String(tags[0] || themes[0] || "热门").trim();
  }

  function setCardCover(image, rawURL, title) {
    var cover = String(rawURL || "").trim();
    image.className = "mobile-search-guess-image";
    image.alt = title;
    image.title = title;
    image.addEventListener("error", function () {
      image.classList.remove("lazy");
      image.removeAttribute("data-src");
      image.src = PLACEHOLDER;
    }, { once: true });
    if (cover && typeof window.shouldDecryptImage === "function" && window.shouldDecryptImage(cover)) {
      image.classList.add("lazy");
      image.src = PLACEHOLDER;
      image.setAttribute("data-src", cover);
      return;
    }
    image.src = cover || PLACEHOLDER;
  }

  function createGuessCard(item) {
    var card = document.createElement("a");
    var cover = document.createElement("div");
    var image = document.createElement("img");
    var episode = document.createElement("span");
    var copy = document.createElement("div");
    var title = document.createElement("div");
    var desc = document.createElement("div");
    var tagRow = document.createElement("div");
    var tag = document.createElement("span");
    var titleText = String((item && item.title) || "精彩短剧");
    var totalEpisode = Math.max(0, Number(item && item.totalEpisode) || 0);

    card.className = "mobile-search-guess-card";
    card.href = detailHref(item);
    card.setAttribute("aria-label", titleText);
    cover.className = "mobile-search-guess-cover";
    episode.className = "mobile-search-guess-episode";
    copy.className = "mobile-search-guess-copy";
    title.className = "mobile-search-guess-title";
    desc.className = "mobile-search-guess-desc";
    tagRow.className = "mobile-search-guess-tag-row";
    tag.className = "mobile-search-guess-tag";

    setCardCover(image, (item && (item.cover || item.banner)) || "", titleText);
    episode.textContent = totalEpisode ? totalEpisode + "集" : "更新中";
    title.textContent = titleText;
    desc.textContent = String((item && item.desc) || "精彩内容等你来看");
    tag.textContent = firstCardTag(item);

    cover.appendChild(image);
    cover.appendChild(episode);
    tagRow.appendChild(tag);
    copy.appendChild(title);
    copy.appendChild(desc);
    copy.appendChild(tagRow);
    card.appendChild(cover);
    card.appendChild(copy);
    return card;
  }

  function guessItems() {
    var source = Array.isArray(hotLikeData.guessLike) ? hotLikeData.guessLike : [];
    return source.filter(function (item) {
      return item && (item.id || item.slug);
    });
  }

  function renderGuessLike() {
    if (!guessList || !guessSection) return;
    var items = guessItems();
    var count = Math.min(4, items.length);
    guessList.textContent = "";
    guessSection.hidden = count === 0;
    for (var index = 0; index < count; index += 1) {
      guessList.appendChild(createGuessCard(items[(guessOffset + index) % items.length]));
    }
    if (count && typeof window.initLazyImages === "function") {
      window.initLazyImages(guessList);
    }
    syncDividers();
  }

  function renderHotLike() {
    renderHotSearch();
    renderGuessLike();
  }

  renderHistory();
  renderHotLike();

  if (clearButton) {
    clearButton.addEventListener("click", function () {
      if (window.SearchHistory && typeof window.SearchHistory.clear === "function") {
        window.SearchHistory.clear();
      }
      renderHistory();
    });
  }

  if (changeButton) {
    changeButton.addEventListener("click", function () {
      var items = guessItems();
      if (items.length > 4) guessOffset = (guessOffset + 4) % items.length;
      renderGuessLike();
    });
  }

  if (window.HttpRequest && typeof window.HttpRequest.get === "function") {
    window.HttpRequest.get("/api/playlet/hot-like")
      .then(function (response) {
        hotLikeData = response && response.data ? response.data : {};
        renderHotLike();
      })
      .catch(function () {
        hotLikeData = {};
        renderHotLike();
      });
  }
})();