<script lang="ts">
    import { cart } from '$lib/stores/cart';
    import type { MedusaProduct, MedusaVariant } from '$lib/types/medusa';

    export let product: MedusaProduct;
    let selectedVariant: MedusaVariant = product.variants[0];
    let currentImageIndex = 0;
    let cartButton: HTMLDivElement;
    let isSticky = false;

    function handleScroll() {
        if (!cartButton) return;
        isSticky = window.scrollY + window.innerHeight < cartButton.offsetTop;
    }

    function handleVariantChange(variantId: string) {
        const variant = product.variants.find((v: MedusaVariant) => v.id === variantId);
        if (variant) selectedVariant = variant;
    }
</script>

<svelte:window on:scroll={handleScroll}/>

<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <div class="space-y-4">
        <img 
            src={product.images[currentImageIndex].url} 
            alt={product.title}
            class="aspect-square rounded-lg object-cover bg-base-200"
        />
        <div class="grid grid-cols-4 gap-2">
            {#each product.images as image, i}
                <button 
                    class="p-0 border-2 rounded-lg {currentImageIndex === i ? 'border-primary' : 'border-transparent'}"
                    on:click={() => currentImageIndex = i}
                >
                    <img 
                        src={image.url} 
                        alt={product.title}
                        class="aspect-square rounded-lg object-cover hover:opacity-75"
                    />
                </button>
            {/each}
        </div>
    </div>

    <div class="space-y-6">
        <div>
            <h1 class="text-3xl font-bold">{product.title}</h1>
            <h1 class="text-3xl font-bold">{selectedVariant.calculated_price.calculated_amount} €</h1>
        </div>

        {#each product.options as option}
            <div>
                <label class="label" for={`option-${option.title}`}>
                    <span class="label-text">{option.title}</span>
                </label>
                <select 
                    id={`option-${option.title}`}
                    class="select select-bordered w-full"
                    value={selectedVariant.id}
                    on:change={(e) => handleVariantChange((e.target as HTMLSelectElement).value)}
                >
                    {#each option.values as value}
                        <option value={product.variants.find(v => v.options[0].value === value.value)?.id}>
                            {value.value}
                        </option>
                    {/each}
                </select>
            </div>
        {/each}

        <p class="text-lg">{product.description}</p>

        <div bind:this={cartButton}>
            <button 
                class="btn btn-primary btn-lg w-full {isSticky ? 'sticky-cart' : ''}" 
                on:click={() => cart.addToCart(product, selectedVariant)}
            >
                Add to Cart - {selectedVariant.title}
            </button>
        </div>

        {#if selectedVariant.sku || product.weight || product.material}
            <div class="prose pb-16 md:pb-0">
                <h3 class="text-lg font-semibold">Product Details</h3>
                <ul>
                    {#if selectedVariant.sku}<li>SKU: {selectedVariant.sku}</li>{/if}
                    {#if product.weight}<li>Weight: {product.weight}g</li>{/if}
                    {#if product.material}<li>Material: {product.material}</li>{/if}
                </ul>
            </div>
        {/if}
    </div>
</div>

<style>
    .sticky-cart {
        position: fixed !important;
        bottom: 0.5rem;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        padding: 0.5rem;
        z-index: 50;
    }

    @media (min-width: 768px) {
        .sticky-cart {
            position: static !important;
            padding: 0;
            width: 100%;
            transform: none;
            left: auto;
        }
    }
</style> 