@page "/sites"
@attribute [Authorize]
@using BLAIzor.Components.Layout
@using BLAIzor.Models
@using BLAIzor.Services
@using Microsoft.AspNetCore.Components.Authorization
@layout AdminLayout
@inject ScopedContentService SiteInfoService
@inject ContentService ContentService
@inject NavigationManager NavigationManager
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject CustomAuthenticationStateProvider CustomAuthProvider
@inject IJSRuntime JSRuntime

<h1>Your Sites</h1>
<div class="row g-0">
    <RadzenPanel Collapsed="true" AllowCollapse="true" class="rz-my-5 rz-mx-auto" Style="width: 100%"
                 Expand=@(() => Change("Panel expanded")) Collapse=@(() => Change("Panel collapsed"))>
        <HeaderTemplate>
            <RadzenText TextStyle="TextStyle.H6" class="rz-display-flex rz-align-items-center rz-m-0">
                <RadzenIcon Icon="account_box" class="rz-me-1" /><b>New site</b>
            </RadzenText>
        </HeaderTemplate>
        <ChildContent>
            <RadzenCard class="rz-mt-4">
                <EditForm Model="newSite" OnValidSubmit="HandleValidSubmit">
                    <DataAnnotationsValidator />
                    <ValidationSummary />
                    <div class="row">
                        <div class="col-12 col-md-3 mb-3">
                            <label for="siteName" class="form-label">Site Name</label>
                            <InputText id="siteName" placeholder="Site name" class="form-control" @bind-Value="newSite.SiteName" />
                        </div>
                        <div class="col-12 col-md-3 mb-3">
                            <label for="brandLogoUrl" class="form-label">Brand Logo URL</label>
                            <InputText id="brandLogoUrl" placeholder="Logo url" class="form-control" @bind-Value="newSite.BrandLogoUrl" />
                        </div>
                        <div class="col-12 col-md-3 mb-3">
                            <label for="defaultColor" class="form-label">Default Color</label>
                            <InputText id="defaultColor" placeholder="Default color" class="form-control" @bind-Value="newSite.DefaultColor" />
                        </div>
                        <div class="col-12 col-md-3">
                            <label for="domainUrl">Domain URL</label>
                            <InputText id="domainUrl" placeholder="Domain url" class="form-control" @bind-Value="newSite.DomainUrl" />
                        </div>
                        <div class="col-12 col-md-12 mb-3">
                            <label for="siteName" class="form-label">Site description</label>
                            <InputText id="siteDescription" placeholder="A description so AI will know what is this site about" class="form-control" @bind-Value="newSite.SiteDescription" />
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary">Create Site</button>
                </EditForm>

            </RadzenCard>


        </ChildContent>

    </RadzenPanel>

    @if (siteInfoList.Any())
    {

        <RadzenPanel AllowCollapse="true" class="rz-my-5 rz-mx-auto" Style="width: 100%"
                     Expand=@(() => Change("Panel expanded")) Collapse=@(() => Change("Panel collapsed"))>
            <HeaderTemplate>
                <RadzenText TextStyle="TextStyle.H6" class="rz-display-flex rz-align-items-center rz-m-0">
                    <RadzenIcon Icon="account_box" class="rz-me-1" /><b>Sites created</b>
                </RadzenText>
            </HeaderTemplate>
            <ChildContent>
                <RadzenCard class="rz-mt-4">
                    <RadzenDataList PageSize="3" WrapItems="true" AllowPaging="true"
                                    Data="@siteInfoList" TItem="SiteInfo">
                        <Template Context="site">
                            <RadzenCard Style="width: 250px; background-color: darkgrey">
                                <RadzenRow JustifyContent="@JustifyContent.SpaceBetween">
                                    <RadzenColumn Size="4" class="rz-text-truncate">
                                        <RadzenBadge BadgeStyle="BadgeStyle.Light" Text=@($"{site.Id}") class="rz-me-1" />
                                        <b>@(site.SiteName)</b>
                                    </RadzenColumn>
                                    <RadzenColumn Size="8" class="rz-text-align-end">
                                        <RadzenBadge BadgeStyle="BadgeStyle.Success" Text=@($"new") />
                                    </RadzenColumn>
                                </RadzenRow>
                                <hr style="border: none; background-color: var(--rz-text-disabled-color); height: 1px; margin: 1rem 0;" />
                                <RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center" Gap="1rem">
                                    <RadzenImage Path="@site.BrandLogoUrl" class="img-fluid" Style="max-height: 100px;" AlternateText="@(site.SiteName)" />
                                    <RadzenStack Gap="0">
                                        <RadzenText TextStyle="TextStyle.H6" class="rz-mb-0">@(site.SiteName)</RadzenText>
                                        <RadzenText TextStyle="TextStyle.Body1">@site.DefaultUrl</RadzenText>
                                        <RadzenText TextStyle="TextStyle.Body2">Fefault color: @(site.DefaultColor)</RadzenText>
                                        <RadzenText TextStyle="TextStyle.Body2">Theme: @(site.TemplateId)</RadzenText>
                                    </RadzenStack>
                                </RadzenStack>
                                <RadzenStack Orientation="@Orientation.Horizontal" Gap="10px" Reverse="false" JustifyContent="@JustifyContent.Center" AlignItems="@AlignItems.Center" Wrap="@FlexWrap.Wrap" Style="height: fit-content">

                                    <a style="font-size: 14px;" href="/site-info/@site.Id" class="btn btn-secondary">Edit</a>
                                    <a style="font-size: 14px;" href="/generate-content/@site.Id" class="btn btn-secondary">Manage content</a>
                                    <a style="font-size: 14px;" @onclick="()=>Preview(site)" class="btn btn-secondary"> Preview</a>

                                </RadzenStack>
                            </RadzenCard>
                        </Template>
                    </RadzenDataList>
                </RadzenCard>
            </ChildContent>
            <SummaryTemplate>
                <RadzenCard class="rz-mt-4">
                    <b>@siteInfoList.Count() Sites</b>
                </RadzenCard>
            </SummaryTemplate>
        </RadzenPanel>


        @* foreach (var item in siteInfoList)
        {
            <div class="col-xs-12 col-md-4">
                <div class="card m-2">
                    <div class="card-header">
                        <h5 class="card-title">@item.SiteName</h5>
                    </div>
                    <div class="card-body">
                        <a @onclick="()=>visit(item)">
                        <div style="width: 100%; height: 150px;">
                            <img src="@item.BrandLogoUrl" class="img-fluid rounded-start" style="max-height:150px;" alt="Brand Logo">
                        </div>

                        <p class="card-text"><small class="text-muted">Owner: @userName</small></p>
                        <p class="card-text"><small class="text-muted">Url: @item.DefaultUrl</small></p>
                        </a>
                    </div>
                    <div class="card-footer">
                        <a href="/site-info/@item.Id" class="btn btn-secondary">Edit</a>
                        <a href="/generate-content/@item.Id" class="btn btn-secondary">Manage content</a>
                         <a @onclick="()=>Preview(item)" class="btn btn-secondary"> Preview</a>
                    </div>

                </div>
            </div>
        } *@
    }
    else
    {
        <p>No sites created yet.</p>
    }
