@page "/admin/support/view/{Id:int}"
@using Moonlight.App.Services.Support
@using Moonlight.App.Database.Entities
@using Moonlight.App.Helpers
@using Moonlight.App.Repositories
@using Moonlight.App.Services

@inject SupportAdminService SupportAdminService
@inject UserRepository UserRepository
@inject SmartTranslateService SmartTranslateService
@inject ResourceService ResourceService

<OnlyAdmin>
    <LazyLoader Load="Load">
        @if (User == null)
        {
            <div class="alert alert-danger">
                <TL>User not found</TL>
            </div>
        }
        else
        {
            <div class="row">
                <div class="d-flex flex-column flex-xl-row p-7">
                    <div class="flex-lg-row-fluid me-6 mb-20 mb-xl-0">
                        <div class="card">
                            <div class="card-body">
                                <LazyLoader Load="LoadMessages">
                                    <div class="scroll-y me-n5 pe-5" style="max-height: 55vh; display: flex; flex-direction: column-reverse;">
                                        @foreach (var message in Messages)
                                        {
                                            if (message.IsSystem || message.IsSupport)
                                            {
                                                <div class="d-flex justify-content-end mb-10 ">
                                                    <div class="d-flex flex-column align-items-end">
                                                        <div class="d-flex align-items-center mb-2">
                                                            <div class="me-3">
                                                                <span class="text-muted fs-7 mb-1">@(Formatter.FormatAgoFromDateTime(message.CreatedAt, SmartTranslateService))</span>
                                                                <a class="fs-5 fw-bold text-gray-900 text-hover-primary ms-1">
                                                                    @if (message.IsSupport && !message.IsSystem)
                                                                    {
                                                                        <span>@(message.Sender!.FirstName) @(message.Sender!.LastName)</span>
                                                                    }
                                                                    else
                                                                    {
                                                                        <span>System</span>
                                                                    }
                                                                </a>
                                                            </div>
                                                            <div class="symbol  symbol-35px symbol-circle ">
                                                                <img alt="Logo" src="@(ResourceService.Image("logo.svg"))">
                                                            </div>
                                                        </div>

                                                        <div class="p-5 rounded bg-light-primary text-dark fw-semibold mw-lg-400px text-end">
                                                            @if (message.IsSystem)
                                                            {
                                                                <TL>@(message.Message)</TL>
                                                            }
                                                            else
                                                            {
                                                                @(message.Message)
                                                            }
                                                        </div>
                                                    </div>
                                                </div>
                                            }
                                            else
                                            {
                                                <div class="d-flex justify-content-start mb-10 ">
                                                    <div class="d-flex flex-column align-items-start">
                                                        <div class="d-flex align-items-center mb-2">
                                                            <div class="symbol  symbol-35px symbol-circle ">
                                                                <img alt="Avatar" src="@(ResourceService.Avatar(message.Sender))">
                                                            </div>
                                                            <div class="ms-3">
                                                                <a class="fs-5 fw-bold text-gray-900 text-hover-primary me-1">
                                                                    <span>@(message.Sender!.FirstName) @(message.Sender!.LastName)</span>
                                                                </a>
                                                                <span class="text-muted fs-7 mb-1">@(Formatter.FormatAgoFromDateTime(message.CreatedAt, SmartTranslateService))</span>
                                                            </div>
                                                        </div>

                                                        <div class="p-5 rounded bg-light-info text-dark fw-semibold mw-lg-400px text-start">
                                                            @(message.Message)
                                                        </div>
                                                    </div>
                                                </div>
                                            }
                                        }
                                    </div>
                                </LazyLoader>
                            </div>
                            <div class="card-footer">
                                @{
                                    var typingUsers = SupportAdminService.GetTypingUsers();
                                }

                                @if (typingUsers.Any())
                                {
                                    <span class="mb-5 fs-5 d-flex flex-row">
                                        <div class="wave me-1">
                                            <div class="dot h-5px w-5px" style="margin-right: 1px;"></div>
                                            <div class="dot h-5px w-5px" style="margin-right: 1px;"></div>
                                            <div class="dot h-5px w-5px"></div>
                                        </div>
                                        @if (typingUsers.Length > 1)
                                        {
                                            <span>
                                                @(typingUsers.Aggregate((current, next) => current + ", " + next)) <TL>are typing</TL>
                                            </span>
                                        }
                                        else
                                        {
                                            <span>
                                                @(typingUsers.First()) <TL>is typing</TL>
                                            </span>
                                        }
                                    </span>
                                }

                                <div class="d-flex flex-stack">
                                    <table class="w-100">
                                        <tr>
                                            <!--<td class="align-top">
                                                <button class="btn btn-sm btn-icon btn-active-light-primary me-1" type="button">
                                                    <i class="bx bx-upload fs-3"></i>
                                                </button>
                                            </td>-->
                                            <td class="w-100">
                                                <textarea @bind="Content" @oninput="OnTyping" class="form-control mb-3 form-control-flush" rows="1" placeholder="Type a message">            
                                                </textarea>
                                            </td>
                                            <td class="align-top">
                                                <WButton Text="@(SmartTranslateService.Translate("Send"))"
                                                         WorkingText="@(SmartTranslateService.Translate("Sending"))"
                                                         CssClasses="btn-primary ms-2"
                                                         OnClick="Send">
                                                </WButton>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-column flex-lg-row-auto w-100 mw-lg-300px mw-xxl-350px">
                        <div class="card p-10 mb-15 pb-8">
                            <h2 class="text-dark fw-bold mb-2">
                                <TL>User information</TL>
                            </h2>

                            <div class="d-flex align-items-center mb-1">
                                <span class="fw-semibold text-gray-800 fs-5 m-0">
                                    <TL>Name</TL>: @(User.FirstName) @User.LastName
                                </span>
                            </div>
                            <div class="d-flex align-items-center mb-2">
                                <span class="fw-semibold text-gray-800 fs-5 m-0">
                                    <TL>Email</TL>: <a href="/admin/users/view/@User.Id">@(User.Email)</a> 
                                </span>
                            </div>
                            <div class="align-items-center mt-3">
                                <span class="fw-semibold text-gray-800 fs-5 m-0">
                                    <WButton Text="@(SmartTranslateService.Translate("Close ticket"))"
                                             WorkingText="@(SmartTranslateService.Translate("Closing"))"
                                             CssClasses="btn-danger float-end"
                                             OnClick="CloseTicket">
                                    </WButton>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        }
    </LazyLoader>
