@page "/UserCP/{CompanyID:int}"
@using Common.Dtos.Company
@using Common.Dtos.Conversation
@using Common.Dtos.Group
@using HushianWebApp.Service
@using HushianWebApp.Services
@inject ILocalStorageService localStorageService;
@inject AuthService authService;
@inject BaseController baseController;
@layout UserPanelLayout
<div class="container-fluid">
    <div class="row" style="height:85vh">
        @if (IsEndFirstProcess)
        {
            @if (IsLogin)
            {
                <div class="col-md-12 d-flex flex-column" id="B">
                    <div class="input-group">
                        @if (LastOpenChat != null)
                        {
                            <p type="text" class="form-control fw-bold text-primary" style="border:none;align-self: center;" aria-describedby="basic-addon1">@ExperYou</p>
                            <span class="input-group-text-chat" id="basic-addon1">
                                @if (LastOpenChat.status == Common.Enums.ConversationStatus.InProgress)
                                {
                                    <Button Color="ButtonColor.Danger" Size=ButtonSize.ExtraSmall Outline="true">
                                        <Icon Name="IconName.Escape" /> اتمام گفتگو
                                    </Button>


                                }
                            </span>
                        }

                    </div>
                    <!-- B1: Chat area -->
                    <div class="flex-fill border p-2 overflow-auto" id="B1" style="height: 300px; overflow-y: auto;">
                        @if (LastOpenChat != null && LastOpenChat.Responses != null)
                        {
                            <div class="chat-container p-3">
                                @{
                                    bool target = false;
                                }
                                @foreach (var msg in LastOpenChat?.Responses)
                                {
                                    @if (!target && ((!msg.IsRead && msg.Type != Common.Enums.ConversationType.UE) || LastOpenChat.Responses.Last() == msg))
                                    {
                                        target = true;
                                        <div id="target" style="text-align: center;">
                                            @if (!msg.IsRead && msg.Type != Common.Enums.ConversationType.UE)
                                            {
                                                <p>ـــــــــــــــــــــــــ</p>
                                            }
                                        </div>
                                    }

                                    <div class="d-flex mb-2 @(msg.Type==Common.Enums.ConversationType.UE ? "justify-content-end" : "justify-content-start")">
                                        <div class="chat-bubble @(msg.Type==Common.Enums.ConversationType.UE ? "chat-mine": "chat-other")" data-id="@msg.ID"> @msg.text </div>
                                        @if (msg.Type == Common.Enums.ConversationType.EU)
                                        {
                                            if (msg.IsRead)
                                            {
                                                <Icon Style="align-self: self-end;" Name="IconName.CheckAll" Size="IconSize.x5" Color="IconColor.Success" />
                                            }
                                            else
                                            {
                                                <Icon Style="align-self: self-end;" Name="IconName.CheckLg" Size="IconSize.x5" />
                                            }
                                        }
                                    </div>
                                }
                                @{
                                    target = false;
                                }
                            </div>
                        }
                        else
                        {
                            <div class="d-flex justify-content-center align-items-center flex-column" style="height: 80%;">

                                <Spinner Type="SpinnerType.Dots" Color="SpinnerColor.Primary" Visible="@chatloading" />
                                <p style="margin-top: 15px; font-size: 1.5rem; color: #0d6efd; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">
                                    هوشیان
                                </p>
                            </div>


                        }

                    </div>

                    @if (LastOpenChat != null && LastOpenChat.status != Common.Enums.ConversationStatus.Finished && LastOpenChat.Responses != null)
                    {
                        <!-- B2: Message input -->
                        <div class="border m-2 p-2 rounded d-flex align-items-center" id="B2">
                            <input type="text" @bind-value="MsgInput" class="form-control" style="margin-left:10px" placeholder="پیام خود را بنویسید..." />

                            <Button Color="ButtonColor.Dark" Outline="true" @onclick="OnClickSendMsg"><Icon Name="IconName.AppIndicator" /> </Button>


                        </div>
                    }


                </div>
            }
            else
            {
                <LoginComponent OnMultipleOfThree="EventCallback.Factory.Create(this, Afterlogin)" />
            }
        }
        else
        {
            //صحت سنجی لاگین در حال انجام است
        }
    </div>
</div>
@code {
    [Parameter] public int CompanyID { get; set; }

    ReadANDUpdate_CompanyDto CompanyInfo = new();
    Common.Dtos.CurrentUserInfo CurrentUser = new();
    List<Read_GroupDto> CompanyGroups = new();
    ChatItemDto? LastOpenChat = new();
    string MsgInput = string.Empty;
    bool chatloading = false;
    public bool IsLogin { get; set; } = false;
    public bool IsEndFirstProcess { get; set; } = false;
    string ExperYou
    {
        get
        {
            string value = $"{CompanyInfo.FullName}";
            if (LastOpenChat != null)
            {
                value += "/" + LastOpenChat.ExperFullName;
            }
            return value;
        }
    }
}
@functions {
    async Task OnClickSendMsg()
    {
        if (!string.IsNullOrEmpty(MsgInput) && LastOpenChat != null)
        {
            // Common.Enums.ConversationType type = CurrentUser.Role == "Company" ? Common.Enums.ConversationType.CU : Common.Enums.ConversationType.EU;
            // await chatService.ADDChatResponse(LastOpenChat.ID, MsgInput, type);
            // LastOpenChat?.Responses.Add(new() { text = MsgInput, Type = type });
            // LastOpenChat.LastText = MsgInput;
            // await Task.Yield();
            // await JS.InvokeVoidAsync("scrollToBottom", "B1");
            MsgInput = string.Empty;
        }
    }
    protected override async Task OnInitializedAsync()
    {
        await IsOnline();
        await base.OnInitializedAsync();
    }
    async Task IsOnline()
    {
        var token = await localStorageService.GetItem<string>("U/key");
        if (string.IsNullOrEmpty(token))
        {
            IsLogin = false;
            IsEndFirstProcess = true;
        }
        else
        {
            await baseController.RemoveToken();
            await baseController.SetToken(token);
            if (!await authService.IsOnline())
            {
                await baseController.RemoveToken();
                IsLogin = false;
                IsEndFirstProcess = true;
            }
            else
            {
                IsEndFirstProcess = true;
                await Afterlogin();
            }

        }

    }
    async Task Afterlogin()
    {
        IsLogin = true;
        CurrentUser = new();
        await IsCompany();
    }
    async Task IsCompany()
    {
        CompanyInfo = new();
        CompanyGroups = new();
        await IsLastChat();
    }
    async Task IsLastChat()
    {
        LastOpenChat = null;
        StateHasChanged();
    }
}
<style>
    .chat-bubble {
        padding: 0.5rem 0.75rem;
        border-radius: 1rem;
        max-width: 75%;
        word-wrap: break-word;
        white-space: pre-wrap;
    }

    .chat-mine {
        background: linear-gradient(to right, #005eff, #267fff);
        color: white;
        border-top-left-radius: 0;
    }

    .chat-other {
        background-color: #f1f1f1;
        color: #333;
        border-top-right-radius: 0;
    }

    .chat-ai {
        background-color: #f1f1f1;
        color: #353;
        border-top-right-radius: 0;
    }

    .input-group-text-chat {
        display: flex;
        align-items: center;
        padding: .375rem .75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--bs-body-color);
        text-align: center;
        white-space: nowrap;
        border-radius: var(--bs-border-radius);
    }

</style>