</div>




@code {
    private IEnumerable<SiteInfo> siteInfoList = new List<SiteInfo>();
    private SiteInfo newSite = new();
    private string? userId;
    private string? userName;
    private AuthenticationState? authState;
    int position = 1;

    void Change(string text)
    {
        Console.Write($"{text}");
    }

    private void visit(SiteInfo site)
    {
        SiteInfoService.SelectedBrandName = site.SiteName;
        SiteInfoService.SelectedSiteId = site.Id;
        NavigationManager.NavigateTo(site.DefaultUrl, true);
    }

    private async Task Preview(SiteInfo site)
    {
        string myUrl = $"/preview/{site.Id}";

        try
        {
            await JSRuntime.InvokeVoidAsync("open", myUrl, "_blank");
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error opening new tab: {ex.Message}");
        }
    }

    protected override async Task OnInitializedAsync()
    {
        authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
        if (authState.User.Identity?.IsAuthenticated == true)
        {
            userId = CustomAuthProvider.GetUserId();
            userName = CustomAuthProvider.GetUserName();
        }
        siteInfoList = await SiteInfoService.GetUserSitesAsync(userId!);
    }

    private async Task HandleValidSubmit()
    {
        newSite.UserId = userId;
        newSite.TemplateId = 1;
        newSite.DefaultUrl = await GenerateSubdomainAsync(newSite.SiteName);
        var result = await SiteInfoService.AddSiteInfoAsync(newSite);
        siteInfoList = await SiteInfoService.GetUserSitesAsync(userId!);
        newSite = new(); // Reset the form
    }
    public async Task<string> GenerateSubdomainAsync(string siteName)
    {
        var normalizedSiteName = siteName.ToLower()
            .Replace(" ", "-")
            .Replace("_", "-")
            .Replace(".", "-");

        var subdomain = $"{normalizedSiteName}.seemgen.com";

        // var site = await SiteInfoService.GetSiteInfoByIdAsync(siteId);
        // if (site != null)
        // {
        //     site.DefaultUrl = subdomain;
        //     await SiteInfoService.UpdateSiteInfoAsync(site);
        // }

        return subdomain;
    }

}