<template>
  <section class="hidden lg:block max-w-7xl mx-auto px-8 pt-24 pb-16">
    <div class="mb-12 text-center">
      <h1 class="text-4xl font-medium text-dark tracking-tight">Menü</h1>
    </div>

    <!-- PARENT GRID -->
    <div v-if="!selectedParentId" class="grid grid-cols-3 gap-10">
      <button
        v-for="parent in parents"
        :key="parent.id"
        type="button"
        class="group text-left"
        @click="selectParent(parent.id)"
      >
        <div class="aspect-square overflow-hidden rounded-2xl bg-white">
          <img
            :src="parent.image?.src || fallbackImage"
            :alt="parent.image?.alt || parent.title"
            class="w-full h-full object-cover group-hover:scale-105 transition"
            @error="setFallbackImage"
          />
        </div>

        <div class="mt-4">
          <h2 class="text-dark text-lg font-medium">
            {{ parent.title }}
          </h2>
        </div>
      </button>
    </div>

    <!-- CATEGORY GRID -->
    <div v-else-if="!selectedCategoryTitle">
      <div class="mb-10 flex items-center justify-between gap-6">
        <div>
          <button
            type="button"
            class="mb-3 text-sm text-dark/50 hover:text-dark transition"
            @click="goBackToParents"
          >
            ← Ana kategoriler
          </button>

          <h2 class="text-3xl font-medium text-dark tracking-tight">
            {{ selectedParent?.title }}
          </h2>
        </div>
      </div>

      <div class="grid grid-cols-3 gap-10">
        <button
          v-for="category in childCategories"
          :key="category.title"
          type="button"
          class="group text-left"
          @click="selectCategory(category.title)"
        >
          <div class="aspect-square overflow-hidden rounded-2xl bg-white">
            <img
              :src="category.image?.src || fallbackImage"
              :alt="category.image?.alt || category.title"
              class="w-full h-full object-cover group-hover:scale-105 transition"
              @error="setFallbackImage"
            />
          </div>

          <div class="mt-4">
            <h3 class="text-dark text-lg font-medium">
              {{ category.title }}
            </h3>

            <p v-if="category.description" class="text-dark/50 text-sm mt-1">
              {{ category.description }}
            </p>
          </div>
        </button>
      </div>
    </div>

    <!-- PRODUCT DETAIL -->
    <div v-else>
      <div class="mb-10">
        <button
          type="button"
          class="mb-3 text-sm text-dark/50 hover:text-dark transition"
          @click="goBackToCategories"
        >
          ← {{ selectedParent?.title }}
        </button>

        <h2 class="text-3xl font-medium text-dark tracking-tight">
          {{ selectedCategory?.title }}
        </h2>

        <p
          v-if="selectedCategory?.description"
          class="text-dark/50 text-sm mt-2 max-w-2xl"
        >
          {{ selectedCategory.description }}
        </p>
      </div>

      <!-- CATEGORY TABS -->
      <div class="flex gap-4 overflow-x-auto no-scrollbar mb-12">
        <button
          v-for="category in childCategories"
          :key="category.title"
          type="button"
          class="w-40 shrink-0 text-left"
          @click="selectCategory(category.title)"
        >
          <div
            :class="[
              'rounded-2xl overflow-hidden transition',
              selectedCategoryTitle === category.title
                ? 'opacity-100 scale-100'
                : 'opacity-60 scale-95',
            ]"
          >
            <div class="aspect-square bg-white">
              <img
                :src="category.image?.src || fallbackImage"
                :alt="category.image?.alt || category.title"
                class="w-full h-full object-cover"
                @error="setFallbackImage"
              />
            </div>

            <div
              class="p-3 text-sm"
              :class="
                selectedCategoryTitle === category.title
                  ? 'text-dark'
                  : 'text-dark/50'
              "
            >
              {{ category.title }}
            </div>
          </div>
        </button>
      </div>

      <!-- ITEMS -->
      <div class="grid grid-cols-2 gap-x-16 gap-y-10">
        <div
          v-for="item in currentItems"
          :key="item.title"
          class="flex gap-5"
        >
          <div class="w-28 h-28 rounded-xl overflow-hidden bg-white shrink-0">
            <img
              :src="item.image?.src || fallbackImage"
              :alt="item.image?.alt || item.title"
              class="w-full h-full object-cover"
              @error="setFallbackImage"
            />
          </div>

          <div class="flex-1">
            <div class="flex justify-between gap-6">
              <h3 class="text-dark font-medium">
                {{ item.title }}
              </h3>

              <span v-if="item.price" class="text-dark font-medium shrink-0">
                {{ item.price }}
              </span>
            </div>

            <p v-if="item.description" class="text-dark/50 text-sm mt-2">
              {{ item.description }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";

type Image = {
  src?: string;
  alt?: string;
};

type MenuParent = {
  id: number;
  title: string;
  image?: Image;
};

type MenuItem = {
  title: string;
  description?: string;
  image?: Image;
  price?: string;
};

type MenuCategory = {
  parent?: MenuParent;
  title: string;
  description?: string;
  image?: Image;
  items?: MenuItem[];
};

const props = withDefaults(
  defineProps<{
    categories: MenuCategory[];
    fallbackImage?: string;
  }>(),
  {
    fallbackImage: "/images/general-img-square.webp",
  },
);

const selectedParentId = ref<number | null>(null);
const selectedCategoryTitle = ref<string | null>(null);

const parents = computed<MenuParent[]>(() => {
  const map = new Map<number, MenuParent>();

  props.categories.forEach((category) => {
    if (!category.parent) return;

    if (!map.has(category.parent.id)) {
      map.set(category.parent.id, category.parent);
    }
  });

  return Array.from(map.values()).sort((a, b) => a.id - b.id);
});

const selectedParent = computed<MenuParent | undefined>(() => {
  return parents.value.find((parent) => parent.id === selectedParentId.value);
});

const childCategories = computed<MenuCategory[]>(() => {
  if (!selectedParentId.value) return [];

  return props.categories.filter((category) => {
    return category.parent?.id === selectedParentId.value;
  });
});

const selectedCategory = computed<MenuCategory | undefined>(() => {
  return childCategories.value.find((category) => {
    return category.title === selectedCategoryTitle.value;
  });
});

const currentItems = computed<MenuItem[]>(() => {
  return selectedCategory.value?.items ?? [];
});

function selectParent(parentId: number) {
  selectedParentId.value = parentId;
  selectedCategoryTitle.value = null;
}

function selectCategory(title: string) {
  selectedCategoryTitle.value = title;
}

function goBackToParents() {
  selectedParentId.value = null;
  selectedCategoryTitle.value = null;
}

function goBackToCategories() {
  selectedCategoryTitle.value = null;
}

function setFallbackImage(event: Event) {
  const image = event.target as HTMLImageElement;
  image.src = props.fallbackImage;
}

watch([selectedParentId, selectedCategoryTitle], () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
});
</script>

<style scoped>
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
</style>