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

<ForcedLoadingOverlay Visible="_isLoading"/>

@{
    var client = ClientChannel?.YouTubeClient;
    var clientState = client?.State;
    var channel = ClientChannel?.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 (Netscape Cookie format)</MudText>
                            <MudStack Spacing="2">
                                <MudStack Row Spacing="2">
                                    <MudFileUpload T="IBrowserFile" Accept=".txt" FilesChanged="UploadFiles">
                                        <ActivatorContent>
                                            <MudButton Variant="Variant.Filled"
                                                       Color="Color.Primary"
                                                       StartIcon="@Icons.Material.Filled.CloudUpload">
                                                Upload cookie txt
                                            </MudButton>
                                        </ActivatorContent>
                                    </MudFileUpload>
                                    <MudButton Variant="Variant.Outlined"
                                               OnClick="ParseCookies" Disabled="@(string.IsNullOrWhiteSpace(_cookieText))">Import
                                    </MudButton>
                                </MudStack>
                                @if (MissingCookies.Any())
                                {
                                    <MudPaper Class="pa-2" Elevation="0" Outlined>
                                        <MudAlert Severity="Severity.Warning" Square Class="mb-2 mt-3">Some required cookies are not found, add the following cookie(s) to continue.</MudAlert>
                                        <MudChipSet T="string" ReadOnly>
                                            @foreach (var missingCookieName in MissingCookies)
                                            {
                                                <MudChip Variant="Variant.Text" Color="Color.Info">@missingCookieName</MudChip>
                                            }
                                        </MudChipSet>
                                    </MudPaper>
                                }
                                <MudTextField Class="my-2" Lines="4" AutoGrow @bind-Value="@_cookieText" Immediate
                                              Required Label="Cookies" Variant="Variant.Outlined"/>
                            </MudStack>
                        </MudPaper>

                        <MudDataGrid Items="ImportCookies" Dense Elevation="0" Outlined Style="width: 50%;">
                            <ToolBarContent>
                                <MudText>Cookies</MudText>
                                <MudSpacer />
                                <MudText Typo="Typo.caption">@($"{ImportCookies.Count} cookie(s)")</MudText>
                            </ToolBarContent>
                            <Columns>
                                <TemplateColumn Title="Name">
                                    <CellTemplate>
                                        <MudText>@context.Item.Name</MudText>
                                    </CellTemplate>
                                </TemplateColumn>
                                <TemplateColumn Title="Domain">
                                    <CellTemplate>
                                        <MudText>@context.Item.Domain</MudText>
                                    </CellTemplate>
                                </TemplateColumn>
                                <TemplateColumn Title="Expires">
                                    <CellTemplate>
                                        <MudText>@context.Item.Expires</MudText>
                                    </CellTemplate>
                                </TemplateColumn>
                                <TemplateColumn Title="Value">
                                    <CellTemplate>
                                        <MudTooltip Text="@context.Item.Value">
                                            <MudText Style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px;">@context.Item.Value</MudText>
                                        </MudTooltip>
                                    </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>