@model LittleShop.DTOs.ReviewDto
@{
    ViewData["Title"] = "Review Details";
}

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h2><i class="fas fa-star me-2"></i>Review Details</h2>
                <a asp-action="Index" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-1"></i>Back to Reviews
                </a>
            </div>

            @if (TempData["SuccessMessage"] != null)
            {
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    @TempData["SuccessMessage"]
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            }

            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-comment me-2"></i>Customer Review
                        @if (Model.IsVerifiedPurchase)
                        {
                            <span class="badge bg-success ms-2">
                                <i class="fas fa-check-circle"></i> Verified Purchase
                            </span>
                        }
                        @if (Model.IsApproved)
                        {
                            <span class="badge bg-info ms-2">
                                <i class="fas fa-check"></i> Approved
                            </span>
                        }
                        else
                        {
                            <span class="badge bg-warning ms-2">
                                <i class="fas fa-clock"></i> Pending Approval
                            </span>
                        }
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6><i class="fas fa-box me-2"></i>Product Information</h6>
                            <p><strong>Product:</strong> @Model.ProductName</p>
                            <p><strong>Product ID:</strong> <code>@Model.ProductId</code></p>
                        </div>
                        <div class="col-md-6">
                            <h6><i class="fas fa-user me-2"></i>Customer Information</h6>
                            <p><strong>Customer:</strong> @Model.CustomerDisplayName</p>
                            <p><strong>Customer ID:</strong> <code>@Model.CustomerId</code></p>
                            <p><strong>Order ID:</strong> <code>@Model.OrderId</code></p>
                        </div>
                    </div>

                    <hr>

                    <div class="row">
                        <div class="col-md-12">
                            <h6><i class="fas fa-star me-2"></i>Review Details</h6>
                            
                            <div class="mb-3">
                                <label class="form-label"><strong>Rating:</strong></label>
                                <div class="d-flex align-items-center">
                                    @for (int i = 1; i <= 5; i++)
                                    {
                                        <i class="fas fa-star @(i <= Model.Rating ? "text-warning" : "text-muted") me-1"></i>
                                    }
                                    <span class="ms-2 h5 mb-0">@Model.Rating out of 5 stars</span>
                                </div>
                            </div>

                            @if (!string.IsNullOrEmpty(Model.Title))
                            {
                                <div class="mb-3">
                                    <label class="form-label"><strong>Title:</strong></label>
                                    <p class="form-control-plaintext">@Model.Title</p>
                                </div>
                            }

                            @if (!string.IsNullOrEmpty(Model.Comment))
                            {
                                <div class="mb-3">
                                    <label class="form-label"><strong>Comment:</strong></label>
                                    <div class="card">
                                        <div class="card-body">
                                            <p class="mb-0">@Model.Comment</p>
                                        </div>
                                    </div>
                                </div>
                            }
                        </div>
                    </div>

                    <hr>

                    <div class="row">
                        <div class="col-md-6">
                            <h6><i class="fas fa-info-circle me-2"></i>Review Metadata</h6>
                            <p><strong>Created:</strong> @Model.CreatedAt.ToString("MMM dd, yyyy 'at' h:mm tt")</p>
                            <p><strong>Updated:</strong> @Model.UpdatedAt.ToString("MMM dd, yyyy 'at' h:mm tt")</p>
                            
                            @if (Model.IsApproved && Model.ApprovedAt.HasValue)
                            {
                                <p><strong>Approved:</strong> @Model.ApprovedAt.Value.ToString("MMM dd, yyyy 'at' h:mm tt")</p>
                                @if (!string.IsNullOrEmpty(Model.ApprovedByUsername))
                                {
                                    <p><strong>Approved By:</strong> @Model.ApprovedByUsername</p>
                                }
                            }
                        </div>
                        <div class="col-md-6">
                            <h6><i class="fas fa-cogs me-2"></i>Actions</h6>
                            <div class="d-grid gap-2">
                                @if (!Model.IsApproved)
                                {
                                    <form asp-action="Approve" asp-route-id="@Model.Id" method="post" class="d-inline">
                                        <button type="submit" class="btn btn-success w-100" 
                                                onclick="return confirm('Approve this review for public display?')">
                                            <i class="fas fa-check me-2"></i>Approve Review
                                        </button>
                                    </form>
                                }
                                
                                <a asp-action="Edit" asp-route-id="@Model.Id" class="btn btn-outline-primary">
                                    <i class="fas fa-edit me-2"></i>Edit Review
                                </a>
                                
                                <form asp-action="Delete" asp-route-id="@Model.Id" method="post" class="d-inline">
                                    <button type="submit" class="btn btn-outline-danger w-100" 
                                            onclick="return confirm('Are you sure you want to delete this review?')">
                                        <i class="fas fa-trash me-2"></i>Delete Review
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>