@extends('layouts.app')

@section('content')
@php
    $normalizedCheckoutItems = collect(isset($cartItems) ? $cartItems : [])
        ->map(function ($item) {
            $product = data_get($item, 'product');
            $price = data_get($item, 'price');

            if ($price === null) {
                $price = data_get($product, 'sale_price', data_get($product, 'price', 0));
            }

            return [
                'product_id' => data_get($item, 'product_id', data_get($item, 'id')),
                'name' => data_get($item, 'name', data_get($product, 'name', 'Item')),
                'price' => (float) $price,
                'quantity' => (int) data_get($item, 'quantity', 1),
                'image' => data_get($item, 'image', data_get($product, 'image')),
            ];
        })
        ->filter(function ($item) {
            return !empty($item['name']) && $item['quantity'] > 0;
        })
        ->values();

    if ($normalizedCheckoutItems->isEmpty() && auth()->check()) {
        $normalizedCheckoutItems = auth()->user()->cartItems()
            ->with('product')
            ->get()
            ->map(function ($cartItem) {
                $product = $cartItem->product;

                if (!$product) {
                    return null;
                }

                return [
                    'product_id' => $product->id,
                    'name' => $product->name,
                    'price' => (float) ($product->sale_price ?? $product->price ?? 0),
                    'quantity' => (int) $cartItem->quantity,
                    'image' => $product->image,
                ];
            })
            ->filter()
            ->values();
    }

    $itemCount = (int) $normalizedCheckoutItems->sum('quantity');
    $itemsTotal = (float) $normalizedCheckoutItems->sum(function ($item) {
        return $item['price'] * $item['quantity'];
    });

    $deliveryFeeFromController = null;
    if (isset($delivery_fee)) {
        $deliveryFeeFromController = $delivery_fee;
    } elseif (isset($deliveryFee)) {
        $deliveryFeeFromController = $deliveryFee;
    }

    $deliveryFeeIsPlaceholder = $deliveryFeeFromController === null;
    $deliveryFee = $deliveryFeeIsPlaceholder ? 85 : (float) $deliveryFeeFromController;
    $grandTotal = $itemsTotal + $deliveryFee;
    $savedAddress = auth()->check() ? (auth()->user()->address ?? null) : null;
    $customerName = auth()->check() ? (auth()->user()->name ?? '') : '';
    $customerPhone = auth()->check() ? (auth()->user()->phone ?? '') : '';
    $estimatedDeliveryDate = now()->addDays(3)->format('d M, Y');
@endphp

