@page "/alias/{id:guid}"
@inherits PageBase
@using AliasVault.Shared.Models.WebApi
@using AliasVault.WebApp.Components.Email
@inject AliasService AliasService

<LayoutPageTitle>View alias</LayoutPageTitle>

@if (IsLoading || Alias == null)
{
    <LoadingIndicator />
}
else
{

    <div class="grid grid-cols-2 px-4 pt-6 md:grid-cols-3 lg:gap-4 dark:bg-gray-900">
        <div class="mb-4 col-span-full xl:mb-2">
            <Breadcrumb BreadcrumbItems="BreadcrumbItems"/>

            <div class="flex items-center justify-between">
                <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">View alias</h1>
                <div class="flex">
                <a href="/alias/@Id/edit" class="mr-3 px-4 py-2 text-white bg-primary-600 rounded-lg hover:bg-primary-700 focus:ring-4 focus:ring-primary-300 dark:bg-primary-500 dark:hover:bg-primary-600 dark:focus:ring-primary-800">
                    Edit alias
                </a>
                <a href="/alias/@Id/delete" class="px-4 py-2 text-white bg-red-600 rounded-lg hover:bg-red-700 focus:ring-4 focus:ring-red-300 dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-800">
                    Delete alias
                </a>
                </div>
            </div>
        </div>

        <!-- Right Content -->
        <div class="col-span-full lg:col-auto">
            <div class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
                <div class="items-center sm:flex xl:block 2xl:flex sm:space-x-4 xl:space-x-0 2xl:space-x-4">
                    <img class="mb-4 rounded-lg w-28 h-28 sm:mb-0 xl:mb-4 2xl:mb-0" src="/img/service-placeholder.webp" alt="Service logo">
                    <div>
                        <h3 class="mb-1 text-xl font-bold text-gray-900 dark:text-white">@Alias.Service.Name</h3>
                    </div>
                </div>
            </div>
            <div class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
                <RecentEmails EmailPrefix="@Alias.Identity.EmailPrefix" />
            </div>
        </div>
        <div class="col-span-2">
            <div class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
                <h3 class="mb-4 text-xl font-semibold dark:text-white">Login credentials</h3>
                <form action="#">
                    <div class="grid gap-6">
                        <div class="col-span-6 sm:col-span-3">
                            <CopyPasteFormRow Label="Email" Value="@AliasEmail"></CopyPasteFormRow>
                        </div>
                        <div class="col-span-6 sm:col-span-3">
                            <CopyPasteFormRow Label="Username" Value="@(Alias.Identity.NickName)"></CopyPasteFormRow>
                        </div>
                        <div class="col-span-6 sm:col-span-3">
                            <CopyPasteFormRow Label="Password" Value="@(Alias.Password.Value)"></CopyPasteFormRow>
                        </div>
                    </div>
                </form>
            </div>
            <div class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
                <h3 class="mb-4 text-xl font-semibold dark:text-white">Name</h3>
                <form action="#">
                    <div class="grid grid-cols-6 gap-6">
                        <div class="col-span-6 sm:col-span-3">
                            <CopyPasteFormRow Label="Initials" Value="@(Alias.Identity.FirstName?.Substring(0,1))"></CopyPasteFormRow>
                        </div>
                        <div class="col-span-6 sm:col-span-3">
                            <CopyPasteFormRow Label="First name" Value="@(Alias.Identity.FirstName)"></CopyPasteFormRow>
                        </div>
                        <div class="col-span-6 sm:col-span-3">
                            <CopyPasteFormRow Label="Last name" Value="@(Alias.Identity.LastName)"></CopyPasteFormRow>
                        </div>
                        <div class="col-span-6 sm:col-span-3">
                            <CopyPasteFormRow Label="Birthdate" Value="@(Alias.Identity.BirthDate)"></CopyPasteFormRow>
                        </div>
                    </div>
                </form>
            </div>

            <div class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
                <h3 class="mb-4 text-xl font-semibold dark:text-white">Contact</h3>
                <form action="#">
                    <div class="grid grid-cols-6 gap-6">
                        <div class="col-span-6 sm:col-span-3">
                            <CopyPasteFormRow Label="Phone" Value="@(Alias.Identity.PhoneMobile)"></CopyPasteFormRow>
                        </div>
                        <div class="col-span-6 sm:col-span-3">
                            <CopyPasteFormRow Label="IBAN" Value="@(Alias.Identity.BankAccountIBAN)"></CopyPasteFormRow>
                        </div>
                    </div>
                </form>
            </div>

            <div class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
                <h3 class="mb-4 text-xl font-semibold dark:text-white">Address</h3>
                <form action="#">
                    <div class="grid grid-cols-6 gap-6">
                        <div class="col-span-6 sm:col-span-3">
                            <CopyPasteFormRow Label="Street" Value="@(Alias.Identity.AddressStreet)"></CopyPasteFormRow>
                        </div>
                        <div class="col-span-6 sm:col-span-3">
                            <CopyPasteFormRow Label="Postal code" Value="@(Alias.Identity.AddressZipCode)"></CopyPasteFormRow>
                        </div>
                        <div class="col-span-6 sm:col-span-3">
                            <CopyPasteFormRow Label="City" Value="@(Alias.Identity.AddressCity)"></CopyPasteFormRow>
                        </div>
                        <div class="col-span-6 sm:col-span-3">
                            <CopyPasteFormRow Label="Country" Value="@(Alias.Identity.AddressCountry)"></CopyPasteFormRow>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
}

@code {
    [Parameter]
    public Guid Id { get; set; }
    private bool IsLoading { get; set; } = true;
    private Alias? Alias { get; set; } = new();
    private string AliasEmail { get; set; } = string.Empty;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        BreadcrumbItems.Add(new BreadcrumbItem { DisplayName = "View alias" });
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await LoadAliasesAsync();
        }
    }

    private async Task LoadAliasesAsync()
    {
        IsLoading = true;
        StateHasChanged();

        // Load the aliases from the webapi via AliasService.
        Alias = await AliasService.LoadAliasAsync(Id);

        if (Alias is null)
        {
            // Error loading alias.
            GlobalNotificationService.AddErrorMessage("This alias does not exist (anymore). Please try again.");
            NavigationManager.NavigateTo("/", false, true);
            return;
        }

        AliasEmail = Alias.Identity.EmailPrefix + "@landmail.nl";

        IsLoading = false;
        StateHasChanged();
    }
}
