<template>
  <div>
    <LandingPageHeader />

    <main class="container mx-auto px-4 py-16 md:py-20">
      <div class="flex items-center mb-8">
        <button
          @click="$emit('back')"
          class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center mr-4"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            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
        </button>
        <h1 class="text-3xl md:text-4xl font-bold text-gray-800">
          Template {{ category }}
        </h1>
      </div>

      <!-- Loading -->
      <div v-if="isLoading" class="text-center py-10">
        <p>Memuat template...</p>
      </div>

      <!-- Error -->
      <div v-else-if="error" class="text-center py-10 text-red-600">
        <p>Gagal memuat template. Silakan coba lagi.</p>
      </div>

      <!-- Data Ada -->
      <div
        v-else-if="templates && templates.length > 0"
        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"
      >
        <div
          v-for="tpl in templates"
          :key="tpl.id"
          class="border rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow"
        >
          <img
            :src="`http://localhost:8000/storage/${tpl.foto}`"
            :alt="tpl.nama_template"
            class="bg-gray-200 h-48 w-full object-cover"
          />
          <div class="p-4">
            <h4 class="font-semibold truncate">{{ tpl.nama_template }}</h4>
            <p class="text-gray-500">
              Rp {{ Number(tpl.harga ?? 0).toLocaleString('id-ID') }}
            </p>
          </div>
        </div>
      </div>

      <!-- Data Kosong -->
      <div v-else class="text-center py-10 text-gray-500">
        <p>Belum ada template untuk kategori ini.</p>
      </div>
    </main>

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

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

const props = defineProps({
  category: {
    type: String,
    required: true,
  },
  id_category: {
    type: Number,
    required: true,
  },
})

defineEmits(['back'])

// Panggil API Laravel
const {
  data: templates,
  pending: isLoading,
  error,
} = 
useFetch(() => `/api/templates?kategori_id=${props.id_category}`, {
  baseURL: 'http://localhost:8000',
  key: () => `templates-${props.id_category}`,
  transform: (res) => res ?? []
})
</script>
