const meals = [
  { name: "番茄牛腩饭", icon: "🍅", flavor: "rich", budget: "mid", group: true, note: "酸甜开胃 · 热乎下饭" },
  { name: "麻辣香锅", icon: "🌶️", flavor: "spicy", budget: "mid", group: true, note: "自由搭配 · 快乐翻倍" },
  { name: "鸡丝凉面", icon: "🍜", flavor: "fresh", budget: "low", group: false, note: "清爽不腻 · 午后轻盈" },
  { name: "海南鸡饭", icon: "🍗", flavor: "light", budget: "mid", group: false, note: "鲜嫩咸香 · 稳稳满足" },
  { name: "寿喜烧", icon: "🍲", flavor: "rich", budget: "high", group: true, note: "甜咸浓郁 · 犒劳一下" },
  { name: "酸菜鱼", icon: "🐟", flavor: "spicy", budget: "high", group: true, note: "酸辣鲜香 · 超级下饭" },
  { name: "牛肉粉", icon: "🥣", flavor: "spicy", budget: "low", group: false, note: "暖胃满足 · 快速回血" },
  { name: "轻食沙拉", icon: "🥗", flavor: "light", budget: "mid", group: false, note: "清新脆爽 · 没有负担" },
  { name: "咖喱猪排饭", icon: "🍛", flavor: "rich", budget: "mid", group: false, note: "酥脆浓香 · 能量满格" },
  { name: "小笼包", icon: "🥟", flavor: "light", budget: "low", group: true, note: "一口爆汁 · 简单满足" },
  { name: "韩式烤肉", icon: "🥩", flavor: "rich", budget: "high", group: true, note: "焦香多汁 · 适合聚餐" },
  { name: "重庆小面", icon: "🍜", flavor: "spicy", budget: "low", group: false, note: "麻辣带劲 · 唤醒味蕾" },
  { name: "日式拉面", icon: "🍥", flavor: "rich", budget: "mid", group: false, note: "汤浓面弹 · 暖心满足" },
  { name: "广式烧腊饭", icon: "🍖", flavor: "rich", budget: "mid", group: false, note: "蜜香油润 · 经典不出错" },
  { name: "云南米线", icon: "🍜", flavor: "fresh", budget: "low", group: false, note: "鲜香顺滑 · 嗦粉快乐" },
  { name: "泰式冬阴功", icon: "🦐", flavor: "spicy", budget: "high", group: true, note: "酸辣醒胃 · 南洋风味" },
  { name: "椰子鸡火锅", icon: "🥥", flavor: "light", budget: "high", group: true, note: "清甜鲜嫩 · 聚餐友好" },
  { name: "东北铁锅炖", icon: "🍲", flavor: "rich", budget: "high", group: true, note: "热气腾腾 · 越吃越香" },
  { name: "披萨拼盘", icon: "🍕", flavor: "rich", budget: "mid", group: true, note: "口味任选 · 分享方便" },
  { name: "潮汕牛肉火锅", icon: "🥩", flavor: "fresh", budget: "high", group: true, note: "鲜切现涮 · 团队人气王" },
  { name: "越南牛肉河粉", icon: "🌿", flavor: "fresh", budget: "mid", group: false, note: "清鲜有层次 · 舒服耐吃" },
  { name: "菌菇焖饭", icon: "🍄", flavor: "light", budget: "low", group: false, note: "菌香温润 · 素食也满足" },
  { name: "新疆大盘鸡", icon: "🍗", flavor: "spicy", budget: "high", group: true, note: "香辣量足 · 多人更合适" },
  { name: "粤式点心", icon: "🫖", flavor: "light", budget: "mid", group: true, note: "多款分享 · 慢慢吃聊" }
];

const KEYS = {
  favorites: "whats2eat-favorites",
  history: "whats2eat-history"
};

const state = { flavor: "all", budget: "all", mode: "solo", current: null, activeList: "favorites" };
const $ = (selector) => document.querySelector(selector);
const $$ = (selector) => document.querySelectorAll(selector);
const readStore = (key) => JSON.parse(localStorage.getItem(key) || "[]");
const writeStore = (key, value) => localStorage.setItem(key, JSON.stringify(value));
const mealByName = (name) => meals.find((meal) => meal.name === name);

function bindExclusiveButtons(selector, stateKey, onChange) {
  $$(selector).forEach((button) => {
    button.addEventListener("click", () => {
      $$(selector).forEach((item) => {
        item.classList.remove("active");
        item.setAttribute("aria-pressed", "false");
      });
      button.classList.add("active");
      button.setAttribute("aria-pressed", "true");
      state[stateKey] = button.dataset.value || button.dataset.mode;
      if (onChange) onChange();
    });
  });
}

function setModeCopy() {
  const isTeam = state.mode === "team";
  $("#heroSubtitle").textContent = isTeam
    ? "少数服从运气，找一个大家都愿意去的答案。"
    : "一个人的午饭，也值得认真决定。";
  $("#modeBadge").textContent = isTeam ? "同事聚餐推荐" : "一人食推荐";
  $("#status").textContent = isTeam ? "聚餐模式会优先推荐适合分享的选择。" : "一人食模式会优先推荐方便又满足的选择。";
}

