<script lang="ts">
    import { cart } from '$lib/stores/cart';
    import type { CartItem } from '$lib/stores/cart';
    import { fly } from 'svelte/transition';

    let isOpen: boolean;
    cart.subscribeToOpen(value => isOpen = value);
    
    function calculateItemTotal(item: CartItem) {
        return (item.variant.calculated_price.calculated_amount * item.quantity).toFixed(2);
    }

    function calculateTotal(items: CartItem[]) {
        return items.reduce((sum, item) => 
            sum + (item.variant.calculated_price.calculated_amount * item.quantity), 0
        ).toFixed(2);
    }
</script>

<div class="fixed bottom-4 right-4 md:right-8 z-50">
    <button 
        class="btn btn-primary btn-circle shadow-lg"
        on:click={() => cart.toggleCart()}
        aria-label="Shopping cart"
    >
        <div class="indicator">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
            </svg>
            {#if $cart.length > 0}
                <span class="badge badge-secondary badge-sm indicator-item">
                    {$cart.reduce((sum, item) => sum + item.quantity, 0)}
                </span>
            {/if}
        </div>
    </button>

    {#if isOpen}
        <div 
            class="absolute bottom-full right-0 mb-2 w-80 bg-base-100 shadow-xl rounded-box p-4 z-50 max-w-[calc(100vw-2rem)]"
            transition:fly={{ y: 10, duration: 200 }}
        >
            <div class="flex justify-between items-center mb-4">
                <h3 class="font-bold text-lg">Your Cart</h3>
                <button class="btn btn-sm btn-ghost" on:click={() => cart.toggleCart()}>×</button>
            </div>
            
            {#if $cart.length === 0}
                <p class="text-center py-4">Your cart is empty</p>
            {:else}
                <div class="space-y-4 max-h-[60vh] overflow-y-auto">
                    {#each $cart as item, i}
                        <div class="flex flex-col gap-2 pb-3 mb-3 border-b border-base-200">
                            <div class="flex justify-between items-start">
                                <div>
                                    <h3 class="font-bold">{item.product.title}</h3>
                                    <p class="text-sm">{item.variant.title}</p>
                                </div>
                                <button class="btn btn-ghost btn-sm" on:click={() => cart.removeItem(i)}>×</button>
                            </div>
                            
                            <div class="flex justify-between items-center">
                                <div class="join">
                                    <button 
                                        class="btn btn-sm join-item" 
                                        on:click={() => cart.updateQuantity(i, item.quantity - 1)}
                                    >-</button>
                                    <input 
                                        type="text"
                                        class="input number input-bordered input-sm w-16 join-item text-center"
                                        value={item.quantity}
                                        on:change={(e) => {
                                            const target = e.target as HTMLInputElement;
                                            const value = parseInt(target.value) || 1;
                                            if (value >= 1) {
                                                cart.updateQuantity(i, value);
                                            }
                                        }}
                                    />
                                    <button 
                                        class="btn btn-sm join-item"
                                        on:click={() => cart.updateQuantity(i, item.quantity + 1)}
                                    >+</button>
                                </div>
                                <p class="font-bold">{calculateItemTotal(item)} €</p>
                            </div>
                        </div>
                    {/each}
                    
                    <div class="flex justify-between font-bold pt-2">
                        <span>Total:</span>
                        <span>{calculateTotal($cart)} €</span>
                    </div>
                    
                    <div class="pt-4">
                        <a href="/checkout" class="btn btn-primary w-full">
                            Proceed to Checkout
                        </a>
                        <button class="btn btn-ghost btn-sm w-full mt-2" on:click={() => cart.toggleCart()}>
                            Continue Shopping
                        </button>
                    </div>
                </div>
            {/if}
        </div>
    {/if}
</div>