@page "/admin/support/view/{Id:int}"
@using Moonlight.App.Database.Entities
@using Moonlight.App.Helpers
@using Moonlight.App.Repositories
@using Moonlight.App.Services
@using Moonlight.App.Services.SupportChat
@using System.Text.RegularExpressions
@using Moonlight.App.Services.Files

@inject SupportChatAdminService AdminService
@inject UserRepository UserRepository
@inject SmartTranslateService SmartTranslateService
@inject ResourceService ResourceService

@implements IDisposable

<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.Sender == null || message.Sender.Id != User.Id)
                                            {
                                                <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.Sender != null)
                                                                    {
                                                                        <span>@(message.Sender.FirstName) @(message.Sender.LastName)</span>
                                                                    }
                                                                    else
                                                                    {
                                                                        <span>
                                                                            <TL>System</TL>
                                                                        </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.Sender == null)
                                                            {
                                                                <TL>@(message.Content)</TL>
                                                            }
                                                            else
                                                            {
                                                                foreach (var line in message.Content.Split("\n"))
                                                                {
                                                                    @(line)<br/>
                                                                }

                                                                if (message.Attachment != "")
                                                                {
                                                                    <div class="mt-3">
                                                                        @if (Regex.IsMatch(message.Attachment, @"\.(jpg|jpeg|png|gif|bmp)$"))
                                                                        {
                                                                            <img src="@(ResourceService.BucketItem("supportChat", message.Attachment))" class="img-fluid" alt="Attachment"/>
                                                                        }
                                                                        else
                                                                        {
                                                                            <a class="btn btn-secondary" href="@(ResourceService.BucketItem("supportChat", message.Attachment))">
                                                                                <i class="me-2 bx bx-download"></i> @(message.Attachment)
                                                                            </a>
                                                                        }
                                                                    </div>
                                                                }
                                                            }
                                                        </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">
                                                            @{ 
                                                                int i = 0;
                                                                var arr = message.Content.Split("\n", StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);}
                                                            @foreach (var line in arr)
                                                            {
                                                                @line
                                                                if (i++ != arr.Length - 1)
                                                                {
                                                                    <br />
                                                                }
                                                            }

                                                            @if (message.Attachment != "")
                                                            {
                                                                <div class="mt-3">
                                                                    @if (Regex.IsMatch(message.Attachment, @"\.(jpg|jpeg|png|gif|bmp)$"))
                                                                    {
                                                                        <img src="@(ResourceService.BucketItem("supportChat", message.Attachment))" class="img-fluid" alt="Attachment"/>
                                                                    }
                                                                    else
                                                                    {
                                                                        <a class="btn btn-secondary" href="@(ResourceService.BucketItem("supportChat", message.Attachment))">
                                                                            <i class="me-2 bx bx-download"></i> @(message.Attachment)
                                                                        </a>
                                                                    }
                                                                </div>
                                                            }
                                                        </div>
                                                    </div>
                                                </div>
                                            }
                                        }
                                    </div>
                                </LazyLoader>
                            </div>
                            <div class="card-footer">
                                @if (Typing.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 (Typing.Length > 1)
                                        {
                                            <span>
                                                @(Typing.Aggregate((current, next) => current + ", " + next)) <TL>are typing</TL>
                                            </span>
                                        }
                                        else
                                        {
                                            <span>
                                                @(Typing.First()) <TL>is typing</TL>
                                            </span>
                                        }
                                    </span>
                                }

                                <div class="d-flex flex-stack">
                                    <table class="w-100">
                                        <tr>
                                            <td class="align-top">
                                                <SmartFileSelect @ref="SmartFileSelect"></SmartFileSelect>
                                            </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 List<SupportChatMessage> Messages = new();
    private string[] Typing = Array.Empty<string>();

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

    private SmartFileSelect SmartFileSelect;

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

        if (User != null)
        {
            AdminService.OnMessage += OnMessage;
            AdminService.OnTypingChanged += OnTypingChanged;

            await AdminService.Start(User);
        }
    }

    private async Task LoadMessages(LazyLoader arg)
    {
        Messages = (await AdminService.GetMessages()).ToList();
    }

    private async Task OnTypingChanged(string[] typing)
    {
        Typing = typing;

        await InvokeAsync(StateHasChanged);
    }

    private async Task OnMessage(SupportChatMessage arg)
    {
        Messages.Insert(0, arg);

    //TODO: Sound when message from system or admin

        await InvokeAsync(StateHasChanged);
    }

    private async Task Send()
    {
        if (SmartFileSelect.SelectedFile != null && string.IsNullOrEmpty(Content))
            Content = "File upload";

        if (string.IsNullOrEmpty(Content))
            return;

        var message = await AdminService.SendMessage(Content, SmartFileSelect.SelectedFile);
        Content = "";

        await SmartFileSelect.RemoveSelection();

        Messages.Insert(0, message);

        await InvokeAsync(StateHasChanged);
    }

    private async Task CloseTicket()
    {
        await AdminService.Close();
    }

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

            await AdminService.SendTyping();
        }
    }

    public void Dispose()
    {
        AdminService?.Dispose();
    }
}