@page "/admin/api"

@using MoonCore.Helpers
@using MoonCore.Models
@using MoonCore.Blazor.Tailwind.Dt
@using Moonlight.Shared.Http.Responses.Admin.ApiKeys

@inject HttpApiClient ApiClient
@inject AlertService AlertService
@inject ToastService ToastService

<div class="grid grid-cols-1 sm:grid-cols-3 mb-8 gap-x-3 gap-y-2 sm:gap-y-0">
    <div class="col-span-1 card card-body border-l-4 border-primary">
        <p class="font-medium tracking-wide text-slate-100">
            API Documentation
        </p>
        <a href="/api/swagger" target="_blank" class="mt-2 flex items-center justify-between text-primary">
            <div class="font-medium">Open</div>
            <div>
                <i class="bi bi-box-arrow-up-right text-lg text-primary"></i>
            </div>
        </a>
    </div>

    <div class="col-span-1 card card-body border-l-4 border-tertiary">
        <p class="font-medium tracking-wide text-slate-100">
            Learn about the api usage
        </p>
        <a href="https://help.moonlightpanel.xyz" target="_blank" class="mt-2 flex items-center justify-between text-primary">
            <div class="font-medium">Open</div>
            <div>
                <i class="bi bi-box-arrow-up-right text-lg text-tertiary"></i>
            </div>
        </a>
    </div>

    <div class="col-span-1 card card-body border-l-4 border-success">
        <p class="font-medium tracking-wide text-slate-100">
            Open API Specification
        </p>
        <a href="/api/swagger/main" target="_blank" class="mt-2 flex items-center justify-between text-primary">
            <div class="font-medium">Open</div>
            <div>
                <i class="bi bi-box-arrow-up-right text-lg text-success"></i>
            </div>
        </a>
    </div>
</div>

<div class="mb-5 flex justify-end">
    <a href="/admin/api/create" class="btn btn-primary">
        Create
    </a>
</div>

<DataTable @ref="Table" TItem="ApiKeyResponse">
    <Configuration>
        <Pagination TItem="ApiKeyResponse" ItemSource="LoadData" />
        
        <DataTableColumn TItem="ApiKeyResponse" Field="@(x => x.Id)" Name="Id"/>
        <DataTableColumn TItem="ApiKeyResponse" Field="@(x => x.Description)" Name="Description"/>
        <DataTableColumn TItem="ApiKeyResponse" Field="@(x => x.ExpiresAt)" Name="Expires at">
            <ColumnTemplate>
                @(Formatter.FormatDate(context.ExpiresAt))
            </ColumnTemplate>
        </DataTableColumn>
        <DataTableColumn TItem="ApiKeyResponse">
            <ColumnTemplate>
                <div class="flex justify-end">
                    <a href="/admin/api/@(context.Id)" class="text-primary mr-2 sm:mr-3">
                        <i class="icon-pencil text-base"></i>
                    </a>

                    <a href="#" @onclick="() => Delete(context)" @onclick:preventDefault
                       class="text-danger">
                        <i class="icon-trash text-base"></i>
                    </a>
                </div>
            </ColumnTemplate>
        </DataTableColumn>
    </Configuration>
</DataTable>

@code
{
    private DataTable<ApiKeyResponse> Table;
    
    private async Task<IPagedData<ApiKeyResponse>> LoadData(PaginationOptions options)
     => await ApiClient.GetJson<PagedData<ApiKeyResponse>>($"api/admin/apikeys?page={options.Page}&pageSize={options.PerPage}");

    private async Task Delete(ApiKeyResponse apiKeyResponse)
    {
        await AlertService.ConfirmDanger(
            "API Key deletion",
            $"Do you really want to delete the api key '{apiKeyResponse.Description}'",
            async () =>
            {
                await ApiClient.Delete($"api/admin/apikeys/{apiKeyResponse.Id}");
                await ToastService.Success("Successfully deleted api key");

                await Table.Refresh();
            }
        );
    }
}