<script lang="ts">
    import { cart } from '$lib/stores/cart';
    import type { MedusaProduct, MedusaVariant } from '$lib/types/medusa';
    import { region } from '$lib/stores/cart';
    export let products: MedusaProduct[];
    
    let selectedVariants = new Map<string, MedusaVariant>(
        products.map(product => [product.id, product.variants[0]])
    );

    function handleVariantChange(productId: string, variant: MedusaVariant) {
        selectedVariants.set(productId, variant);
    }

            function getCurrencySymbol(currency_code: string) {
        switch (currency_code?.toLowerCase()) {
            case 'eur':
                return '€';
            case 'usd':
                return '$';
            case 'kwd':
                return 'KWD';
            default:
                return currency_code?.toUpperCase() || '';
        }
    }

    let currencyCode = $region?.currency_code || 'KWD';
    let currencySymbol = getCurrencySymbol(currencyCode);
</script>

<section class="container mx-auto px-4 py-8">
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-0 border border-base-300 rounded-lg overflow-hidden">
        {#each products as product}
            <div class="relative border-r border-b border-base-300 last:border-r-0 lg:last-of-type:-4:border-r">
                <a href="/products/{product.id}" class="block">
                    <div class="aspect-square relative overflow-hidden">
                        <img 
                            class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 hover:scale-110" 
                            src={product.thumbnail} 
                            alt={product.title} 
                        />
                    </div>
                </a>
                <div class="p-4 bg-base-100/80 backdrop-blur-sm">
                    <h2 class="text-lg font-bold truncate">{product.title}</h2>
                    <div class="mt-2 space-y-2">
                        <select 
                            class="select select-bordered select-sm w-full h-auto"
                            value={selectedVariants.get(product.id)?.id}
                            on:change={(e) => {
                                const variantId = (e.target as HTMLSelectElement).value;
                                const variant = product.variants.find((v: MedusaVariant) => v.id === variantId);
                                if (variant) handleVariantChange(product.id, variant);
                            }}
                        >
                            {#each product.variants as variant}
                                <option value={variant.id}>{variant.title} {variant.calculated_price.calculated_amount} {currencySymbol}</option>
                            {/each}
                        </select>
                        <button 
                            class="btn btn-primary btn-sm w-full" 
                            on:click={() => {
                                const variant = selectedVariants.get(product.id);
                                if (variant) cart.add(variant.id);
                            }}
                        >
                            Add to cart
                        </button>
                    </div>
                </div>
            </div>
        {:else}
            <div class="col-span-full p-8 text-center">
                <p>No products available</p>
            </div>
        {/each}
    </div>
</section>