function filteredMeals() {
  let pool = meals.filter((meal) =>
    (state.flavor === "all" || meal.flavor === state.flavor) &&
    (state.budget === "all" || meal.budget === state.budget) &&
    (state.mode !== "team" || meal.group)
  );
  if (pool.length > 1 && state.current) pool = pool.filter((meal) => meal.name !== state.current.name);
  return pool;
}

function pickMeal() {
  const pool = filteredMeals();
  if (!pool.length) {
    $("#status").textContent = "这个组合暂时没有合适选项，试试放宽一个条件吧。";
    return;
  }
  const meal = pool[Math.floor(Math.random() * pool.length)];
  const card = $("#resultCard");
  card.classList.remove("shuffling");
  void card.offsetWidth;
  card.classList.add("shuffling");
  setTimeout(() => showResult(meal, true), 260);
}

function showResult(meal, addToHistory) {
  state.current = meal;
  $("#resultIcon").textContent = meal.icon;
  $("#resultKicker").textContent = state.mode === "team" ? "大家今天就吃" : "今天就吃";
  $("#resultName").textContent = meal.name;
  $("#resultMeta").textContent = meal.note;
  $("#status").textContent = `答案是「${meal.name}」，不要再纠结啦！`;
  updateSaveButton(readStore(KEYS.favorites).includes(meal.name));
  if (addToHistory) {
    const history = readStore(KEYS.history).filter((name) => name !== meal.name);
    history.unshift(meal.name);
    writeStore(KEYS.history, history.slice(0, 12));
    if (state.activeList === "history") renderList();
  }
}

function updateSaveButton(saved) {
  $("#saveBtn").classList.toggle("saved", saved);
  $("#saveBtn").setAttribute("aria-pressed", String(saved));
  $("#saveBtn").textContent = saved ? "♥ 已收藏" : "♡ 收藏";
}

function toggleFavorite() {
  if (!state.current) {
    $("#status").textContent = "先抽一个午饭答案，再收藏它吧。";
    return;
  }
  const favorites = readStore(KEYS.favorites);
  const index = favorites.indexOf(state.current.name);
  if (index >= 0) favorites.splice(index, 1);
  else favorites.unshift(state.current.name);
  writeStore(KEYS.favorites, favorites);
  updateSaveButton(index < 0);
  renderList();
}

function renderList() {
  const names = readStore(KEYS[state.activeList]);
  $("#favoriteCount").textContent = readStore(KEYS.favorites).length;
  $("#clearHistory").hidden = state.activeList !== "history" || names.length === 0;
  $("#mealList").innerHTML = names.length
    ? names.map((name) => {
        const meal = mealByName(name);
        if (!meal) return "";
        const action = state.activeList === "favorites"
          ? `<button class="remove-item" data-remove="${meal.name}" aria-label="取消收藏 ${meal.name}">×</button>`
          : "";
        return `<article class="meal-item">
          <span class="meal-item-icon" aria-hidden="true">${meal.icon}</span>
          <span><strong>${meal.name}</strong><small>${meal.note}</small></span>
          ${action}
        </article>`;
      }).join("")
    : `<div class="empty">${state.activeList === "favorites" ? "还没有收藏，遇到心动午饭就点一下 ♡" : "还没有抽取记录，今天的第一顿会是什么？"}</div>`;

  $$("[data-remove]").forEach((button) => {
    button.addEventListener("click", () => {
      writeStore(KEYS.favorites, readStore(KEYS.favorites).filter((name) => name !== button.dataset.remove));
      if (state.current?.name === button.dataset.remove) updateSaveButton(false);
      renderList();
    });
  });
}

function switchList(listName, shouldScroll = false) {
  state.activeList = listName;
  $$(".tab").forEach((tab) => {
    const active = tab.dataset.list === listName;
    tab.classList.toggle("active", active);
    tab.setAttribute("aria-selected", String(active));
  });
  renderList();
  if (shouldScroll) $(".collection").scrollIntoView({ behavior: "smooth", block: "start" });
}

bindExclusiveButtons("#flavorChips .chip", "flavor", () => $("#status").textContent = "口味收到，随时可以开奖。");
bindExclusiveButtons("#budgetChips .chip", "budget", () => $("#status").textContent = "预算收到，随时可以开奖。");
bindExclusiveButtons(".mode", "mode", setModeCopy);
$("#decideBtn").addEventListener("click", pickMeal);
$("#againBtn").addEventListener("click", pickMeal);
$("#saveBtn").addEventListener("click", toggleFavorite);
$$(".tab").forEach((tab) => tab.addEventListener("click", () => switchList(tab.dataset.list)));
$$("[data-open-list]").forEach((button) => button.addEventListener("click", () => switchList(button.dataset.openList, true)));
$("#clearHistory").addEventListener("click", () => {
  writeStore(KEYS.history, []);
  renderList();
});

setModeCopy();
renderList();