<template>
  <div>
    <LandingPageHeader />

    <main class="container mx-auto px-4 py-16 md:py-20">
      
      <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>
      <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>

      <div class="mt-12">
        <div v-if="isLoading" class="text-center text-gray-500">
          <p>Memuat kategori...</p>
          </div>

        <div v-else-if="error" class="text-center text-red-500 bg-red-100 p-4 rounded-lg">
          <p><strong>Oops, terjadi kesalahan:</strong></p>
          <p>{{ error }}</p>
        </div>

        <div v-else>
          <div v-if="categories.length > 0" class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div 
              v-for="category in categories" 
              :key="category.id"
              @click="onCategoryClick(category.nama)"
              class="group cursor-pointer overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300"
            >
              <img :src="category.foto" :alt="category.nama" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300">
              <div class="p-6 bg-white">
                <h3 class="text-xl font-semibold text-gray-800">{{ category.nama }}</h3>
              </div>
            </div>
          </div>
          <div v-else class="text-center text-gray-500">
            <p>Saat ini belum ada kategori yang tersedia.</p>
          </div>
        </div>
      </div>

    </main>

    <Footer />
  </div>
</template>

<script setup>
import LandingPageHeader from '~/components/landing-page/header.vue';
import Footer from '~/components/landing-page/footer.vue'; 

const emit = defineEmits(['category-selected']);

const categories = ref([]);
// State baru untuk loading dan error
const isLoading = ref(true);
const error = ref(null);

const fetchCategories = async () => {
  // Reset state sebelum fetch
  isLoading.value = true;
  error.value = null;
  
  try {
    const data = await $fetch('http://localhost:8000/api/kategoris');
    categories.value = data;
  } catch (err) {
    console.error('Gagal ambil kategori:', err);
    // Set pesan error yang akan ditampilkan ke pengguna
    error.value = 'Tidak dapat terhubung ke server. Silakan coba lagi nanti.';
  } finally {
    // Set loading ke false setelah selesai (baik sukses maupun gagal)
    isLoading.value = false;
  }
}

const onCategoryClick = (categoryName) => {
  emit('category-selected', categoryName);
};

onMounted(() => {
  fetchCategories();
});
// Cukup satu baris ini untuk mengambil data dan mengelola semua state!
// const { data: categories, pending: isLoading, error } = await useFetch('http://localhost:8000/api/kategoris');
</script>