<script setup lang="ts">
import { X } from '@lucide/vue';
import { ref, computed, watch } from 'vue';
import { formatRupiah } from '@/lib/rupiah';
import type { Product, Variant, Price, MediaItem } from '@/types/product';

const props = defineProps<{
    product: Product | null;
}>();

const emit = defineEmits<{
    close: [];
    addToCart: [product: Product, variant: Variant, price: Price];
}>();

const activeVariant = ref<Variant | null>(null);
const activePriceType = ref<string>('retail');
const activeImageIndex = ref(0);

const allImages = computed<MediaItem[]>(() => {
    if (!props.product) {
        return [];
    }

    return props.product.variants.flatMap(v => v.images);
});

const mainImage = computed(() => {
    if (allImages.value.length > 0) {
        const img = allImages.value[activeImageIndex.value];

        if (img) {
            return img.url;
        }
    }

    return getFallbackImage();
});

watch(() => props.product, (newProduct) => {
    if (newProduct) {
        activeVariant.value = newProduct.variants[0] || null;
        activePriceType.value = 'retail';
        activeImageIndex.value = 0;
    } else {
        activeVariant.value = null;
    }
});

const selectedPrice = computed(() => {
    if (!activeVariant.value) {
        return null;
    }

    return activeVariant.value.prices.find(p => p.type === activePriceType.value) || activeVariant.value.prices[0] || null;
});

const getFallbackImage = () => {
    if (!props.product) {
        return '';
    }

    const firstCat = props.product.categories?.[0]?.slug || '';
    const fallbacks: Record<string, string[]> = {
        'daster': [
            'https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=800&auto=format&fit=crop&q=80',
        ],
        'setelan-celana': [
            'https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=800&auto=format&fit=crop&q=80',
        ],
        'atasan': [
            'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=800&auto=format&fit=crop&q=80',
        ],
        'bawahan': [
            'https://images.unsplash.com/photo-1583496661160-fb4886b36ca7?w=800&auto=format&fit=crop&q=80',
        ],
        'busui': [
            'https://images.unsplash.com/photo-1509631179647-0177331693ae?w=800&auto=format&fit=crop&q=80',
        ]
    };

    const categoryUrls = fallbacks[firstCat] || [
        'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=800&auto=format&fit=crop&q=80',
    ];

    return categoryUrls[0];
};

const handleAddToCart = () => {
    if (props.product && activeVariant.value && selectedPrice.value) {
        emit('addToCart', props.product, activeVariant.value, selectedPrice.value);
    }
};
</script>

