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

@*
    EN: Purchase Orders — PO list with status, create PO, filter by supplier/status.
    VI: Đơn đặt hàng — danh sách PO, tạo PO, lọc theo NCC/trạng thái.
    Design: pencil-design/src/pages/tPOS/admin/purchase-orders.pen
*@

<PageTitle>Đơn đặt hàng — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Đơn đặt hàng</h1>
        <p class="admin-topbar__subtitle">@_orders.Length đơn hàng • Tháng 02/2025</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 đơn hàng..." @bind="SearchQuery" />
        </div>
        <button class="admin-btn-primary">
            <i data-lucide="plus"></i>
            <span>Tạo đơn hàng</span>
        </button>
    </div>
</div>

@* ═══ TABS ═══ *@
<div class="admin-tabs">
    <button class="admin-tab @(_tab == "all" ? "admin-tab--active" : "")" @onclick="@(() => _tab = "all")">
        Tất cả <span class="admin-tab__badge @(_tab == "all" ? "admin-tab__badge--active" : "")">@_orders.Length</span>
    </button>
    <button class="admin-tab @(_tab == "pending" ? "admin-tab--active" : "")" @onclick="@(() => _tab = "pending")">
        Chờ xác nhận <span class="admin-tab__badge">3</span>
    </button>
    <button class="admin-tab @(_tab == "confirmed" ? "admin-tab--active" : "")" @onclick="@(() => _tab = "confirmed")">
        Đã xác nhận <span class="admin-tab__badge">2</span>
    </button>
    <button class="admin-tab @(_tab == "delivered" ? "admin-tab--active" : "")" @onclick="@(() => _tab = "delivered")">
        Đã giao <span class="admin-tab__badge">3</span>
    </button>
</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(255,92,0,0.125);">
                    <i data-lucide="file-text" style="color:var(--admin-orange-primary);"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">@_orders.Length</div>
            <div class="admin-kpi-card__label">Tổng đơn 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(245,158,11,0.125);">
                    <i data-lucide="clock" style="color:#F59E0B;"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">3</div>
            <div class="admin-kpi-card__label">Chờ xác nhận</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">68.5M</div>
            <div class="admin-kpi-card__label">Tổng giá trị PO</div>
        </div>
    </div>

    @* PO 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 đơn đặt hàng
            </h3>
        </div>
        <div class="admin-panel__body" style="padding:0;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Mã PO</th>
                        <th>Nhà cung cấp</th>
                        <th>Số mặt hàng</th>
                        <th>Ngày đặt</th>
                        <th>Trạng thái</th>
                        <th style="text-align:right;">Tổng tiền</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var order in _orders)
                    {
                        <tr>
                            <td style="font-weight:600;">@order.Code</td>
                            <td>@order.Supplier</td>
                            <td>@order.Items mặt hàng</td>
                            <td style="color:var(--admin-text-tertiary);">@order.Date</td>
                            <td>
                                <div class="admin-status-badge @GetPOStatusClass(order.Status)" style="font-size:10px;padding:2px 8px;">
                                    <span class="admin-status-badge__dot"></span>
                                    @order.Status
                                </div>
                            </td>
                            <td style="text-align:right;font-weight:600;color:var(--admin-orange-primary);">@order.Total</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>

@code {
    private string _tab = "all";

    private string GetPOStatusClass(string status) => status switch
    {
        "Đã giao" => "admin-status-badge--online",
        "Đã xác nhận" => "admin-status-badge--paused",
        "Chờ xác nhận" => "admin-status-badge--setup",
        _ => ""
    };

    private record POItem(string Code, string Supplier, string Items, string Date, string Status, string Total);
    private readonly POItem[] _orders = new[]
    {
        new POItem("PO-0042", "Cà phê Trung Nguyên", "5", "12/02/2025", "Chờ xác nhận", "18.5M"),
        new POItem("PO-0041", "Vinamilk", "3", "10/02/2025", "Đã xác nhận", "8.2M"),
        new POItem("PO-0040", "Đại Tân Phát", "8", "09/02/2025", "Chờ xác nhận", "12.4M"),
        new POItem("PO-0039", "TH True Milk", "2", "08/02/2025", "Đã giao", "4.8M"),
        new POItem("PO-0038", "Cà phê Trung Nguyên", "4", "06/02/2025", "Đã giao", "14.2M"),
        new POItem("PO-0037", "Metro Cash & Carry", "12", "05/02/2025", "Đã xác nhận", "6.5M"),
        new POItem("PO-0036", "Saigon Food", "6", "03/02/2025", "Chờ xác nhận", "5.8M"),
        new POItem("PO-0035", "Vinamilk", "3", "01/02/2025", "Đã giao", "3.9M"),
    };
}
