<script setup>
import { Link } from '@inertiajs/vue3';
import { ref, onMounted, computed } from 'vue';

const props = defineProps({
    routePrefix: {
        type: String,
        default: 'client'
    }
});

const products = ref([]);
const loading = ref(true);

onMounted(async () => {
    try {
        const response = await window.axios.get(route('api.products.sale'));
        products.value = response.data.products || [];
    } catch (e) {
        products.value = [];
    } finally {
        loading.value = false;
    }
});

const formatCurrency = (value) => {
    const num = Number(value) || 0;
    return 'RD$' + num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
};

const storeRoute = computed(() => {
    return route(props.routePrefix + '.store.index');
});
</script>

<template>
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-700 overflow-hidden">
        <!-- Header -->
        <div class="p-5 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl flex items-center justify-center">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                    </svg>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">Productos en Venta</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Descubre nuestro catálogo</p>
                </div>
            </div>
            <Link
                :href="storeRoute"
                class="text-sm font-medium text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 flex items-center gap-1"
            >
                Ver tienda
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </Link>
        </div>

        <!-- Loading State -->
        <div v-if="loading" class="p-6">
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
                <div v-for="i in 6" :key="i" class="animate-pulse">
                    <div class="bg-gray-200 dark:bg-gray-700 aspect-square rounded-xl mb-2"></div>
                    <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-1"></div>
                    <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
                </div>
            </div>
        </div>

        <!-- Products Grid -->
        <div v-else-if="products.length" class="p-5">
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
                <Link
                    v-for="product in products.slice(0, 6)"
                    :key="product.id"
                    :href="route(routePrefix + '.store.show', product.id)"
                    :class="[
                        'group relative',
                        product.is_featured ? 'ring-2 ring-yellow-400 ring-offset-2 dark:ring-offset-gray-800 rounded-xl' : ''
                    ]"
                >
                    <div :class="[
                        'relative aspect-square rounded-xl overflow-hidden mb-2',
                        product.is_featured
                            ? 'bg-gradient-to-br from-yellow-50 to-amber-50 dark:from-yellow-900/20 dark:to-amber-900/20'
                            : 'bg-gray-100 dark:bg-gray-700'
                    ]">
                        <img
                            v-if="product.image_url"
                            :src="product.image_url"
                            :alt="product.name"
                            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                            loading="lazy"
                        >
                        <div v-else class="w-full h-full flex items-center justify-center text-gray-400">
                            <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                        </div>
                        <!-- Featured badge -->
                        <div v-if="product.is_featured" class="absolute top-2 left-2 bg-gradient-to-r from-yellow-400 to-amber-400 text-gray-900 text-xs font-bold px-2 py-0.5 rounded-full flex items-center gap-1">
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                            </svg>
                            Destacado
                        </div>
                        <!-- Sale badge -->
                        <div v-if="product.is_on_sale" class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded-full">
                            OFERTA
                        </div>
                    </div>
                    <h4 :class="[
                        'text-sm font-medium truncate transition-colors',
                        product.is_featured
                            ? 'text-yellow-700 dark:text-yellow-400 group-hover:text-yellow-600'
                            : 'text-gray-900 dark:text-white group-hover:text-green-600'
                    ]">
                        {{ product.name }}
                    </h4>
                    <p :class="[
                        'text-sm font-bold',
                        product.is_featured ? 'text-yellow-600' : 'text-green-600'
                    ]">{{ formatCurrency(product.price) }}</p>
                </Link>
            </div>
        </div>

        <!-- Empty State -->
        <div v-else class="p-10 text-center">
            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
            </svg>
            <p class="mt-3 text-gray-500 dark:text-gray-400">No hay productos disponibles</p>
            <Link
                :href="storeRoute"
                class="mt-4 inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"
            >
                Explorar tienda
            </Link>
        </div>
    </div>
</template>
