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

@*
    EN: Loyalty program — tier configuration (Bronze/Silver/Gold/Diamond), points per VND, rewards catalog, member stats.
    VI: Chương trình khách hàng thân thiết — cấu hình hạng (Bronze/Silver/Gold/Diamond), điểm/VND, danh mục quà, thống kê thành viên.
    Design: pencil-design/src/pages/tPOS/admin/loyalty-program.pen
*@

<PageTitle>Khách hàng thân thiết — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Khách hàng thân thiết</h1>
        <p class="admin-topbar__subtitle">Quản lý chương trình loyalty & phần thưởng</p>
    </div>
    <div class="admin-topbar__right">
        <button class="admin-btn-secondary">
            <i data-lucide="settings"></i>
            <span>Cài đặt điểm</span>
        </button>
        <button class="admin-btn-primary">
            <i data-lucide="gift"></i>
            <span>Thêm phần thưởng</span>
        </button>
    </div>
</div>

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

    @* ── TIER CARDS ── *@
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;">
        @foreach (var tier in _tiers)
        {
            <div class="admin-kpi-card" style="border:1px solid @(tier.Color)30;">
                <div class="admin-kpi-card__header">
                    <div class="admin-kpi-card__icon" style="background-color:@(tier.Color)20;">
                        <i data-lucide="@tier.Icon" style="color:@tier.Color;"></i>
                    </div>
                    <div style="padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;background-color:@(tier.Color)20;color:@tier.Color;">
                        @tier.Members thành viên
                    </div>
                </div>
                <div class="admin-kpi-card__value" style="color:@tier.Color;">@tier.Name</div>
                <div class="admin-kpi-card__label">Từ @tier.MinPoints điểm • @tier.Discount giảm giá</div>
            </div>
        }
    </div>

    @* ── BOTTOM ROW: Settings + Rewards ── *@
    <div style="display:flex;gap:24px;flex:1;min-height:0;">

        @* LEFT: Points Settings *@
        <div class="admin-panel" style="width:360px;">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="coins" style="color:var(--admin-orange-primary);"></i>
                    Cài đặt điểm
                </h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:16px;">
                <div class="admin-form-group">
                    <label class="admin-form-label">Tỷ lệ tích điểm</label>
                    <input class="admin-form-input" type="text" value="1,000 VND = 1 điểm" readonly />
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Điểm hết hạn sau</label>
                    <input class="admin-form-input" type="text" value="12 tháng" readonly />
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Điểm thưởng sinh nhật</label>
                    <input class="admin-form-input" type="text" value="x2 điểm" readonly />
                </div>
                <div style="padding-top:8px;display:flex;flex-direction:column;gap:8px;">
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--admin-bg-interactive);border-radius:10px;">
                        <span style="font-size:13px;font-weight:500;">Cho phép đổi điểm</span>
                        <MudSwitch T="bool" Value="true" Color="Color.Primary" />
                    </div>
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--admin-bg-interactive);border-radius:10px;">
                        <span style="font-size:13px;font-weight:500;">Tự động nâng hạng</span>
                        <MudSwitch T="bool" Value="true" Color="Color.Primary" />
                    </div>
                </div>
            </div>
        </div>

        @* RIGHT: Rewards Catalog *@
        <div class="admin-panel" style="flex:1;">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="gift" style="color:#EC4899;"></i>
                    Danh mục phần thưởng
                </h3>
                <a class="admin-panel__action">Quản lý tất cả →</a>
            </div>
            <div class="admin-panel__body" style="padding:0;">
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>Phần thưởng</th>
                            <th>Điểm cần</th>
                            <th>Hạng tối thiểu</th>
                            <th>Đã đổi</th>
                            <th>Trạng thái</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var rw in _rewards)
                        {
                            <tr>
                                <td style="font-weight:500;">@rw.Name</td>
                                <td style="font-weight:600;color:var(--admin-orange-primary);">@rw.Points</td>
                                <td>@rw.MinTier</td>
                                <td>@rw.Redeemed lượt</td>
                                <td>
                                    <div class="admin-status-badge @(rw.Active ? "admin-status-badge--online" : "admin-status-badge--offline")">
                                        <span class="admin-status-badge__dot"></span>
                                        @(rw.Active ? "Hoạt động" : "Tạm dừng")
                                    </div>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@code {
    private record TierDef(string Name, string Icon, string Color, string MinPoints, string Discount, string Members);
    private readonly TierDef[] _tiers = new[]
    {
        new TierDef("Bronze", "award", "#CD7F32", "0", "5%", "124"),
        new TierDef("Silver", "award", "#8B8B90", "500", "10%", "86"),
        new TierDef("Gold", "crown", "#F59E0B", "2,000", "15%", "42"),
        new TierDef("Diamond", "gem", "#8B5CF6", "5,000", "20%", "18"),
    };

    private record RewardDef(string Name, string Points, string MinTier, string Redeemed, bool Active);
    private readonly List<RewardDef> _rewards = new()
    {
        new("Giảm 10% đơn hàng", "200", "Bronze", "342", true),
        new("Miễn phí 1 ly cà phê", "500", "Silver", "128", true),
        new("Combo bữa trưa miễn phí", "1,500", "Gold", "45", true),
        new("Voucher 500K", "3,000", "Gold", "22", true),
        new("Tiệc sinh nhật VIP", "5,000", "Diamond", "8", false),
    };
}
