<script lang="ts">
    import { cart } from '$lib/stores/cart';

    let formData = {
        name: '',
        email: '',
        country: '',
        address: '',
        city: '',
        postalCode: ''
    };

    function handleSubmit() {
        // Here you'll integrate payment processing later
        console.log('Form submitted:', formData);
        console.log('Cart items:', $cart);
    }

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

<div class="container mx-auto px-4 py-8">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- Order Summary -->
        <div class="space-y-4">
            <h2 class="text-2xl font-bold">Order Summary</h2>
            {#each $cart as item}
                <div class="flex justify-between items-center p-4 bg-base-200 rounded-lg">
                    <div>
                        <h3 class="font-bold">{item.product.title}</h3>
                        <p class="text-sm">{item.variant.title}</p>
                        <p class="text-sm">Quantity: {item.quantity}</p>
                    </div>
                    <p class="font-bold">{(item.variant.calculated_price.calculated_amount * item.quantity).toFixed(2)} €</p>
                </div>
            {/each}
            
            <div class="flex justify-between items-center p-4 bg-base-300 rounded-lg">
                <span class="font-bold">Total:</span>
                <span class="font-bold">{calculateTotal($cart)} €</span>
            </div>
        </div>

        <!-- Shipping Details Form -->
        <form class="space-y-4" on:submit|preventDefault={handleSubmit}>
            <h2 class="text-2xl font-bold">Shipping Details</h2>
            
            <div class="form-control">
                <label class="label" for="name">
                    <span class="label-text">Full Name</span>
                </label>
                <input 
                    type="text" 
                    id="name"
                    class="input input-bordered" 
                    bind:value={formData.name} 
                    required
                />
            </div>

            <div class="form-control">
                <label class="label" for="email">
                    <span class="label-text">Email</span>
                </label>
                <input 
                    type="email" 
                    id="email"
                    class="input input-bordered" 
                    bind:value={formData.email} 
                    required
                />
            </div>

            <div class="form-control">
                <label class="label" for="country">
                    <span class="label-text">Country</span>
                </label>
                <input 
                    type="text" 
                    id="country"
                    class="input input-bordered" 
                    bind:value={formData.country} 
                    required
                />
            </div>

            <div class="form-control">
                <label class="label" for="address">
                    <span class="label-text">Address</span>
                </label>
                <textarea 
                    id="address"
                    class="textarea textarea-bordered" 
                    bind:value={formData.address} 
                    required
                ></textarea>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div class="form-control">
                    <label class="label" for="city">
                        <span class="label-text">City</span>
                    </label>
                    <input 
                        type="text" 
                        id="city"
                        class="input input-bordered" 
                        bind:value={formData.city} 
                        required
                    />
                </div>

                <div class="form-control">
                    <label class="label" for="postalCode">
                        <span class="label-text">Postal Code</span>
                    </label>
                    <input 
                        type="text" 
                        id="postalCode"
                        class="input input-bordered" 
                        bind:value={formData.postalCode} 
                        required
                    />
                </div>
            </div>

            <button type="submit" class="btn btn-primary w-full">
                Continue to Payment
            </button>
        </form>
    </div>
</div> 