@page "/patient/chat"
@attribute [Authorize(Roles = UserRoles.Patient)]
@layout PatientLayout
@inject IPatientManagementService PatientManagementService
@inject IAuthenticationService AuthenticationService

<h3>Chat with Doctors</h3>

@if (!string.IsNullOrEmpty(statusMessage))
{
    <div class="alert @(isSuccess ? "alert-success" : "alert-danger")" role="alert">
        @statusMessage
    </div>
}

<div class="row">
    <div class="col-md-4">
        <div class="list-group">
            @foreach (var doctor in doctors)
            {
                <button class="list-group-item list-group-item-action" @onclick="() => OpenChat(doctor.Id, doctor.Name)">
                    Dr. @doctor.Name
                </button>
            }
        </div>
    </div>
    <div class="col-md-8">
        @if (selectedDoctor != null)
        {
            <div class="card">
                <div class="card-header">
                    Chat with Dr. @selectedDoctor.Name
                    <button class="btn btn-sm btn-danger float-right" @onclick="CloseChat">Close</button>
                </div>
                <div class="card-body chat-body">
                    @foreach (var message in messages)
                    {
                        <div class="chat-message @(message.UserId == userInfo.Id ? "chat-message-sender" : "chat-message-receiver")">
                            <strong>@(message.UserId == userInfo.Id ? "You" : selectedDoctor.Name):</strong> @message.Content
                        </div>
                    }
                </div>
                <div class="card-footer">
                    <input type="text" class="form-control" @bind="newMessage" @onkeydown="HandleKeyDown" placeholder="Type your message..."/>
                    <button class="btn btn-primary mt-2" @onclick="SendMessage">Send</button>
                </div>
            </div>
        }
    </div>
</div>

<style>
    .chat-body {
        height: 300px;
        overflow-y: scroll;
    }

    .chat-message {
        margin-bottom: 10px;
    }

    .chat-message-sender {
        text-align: right;
    }

    .chat-message-receiver {
        text-align: left;
    }

</style>

@code {
    private string statusMessage = string.Empty;
    private bool isSuccess = false;
    private List<Doctor> doctors = new();
    private Doctor selectedDoctor;
    private List<Message> messages = new();
    private string newMessage = string.Empty;
    private UserInformation userInfo;

    protected override async Task OnInitializedAsync()
    {
        userInfo = await AuthenticationService.GetUserInformation();
        doctors = await PatientManagementService.GetAllDoctorsAsync();
    }

    private async Task OpenChat(Guid doctorId, string doctorName)
    {
        selectedDoctor = new Doctor { Id = doctorId, Name = doctorName };
        var chat = await PatientManagementService.GetConversationAsync(userInfo.Id, doctorId);
        messages = chat?.Messages ?? new List<Message>();
        StateHasChanged();
    }

    private void CloseChat()
    {
        selectedDoctor = null;
        messages.Clear();
    }

    private async Task SendMessage()
    {
        if (!string.IsNullOrWhiteSpace(newMessage) && selectedDoctor != null)
        {
            var success = await PatientManagementService.SendMessageAsync(userInfo.Id, selectedDoctor.Id, newMessage);
            if (success)
            {
                messages.Add(new Message(userInfo.Id, newMessage));
                newMessage = string.Empty;
                StateHasChanged();
            }
            else
            {
                statusMessage = "Failed to send message.";
                isSuccess = false;
            }
        }
    }

    private void HandleKeyDown(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            SendMessage().GetAwaiter().GetResult();
        }
    }

}