<script setup>
import { computed } from 'vue';
import GoogleIcon from '@Shared/GoogleIcon.vue';

/** Props */
const props = defineProps({
    product: {
        type: Object,
        required: true
    }
});

/** Emits */
const emit = defineEmits(['add-to-cart']);

/** Computados */
const availableStock = computed(() => props.product?.main_warehouse_stock ?? props.product?.stock ?? 0);
const isLowStock = computed(() => availableStock.value < 10);
const isOutOfStock = computed(() => availableStock.value <= 0);

const formattedPrice = computed(() => {
    const price = props.product?.price?.retail_price || 0;
    return new Intl.NumberFormat('es-MX', {
        style: 'currency',
        currency: 'MXN'
    }).format(price);
});

/** Métodos */
const handleAddToCart = () => {
    if (!isOutOfStock.value) {
        emit('add-to-cart', props.product);
    }
};
</script>

<template>
    <div 
        class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-all duration-200 overflow-hidden border border-gray-200 dark:border-gray-700"
        :class="{
            'opacity-60 cursor-not-allowed': isOutOfStock,
            'cursor-pointer hover:border-indigo-500': !isOutOfStock
        }"
        @click="handleAddToCart"
    >
        <!-- Header con SKU y Stock -->
        <div class="px-4 py-3 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
            <span class="text-xs font-mono text-gray-500 dark:text-gray-400">
                {{ product.sku }}
            </span>
            <span 
                class="px-2 py-1 text-xs font-semibold rounded-full"
                :class="{
                    'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400': isOutOfStock,
                    'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400': isLowStock && !isOutOfStock,
                    'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400': !isLowStock && !isOutOfStock
                }"
            >
                {{ isOutOfStock ? 'Sin stock' : `Stock: ${availableStock}` }}
            </span>
        </div>

        <!-- Contenido -->
        <div class="p-4">
            <!-- Nombre del producto -->
            <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-2 line-clamp-2 min-h-10">
                {{ product.name }}
            </h3>

            <!-- Categoría -->
            <div class="flex items-center gap-1 mb-3">
                <GoogleIcon name="category" class="text-sm text-gray-400" />
                <span class="text-xs text-gray-500 dark:text-gray-400">
                    {{ product.category?.name || 'Sin clasificación' }}
                </span>
            </div>

            <!-- Precio y botón -->
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xl font-bold text-indigo-600 dark:text-indigo-400">
                        {{ formattedPrice }}
                    </p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">
                        + IVA {{ product.price?.tax || 16 }}%
                    </p>
                </div>

                <button
                    type="button"
                    class="flex items-center justify-center w-10 h-10 rounded-full transition-colors"
                    :class="{
                        'bg-indigo-600 hover:bg-indigo-700 text-white': !isOutOfStock,
                        'bg-gray-300 dark:bg-gray-700 text-gray-500 cursor-not-allowed': isOutOfStock
                    }"
                    :disabled="isOutOfStock"
                    @click.stop="handleAddToCart"
                >
                    <GoogleIcon name="add_shopping_cart" class="text-xl" />
                </button>
            </div>
        </div>
    </div>
</template>
