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

<h3 class="text-center mb-4">Meet Our Doctors</h3>

@if (doctors is null)
{
    <p class="text-center"><em>Loading doctors...</em></p>
}
else if (doctors.Count == 0)
{
    <p class="text-center">No doctors are available at the moment.</p>
}
else
{
    <div class="row">
        @foreach (var doctor in doctors)
        {
            <div class="col-md-4 mb-4">
                <div class="card h-100" @onclick="() => ToggleOverlay(doctor)">
                    <div class="card-body text-center">
                        <img src="user.png" alt="Doctor Image" class="img-fluid rounded-circle mb-2" style="width: 70px; height: 70px;">
                        <h5 class="card-title">@doctor.Name</h5>
                        <p class="card-text"><small class="text-muted">@doctor.Email</small></p>
                    </div>
                </div>
            </div>
        }
    </div>

    @if (selectedDoctor != null)
    {
        <div class="modal" tabindex="-1" style="display:block; background-color: rgba(0,0,0,0.5);">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Doctor Details</h5>
                        <button type="button" class="close" @onclick="() => ToggleOverlay(null)">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>Name: @selectedDoctor.Name</p>
                        <p>Email: @selectedDoctor.Email</p>
                        <p>Description: @((MarkupString)FormatDescription(selectedDoctor.Description))</p>
                    </div>
                </div>
            </div>
        </div>
    }
}

@code {
    private List<Doctor> doctors;
    private Doctor selectedDoctor;

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

    private void ToggleOverlay(Doctor doctor)
    {
        selectedDoctor = doctor;
    }

    private string FormatDescription(string description)
    {
        // This is now handled directly in the modal body with MarkupString
        return description?.Replace(Environment.NewLine, "<br />") ?? string.Empty;
    }
}