<template>
    <div v-if="product"
        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm transition-opacity duration-300"
        @click.self="emit('close')">
        <div
            class="w-full max-w-3xl bg-[#FDFDFC] rounded-3xl p-6 md:p-8 shadow-2xl flex flex-col md:flex-row gap-8 max-h-[90vh] overflow-y-auto border border-amber-100/30 scrollbar-thin">
            <!-- Image Side -->
            <div class="w-full md:w-1/2 flex flex-col space-y-3">
                <div
                    class="aspect-3/4 rounded-2xl overflow-hidden bg-slate-50 border border-slate-200/50 shadow-sm relative">
                    <img :src="mainImage" :alt="product.name" class="w-full h-full object-cover" />
                </div>

                <!-- Image Thumbnails -->
                <div v-if="allImages.length > 1" class="flex gap-2 overflow-x-auto scrollbar-hide pb-1">
                    <button v-for="(img, idx) in allImages" :key="img.id" @click="activeImageIndex = idx" :class="[
                        'shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 transition-all cursor-pointer',
                        activeImageIndex === idx
                            ? 'border-amber-500 shadow-md shadow-amber-200/40'
                            : 'border-slate-200/60 opacity-60 hover:opacity-100'
                    ]">
                        <img :src="img.thumb_url || img.url" :alt="`Gambar ${idx + 1}`"
                            class="w-full h-full object-cover" />
                    </button>
                </div>
            </div>

            <!-- Info Side -->
            <div class="w-full md:w-1/2 flex flex-col justify-between space-y-6 text-left">
                <div class="space-y-4">
                    <div class="flex justify-between items-start">
                        <div>
                            <span class="text-[10px] font-bold uppercase tracking-widest text-amber-600">
                                {{product.categories.map(c => c.name).join(', ')}}
                            </span>
                            <h3 class="text-2xl font-serif mt-0.5 text-slate-800">{{ product.name }}</h3>
                        </div>
                        <button @click="emit('close')"
                            class="p-1.5 rounded-full hover:bg-slate-100 transition-colors cursor-pointer">
                            <X class="w-5 h-5 text-slate-500" />
                        </button>
                    </div>

                    <!-- Description -->
                    <div class="space-y-1.5">
                        <h4 class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Deskripsi</h4>
                        <p
                            class="text-xs text-slate-500 font-light leading-relaxed max-h-32 overflow-y-auto scrollbar-thin pr-1">
                            {{ product.description || `Pakaian batik modern dan nyaman hasil karya perajin
                            terbaik kami.Menggunakan serat kain pilihan yang awet dan menyejukkan kulit.` }}
                        </p>
                    </div>

                    <!-- Variant Select -->
                    <div v-if="product.variants.length > 0" class="space-y-2">
                        <h4 class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Pilih Ukuran /
                            Varian</h4>
                        <div class="flex flex-wrap gap-1.5">
                            <button v-for="variant in product.variants" :key="variant.id"
                                @click="activeVariant = variant" :class="[
                                    'px-3 py-1.5 rounded-xl text-xs font-semibold uppercase tracking-wider border cursor-pointer transition-all',
                                    activeVariant?.id === variant.id
                                        ? 'bg-amber-600 text-white border-transparent shadow-md shadow-amber-200/30'
                                        : 'bg-transparent text-slate-600 border-slate-200/60'
                                ]">
                                {{ variant.name }}
                                <span class="text-[9px] opacity-70 ml-1">({{ variant.stock }} pcs)</span>
                            </button>
                        </div>
                    </div>

                    <!-- Price Tiers -->
                    <div v-if="activeVariant && activeVariant.prices.length > 0" class="space-y-2">
                        <h4 class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Saluran Harga
                            (Grosir/Eceran)</h4>
                        <div class="grid grid-cols-2 gap-1.5 max-h-36 overflow-y-auto scrollbar-thin pr-1">
                            <button v-for="price in activeVariant.prices" :key="price.id"
                                @click="activePriceType = price.type" :class="[
                                    'px-3 py-2 text-left rounded-xl border transition-all cursor-pointer',
                                    activePriceType === price.type
                                        ? 'border-amber-500 bg-amber-500/5/5'
                                        : 'border-slate-200/60 hover'
                                ]">
                                <span class="block text-[8px] uppercase tracking-wider font-bold text-slate-400">
                                    {{ price.type_label }}
                                </span>
                                <span class="block text-xs font-bold mt-0.5 text-amber-600">
                                    {{ `Rp ${formatRupiah(price.price)}` }}
                                </span>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Cart Call to Action -->
                <div class="pt-4 border-t border-slate-100/50 space-y-4">
                    <div class="flex justify-between items-center text-xs">
                        <div>
                            <span class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Harga
                                Terpilih</span>
                            <div class="text-xl font-bold text-amber-600 mt-0.5">
                                {{ selectedPrice ? `Rp ${formatRupiah(selectedPrice.price)}` : 'Pilih ukuran' }}
                            </div>
                        </div>
                        <div class="text-right">
                            <span class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Sisa
                                Stok</span>
                            <div class="font-semibold text-slate-700 mt-0.5">
                                {{ activeVariant ? `${activeVariant.stock} pcs` : 'Pilih ukuran' }}
                            </div>
                        </div>
                    </div>

                    <button v-if="activeVariant && selectedPrice" @click="handleAddToCart"
                        :disabled="activeVariant.stock <= 0" :class="[
                            'w-full py-3.5 text-xs font-bold uppercase tracking-widest rounded-xl transition-all cursor-pointer shadow-md',
                            activeVariant.stock > 0
                                ? 'bg-amber-600 text-white hover:bg-amber-500 shadow-amber-200/50'
                                : 'bg-slate-100 text-slate-400 cursor-not-allowed shadow-none'
                        ]">
                        {{ activeVariant.stock > 0 ? 'Masukkan ke Keranjang' : 'Stok Habis' }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
</style>
