@page "/circles"
@using JSMR.Application.Circles.Queries.Search
@using JSMR.Application.Common.Search
@using JSMR.UI.Blazor.Components
@using JSMR.UI.Blazor.Filters
@using JSMR.UI.Blazor.Services
@using JSMR.UI.Blazor.Shared
@inject VoiceWorksClient Client
@inject HttpClient Http

@inherits SearchPageBase<CircleFilterState, CircleSearchItem>

<PageTitle>Circles</PageTitle>

<h1>Circles</h1>

<CircleFilters Value="@State" ValueChanged="UpdateAsync"></CircleFilters>

@if (Result is null)
{
    <p>Loading…</p>
}
else if (Result.Items.Length == 0)
{
    <p>No results.</p>
}
else
{
    <div class="circle-item-container-2">
        @foreach (var item in Result.Items)
        {
            <div class="circle-item">
                <JImage @key="item.CircleId" ContainerClass="j-circle-image-container-2" ImageClass="j-circle-image-2" Source="@ImageUrlProvider.GetImageURL(item.LatestProductId, item.LatestVoiceWorkHasImage ?? false, item.LatestVoiceWorkSalesDate, "main")" />

                <div class="fdfs">
                    <div class="circle-name">@item.Name</div>
                    <div>@item.MakerId</div>
                </div>

                @if (item.Favorite)
                {
                    <MudChip T="string" Label="true" Color="Color.Info" Style="width: 100%" Variant="MudBlazor.Variant.Outlined">Favorite</MudChip>
                }
                else if (item.Blacklisted)
                {
                    <MudChip T="string" Label="true" Color="Color.Warning" Style="width: 100%" Variant="MudBlazor.Variant.Outlined">Blacklisted</MudChip>
                }
                else if (item.Spam)
                {
                    <MudChip T="string" Label="true" Color="Color.Error" Style="width: 100%" Variant="MudBlazor.Variant.Outlined">Spam</MudChip>
                }
                else
                {
                    <MudChip T="string" Label="true" Style="width: 100%" Variant="MudBlazor.Variant.Outlined">Normal</MudChip>
                }

                <div class="circle-star-container">
                @if (item.Releases > 0)
                {
                    <div class="circle-star @GetStarRatingClass(item)"></div>
                }
                </div>

                <div class="icon-text">
                    <MudIcon Icon="@Icons.Material.Outlined.Headphones" />
                    <span>@item.Releases</span>
                    @if (item.Pending > 0)
                    {
                        <span>/</span>
                        <span style="color: #ffa462">@item.Pending</span>
                    }
                </div>

                <div class="icon-text">
                    <MudIcon Icon="@Icons.Material.Outlined.ArrowCircleDown" />
                    <span>@item.Downloads.ToString("n0")</span>
                </div>

            </div>
        }
    </div>

    <JPagination PageNumber="@State.PageNumber"
                 PageNumberChanged="@(pageNumber => UpdateAsync(State with { PageNumber = pageNumber }))"
                 PageSize="@State.PageSize"
                 PageSizeChanged="@(pageSize => UpdateAsync(State with { PageSize = pageSize, PageNumber = 1 }))"
                 @bind-TotalItems="Result.TotalItems" />
}

<style>
    .circle-item-container-2 {
        display: flex;
        flex-direction: column;
        gap: 1.5em;
    }

    .circle-item {
        display: flex;
        align-items: center;
        padding: .5rem;
        border-width: 2px;
        border-top-color: #353B4C;
        border-left-color: #212630;
        border-right-color: #212531;
        border-bottom-color: #212530;
        border-radius: 30px;
        background-image: linear-gradient(0deg, #1C2029, #1C1F28);
        display: grid;
        grid-template-columns: auto 1fr 100px 100px 100px 100px;
        grid-column-gap: 1rem;
    }

    .j-circle-image-container-2 {
        height: auto;
    }

    .j-circle-image-2 {
        display: block;
        object-fit: cover;
        background-color: black;
        border: 1px solid #949494;
        box-sizing: border-box;
        border-radius: 100%;
        width: 70px;
        height: 70px;
    }

    .circle-name {
        color: #d2dce6;
        font-size: 1.5rem;
        font-weight: 500;
        font-family: "M+ 1p";
    }

    .icon-text {
        display: flex;
        align-items: center;
        gap: .5rem;
        font-size: 1rem;
    }

        .icon-text > .mud-icon-root.mud-svg-icon {
            fill: #737890;
        }

    .mud-table-root {
        table-layout: fixed;
    }

    .j-pager {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        justify-content: center;
        z-index: 2;
        background: var(--mud-palette-background);
        padding: .5em 1em;
    }

    .circle-name-container {
        display: inline-flex;
        flex-direction: column;
        gap: .5rem;
    }

    .circle-name {
        font-size: 1.2rem;
        font-weight: 600;
    }

    .maker-id {
        margin: 0;
    }
</style>

@code {
    protected override CircleFilterState ParseStateFromUri(string absoluteUri)
        => CircleFilterState.FromQuery(new Uri(absoluteUri).Query);

    protected override string BuildUri(CircleFilterState state)
    {
        var basePath = new Uri(Nav.Uri).GetLeftPart(UriPartial.Path);
        return Microsoft.AspNetCore.WebUtilities.QueryHelpers.AddQueryString(basePath, state.ToQuery());
    }

    protected override bool IsThisPage(string absoluteUri)
        => Nav.ToBaseRelativePath(absoluteUri).StartsWith("circles", StringComparison.OrdinalIgnoreCase);

    protected override Task<SearchResult<CircleSearchItem>> ExecuteSearchAsync(CircleFilterState state, CancellationToken ct)
        => Client.SearchAsync(state.ToSearchRequest(), ct).ContinueWith(t => t.Result?.Results ?? new SearchResult<CircleSearchItem>(), ct);

    private string GetStarRatingClass(CircleSearchItem item)
    {
        double averageDownloads = item.Downloads / item.Releases;

        if (averageDownloads < 100)
        {
            return "circle-star-poor";
        }

        if (averageDownloads < 250)
        {
            return "circle-star-below-average";
        }

        if (averageDownloads < 500)
        {
            return "circle-star-average";
        }

        if (averageDownloads < 1000)
        {
            return "circle-star-above-average";
        }

        if (averageDownloads < 2000)
        {
            return "circle-star-popular";
        }

        if (averageDownloads < 4000)
        {
            return "circle-star-super-popular";
        }

        if (averageDownloads < 8000)
        {
            return "circle-star-ultra-popular";
        }

        return "circle-star-god-tier";
    }
}