CommentItem.razor

@using Contoso.BlazorApp.Models
@using Contoso.BlazorApp.Services
@inject AuthService AuthService
@inject ApiService ApiService
@inject IJSRuntime JSRuntime

<div class="flex flex-col w-full py-3 border-b border-gray-300">
    <div class="flex items-center mb-2">
        <div class="w-9 h-9 rounded-full bg-gray-200 dark:bg-gray-700 mr-2"></div>
        <div class="text-sm font-bold text-gray-900 dark:text-white">
            @Comment.Username
        </div>
    </div>
    
    <div class="ml-11">
        @if (isEditing)
        {
            <div class="flex flex-col gap-2">
                <textarea @bind="editContent"
                          class="w-full bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md p-2 text-sm text-gray-900 dark:text-white resize-vertical focus:outline-none focus:ring-2 focus:ring-blue-500"
                          rows="3">
                </textarea>
                <div class="flex justify-end gap-2">
                    <button @onclick="HandleSaveEdit"
                            class="bg-blue-600 text-white rounded-md px-3 py-1 text-xs hover:bg-blue-700 transition-colors">
                        Save
                    </button>
                    <button @onclick="HandleCancelEdit"
                            class="bg-gray-200 text-gray-800 rounded-md px-3 py-1 text-xs hover:bg-gray-300 transition-colors">
                        Cancel
                    </button>
                </div>
            </div>
        }
        else
        {
            <div class="flex justify-between items-start">
                <p class="text-sm text-gray-900 dark:text-white leading-relaxed break-words flex-1">
                    @Comment.Content
                </p>
                @if (isAuthor)
                {
                    <div class="flex gap-2 ml-2">
                        <button @onclick="HandleEditClick"
                                class="text-xs text-blue-600 hover:underline">
                            Edit
                        </button>
                        <button @onclick="HandleDeleteClick"
                                class="text-xs text-gray-500 hover:underline">
                            Delete
                        </button>
                    </div>
                }
            </div>
        }
    </div>
</div>

@code {
    [Parameter] public Comment Comment { get; set; } = new();
    [Parameter] public string PostId { get; set; } = string.Empty;
    [Parameter] public EventCallback<string> OnCommentDelete { get; set; }
    [Parameter] public EventCallback<Comment> OnCommentUpdate { get; set; }

    private bool isEditing = false;
    private string editContent = string.Empty;
    private bool isAuthor = false;

    protected override void OnInitialized()
    {
        editContent = Comment.Content;
        isAuthor = AuthService.AuthState.User != null && AuthService.AuthState.User.Username == Comment.Username;
    }

    private void HandleEditClick()
    {
        isEditing = true;
        editContent = Comment.Content;
    }

    private void HandleCancelEdit()
    {
        isEditing = false;
        editContent = Comment.Content;
    }

    private async Task HandleSaveEdit()
    {
        if (string.IsNullOrWhiteSpace(editContent) || AuthService.AuthState.User == null) return;

        try
        {
            await ApiService.UpdateCommentAsync(PostId, Comment.Id, editContent, AuthService.AuthState.User.Username);
            Comment.Content = editContent;
            await OnCommentUpdate.InvokeAsync(Comment);
            isEditing = false;
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error updating comment: {ex.Message}");
            await JSRuntime.InvokeVoidAsync("alert", "An error occurred while updating the comment.");
        }
    }

    private async Task HandleDeleteClick()
    {
        var confirmed = await JSRuntime.InvokeAsync<bool>("confirm", "Are you sure you want to delete this comment?");
        if (!confirmed) return;

        try
        {
            await ApiService.DeleteCommentAsync(PostId, Comment.Id);
            await OnCommentDelete.InvokeAsync(Comment.Id);
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error deleting comment: {ex.Message}");
            await JSRuntime.InvokeVoidAsync("alert", "An error occurred while deleting the comment.");
        }
    }
}