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

@*
    EN: Inventory Dashboard — stock level KPIs, stock table with search, restock dates.
    VI: Dashboard kho hàng — KPI tồn kho, bảng kho có tìm kiếm, ngày nhập hàng.
    Design: pencil-design/src/pages/tPOS/admin/inventory-dashboard.pen
*@

<PageTitle>Kho hàng — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Kho hàng</h1>
        <p class="admin-topbar__subtitle">@_stockItems.Length 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="download"></i>
            <span>Xuất kho</span>
        </button>
        <button class="admin-btn-primary">
            <i data-lucide="plus"></i>
            <span>Nhập kho</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(59,130,246,0.125);">
                    <i data-lucide="package" style="color:#3B82F6;"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">1,248</div>
            <div class="admin-kpi-card__label">Tổng sản phẩm</div>
        </div>
        <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="alert-triangle" style="color:#F59E0B;"></i>
                </div>
                <div class="admin-kpi-card__badge admin-kpi-card__badge--down">
                    <span>Cần nhập</span>
                </div>
            </div>
            <div class="admin-kpi-card__value">12</div>
            <div class="admin-kpi-card__label">Sắp hết hàng</div>
        </div>
        <div class="admin-kpi-card">
            <div class="admin-kpi-card__header">
                <div class="admin-kpi-card__icon" style="background-color:rgba(239,68,68,0.125);">
                    <i data-lucide="package-x" style="color:#EF4444;"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">3</div>
            <div class="admin-kpi-card__label">Hết hàng</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="wallet" style="color:#22C55E;"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">82.4M</div>
            <div class="admin-kpi-card__label">Giá trị tồn kho</div>
        </div>
    </div>

    @* Stock Table *@
    <div class="admin-panel">
        <div class="admin-panel__header">
            <h3 class="admin-panel__title">
                <i data-lucide="clipboard-list" style="color:var(--admin-orange-primary);"></i>
                Danh sách tồn kho
            </h3>
            <a href="/admin/inventory/orders" class="admin-panel__action">Đặt hàng nhập →</a>
        </div>
        <div class="admin-panel__body" style="padding:0;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Sản phẩm</th>
                        <th>Danh mục</th>
                        <th>Tồn kho</th>
                        <th>Đơn vị</th>
                        <th>Trạng thái</th>
                        <th>Nhập lần cuối</th>
                        <th style="text-align:right;">Giá trị</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in _stockItems)
                    {
                        <tr>
                            <td style="font-weight:600;">@item.Name</td>
                            <td style="color:var(--admin-text-tertiary);">@item.Category</td>
                            <td>@item.Qty</td>
                            <td style="color:var(--admin-text-tertiary);">@item.Unit</td>
                            <td>
                                <div class="admin-status-badge @GetStockStatusClass(item.Status)" style="font-size:10px;padding:2px 8px;">
                                    <span class="admin-status-badge__dot"></span>
                                    @item.Status
                                </div>
                            </td>
                            <td style="color:var(--admin-text-tertiary);">@item.LastRestock</td>
                            <td style="text-align:right;font-weight:600;">@item.Value</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>

@code {
    private string GetStockStatusClass(string status) => status switch
    {
        "Đủ hàng" => "admin-status-badge--online",
        "Sắp hết" => "admin-status-badge--setup",
        "Hết hàng" => "admin-status-badge--offline",
        _ => ""
    };

    private record StockItem(string Name, string Category, string Qty, string Unit, string Status, string LastRestock, string Value);
    private readonly StockItem[] _stockItems = new[]
    {
        new StockItem("Cà phê Arabica", "Nguyên liệu", "45", "kg", "Đủ hàng", "10/02/2025", "13.5M"),
        new StockItem("Cà phê Robusta", "Nguyên liệu", "32", "kg", "Đủ hàng", "08/02/2025", "8.0M"),
        new StockItem("Sữa tươi", "Nguyên liệu", "8", "thùng", "Sắp hết", "11/02/2025", "2.4M"),
        new StockItem("Đường", "Nguyên liệu", "25", "kg", "Đủ hàng", "05/02/2025", "0.5M"),
        new StockItem("Ly giấy 12oz", "Bao bì", "3", "thùng", "Sắp hết", "07/02/2025", "1.8M"),
        new StockItem("Nắp ly", "Bao bì", "0", "thùng", "Hết hàng", "01/02/2025", "0"),
        new StockItem("Trà Oolong", "Nguyên liệu", "18", "kg", "Đủ hàng", "09/02/2025", "5.4M"),
        new StockItem("Bột matcha", "Nguyên liệu", "2", "kg", "Sắp hết", "06/02/2025", "3.2M"),
        new StockItem("Ống hút giấy", "Bao bì", "0", "thùng", "Hết hàng", "28/01/2025", "0"),
        new StockItem("Thịt bò Úc", "Thực phẩm", "15", "kg", "Đủ hàng", "11/02/2025", "12.0M"),
    };
}