<div class="bg-gray-50 min-h-screen py-8 md:py-12">
    <div class="container mx-auto px-4 md:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto mb-8 md:mb-10">
            <div class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
                <div>
                    <p class="text-xs font-black uppercase tracking-[0.24em] text-[#004225]">Checkout</p>
                    <h1 class="mt-2 text-3xl md:text-4xl font-black text-gray-900">Review your order and shipping details</h1>
                </div>
                <div class="inline-flex items-center gap-2 self-start rounded-full border border-gray-200 bg-white px-4 py-2 text-xs font-bold text-gray-500 shadow-sm">
                    <span class="h-2 w-2 rounded-full bg-[#004225]"></span>
                    Green header, orange CTA
                </div>
            </div>
        </div>

        @if($itemCount === 0)
            <div class="max-w-2xl mx-auto">
                <div class="rounded-3xl border border-gray-200 bg-white p-8 md:p-12 shadow-sm text-center">
                    <div class="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-2xl bg-[#004225]/10 text-[#004225]">
                        <i class="fa fa-shopping-basket text-2xl"></i>
                    </div>
                    <h2 class="text-2xl md:text-3xl font-black text-gray-900">Your cart is empty</h2>
                    <p class="mt-3 text-gray-500 leading-7">You need at least one item in your cart before you can review shipping and payment details.</p>
                    <a href="{{ route('shop') }}" class="mt-8 inline-flex items-center justify-center rounded-2xl bg-[#004225] px-6 py-3.5 font-black text-white shadow-sm transition-all hover:bg-[#00301a]">
                        Continue Shopping
                    </a>
                </div>
            </div>
        @else
            <div class="grid grid-cols-1 lg:grid-cols-5 gap-6 lg:gap-8 items-start">
                <aside class="order-1 lg:order-2 lg:col-span-2 lg:sticky lg:top-24 space-y-5">
                    <div class="rounded-2xl border border-gray-200 bg-white p-5 md:p-6 shadow-sm">
                        <div class="flex items-center justify-between gap-4 border-b border-gray-100 pb-4">
                            <h2 class="text-lg md:text-xl font-black text-gray-900">Promotion</h2>
                            <span class="text-xs font-bold text-gray-400">Optional</span>
                        </div>
                        <div class="mt-5 flex gap-3">
                            <input type="text" placeholder="Enter promo code" class="min-w-0 flex-1 rounded-2xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm font-bold text-gray-700 outline-none transition-all placeholder:font-normal focus:border-orange-500 focus:bg-white">
                            <button type="button" class="rounded-2xl bg-orange-500 px-5 py-3 text-sm font-black text-white transition-all hover:bg-orange-600 active:scale-95">
                                APPLY
                            </button>
                        </div>
                    </div>

                    <div class="rounded-2xl border border-gray-200 bg-white p-5 md:p-6 shadow-sm">
                        <div class="flex items-center justify-between gap-4 border-b border-gray-100 pb-4">
                            <h2 class="text-lg md:text-xl font-black text-gray-900">Invoice and Contact Info</h2>
                            <a href="#" class="text-sm font-bold text-[#004225] hover:underline">Edit</a>
                        </div>
                        <div class="mt-5 space-y-3 text-sm text-gray-600">
                            <div class="flex items-start justify-between gap-4">
                                <span class="font-bold text-gray-400 uppercase tracking-wide text-[11px]">Name</span>
                                <span class="text-right font-bold text-gray-900 break-words">{{ $customerName !== '' ? $customerName : 'No name available' }}</span>
                            </div>
                            <div class="flex items-start justify-between gap-4">
                                <span class="font-bold text-gray-400 uppercase tracking-wide text-[11px]">Phone</span>
                                <span class="text-right font-bold text-gray-900 break-words">{{ $customerPhone !== '' ? $customerPhone : 'No phone saved' }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-2xl border border-gray-200 bg-white p-5 md:p-6 shadow-sm">
                        <div class="flex items-center justify-between gap-4 border-b border-gray-100 pb-4">
                            <h2 class="text-lg md:text-xl font-black text-gray-900">Order Summary</h2>
                            <span class="text-xs font-bold text-gray-400">{{ $itemCount }} items</span>
                        </div>

                        <div class="mt-5 space-y-4">
                            <div class="flex items-start justify-between gap-4 text-sm font-bold text-gray-600">
                                <span>Items Total ({{ $itemCount }} Items)</span>
                                <span class="text-right text-gray-900">৳{{ number_format($itemsTotal) }}</span>
                            </div>

                            <div class="flex items-start justify-between gap-4 text-sm font-bold text-gray-600">
                                <span class="flex items-center gap-2">
                                    Delivery Fee
                                    @if($deliveryFeeIsPlaceholder)
                                        <span class="rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-black uppercase tracking-wide text-amber-700">placeholder</span>
                                    @endif
                                </span>
                                <span class="text-right text-gray-900">৳{{ number_format($deliveryFee) }}</span>
                            </div>

                            <div class="pt-4 border-t border-dashed border-gray-200 flex items-end justify-between gap-4">
                                <span class="text-sm font-bold text-gray-600">Total</span>
                                <div class="text-right">
                                    <div class="text-3xl md:text-[2.15rem] font-black text-orange-500 leading-none">৳{{ number_format($grandTotal) }}</div>
                                    <p class="mt-2 text-[11px] font-medium text-gray-400">VAT included, where applicable</p>
                                </div>
                            </div>
                        </div>

                        <button type="button" class="mt-6 w-full rounded-2xl bg-orange-500 px-5 py-4 text-base font-black text-white shadow-lg shadow-orange-500/10 transition-all hover:bg-orange-600 active:scale-[0.99]">
                            Proceed to Payment
                        </button>
                    </div>
                </aside>

                <section class="order-2 lg:order-1 lg:col-span-3 space-y-5">
                    <div class="rounded-2xl border border-gray-200 bg-white p-5 md:p-6 shadow-sm">
                        <div class="flex items-start justify-between gap-4 border-b border-gray-100 pb-4">
                            <h2 class="text-lg md:text-xl font-black text-[#004225]">Shipping &amp; Billing</h2>
                            <a href="#" class="text-sm font-bold text-[#004225] hover:underline">Edit</a>
                        </div>

                        <div class="mt-5 space-y-4">
                            <div class="flex flex-wrap items-center gap-3 text-sm md:text-base">
                                <span class="font-black text-gray-900">{{ $customerName !== '' ? $customerName : 'No name saved' }}</span>
                                <span class="text-gray-300">|</span>
                                <span class="font-bold text-gray-600">{{ $customerPhone !== '' ? $customerPhone : 'No phone saved' }}</span>
                            </div>

                            <div class="flex items-start gap-3">
                                <span class="shrink-0 rounded-full bg-[#004225]/10 px-3 py-1 text-[11px] font-black uppercase tracking-[0.2em] text-[#004225]">HOME</span>
                                <div class="min-w-0 flex-1">
                                    @if($savedAddress)
                                        <p class="break-words whitespace-normal text-sm md:text-base leading-7 text-gray-600">{{ $savedAddress }}</p>
                                    @else
                                        <a href="#" class="inline-flex items-center gap-2 text-sm md:text-base font-bold text-[#004225] hover:underline">
                                            No address saved — Add Address
                                        </a>
                                    @endif
                                </div>
                            </div>

                            <div class="rounded-2xl border border-dashed border-gray-300 bg-gray-50/80 p-4 md:p-5">
                                <div class="flex items-start gap-3">
                                    <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#004225]/10 text-[#004225]">
                                        <i class="fa fa-location-dot text-sm"></i>
                                    </div>
                                    <div class="min-w-0">
                                        <p class="font-black text-gray-900">Collect from nearby pickup point</p>
                                        <p class="mt-1 text-sm leading-7 text-gray-500">Static checkout note for now. The pickup point text can be connected later without changing this layout.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-2xl border border-gray-200 bg-white p-5 md:p-6 shadow-sm">
                        <div class="flex items-start justify-between gap-4 border-b border-gray-100 pb-4">
                            <div>
                                <h2 class="text-lg md:text-xl font-black text-gray-900">Package 1 of 1</h2>
                                <p class="mt-1 text-sm text-gray-500">{{ $itemCount }} item{{ $itemCount === 1 ? '' : 's' }} in this package</p>
                            </div>
                            <span class="rounded-full bg-[#004225]/10 px-3 py-1 text-[11px] font-black uppercase tracking-[0.18em] text-[#004225]">Selected</span>
                        </div>

                        <div class="mt-5 space-y-4">
                            <label class="block cursor-pointer">
                                <input type="radio" name="delivery_method" checked class="peer sr-only">
                                <div class="rounded-2xl border-2 border-[#004225] bg-[#004225]/5 p-4 md:p-5 transition-all peer-checked:border-[#004225] peer-checked:bg-[#004225]/5">
                                    <div class="flex items-start gap-4">
                                        <div class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#004225] text-white shadow-sm">
                                            <i class="fa fa-truck text-sm"></i>
                                        </div>
                                        <div class="min-w-0 flex-1">
                                            <div class="flex flex-wrap items-center justify-between gap-3">
                                                <div>
                                                    <p class="font-black text-gray-900">Standard Delivery</p>
                                                    <p class="mt-1 text-sm text-gray-500">Estimated delivery: {{ $estimatedDeliveryDate }}</p>
                                                </div>
                                                <div class="text-right">
                                                    <p class="text-base font-black text-[#004225]">৳{{ number_format($deliveryFee) }}</p>
                                                    @if($deliveryFeeIsPlaceholder)
                                                        <p class="mt-1 text-[11px] font-bold text-amber-600">static placeholder</p>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="mt-4 flex items-center gap-2 text-sm font-bold text-[#004225]">
                                                <span class="flex h-5 w-5 items-center justify-center rounded-full bg-[#004225] text-[10px] text-white">
                                                    <i class="fa fa-check"></i>
                                                </span>
                                                Selected delivery option
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </label>
                        </div>
                    </div>
                </section>
            </div>
        @endif
    </div>
</div>
@endsection