<template>
  <div>
    <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>

    <div v-if="isLoading" class="text-center py-10">
      <p>Memuat template...</p>
    </div>
    <div v-else-if="error" class="text-center py-10 text-red-600">
      <p>Gagal memuat template. Silakan coba lagi.</p>
    </div>
    
    <div v-else-if="templates && templates.length > 0" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
      
      <div v-for="tpl in templates" :key="tpl.id" class="bg-white border rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 flex flex-col">
        <img :src="tpl.foto" :alt="tpl.nama" class="w-full h-48 object-cover" />
        
        <div class="p-5 flex flex-col flex-grow">
          <h4 class="text-lg font-bold text-gray-800 truncate mb-1">{{ tpl.nama }}</h4>
          
          <p class="text-green-600 font-semibold text-xl mb-4">
            Rp {{ tpl.harga.toLocaleString('id-ID') }}
          </p>

          <div v-if="tpl.fitur" class="mb-auto text-center">
    <span class="inline-block bg-blue-100 text-blue-800 text-sm font-semibold px-3 py-1 rounded-full">
      {{ tpl.fitur.deskripsi }}
    </span>
  </div>
          
          <div class="mt-6">
            <div class="flex items-center gap-3">
              <button class="w-full bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-300 transition-colors">
                Preview
              </button>
              <button class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors">
                Order
              </button>
            </div>
          </div>
        </div>
      </div>
      </div>
    
    <div v-else class="text-center py-10 text-gray-500">
      <p>Belum ada template untuk kategori ini.</p>
    </div>
  </div>
</template>

<script setup>
// Bagian <script> Anda sudah benar, tidak perlu diubah.
const props = defineProps({
  category: { type: String, required: true },
  id_category: { type: Number, required: true },
});

defineEmits(['back']);

const { data: templates, pending: isLoading, error } = useFetch(
  () => `/api/templates/category/${props.id_category}`, 
  {
    baseURL: 'http://localhost:8000',
    key: () => `templates-${props.id_category}`,
    transform: (response) => {
      if (!response || !Array.isArray(response)) return [];
      return response;
    }
  }
);
</script>