<template>
    <div class="space-y-3">
        <div v-for="category in categories" :key="category.id" class="bg-white rounded-lg shadow overflow-hidden">
            <!-- Category Header -->
            <button @click="toggleCategory(category.id)"
                class="w-full flex justify-between items-center p-4 bg-blue-50 hover:bg-blue-100 transition">
                <div class="flex items-center gap-2">
                    <span class="text-lg">{{ isOpen(category.id) ? '📂' : '📁' }}</span>
                    <span class="font-semibold text-gray-800">{{ category.name }}</span>
                    <span class="text-xs text-gray-500">({{ category.products.length }} produk)</span>
                </div>
                <span class="text-blue-600 text-xl">
                    {{ isOpen(category.id) ? '−' : '+' }}
                </span>
            </button>

            <!-- Products -->
            <div v-show="isOpen(category.id)" class="divide-y divide-gray-100">
                <div v-for="product in category.products" :key="product.id" class="p-4 hover:bg-gray-50 transition">
                    <div class="flex justify-between items-start">
                        <div class="flex-1">
                            <h4 class="font-semibold text-gray-800">{{ product.name }}</h4>
                            <p class="text-xs text-gray-500 mt-1">SKU: {{ product.sku }}</p>
                            <div class="flex items-center gap-3 mt-2">
                                <span class="text-orange-600 font-bold">
                                    Rp {{ formatRupiah(product.price) }}
                                </span>
                                <span class="text-xs text-gray-500">
                                    Stock: {{ product.stock }}
                                </span>
                            </div>
                        </div>

                        <!-- Quantity Selector -->
                        <div class="flex items-center gap-2">
                            <button @click="updateQty(product.id, -1, product.price)"
                                :disabled="getQty(product.id) === 0"
                                class="w-8 h-8 rounded-full bg-gray-200 text-gray-700 font-bold disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-300 transition">
                                -
                            </button>
                            <span class="w-8 text-center font-semibold text-lg">
                                {{ getQty(product.id) }}
                            </span>
                            <button @click="updateQty(product.id, 1, product.price)"
                                :disabled="getQty(product.id) >= product.stock"
                                class="w-8 h-8 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed">
                                +
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
    categories: {
        type: Array,
        required: true
    },
    updateQty: {
        type: Function,
        required: true
    },
    getQty: {
        type: Function,
        required: true
    }
})

const openCategories = ref(props.categories.map(c => c.id))

const toggleCategory = (categoryId) => {
    const index = openCategories.value.indexOf(categoryId)
    if (index > -1) {
        openCategories.value.splice(index, 1)
    } else {
        openCategories.value.push(categoryId)
    }
}

const isOpen = (categoryId) => {
    return openCategories.value.includes(categoryId)
}

const formatRupiah = (value) => {
    return new Intl.NumberFormat('id-ID').format(value)
}
</script>
