@page "/AIChat/{CompanyID:int}"
@using Common.Dtos
@inject ConversationService conversationService
@inject ILocalStorageService localStorageService
@inject AuthService authService
@inject BaseController baseController
@inject ToastService toastService
@inject IJSRuntime JS
@layout UserPanelLayout
@using Common.Dtos.Company
@using HushianWebApp.Service
@using HushianWebApp.Services
@using Microsoft.AspNetCore.Components.Web
@inject CompanyService companyService
@inject ToastService toastService
@if (CompanyInfo == null)
{
    <PageTitle>دستیار هوشمند</PageTitle>

}
else
{
    <PageTitle>گفتگو با دستیار هوشمند @CompanyInfo.FullName</PageTitle>
}
<div class="container-fluid">
    <div class="row" style="height:96vh">
        @if (isReady)
        {
            <div class="col-md-12 d-flex flex-column" style="margin-top:10px">
                <div class="input-group">
                    <p type="text" class="form-control fw-bold text-primary" style="border:none;align-self: center;" aria-describedby="basic-addon1">دستیار هوشمند @CompanyInfo.FullName</p>

                    <div class="d-flex gap-2 ms-auto">

                        <Button Color="ButtonColor.Secondary" Size=ButtonSize.ExtraSmall Outline="true" @onclick="Logout" Class="logout-btn">
                            <Icon Name="IconName.BoxArrowRight" Class="me-1" /> خروج
                        </Button>
                    </div>
                </div>
                <div class="flex-fill chat-area-container" id="ai-chat">
                    @if (messages is not null)
                    {
                        <div class="chat-container p-3">
                            @foreach (var msg in messages)
                            {
                                <div class="d-flex mb-2 justify-content-start">
                                    <div class="chat-bubble chat-other">
                                        @msg.requestText
                                    </div>
                                </div>

                                <div class="d-flex mb-2 justify-content-end">

                                    @if (msg.responseText=="null" && msg.dateTime==new DateTime(1400,01,01))
                                    {
                                        <Spinner Type="SpinnerType.Dots" Class="me-3" Color="SpinnerColor.Info" />
                                    }
                                    else{
                                        <div class="chat-bubble chat-mine">
                                            @if (DelayShowResponse && messages.Last()==msg)
                                            {
                                                <TypewriterComponent Text="@msg.responseText" />
                                            }
                                            else
                                            {
                                                @msg.responseText
                                            }

                                        </div>
                                    }


                                </div>

                            }
                        </div>
                    }
                </div>
                <div class="message-input-container mt-2">
                    <div class="input-wrapper">
                        <input type="text" @bind-value="inputText" disabled="@disSend" class="message-input" placeholder="متن خود را بنویسید..." @onkeydown="HandleKeyDown" />
                        <Button Color="ButtonColor.Primary" Size=ButtonSize.Small @onclick="Send" class="send-btn" title="ارسال">
                            @if (!disSend)
                            {
                                <Icon Name="IconName.Send" />
                            }
                            else
                            {
                                <Spinner Type="SpinnerType.Grow" Color="SpinnerColor.Primary" />
                            }
                        </Button>
                    </div>
                </div>
            </div>

        }
        else
        {
            <div class="d-flex justify-content-center align-items-center" style="height:100%">
                <div class="text-center">
                    @if (isError)
                    {
                        <p class="mt-3 text-muted" style="color:orangered">@msgError</p>
                    }
                    else
                    {
                        <Spinner Type="SpinnerType.Dots" Color="SpinnerColor.Primary" />
                        <p class="mt-3 text-muted">در حال بارگذاری ...</p>
                    }

                </div>
            </div>
        }
    </div>
</div>

