@page "/admin/customers/feedback"
@layout AdminLayout
@inherits AdminBase

@*
    EN: Customer feedback — overview KPIs (avg rating, total reviews, response rate, NPS), feedback list with star ratings and response status.
    VI: Phản hồi khách hàng — KPI tổng quan (đánh giá TB, tổng review, tỷ lệ phản hồi, NPS), danh sách phản hồi với sao và trạng thái.
    Design: pencil-design/src/pages/tPOS/admin/customer-feedback.pen
*@

<PageTitle>Phản hồi khách hàng — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Phản hồi khách hàng</h1>
        <p class="admin-topbar__subtitle">Tổng hợp đánh giá & phản hồi từ khách hàng</p>
    </div>
    <div class="admin-topbar__right">
        <button class="admin-btn-secondary">
            <i data-lucide="download"></i>
            <span>Xuất báo cáo</span>
        </button>
    </div>
</div>

@* ═══ CONTENT ═══ *@
<div class="admin-content" style="display:flex;flex-direction:column;gap:24px;">

    @* ── KPI ROW ── *@
    <div class="admin-kpi-row">
        <div class="admin-kpi-card">
            <div class="admin-kpi-card__header">
                <div class="admin-kpi-card__icon" style="background-color:rgba(245,158,11,0.125);">
                    <i data-lucide="star" style="color:#F59E0B;"></i>
                </div>
                <div class="admin-kpi-card__badge admin-kpi-card__badge--up">
                    <i data-lucide="arrow-up"></i>
                    <span>+0.3</span>
                </div>
            </div>
            <div class="admin-kpi-card__value">4.6</div>
            <div class="admin-kpi-card__label">Đánh giá trung bình</div>
        </div>

        <div class="admin-kpi-card">
            <div class="admin-kpi-card__header">
                <div class="admin-kpi-card__icon" style="background-color:rgba(59,130,246,0.125);">
                    <i data-lucide="message-square" style="color:#3B82F6;"></i>
                </div>
                <div class="admin-kpi-card__badge admin-kpi-card__badge--up">
                    <i data-lucide="arrow-up"></i>
                    <span>+24%</span>
                </div>
            </div>
            <div class="admin-kpi-card__value">1,248</div>
            <div class="admin-kpi-card__label">Tổng đánh giá</div>
        </div>

        <div class="admin-kpi-card">
            <div class="admin-kpi-card__header">
                <div class="admin-kpi-card__icon" style="background-color:rgba(34,197,94,0.125);">
                    <i data-lucide="reply" style="color:#22C55E;"></i>
                </div>
                <div class="admin-kpi-card__badge admin-kpi-card__badge--up">
                    <i data-lucide="arrow-up"></i>
                    <span>+8%</span>
                </div>
            </div>
            <div class="admin-kpi-card__value">92%</div>
            <div class="admin-kpi-card__label">Tỷ lệ phản hồi</div>
        </div>

        <div class="admin-kpi-card">
            <div class="admin-kpi-card__header">
                <div class="admin-kpi-card__icon" style="background-color:rgba(139,92,246,0.125);">
                    <i data-lucide="trending-up" style="color:#8B5CF6;"></i>
                </div>
                <div class="admin-kpi-card__badge admin-kpi-card__badge--up">
                    <i data-lucide="arrow-up"></i>
                    <span>+5</span>
                </div>
            </div>
            <div class="admin-kpi-card__value">72</div>
            <div class="admin-kpi-card__label">NPS Score</div>
        </div>
    </div>

    @* ── FEEDBACK LIST ── *@
    <div class="admin-panel" style="flex:1;">
        <div class="admin-panel__header">
            <h3 class="admin-panel__title">
                <i data-lucide="message-circle" style="color:var(--admin-orange-primary);"></i>
                Phản hồi gần đây
            </h3>
            <div style="display:flex;gap:8px;">
                <div class="admin-search" style="width:200px;">
                    <i data-lucide="search"></i>
                    <input type="text" placeholder="Tìm phản hồi..." @bind="SearchQuery" />
                </div>
            </div>
        </div>
        <div class="admin-panel__body" style="padding:0;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Khách hàng</th>
                        <th>Đánh giá</th>
                        <th>Nội dung</th>
                        <th>Cửa hàng</th>
                        <th>Thời gian</th>
                        <th>Trạng thái</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var fb in _feedbacks)
                    {
                        <tr>
                            <td>
                                <div style="display:flex;align-items:center;gap:10px;">
                                    <div class="admin-user-avatar" style="width:32px;height:32px;font-size:11px;background-color:@fb.AvatarColor;">@fb.Initials</div>
                                    <span style="font-weight:500;">@fb.Customer</span>
                                </div>
                            </td>
                            <td>
                                <div style="display:flex;gap:2px;">
                                    @for (int i = 0; i < 5; i++)
                                    {
                                        var idx = i;
                                        <i data-lucide="star" style="width:14px;height:14px;color:@(idx < fb.Stars ? "#F59E0B" : "var(--admin-text-tertiary)");"></i>
                                    }
                                </div>
                            </td>
                            <td style="max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">@fb.Content</td>
                            <td style="color:var(--admin-text-secondary);">@fb.Store</td>
                            <td style="color:var(--admin-text-tertiary);font-size:12px;">@fb.Time</td>
                            <td>
                                <div class="admin-status-badge @(fb.Responded ? "admin-status-badge--online" : "admin-status-badge--setup")">
                                    <span class="admin-status-badge__dot"></span>
                                    @(fb.Responded ? "Đã phản hồi" : "Chờ phản hồi")
                                </div>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>

@code {
    private record FeedbackItem(string Customer, string Initials, string AvatarColor, int Stars, string Content, string Store, string Time, bool Responded);

    private readonly List<FeedbackItem> _feedbacks = new()
    {
        new("Nguyễn Thị Mai", "NM", "#FF5C00", 5, "Phục vụ rất tốt, cà phê ngon, không gian thoáng mát!", "Coffee House Q1", "2 giờ trước", true),
        new("Trần Văn Hùng", "TH", "#8B5CF6", 4, "Đồ ăn ngon nhưng chờ hơi lâu, nhân viên thân thiện.", "Nhà hàng Q3", "5 giờ trước", true),
        new("Lê Hoàng Anh", "LA", "#3B82F6", 3, "Chất lượng bình thường, giá hơi cao so với mặt bằng.", "Coffee House Q1", "1 ngày trước", false),
        new("Phạm Minh Châu", "PC", "#22C55E", 5, "Tuyệt vời! Sẽ quay lại lần sau. Menu đa dạng.", "Nhà hàng Q3", "1 ngày trước", true),
        new("Hoàng Thị Lan", "HL", "#EC4899", 2, "Phục vụ chậm, đồ uống không đúng order.", "Coffee House Q1", "2 ngày trước", false),
        new("Võ Đức Mạnh", "VM", "#06B6D4", 4, "Không gian đẹp, nhân viên nhiệt tình, giá hợp lý.", "Nhà hàng Q3", "3 ngày trước", true),
    };
}
