@page "/cart"
@rendermode InteractiveServer

<div class="container py-5" style="max-width: 1000px; font-family: system-ui, -apple-system, sans-serif;">

    <div class="d-flex align-items-baseline justify-content-between mb-5 border-bottom pb-3">
        <h1 class="ff-serif mb-0" style="font-size: 2.25rem; font-family: 'Playfair Display', Georgia, serif; font-weight: 400; letter-spacing: -0.5px;">Your Cart</h1>
        <a href="/" class="text-dark text-decoration-none small fw-semibold tracking-widest text-uppercase" style="font-size: 0.75rem; letter-spacing: 1.5px;">Continue Shopping</a>
    </div>

    @if (!ShoppingCart.Items.Any())
    {
        <div class="text-center py-5 my-4">
            <div class="mb-4 text-muted-50">
                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="text-secondary opacity-50"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
            </div>
            <h3 class="ff-serif mb-2" style="font-family: 'Playfair Display', Georgia, serif; font-weight: 400;">Your collection is currently vacant.</h3>
            <p class="text-muted small mb-4" style="letter-spacing: 0.2px;">Even with careful scrutiny, the requested shelf remains empty.</p>
            <a href="/" class="btn btn-dark rounded-pill px-4 py-2 text-uppercase fw-semibold tracking-widest" style="font-size: 0.75rem; letter-spacing: 1px; background-color: #1c1f22;">Browse Catalog</a>
        </div>
    }
    else
    {
        <div class="row g-5">
            <div class="col-12 col-lg-7">
                <div class="d-flex flex-column gap-1">
                    @foreach (var item in ShoppingCart.Items)
                    {
                        <div class="row align-items-center py-4 border-bottom position-relative">

                            <div class="col-12 col-md-7 d-flex align-items-center gap-4 mb-3 mb-md-0">
                                <div class="bg-light d-flex align-items-center justify-content-center p-2 rounded-1 state-card-shadow"
                                     style="width: 70px; height: 95px; background-color: #f8f9fa; box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);">
                                    @if (!string.IsNullOrWhiteSpace(item.Product!.ImageUrl))
                                    {
                                        <img src="@item.Product!.ImageUrl" class="img-fluid" style="max-height: 80px; object-fit: contain; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.15));" alt="@item.Product.Name" />
                                    }
                                    else
                                    {
                                        <span class="text-muted fw-bold font-monospace" style="font-size: 0.6rem; letter-spacing: 1px;">[COVER]</span>
                                    }
                                </div>
                                <div style="max-width: 75%;">
                                    <h5 class="fw-semibold mb-1 text-dark" style="font-size: 0.95rem; line-height: 1.4; letter-spacing: -0.1px;">@item.Product!.Name</h5>
                                    <p class="text-muted small mb-0" style="font-size: 0.8rem; letter-spacing: 0.1px;">by @($"{item.Author!.Name} {item.Author!.LastName}")</p>
                                </div>
                            </div>

                            <div class="col-6 col-md-3 d-flex justify-content-md-center align-items-center">
                                <div class="d-flex align-items-center border rounded-pill bg-white px-1 py-1" style="border-color: #e9ecef !important;">
                                    <button class="btn btn-sm border-0 bg-transparent text-muted px-2 py-0" style="font-size: 0.9rem;" @onclick="() => DecreaseQty(item, -1)">—</button>
                                    <span class="px-2 fw-semibold text-dark" style="font-size: 0.85rem; min-width: 20px; text-align: center;">@item.Quantity</span>
                                    <button class="btn btn-sm border-0 bg-transparent text-muted px-2 py-0" style="font-size: 0.9rem;" @onclick="() => IncreaseQty(item)">+</button>
                                </div>
                            </div>

                            <div class="col-6 col-md-2 text-end d-flex align-items-center justify-content-end gap-3">
                                <span class="fw-semibold text-dark" style="font-size: 0.95rem; letter-spacing: -0.2px;">R @(item.Amount.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
                                <button class="btn btn-sm p-1 text-muted opacity-50 hover-opacity-100 border-0 bg-transparent" style="transition: opacity 0.2s;" @onclick="() => RemoveFromCart(item)" title="Remove item">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                                </button>
                            </div>

                        </div>
                    }
                </div>
            </div>

            <div class="col-12 col-lg-5">
                <div class="bg-white p-4 rounded-3 border-0 sticky-top" style="top: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.04); border: 1px solid #f1f3f5 !important;">
                    <h4 class="ff-serif mb-4" style="font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 1.3rem;">Order Summary</h4>

                    <div class="d-flex justify-content-between mb-3" style="font-size: 0.9rem;">
                        <span class="text-muted">Subtotal</span>
                        <span class="fw-normal text-dark">R @(ShoppingCart.TotalAmount.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
                    </div>

                    <div class="d-flex justify-content-between mb-4" style="font-size: 0.9rem;">
                        <span class="text-muted">VAT (15%)</span>
                        <span class="fw-normal text-dark">R @(ShoppingCart.TotalVat.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
                    </div>

                    <hr style="border-color: #f1f3f5;" />

                    <div class="d-flex justify-content-between align-items-baseline mb-4 mt-2">
                        <span class="fw-semibold h6 mb-0 text-dark" style="font-size: 1rem;">Total</span>
                        <span class="fw-bold text-dark" style="font-size: 1.4rem; letter-spacing: -0.5px;">R @((ShoppingCart.TotalAmount + ShoppingCart.TotalVat).ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
                    </div>

                    <a href="/checkout" class="btn btn-dark w-100 rounded-pill py-3 text-uppercase fw-semibold tracking-widest border-0"
                       style="font-size: 0.75rem; letter-spacing: 1.5px; background-color: #1c1f22; transition: background-color 0.2s;">
                        Proceed to Checkout
                    </a>
                </div>
            </div>
        </div>
    }
</div>