@code {
    public bool DelayShowResponse { get; set; } = false;
    ReadANDUpdate_CompanyDto? CompanyInfo = new();
    [Parameter] public int CompanyID { get; set; }
    List<aiResponseDto> messages = new();
    string inputText = string.Empty;
    bool isReady = false;
    bool isError = false;
    string msgError = "";
    public string aikeyUser { get; set; } = "";
    protected override async Task OnInitializedAsync()
    {
        await EnsureAuth();

        CompanyInfo = await companyService.GetCompany(CompanyID);
        if (CompanyInfo != null && CompanyInfo.allowBot)
        {
            await LoadMessages();
            isReady = true;
        }
        else
        {
            isError = true;
            msgError = "دستیار هوشمند یافت نشد";
        }
    }

    private async Task EnsureAuth()
    {
        aikeyUser = await localStorageService.GetItem<string>("aikeyUser");
        if (string.IsNullOrEmpty(aikeyUser))
        {
            aikeyUser = Guid.NewGuid().ToString();
            await localStorageService.SetItem("aikeyUser", aikeyUser);
        }

    }

    private async Task LoadMessages()
    {
        messages = await conversationService.GetAiCurrentResponses(CompanyID, aikeyUser);
        StateHasChanged();
        await JS.InvokeVoidAsync("scrollToBottom", "ai-chat");
    }
    bool disSend = false;
    private async Task Send()
    {
        if (string.IsNullOrWhiteSpace(inputText)) return;
        disSend = true;
        var dto = new aiNewResponseDto { companyId = CompanyID, aiKeyUser = aikeyUser, requestText = inputText };



        var waiting = new aiResponseDto()
            {
                requestText = inputText,
                responseText = "null",
                dateTime = new(1400, 01, 01)
            };
        messages.Add(waiting);
        await JS.InvokeVoidAsync("scrollToBottom", "ai-chat");
        var okmodel = await conversationService.AiNewResponse(dto);
        if (okmodel != null)
        {
            DelayShowResponse = true;
            messages.Add(okmodel);
         
            inputText = string.Empty;
            StateHasChanged();
            await JS.InvokeVoidAsync("scrollToBottom", "ai-chat");
        }
        else
        {
            toastService.Notify(new ToastMessage(ToastType.Danger, "ارسال ناموفق بود"));
        }
        messages.Remove(waiting);
        disSend = false;
    }

    private async Task HandleKeyDown(KeyboardEventArgs e)
    {
        if (e.Key == "Enter") await Send();
    }

    private async Task Logout()
    {
        await localStorageService.RemoveItem("aiKeyUser");
    }
}

<style>
    .chat-area-container {
        height: 400px;
        overflow-y: auto;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        border: 2px solid #e9ecef;
        border-radius: 20px;
        padding: 1.5rem;
        margin: 1rem 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
        position: relative;
        backdrop-filter: blur(10px);
    }

    .chat-bubble {
        padding: 0.75rem 1rem;
        border-radius: 18px;
        max-width: 75%;
        word-wrap: break-word;
        white-space: pre-wrap;
        font-size: 0.95rem;
        line-height: 1.4;
        position: relative;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .chat-other {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        color: #333;
        border-top-right-radius: 4px;
        border: 1px solid #e9ecef;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .chat-ai {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        color: #495057;
        border-top-right-radius: 4px;
        border: 1px solid #dee2e6;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .message-input-container {
        border-radius: 0.5rem;
        background-color: #f8f9fa;
        padding: .5rem;
    }

    .input-wrapper {
        display: flex;
        align-items: center;
        gap: .75rem;
    }

    .message-input {
        flex: 1;
        border: none;
        background: transparent;
        padding: .5rem .75rem;
        font-size: .95rem;
        color: #495057;
        outline: none;
        border-radius: 20px;
    }

    .send-btn {
        border-radius: 50%;
        width: 38px;
        height: 38px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg,#0d6efd 0%,#0b5ed7 100%);
        border: none;
        box-shadow: 0 4px 12px rgba(13,110,253,.3);
        color: white;
    }

    .logout-btn {
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
        transition: all 0.3s ease;
        border-width: 2px;
        box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2);
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }

        .logout-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
            border-color: #6c757d;
            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
            color: white;
        }

    /* Improved input group styling */
    .input-group {
        margin-bottom: 1rem;
        border-radius: 0.5rem;
        overflow: hidden;
    }

        .input-group p {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 700;
            background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
</style>

<script>
    window.scrollToBottom = (elementId) => {
        const el = document.getElementById(elementId);
        if (el) {
            el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
        }
    };
</script>

<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;
    }
</style>