@page "/doctor/chat"

@attribute [Authorize(Roles = UserRoles.Doctor)]
@layout DoctorLayout
@inject IDoctorManagementService DoctorManagementService
@inject IAuthenticationService AuthenticationService

<h3>Chat with Patients</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 patient in patients)
            {
                <button class="list-group-item list-group-item-action" @onclick="() => OpenChat(patient.Id, patient.Name)">
                    @patient.Name
                </button>
            }
        </div>
    </div>
    <div class="col-md-8">
        @if (selectedPatient != null)
        {
            <div class="card">
                <div class="card-header">
                    Chat with @selectedPatient.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" : selectedPatient.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<Patient> patients = new();
    private Patient selectedPatient;
    private List<Message> messages = new();
    private string newMessage = string.Empty;
    private UserInformation userInfo;

    protected override async Task OnInitializedAsync()
    {
        userInfo = await AuthenticationService.GetUserInformation();
        patients = await DoctorManagementService.GetAllPatientsAsync();
    }

    private async Task OpenChat(Guid patientId, string patientName)
    {
        selectedPatient = new Patient { Id = patientId, Name = patientName };
        var chat = await DoctorManagementService.GetConversationAsync(userInfo.Id, patientId);
        messages = chat?.Messages ?? new List<Message>();
        StateHasChanged();
    }

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

    private async Task SendMessage()
    {
        if (!string.IsNullOrWhiteSpace(newMessage) && selectedPatient != null)
        {
            var success = await DoctorManagementService.SendMessageAsync(userInfo.Id, selectedPatient.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();
        }
    }

}