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

@*
    EN: Product catalog — grid/list view of all products with categories & search.
    VI: Danh mục sản phẩm — hiển thị dạng grid/list, danh mục & tìm kiếm.
    Design: pencil-design/src/pages/tPOS/admin/product-catalog.pen
*@

<PageTitle>Sản phẩm — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Sản phẩm & Menu</h1>
        <p class="admin-topbar__subtitle">@_products.Count sản phẩm • Tất cả cửa 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 sản phẩm..." @bind="SearchQuery" />
        </div>
        <button class="admin-btn-secondary">
            <i data-lucide="filter"></i>
            <span>Bộ lọc</span>
        </button>
        <button class="admin-btn-primary" @onclick="@(() => NavigateTo("products/create"))">
            <i data-lucide="plus"></i>
            <span>Thêm sản phẩm</span>
        </button>
    </div>
</div>

@* ═══ CATEGORY TABS ═══ *@
<div class="admin-tabs">
    <button class="admin-tab @(_category == "all" ? "admin-tab--active" : "")" @onclick="@(() => _category = "all")">
        Tất cả <span class="admin-tab__badge admin-tab__badge--active">@_products.Count</span>
    </button>
    <button class="admin-tab @(_category == "coffee" ? "admin-tab--active" : "")" @onclick="@(() => _category = "coffee")">
        Cà phê <span class="admin-tab__badge">8</span>
    </button>
    <button class="admin-tab @(_category == "tea" ? "admin-tab--active" : "")" @onclick="@(() => _category = "tea")">
        Trà <span class="admin-tab__badge">5</span>
    </button>
    <button class="admin-tab @(_category == "food" ? "admin-tab--active" : "")" @onclick="@(() => _category = "food")">
        Đồ ăn <span class="admin-tab__badge">4</span>
    </button>
    <button class="admin-tab @(_category == "other" ? "admin-tab--active" : "")" @onclick="@(() => _category = "other")">
        Khác <span class="admin-tab__badge">3</span>
    </button>
</div>

@* ═══ PRODUCT GRID ═══ *@
<div class="admin-content" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;">
    @foreach (var prod in _products)
    {
        <div class="admin-product-card">
            <div class="admin-product-card__image" style="background-color:@(prod.BgColor);">
                <i data-lucide="@prod.Icon" style="color:@prod.IconColor;width:32px;height:32px;"></i>
            </div>
            <div class="admin-product-card__body">
                <div style="display:flex;justify-content:space-between;align-items:flex-start;">
                    <div>
                        <div style="font-size:14px;font-weight:600;">@prod.Name</div>
                        <div style="font-size:12px;color:var(--admin-text-tertiary);">@prod.Category</div>
                    </div>
                    <div class="admin-status-badge @(prod.Available ? "admin-status-badge--online" : "admin-status-badge--offline")" style="font-size:10px;padding:2px 8px;">
                        <span class="admin-status-badge__dot" style="width:5px;height:5px;"></span>
                        @(prod.Available ? "Có" : "Hết")
                    </div>
                </div>
                <div style="display:flex;justify-content:space-between;align-items:center;margin-top:8px;">
                    <span style="font-size:16px;font-weight:700;color:var(--admin-orange-primary);">@prod.Price</span>
                    <span style="font-size:11px;color:var(--admin-text-tertiary);">Đã bán: @prod.Sold</span>
                </div>
            </div>
        </div>
    }
</div>

@code {
    private string _category = "all";

    private record ProductItem(string Name, string Category, string Price, string Sold, string Icon, string IconColor, string BgColor, bool Available);
    private readonly List<ProductItem> _products = new()
    {
        new("Espresso", "Cà phê", "35K", "1,024", "coffee", "#FF5C00", "rgba(255,92,0,0.08)", true),
        new("Cappuccino", "Cà phê", "45K", "856", "coffee", "#FF5C00", "rgba(255,92,0,0.08)", true),
        new("Latte", "Cà phê", "49K", "742", "coffee", "#FF5C00", "rgba(255,92,0,0.08)", true),
        new("Americano", "Cà phê", "39K", "631", "coffee", "#FF5C00", "rgba(255,92,0,0.08)", true),
        new("Trà sen vàng", "Trà", "42K", "520", "leaf", "#22C55E", "rgba(34,197,94,0.08)", true),
        new("Trà đào", "Trà", "39K", "488", "leaf", "#22C55E", "rgba(34,197,94,0.08)", true),
        new("Croissant", "Đồ ăn", "35K", "312", "croissant", "#F59E0B", "rgba(245,158,11,0.08)", true),
        new("Bánh mì", "Đồ ăn", "28K", "245", "sandwich", "#F59E0B", "rgba(245,158,11,0.08)", false),
        new("Matcha Latte", "Cà phê", "52K", "398", "coffee", "#22C55E", "rgba(34,197,94,0.08)", true),
        new("Soda chanh", "Khác", "32K", "188", "glass-water", "#3B82F6", "rgba(59,130,246,0.08)", true),
    };
}