</OnlyAdmin>

@code
{
    [Parameter]
    public int Id { get; set; }

    private User? User;
    private SupportMessage[] Messages;
    private string Content = "";

    private DateTime LastTypingTimestamp = DateTime.UtcNow.AddMinutes(-10);

    private async Task Load(LazyLoader arg)
    {
        User = UserRepository
            .Get()
            .FirstOrDefault(x => x.Id == Id);

        if (User != null)
        {
            SupportAdminService.OnNewMessage += OnNewMessage;
            SupportAdminService.OnUpdateTyping += OnUpdateTyping;

            await SupportAdminService.Start(User);
        }
    }
    
    #region Message handling

    private async void OnNewMessage(object? sender, SupportMessage e)
    {
        Messages = (await SupportAdminService.GetMessages()).Reverse().ToArray();
        await InvokeAsync(StateHasChanged);
    }

    private async Task LoadMessages(LazyLoader arg)
    {
        Messages = (await SupportAdminService.GetMessages()).Reverse().ToArray();
    }
    
    #endregion

    private async Task Send()
    {
        await SupportAdminService.SendMessage(Content);
        Content = "";
    }

    private async Task CloseTicket()
    {
        await SupportAdminService.Close();
    }
    
    #region Typing

    private async Task OnTyping()
    {
        if ((DateTime.UtcNow - LastTypingTimestamp).TotalSeconds > 5)
        {
            LastTypingTimestamp = DateTime.UtcNow;

            await SupportAdminService.TriggerTyping();
        }
    }
    
    private async void OnUpdateTyping(object? sender, EventArgs e)
    {
        await InvokeAsync(StateHasChanged);
    }
    
    #endregion
}