midrandbooks/MidrandBookshop/Components/Pages/Account.razor

@page "/account"
@using Microsoft.AspNetCore.Components.Authorization
@inject NavigationManager Navigation
@rendermode InteractiveServer
@attribute [Authorize]

<div class="container py-5">
    <h2 class="fw-bold mb-5 tracking-tight">My Account</h2>
    <div class="row g-5">
        <div class="col-md-3">
            <div class="nav flex-column nav-pills" role="tablist">
                <button class="nav-link active text-start" data-bs-toggle="pill" data-bs-target="#orders" role="tab">Order History</button>
                <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#shipping" role="tab">Shipping Address</button>
                <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#profile" role="tab">Profile Settings</button>
                <hr />
                <button class="nav-link text-danger text-start" @onclick="TriggerLogout">Logout</button>
            </div>
        </div>

        <div class="col-md-9">
            <AuthorizeView>
                <Authorized>
                    <div class="profile-hero-banner mb-5 d-flex align-items-center justify-content-between p-4 border border-light bg-white">
                        <div class="hero-text-content">
                            <div class="meta-tag font-monospace text-uppercase text-muted mb-1">Customer Profile // Active Session</div>
                            <h4 class="fw-bold mb-1 brand-greeting">Welcome back, @(context.User.FindFirst("given_name")?.Value ?? context.User.Identity?.Name ?? "Reader")!</h4>
                            <p class="text-muted small mb-0 font-monospace">@context.User.FindFirst("email")?.Value</p>
                        </div>

                        <div class="hero-crest-svg d-none d-sm-block">
                            <svg viewBox="0 0 100 100" width="70" height="70" stroke="#1A1A1A" stroke-width="1.5" fill="none">
                                <circle cx="50" cy="50" r="40" stroke-dasharray="2 2" stroke="#DDD" />
                                <circle cx="50" cy="50" r="30" />
                                <polygon points="50,20 76,65 24,65" stroke="#1A1A1A" />
                                <line x1="50" y1="20" x2="50" y2="80" stroke-width="1" stroke="#1A1A1A" />
                            </svg>
                        </div>
                    </div>
                </Authorized>
            </AuthorizeView>

            <div class="tab-content">
                <div class="tab-pane fade show active" id="orders" role="tabpanel">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="fw-bold m-0 text-uppercase tracking-wider fs-6 text-muted">Order History</h5>
                    </div>

                    <div class="d-flex flex-column gap-3">
                        @if (orderHistory != null)
                        {
                            @foreach (var order in orderHistory)
                            {
                                <div class="card p-4 shadow-sm order-history-card">
                                    <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start gap-3">
                                        <div class="flex-grow-1 w-100">
                                            <div class="order-meta-track mb-2">
                                                <div class="meta-item-id">
                                                    <span class="fw-bold text-dark">@order.OrderId</span>
                                                </div>
                                                <div class="meta-item-date">
                                                    <span class="text-muted small">@order.OrderDate.ToString("MMM dd, yyyy")</span>
                                                </div>
                                                <div class="meta-item-status">
                                                    <span class="badge status-badge-base status-@order.Status?.ToLower() text-uppercase">
                                                        @order.Status
                                                    </span>
                                                </div>
                                            </div>

                                            <h6 class="mb-2">
                                                <a href="/products/@order.ProductId" class="product-link fw-medium text-dark text-decoration-none" title="@order.ProductTitle">
                                                    @order.ProductTitle
                                                </a>
                                            </h6>

                                            <div class="d-flex align-items-center text-secondary small">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="currentColor" class="me-1 text-muted flex-shrink-0">
                                                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
                                                </svg>
                                                <span class="text-muted text-uppercase tracking-wider font-monospace" style="font-size: 0.7rem;">Shipping to:</span>&nbsp;<span class="text-dark fw-medium">@order.ShippingAddressName</span>
                                            </div>
                                        </div>

                                        <div class="d-flex flex-row flex-sm-column align-items-center align-items-sm-end justify-content-between w-100 w-sm-auto pt-2 pt-sm-0 border-top border-sm-top-0 border-light">
                                            <div class="text-sm-end mb-sm-2">
                                                <span class="text-muted xx-small d-block text-uppercase font-monospace tracking-wider" style="font-size: 0.6rem;">Total Paid</span>
                                                <span class="fw-bold text-dark fs-5">R @order.Total.ToString("N2")</span>
                                            </div>

                                            <button class="btn btn-link p-0 text-dark action-btn mt-sm-1" title="Download Invoice" @onclick="() => DownloadInvoice(order.OrderId)">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" class="svg-icon">
                                                    <path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z" />
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            }
                        }
                        else
                        {
                            <div class="card p-4 text-center text-muted">
                                Loading order history...
                            </div>
                        }
                    </div>
                </div>

                <div class="tab-pane fade" id="shipping" role="tabpanel">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="fw-bold m-0 text-uppercase tracking-wider fs-6 text-muted">Saved Addresses</h5>
                        @if (!showAddForm && editingAddress == null)
                        {
                            <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="OpenAddForm">+ Add New</button>
                        }
                    </div>

                    @if (showAddForm)
                    {
                        <div class="card p-4 border shadow-sm mb-4 bg-light">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="fw-bold m-0">New Address</h6>
                                <button type="button" class="btn-close" @onclick="() => showAddForm = false"></button>
                            </div>
                            <input type="text" class="form-control mb-2" placeholder="Address Name (e.g. Home, Office)" @bind="newAddressName" />
                            <input type="text" class="form-control mb-2" placeholder="Street Address" @bind="newStreetAddress" />
                            <div class="d-flex gap-2 mb-3">
                                <input type="text" class="form-control" placeholder="City" @bind="newCity" />
                                <input type="text" class="form-control" placeholder="Postal Code" @bind="newPostalCode" />
                            </div>
                            <div class="mb-3 d-flex gap-3">
                                <label class="pointer-label"><input type="checkbox" @bind="isBilling" /> Billing</label>
                                <label class="pointer-label"><input type="checkbox" @bind="isShipping" /> Shipping</label>
                            </div>
                            <div class="d-flex">
                                <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="SaveAddress">Save Address</button>
                            </div>
                        </div>
                    }

                    @if (editingAddress != null)
                    {
                        <div class="card p-4 border shadow-sm mb-4 bg-light">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="fw-bold m-0">Edit Address</h6>
                                <button type="button" class="btn-close" @onclick="CancelEditing"></button>
                            </div>
                            <input type="text" class="form-control mb-2" placeholder="Address Name" @bind="editingAddress.Name" />
                            <input type="text" class="form-control mb-2" placeholder="Street Address" @bind="editingAddress.Street" />
                            <div class="d-flex gap-2 mb-3">
                                <input type="text" class="form-control" placeholder="City" @bind="editingAddress.City" />
                                <input type="text" class="form-control" placeholder="Postal Code" @bind="editingAddress.PostalCode" />
                            </div>
                            <div class="mb-3 d-flex gap-3">
                                <label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsBilling" /> Billing</label>
                                <label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsShipping" /> Shipping</label>
                            </div>
                            <div class="d-flex">
                                <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="UpdateAddress">Update Address</button>
                            </div>
                        </div>
                    }

                    @foreach (var addr in savedAddresses)
                    {
                        <div class="card p-4 shadow-sm mb-3 address-card">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <h6 class="fw-bold mb-1">@addr.Name</h6>
                                    <p class="mb-2 text-muted">@addr.Street, @addr.City, @addr.PostalCode</p>
                                    <div class="d-flex gap-2 text-uppercase font-monospace text-muted small">
                                        @if (addr.IsBilling)
                                        {
                                            <span class="badge bg-light text-dark border">[Billing]</span>
                                        }
                                        @if (addr.IsShipping)
                                        {
                                            <span class="badge bg-light text-dark border">[Shipping]</span>
                                        }
                                    </div>
                                </div>

                                <div class="d-flex align-items-center gap-2 actions-container">
                                    <label class="small text-muted d-flex align-items-center gap-1 m-0 pointer-label me-2">
                                        <input type="checkbox" checked="@addr.IsPrimary" @onchange="(e) => SetPrimary(addr, e)" /> Primary
                                    </label>

                                    <button class="btn btn-link p-0 text-dark action-btn" title="Edit Address" @onclick="() => StartEditing(addr)">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
                                            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
                                        </svg>
                                    </button>

                                    <button class="btn btn-link p-0 text-danger action-btn" title="Delete Address" @onclick="() => DeleteAddress(addr)">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
                                            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    }
                </div>

                <div class="tab-pane fade" id="profile" role="tabpanel">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="fw-bold m-0 text-uppercase tracking-wider fs-6 text-muted">Profile Settings</h5>
                    </div>
                    <div class="card p-5 text-center bg-white border">
                        <div class="mb-4">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#1A1A1A" stroke-width="1.5">
                                <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
                            </svg>
                        </div>
                        <h5 class="fw-bold mb-2">Centralized Identity Management</h5>
                        <p class="text-muted small mx-auto mb-4" style="max-width: 480px;">
                            For your protection, password modifications, recovery settings, authentication methods, and core credentials are managed through our secure Identity Node.
                        </p>
                        <a href="https://sts.security.khongisa.co.za/Manage/Index?returnUrl=https://midrandbooks.co.za/account" class="btn btn-dark rounded-pill px-5 py-2.5 btn-sm font-monospace text-uppercase tracking-wider">
                            Access Security Center
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@code {
    private bool showAddForm = false;
    private AddressItem? editingAddress = null;
    private string newAddressName = "";
    private string newStreetAddress = "";
    private string newCity = "";
    private string newPostalCode = "";
    private bool isBilling, isShipping;

    private List<OrderItem> orderHistory = new()
    {
        new OrderItem { OrderId = "#MB-2026-9481", ProductId = "introduction-to-blazor", ProductTitle = "Introduction to Blazor WebAssembly Framework Development", OrderDate = new DateTime(2026, 5, 20), ShippingAddressName = "Home Address", Status = "Shipped", Total = 720.00 },
        new OrderItem { OrderId = "#MB-2026-8712", ProductId = "mastering-css-isolation", ProductTitle = "Mastering CSS Isolation in Modern .NET Web Applications Architecture", OrderDate = new DateTime(2026, 4, 14), ShippingAddressName = "Midrand Books Warehouse", Status = "Delivered", Total = 890.00 }
    };

    private List<AddressItem> savedAddresses = new()
    {
        new AddressItem { Id = 1, Name = "Home Address", Street = "12 Main Road", City = "Midrand", PostalCode = "1685", IsBilling = true, IsShipping = true, IsPrimary = true },
        new AddressItem { Id = 2, Name = "Corporate Office", Street = "45 Challink Street", City = "Halfway House", PostalCode = "1682", IsBilling = true, IsShipping = false, IsPrimary = false },
        new AddressItem { Id = 3, Name = "Midrand Books Warehouse", Street = "Unit 8, Corporate Park North", City = "Randjespark", PostalCode = "1683", IsBilling = false, IsShipping = true, IsPrimary = false }
    };

    private void TriggerLogout() => Navigation.NavigateTo("/logout", forceLoad: true);
    private void DownloadInvoice(string orderId) { /* Handle download sequence here */ }
    private void OpenAddForm() { editingAddress = null; showAddForm = true; }

    private void SaveAddress()
    {
        if (!string.IsNullOrWhiteSpace(newAddressName) && !string.IsNullOrWhiteSpace(newStreetAddress))
        {
            var nextId = savedAddresses.Any() ? savedAddresses.Max(a => a.Id) + 1 : 1;
            savedAddresses.Add(new AddressItem
            {
                Id = nextId,
                Name = newAddressName,
                Street = newStreetAddress,
                City = newCity,
                PostalCode = newPostalCode,
                IsBilling = isBilling,
                IsShipping = isShipping,
                IsPrimary = !savedAddresses.Any()
            });
            ResetAddForm();
        }
    }

    private void ResetAddForm() { newAddressName = ""; newStreetAddress = ""; newCity = ""; newPostalCode = ""; isBilling = isShipping = showAddForm = false; }
    private void StartEditing(AddressItem addr) { showAddForm = false; editingAddress = new AddressItem { Id = addr.Id, Name = addr.Name, Street = addr.Street, City = addr.City, PostalCode = addr.PostalCode, IsBilling = addr.IsBilling, IsShipping = addr.IsShipping, IsPrimary = addr.IsPrimary }; }
    private void CancelEditing() => editingAddress = null;

    private void UpdateAddress()
    {
        if (editingAddress != null)
        {
            var target = savedAddresses.FirstOrDefault(a => a.Id == editingAddress.Id);
            if (target != null) { target.Name = editingAddress.Name; target.Street = editingAddress.Street; target.City = editingAddress.City; target.PostalCode = editingAddress.PostalCode; target.IsBilling = editingAddress.IsBilling; target.IsShipping = editingAddress.IsShipping; }
            editingAddress = null;
        }
    }

    private void DeleteAddress(AddressItem addr) { if (editingAddress?.Id == addr.Id) editingAddress = null; savedAddresses.Remove(addr); if (addr.IsPrimary && savedAddresses.Any()) savedAddresses.First().IsPrimary = true; }

    private void SetPrimary(AddressItem target, ChangeEventArgs e)
    {
        var isChecked = (bool)(e.Value ?? false);
        if (isChecked) { foreach (var addr in savedAddresses) addr.IsPrimary = (addr.Id == target.Id); }
        else target.IsPrimary = false;
    }

    public class AddressItem { public int Id { get; set; } public string Name { get; set; } = ""; public string Street { get; set; } = ""; public string City { get; set; } = ""; public string PostalCode { get; set; } = ""; public bool IsBilling { get; set; } public bool IsShipping { get; set; } public bool IsPrimary { get; set; } }
    public class OrderItem { public string OrderId { get; set; } = ""; public string ProductId { get; set; } = ""; public string ProductTitle { get; set; } = ""; public DateTime OrderDate { get; set; } public string ShippingAddressName { get; set; } = ""; public string Status { get; set; } = ""; public double Total { get; set; } }
}