@model IEnumerable<LittleShop.DTOs.ReviewDto>
@{
    ViewData["Title"] = "Reviews";
}

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-star me-2"></i>Customer Reviews
                    </h6>
                    <span class="badge badge-warning">@Model.Count() Pending Approval</span>
                </div>
                <div class="card-body">
                    @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>
                    }
                    
                    @if (TempData["ErrorMessage"] != null)
                    {
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            @TempData["ErrorMessage"]
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    }

                    @if (!Model.Any())
                    {
                        <div class="text-center py-4">
                            <div class="mb-3">
                                <i class="fas fa-star fa-3x text-muted"></i>
                            </div>
                            <h5 class="text-muted">No pending reviews</h5>
                            <p class="text-muted">New customer reviews will appear here for approval.</p>
                        </div>
                    }
                    else
                    {
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>Product</th>
                                        <th>Customer</th>
                                        <th>Rating</th>
                                        <th>Review</th>
                                        <th>Order ID</th>
                                        <th>Date</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (var review in Model.OrderByDescending(r => r.CreatedAt))
                                    {
                                        <tr>
                                            <td>
                                                <strong>@review.ProductName</strong>
                                            </td>
                                            <td>
                                                <span class="text-muted">@review.CustomerDisplayName</span>
                                                @if (review.IsVerifiedPurchase)
                                                {
                                                    <i class="fas fa-check-circle text-success ms-1" title="Verified Purchase"></i>
                                                }
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    @for (int i = 1; i <= 5; i++)
                                                    {
                                                        <i class="fas fa-star @(i <= review.Rating ? "text-warning" : "text-muted")"></i>
                                                    }
                                                    <span class="ms-2 text-muted">(@review.Rating/5)</span>
                                                </div>
                                            </td>
                                            <td>
                                                @if (!string.IsNullOrEmpty(review.Title))
                                                {
                                                    <strong class="d-block">@review.Title</strong>
                                                }
                                                @if (!string.IsNullOrEmpty(review.Comment))
                                                {
                                                    <span class="text-muted">
                                                        @(review.Comment.Length > 100 ? review.Comment.Substring(0, 100) + "..." : review.Comment)
                                                    </span>
                                                }
                                            </td>
                                            <td>
                                                <small class="text-monospace">@review.OrderId.ToString().Substring(0, 8)...</small>
                                            </td>
                                            <td>
                                                <small>@review.CreatedAt.ToString("MMM dd, yyyy")</small>
                                            </td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <a asp-action="Details" asp-route-id="@review.Id" 
                                                       class="btn btn-sm btn-outline-primary" title="View Details">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    @if (!review.IsApproved)
                                                    {
                                                        <form asp-action="Approve" asp-route-id="@review.Id" method="post" class="d-inline">
                                                            <button type="submit" class="btn btn-sm btn-success" 
                                                                    onclick="return confirm('Approve this review?')" title="Approve">
                                                                <i class="fas fa-check"></i>
                                                            </button>
                                                        </form>
                                                    }
                                                    <a asp-action="Edit" asp-route-id="@review.Id" 
                                                       class="btn btn-sm btn-outline-secondary" title="Edit">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    <form asp-action="Delete" asp-route-id="@review.Id" method="post" class="d-inline">
                                                        <button type="submit" class="btn btn-sm btn-outline-danger" 
                                                                onclick="return confirm('Delete this review?')" title="Delete">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
</div>