@page "/design-templates"
@using BLAIzor.Components.Layout
@using BLAIzor.Models
@using BLAIzor.Services
@using Microsoft.AspNetCore.Components.Authorization
@attribute [Authorize]
@layout AdminLayout
@inject DesignTemplateService DesignTemplateService
@inject CssTemplateService CssTemplateService
@inject NavigationManager NavigationManager
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject CustomAuthenticationStateProvider CustomAuthProvider

<h3>Design Template Manager</h3>

@if (isLoading)
{
    <p>Loading...</p>
}
else
{
        <h4>Your Templates</h4>
    <div class="row g-0">
        
            @foreach (var template in userTemplates)
            {
                <div class="col-xs-12 col-md-4">
                    <div class="card m-2">
                        <div class="card-header">
                            <h5 class="card-title">@template.TemplateName</h5>
                            (@template.Status)
                        </div>
                        <div class="card-body">
                            
                                <div style="width: 100%; height: 150px;">
                                    <img src="@template.TemplatePhotoUrl" class="img-fluid rounded-start" style="max-height:150px;" alt="design image">
                                </div>

                                <p class="card-text"><small class="text-muted">Description: @template.Description</small></p>
                                <p class="card-text"><small class="text-muted">Version: @template.Version</small></p>
                            
                        </div>
                        <div class="card-footer">
                            <button class="btn btn-sm btn-primary" @onclick="() => EditTemplate(template.Id)">Edit</button>
                            <button class="btn btn-sm btn-danger" @onclick="() => DeleteTemplate(template.Id)">Delete</button>
                        </div>

                    </div>
                </div>

                    
               
            }
        
    </div>

    <hr />

    <div>
        <h4>Create New Template</h4>
        <EditForm Model="newTemplate" OnValidSubmit="CreateTemplate">
            <DataAnnotationsValidator />
            <ValidationSummary />

            <div class="form-group">
                <label>Template Name</label>
                <InputText class="form-control" @bind-Value="newTemplate.TemplateName" />
            </div>

            <div class="form-group">
                <label>Description</label>
                <InputTextArea class="form-control" @bind-Value="newTemplate.Description" />
            </div>

            <div class="form-group">
                <label>Tags (comma-separated)</label>
                <InputText class="form-control" @bind-Value="newTemplate.Tags" />
            </div>

            <div class="form-group">
                <label>CSS Content</label>
                <InputTextArea class="form-control" @bind-Value="newCssTemplate.CssContent" />
            </div>

            <button class="btn btn-success" type="submit">Create Template</button>
        </EditForm>
    </div>

}

@code {
    private bool isLoading = true;
    private List<DesignTemplate> userTemplates = new();
    private DesignTemplate newTemplate = new();
    private CssTemplate newCssTemplate = new();
    private AuthenticationState? authState;
    private string? userId; 
    private string? userName;

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

        await LoadTemplates();
        isLoading = false;
    }

    private async Task LoadTemplates()
    {

        userTemplates = (await DesignTemplateService.GetTemplatesByUserAsync(userId)).ToList();
    }

    private async Task CreateTemplate()
    {
        isLoading = true;

        // Create the CSS template first


        // var cssTemplate = await CssTemplateService.CreateAsync(newCssTemplate);

        var LastTemplateId = await DesignTemplateService.GetLastTemplateId();
        // Create the design template and link the CSS template
        newCssTemplate.LastUpdated = DateTime.UtcNow;

        newTemplate.UserId = userId!; 
        newTemplate.CssTemplate = newCssTemplate;
        newTemplate.Version = 1;
        newTemplate.CreatedAt = DateTime.UtcNow;
        newTemplate.UpdatedAt = DateTime.UtcNow;
        newTemplate.IsPublished = false;
        newTemplate.IsDeprecated = false;
        newTemplate.Status = "Draft";

        newTemplate.QDrandCollectionName = "Template" + (LastTemplateId + 1);
        
        var result = await DesignTemplateService.CreateAsync(newTemplate);
        // newTemplate.QDrandCollectionName = "Template"+ result.Id;

        // Reset form and reload templates
        newTemplate = new();
        newCssTemplate = new();
        await LoadTemplates();
        isLoading = false;
    }

    private async Task EditTemplate(int templateId)
    {
        NavigationManager.NavigateTo($"/edit-template/{templateId}");
    }

    private async Task DeleteTemplate(int templateId)
    {
        isLoading = true;
        await DesignTemplateService.DeleteAsync(templateId);
        await LoadTemplates();
        isLoading = false;
    }
}