(function () {
  "use strict";

  var cardsEl = document.getElementById("cards");
  var catsEl = document.getElementById("cats");
  var indicatorEl = document.getElementById("indicator");
  var contentEl = document.querySelector(".content");

  // Modal elements
  var modalEl = document.getElementById("modal");
  var modalBackdropEl = document.getElementById("modalBackdrop");
  var modalCloseEl = document.getElementById("modalClose");
  var modalImgEl = document.getElementById("modalImg");
  var modalTitleEl = document.getElementById("modalTitle");
  var modalDescEl = document.getElementById("modalDesc");
  var modalPriceEl = document.getElementById("modalPrice");

  var menuData = {
    drinks: [
      {
        title: "نوشابه",
        desc: "کوکاکولا یا فانتا خنک.",
        price: "۱۵,۰۰۰ تومان",
        img: "./images/drink1.png",
      },
      {
        title: "لیموناد",
        desc: "لیموناد طبیعی با یخ و لیمو.",
        price: "۱۸,۰۰۰ تومان",
        img: "./images/drink2.png",
      },
    ],
    snacks: [
      {
        title: "سیب‌زمینی سرخ‌کرده",
        desc: "کریسپی با سس مخصوص.",
        price: "۲۵,۰۰۰ تومان",
        img: "./images/sokhari.jpg",
      },
      {
        title: "هات‌داگ کوچک",
        desc: "هات‌داگ جمع‌وجور با نان نرم.",
        price: "۳۰,۰۰۰ تومان",
        img: "./images/snack2.png",
      },
    ],
    meals: [
      {
        title: "میه کوآه",
        desc: "نودل، مرغ، سبزیجات و تخم‌مرغ.",
        price: "۳۳,۰۰۰ تومان",
        img: "./images/mie.png",
      },
      {
        title: "ساته مرغ",
        desc: "سیخ مرغ با سس بادام‌زمینی.",
        price: "۳۵,۰۰۰ تومان",
        img: "./images/sate.png",
      },
    ],
    chips: [
      {
        title: "چیپس سیب‌زمینی",
        desc: "نمکی و ترد، مناسب کنار نوشیدنی.",
        price: "۱۲,۰۰۰ تومان",
        img: "./images/chips1.png",
      },
      {
        title: "پفک",
        desc: "پنیر کلاسیک، محبوب و ترد.",
        price: "۱۰,۰۰۰ تومان",
        img: "./images/chips2.png",
      },
    ],
  };

  var currentCat = "meals";
  var isAnimating = false;

  function render(cat) {
    var items = menuData[cat] || [];
    cardsEl.innerHTML = "";

    for (var i = 0; i < items.length; i++) {
      var item = items[i];

      var card = document.createElement("article");
      card.className = "food-card tap ripple";
      card.setAttribute("data-cat", cat);
      card.setAttribute("data-idx", String(i));

      card.innerHTML =
        '<div class="thumb"><img alt="' +
        item.title +
        '"></div>' +
        '<div class="info">' +
        "<h3>" +
        item.title +
        "</h3>" +
        "<p>" +
        item.desc +
        "</p>" +
        '<div class="meta">' +
        '<span class="price">' +
        item.price +
        "</span>" +
        "</div>" +
        "</div>";

      var img = card.querySelector("img");
      img.src = item.img;
      img.onerror = function () {
        this.style.display = "none";
      };

      cardsEl.appendChild(card);
    }

    // ✅ اسکرول نرم برگرده بالا
    contentEl.scrollTo({ top: 0, behavior: "smooth" });
  }

  function moveIndicator() {
    var active =
      catsEl.querySelector(".cat.active") || catsEl.querySelector(".cat");
    if (!active) return;

    var a = active.getBoundingClientRect();
    var s = document.querySelector(".sidebar").getBoundingClientRect();
    indicatorEl.style.top = a.top - s.top + a.height / 2 + "px";
  }

  function animateTo(nextCat) {
    if (isAnimating || nextCat === currentCat) return;
    isAnimating = true;

    cardsEl.classList.remove("is-entering");
    cardsEl.classList.add("is-leaving");

    setTimeout(function () {
      render(nextCat);

      cardsEl.classList.remove("is-leaving");
      cardsEl.classList.add("is-entering");

      setTimeout(function () {
        cardsEl.classList.remove("is-entering");
        currentCat = nextCat;
        isAnimating = false;
      }, 260);
    }, 190);
  }

  function openModal(item) {
    if (!modalEl) return;

    if (modalImgEl) {
      modalImgEl.style.animation = "none";
      modalImgEl.offsetHeight;
      modalImgEl.style.animation = "";
      modalImgEl.src = item.img;
      modalImgEl.alt = item.title;
    }

    if (modalTitleEl) modalTitleEl.textContent = item.title;
    if (modalDescEl) modalDescEl.textContent = item.desc;
    if (modalPriceEl) modalPriceEl.textContent = item.price;

    modalEl.classList.add("show");
    modalEl.setAttribute("aria-hidden", "false");
  }

  function closeModal() {
    if (!modalEl) return;
    modalEl.classList.remove("show");
    modalEl.setAttribute("aria-hidden", "true");
  }

  // دسته‌ها
  catsEl.addEventListener("click", function (e) {
    var li = e.target.closest(".cat");
    if (!li) return;

    var nextCat = li.getAttribute("data-cat");

    var all = catsEl.querySelectorAll(".cat");
    for (var i = 0; i < all.length; i++) all[i].classList.remove("active");
    li.classList.add("active");

    moveIndicator();
    animateTo(nextCat);
  });

  // کارت => مودال
  cardsEl.addEventListener("click", function (e) {
    var card = e.target.closest(".food-card");
    if (!card) return;

    var cat = card.getAttribute("data-cat");
    var idx = Number(card.getAttribute("data-idx"));
    var item = (menuData[cat] || [])[idx];
    if (!item) return;

    openModal(item);
  });

  // بستن مودال
  if (modalBackdropEl) modalBackdropEl.addEventListener("click", closeModal);
  if (modalCloseEl) modalCloseEl.addEventListener("click", closeModal);
  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape") closeModal();
  });

  // Ripple
  document.addEventListener(
    "pointerdown",
    function (e) {
      var el = e.target.closest(".ripple");
      if (!el) return;

      var rect = el.getBoundingClientRect();
      var size = Math.max(rect.width, rect.height);

      var wave = document.createElement("span");
      wave.className = "ripple-wave";
      wave.style.width = size + "px";
      wave.style.height = size + "px";
      wave.style.left = e.clientX - rect.left - size / 2 + "px";
      wave.style.top = e.clientY - rect.top - size / 2 + "px";

      var old = el.querySelector(".ripple-wave");
      if (old) old.remove();

      el.appendChild(wave);
      wave.addEventListener("animationend", function () {
        wave.remove();
      });
    },
    { passive: true }
  );

  // init
  render(currentCat);
  window.addEventListener("load", moveIndicator);
  window.addEventListener("resize", moveIndicator);

  console.log("✅ Ready");
})();
