<template>
  <div class="max-w-7xl mx-auto px-4 py-8">
    <!-- Back button -->
    <div class="mb-8">
      <NuxtLink 
        to="/" 
        class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
        </svg>
        Kembali ke Beranda
      </NuxtLink>
    </div>

    <!-- Header -->
    <h1 class="text-3xl md:text-4xl font-bold text-center text-gray-800">
      Pilih Template Favoritmu
    </h1>
    <p class="mt-2 text-center text-gray-500">
      Tersedia berbagai desain undangan pernikahan, khitan, ulang tahun, dan lainnya.
    </p>

    <!-- Loading / Error -->
    <div v-if="isLoading" class="mt-12 text-center">Memuat kategori...</div>
    <div v-else-if="error" class="mt-12 text-center text-red-500">
      Gagal memuat kategori.
    </div>

    <!-- Kategori Grid -->
    <div 
      v-else-if="categories.length > 0" 
      class="mt-12 flex flex-wrap justify-center gap-6"
    >
      <div 
        v-for="category in categories" 
        :key="category.id + '-' + category.foto"
        @click="onCategoryClick(category)"
        class="group cursor-pointer relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 w-72"
      >
        <!-- Foto portrait -->
        <img 
          v-if="category.foto" 
          :src="`http://localhost:8000${category.foto}`" 
          :alt="category.nama" 
          class="w-full h-96 object-cover transition-transform duration-300 group-hover:scale-110"
        >
        
        <!-- Overlay hitam transparan -->
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>

        <!-- Teks kategori & deskripsi -->
        <div class="absolute inset-0 flex flex-col justify-center items-start px-4 text-white">
          <h3 class="text-xl font-semibold mb-2">
            {{ category.nama }}
          </h3>
          <p
            class="text-lg font-normal leading-snug whitespace-normal break-words max-w-[90%]"
          >
            {{ category.deskripsi }}
          </p>
        </div>
      </div>
    </div>

    <div v-else class="mt-12 text-center text-gray-500">
      Belum ada kategori.
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onActivated } from 'vue'

// Event emit ke parent
const emit = defineEmits(['category-selected'])

// State categories
const categories = ref([])
const isLoading = ref(true)
const error = ref(null)

// Fetch data kategori dari API Laravel
const fetchCategories = async () => {
  isLoading.value = true
  error.value = null
  try {
    const res = await $fetch('http://localhost:8000/api/kategoris')
    categories.value = res
  } catch (err) {
    console.error(err)
    error.value = 'Gagal memuat kategori.'
  } finally {
    isLoading.value = false
  }
}

onMounted(fetchCategories)
onActivated(fetchCategories)

// Klik kategori
const onCategoryClick = (category) => {
  emit('category-selected', category)
}

// Debugging (opsional)
watch(categories, (val) => {
  console.log('Categories:', val)
})
</script>
