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

@*
    EN: Customer database — list of customers with search, filter by tier (VIP/Gold/Silver/New), cards with total spent + visits.
    VI: Cơ sở dữ liệu khách hàng — danh sách khách hàng, tìm kiếm, lọc theo hạng, thẻ với tổng chi tiêu + lượt ghé.
    Design: pencil-design/src/pages/tPOS/admin/customer-database.pen
*@

<PageTitle>Khách hàng — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Khách hàng</h1>
        <p class="admin-topbar__subtitle">Tất cả cửa hàng • @_customers.Count khách hàng</p>
    </div>
    <div class="admin-topbar__right">
        <div class="admin-search" style="width:220px;">
            <i data-lucide="search"></i>
            <input type="text" placeholder="Tìm khách hàng..." @bind="SearchQuery" />
        </div>
        <button class="admin-btn-secondary">
            <i data-lucide="download"></i>
            <span>Xuất Excel</span>
        </button>
        <button class="admin-btn-primary" @onclick="@(() => NavigateTo("customers/create"))">
            <i data-lucide="user-plus"></i>
            <span>Thêm khách hàng</span>
        </button>
    </div>
</div>

@* ═══ TABS ═══ *@
<div class="admin-tabs">
    <button class="admin-tab @(_activeTab == "all" ? "admin-tab--active" : "")" @onclick="@(() => _activeTab = "all")">
        Tất cả <span class="admin-tab__badge admin-tab__badge--active">@_customers.Count</span>
    </button>
    <button class="admin-tab @(_activeTab == "vip" ? "admin-tab--active" : "")" @onclick="@(() => _activeTab = "vip")">
        VIP <span class="admin-tab__badge">@_customers.Count(c => c.Tier == "VIP")</span>
    </button>
    <button class="admin-tab @(_activeTab == "gold" ? "admin-tab--active" : "")" @onclick="@(() => _activeTab = "gold")">
        Gold <span class="admin-tab__badge">@_customers.Count(c => c.Tier == "Gold")</span>
    </button>
    <button class="admin-tab @(_activeTab == "silver" ? "admin-tab--active" : "")" @onclick="@(() => _activeTab = "silver")">
        Silver <span class="admin-tab__badge">@_customers.Count(c => c.Tier == "Silver")</span>
    </button>
    <button class="admin-tab @(_activeTab == "new" ? "admin-tab--active" : "")" @onclick="@(() => _activeTab = "new")">
        Mới <span class="admin-tab__badge">@_customers.Count(c => c.Tier == "New")</span>
    </button>
</div>

@* ═══ CUSTOMER GRID ═══ *@
<div class="admin-content" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;">
    @foreach (var c in FilteredCustomers)
    {
        <div class="admin-staff-card" @onclick="@(() => NavigateTo($"customers/{c.Id}"))">
            <div class="admin-staff-card__header">
                <div class="admin-user-avatar" style="width:48px;height:48px;font-size:16px;background-color:@c.AvatarColor;">
                    @c.Initials
                </div>
                <div style="padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;background-color:@c.TierBg;color:@c.TierColor;">
                    @c.Tier
                </div>
            </div>
            <div style="display:flex;flex-direction:column;gap:2px;">
                <span style="font-size:16px;font-weight:600;">@c.Name</span>
                <span style="font-size:12px;color:var(--admin-text-tertiary);">@c.Phone • @c.Email</span>
            </div>
            <div style="display:flex;gap:8px;">
                <div class="admin-store-stat" style="flex:1;">
                    <div class="admin-store-stat__value">@c.TotalSpent</div>
                    <div class="admin-store-stat__label">Tổng chi tiêu</div>
                </div>
                <div class="admin-store-stat" style="flex:1;">
                    <div class="admin-store-stat__value">@c.Visits</div>
                    <div class="admin-store-stat__label">Lượt ghé</div>
                </div>
                <div class="admin-store-stat" style="flex:1;">
                    <div class="admin-store-stat__value">@c.Points</div>
                    <div class="admin-store-stat__label">Điểm tích</div>
                </div>
            </div>
        </div>
    }
</div>

@code {
    private string _activeTab = "all";

    private List<CustomerItem> FilteredCustomers => _activeTab == "all"
        ? _customers
        : _customers.Where(c => c.Tier.ToLower() == (_activeTab == "new" ? "new" : _activeTab)).ToList();

    private record CustomerItem(string Id, string Name, string Initials, string Phone, string Email, string Tier,
        string TierColor, string TierBg, string AvatarColor, string TotalSpent, string Visits, string Points);

    private readonly List<CustomerItem> _customers = new()
    {
        new("1", "Nguyễn Thị Mai", "NM", "0901 234 567", "mai@email.com", "VIP", "#FF5C00", "rgba(255,92,0,0.125)", "#FF5C00", "12.5M", "48", "2,500"),
        new("2", "Trần Văn Hùng", "TH", "0912 345 678", "hung@email.com", "VIP", "#FF5C00", "rgba(255,92,0,0.125)", "#8B5CF6", "9.8M", "35", "1,960"),
        new("3", "Lê Hoàng Anh", "LA", "0923 456 789", "anh@email.com", "Gold", "#F59E0B", "rgba(245,158,11,0.125)", "#3B82F6", "5.2M", "22", "1,040"),
        new("4", "Phạm Minh Châu", "PC", "0934 567 890", "chau@email.com", "Gold", "#F59E0B", "rgba(245,158,11,0.125)", "#22C55E", "4.7M", "19", "940"),
        new("5", "Hoàng Thị Lan", "HL", "0945 678 901", "lan@email.com", "Silver", "#8B8B90", "rgba(139,139,144,0.125)", "#EC4899", "2.1M", "12", "420"),
        new("6", "Võ Đức Mạnh", "VM", "0956 789 012", "manh@email.com", "Silver", "#8B8B90", "rgba(139,139,144,0.125)", "#06B6D4", "1.8M", "10", "360"),
        new("7", "Đặng Thanh Tâm", "ĐT", "0967 890 123", "tam@email.com", "New", "#3B82F6", "rgba(59,130,246,0.125)", "#F59E0B", "350K", "3", "70"),
        new("8", "Bùi Phương Uyên", "BU", "0978 901 234", "uyen@email.com", "New", "#3B82F6", "rgba(59,130,246,0.125)", "#3B82F6", "120K", "1", "24"),
    };
}
