@using Manager.App.Services.System
@inject ISnackbar SnackbarService
@inject CacheService Cache

<ForcedLoadingOverlay Visible="_isLoading"/>

@{
    var client = PreparingClient?.YouTubeClient;
    var clientState = client?.State;
    var channel = PreparingClient?.Channel;
    var avatar = channel?.AvatarImages.FirstOrDefault();
    var banner = channel?.BannerImages.FirstOrDefault();
}
<MudDialog>
    <TitleContent>
        <MudText Typo="Typo.h6">Add new account</MudText>
    </TitleContent>
    <DialogContent>
        @switch (_steps)
        {
            case AccountImportSteps.Authenticate:
                <MudStack Spacing="2">
                    <MudPaper Elevation="0" Outlined Class="pa-2">
                        <MudTextField @bind-Value="@DefaultUserAgent" Required Label="User agent"
                                      HelperText="Use an WEB user agent."/>
                    </MudPaper>

                    <MudStack Row Spacing="2" Style="height: 100%">
                        <MudPaper Elevation="0" Outlined Class="pa-2" Style="width: 50%;">
                            <MudText>Import cookies</MudText>
                            <MudText Typo="Typo.caption">@($"{ImportCookies.Count} cookie(s) imported")</MudText>
                            <MudForm @bind-IsValid="@_cookieImportTextValid">
                                <MudTextField @bind-Value="@_cookieDomain" Immediate Required Label="Domain"
                                              RequiredError="Domain is required."/>
                                <MudTextField Class="my-2" Lines="4" AutoGrow @bind-Value="@_cookieText" Immediate
                                              Required Label="Cookies" Variant="Variant.Outlined"
                                              Placeholder="EXAMPLE: Cookie1=Value1; Cookie2=Value2;"
                                              Validation="@(new Func<string, string?>(ValidateCookieText))"/>
                                <MudButton Variant="Variant.Outlined" Disabled="@(!_cookieImportTextValid)"
                                           OnClick="ParseCookies">Import
                                </MudButton>
                            </MudForm>
                        </MudPaper>

                        <MudDataGrid Items="ImportCookies" Dense Elevation="0" Outlined Style="width: 50%;">
                            <Header>
                                <MudStack Class="ma-2">
                                    <MudText>Cookies</MudText>
                                </MudStack>
                            </Header>
                            <Columns>
                                <TemplateColumn Title="Name">
                                    <CellTemplate>
                                        <MudTextField Variant="Variant.Text" @bind-Value="@context.Item.Name"
                                                      Immediate/>
                                    </CellTemplate>
                                </TemplateColumn>
                                <TemplateColumn Title="Domain">
                                    <CellTemplate>
                                        <MudTextField Variant="Variant.Text" @bind-Value="@context.Item.Domain"
                                                      Immediate/>
                                    </CellTemplate>
                                </TemplateColumn>
                                <TemplateColumn Title="Value">
                                    <CellTemplate>
                                        <MudTextField Variant="Variant.Text" @bind-Value="@context.Item.Value"
                                                      Immediate/>
                                    </CellTemplate>
                                </TemplateColumn>
                            </Columns>
                        </MudDataGrid>
                    </MudStack>
                </MudStack>
                break;
            case AccountImportSteps.Validate:
                <MudStack Spacing="3">
                    <MudPaper Elevation="0">
                        @if (banner != null)
                        {
                            <MudImage Src="@Cache.CreateCacheUrl(banner.Url)" Height="250" Style="width: 100%;"/>
                        }
                        else
                        {
                            <div Class="account-banner" Style="height: 250px; width: 100%;"></div>
                        }
                        <MudStack Row Spacing="3" Class="px-4">
                            @if (avatar != null)
                            {
                                <MudImage Src="@Cache.CreateCacheUrl(avatar.Url)" Class="mt-n5" Height="100" Width="100"/>
                            }
                            else
                            {
                                <div Class="avatar-pattern mt-n6" Style="height: 100px; width: 100px;"></div>
                            }
                            <MudStack Spacing="0">
                                <MudText Typo="Typo.h5">@(channel?.ChannelName ?? client?.Id)</MudText>
                                <MudText Typo="Typo.caption">@(string.IsNullOrWhiteSpace(channel?.Description) ? "No description!" : channel.Description)</MudText>
                            </MudStack>
                        </MudStack>
                    </MudPaper>
                    
                    <MudSimpleTable Bordered Dense Elevation="0" Outlined Square Hover>
                        <tbody>
                        <tr>
                            <td>Account id:</td>
                            <td>@client?.Id</td>
                        </tr>
                        <tr>
                            <td>Account name:</td>
                            <td>@channel?.ChannelName</td>
                        </tr>
                        <tr>
                            <td>Account handle:</td>
                            <td>@channel?.Handle</td>
                        </tr>
                        <tr>
                            <td>Logged in:</td>
                            <td style="@($"color: {(clientState?.LoggedIn ?? false ? "green" : "red")}")">@clientState?.LoggedIn</td>
                        </tr>
                        <tr>
                            <td>YouTube Premium:</td>
                            <td style="@($"color: {(clientState?.IsPremiumUser ?? false ? "green" : "red")}")">@clientState?.IsPremiumUser</td>
                        </tr>

                        <tr>
                            <td>User agent:</td>
                            <td>@client?.UserAgent</td>
                        </tr>
                        <tr>
                            <td>InnerTube client:</td>
                            <td>@clientState?.InnerTubeClient</td>
                        </tr>
                        <tr>
                            <td>InnerTube client version:</td>
                            <td>@clientState?.InnerTubeClientVersion</td>
                        </tr>
                        <tr>
                            <td>InnerTube API key:</td>
                            <td>@clientState?.InnertubeApiKey</td>
                        </tr>
                        <tr>
                            <td>Language:</td>
                            <td>@clientState?.InnerTubeContext?.InnerTubeClient?.HLanguage</td>
                        </tr>
                        </tbody>
                    </MudSimpleTable>
                </MudStack>
                break;
        }
    </DialogContent>
    <DialogActions>
        <MudStack Spacing="2" Row>
            <MudButton Color="Color.Error" OnClick="() => MudDialog?.Cancel()" Variant="Variant.Outlined">Cancel
            </MudButton>
            <MudButton Color="Color.Info" OnClick="ClearPreparedClient" Variant="Variant.Outlined">Reset</MudButton>
            <MudButton Color="Color.Primary" OnClick="OnNextStep" Disabled="@(!CanContinue())" Variant="Variant.Outlined">@(_steps == AccountImportSteps.Validate ? "Save" : "Next")</MudButton>
        </MudStack>
    </DialogActions>
</MudDialog>

<style>
    .account-banner {
        width: 100%;
        height: 180px;
        display: flex;
        align-items: flex-end;
        padding: 1rem;
        border-radius: 12px;

        /* Pattern background */
        background: repeating-linear-gradient(
            135deg,
            #1976d2,       /* MudBlazor Primary */
            #1976d2 20px,
            #1565c0 20px,
            #1565c0 40px
        );
        color: white;
    }

    .avatar-pattern {
        width: 80px;
        height: 80px;
        font-weight: bold;
        font-size: 1.5rem;
        color: white;

        /* Patterned background */
        background: repeating-linear-gradient(
            45deg,
            #1976d2,
            #1976d2 10px,
            #1565c0 10px,
            #1565c0 20px
        );
    }
</style>