@*
    EN: Pending Orders — Active orders list with status filters, table/customer, items, elapsed time, quick actions.
    VI: Đơn hàng đang chờ — Danh sách đơn đang xử lý với bộ lọc trạng thái, bàn/khách, món, thời gian, thao tác nhanh.
*@
@page "/pos/{ShopId:guid}/operations/pending-orders"
@layout PosLayout
@inherits PosBase
@using WebClientTpos.Client.Services
@inject PosDataService DataService
@inject IJSRuntime JS

<div style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
    @* ═══ HEADER ═══ *@
    <div style="padding:12px 16px;border-bottom:1px solid var(--pos-border-subtle);display:flex;align-items:center;gap:12px;">
        <button class="pos-category-tab" @onclick="@(async () => await JS.InvokeVoidAsync("history.back"))">
            <i data-lucide="arrow-left" style="width:14px;"></i> Quay lại
        </button>
        <span style="font-size:16px;font-weight:700;">Đơn hàng đang chờ</span>
        <span style="flex:1;"></span>
        <span style="font-size:12px;color:var(--pos-text-tertiary);">@FilteredOrders.Count() đơn</span>
    </div>

    @* ═══ STATUS FILTER TABS / TAB LỌC TRẠNG THÁI ═══ *@
    <div style="padding:10px 16px;border-bottom:1px solid var(--pos-border-subtle);">
        <div class="pos-category-tabs" style="padding:0;">
            @foreach (var tab in _statusTabs)
            {
                <button class="pos-category-tab @(tab.Key == _activeStatus ? "pos-category-tab--active" : "")"
                        style="font-size:13px;" @onclick="() => _activeStatus = tab.Key">
                    @tab.Label
                    <span style="margin-left:4px;font-size:11px;padding:1px 6px;border-radius:4px;
                                 background:var(--pos-bg-interactive);">
                        @_orders.Count(o => tab.Key == "all" || o.Status == tab.Key)
                    </span>
                </button>
            }
        </div>
    </div>

    @* ═══ ORDER LIST / DANH SÁCH ĐƠN HÀNG ═══ *@
    <div style="flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:10px;">
        @foreach (var order in FilteredOrders)
        {
            <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:16px;
                        border-left:4px solid @GetStatusColor(order.Status);">
                @* EN: Order header / VI: Tiêu đề đơn *@
                <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px;">
                    <div style="width:40px;height:40px;border-radius:10px;background:var(--pos-bg-interactive);
                                display:flex;align-items:center;justify-content:center;">
                        <i data-lucide="@(string.IsNullOrEmpty(order.Table) ? "user" : "layout-grid")"
                           style="width:18px;height:18px;color:var(--pos-orange-primary);"></i>
                    </div>
                    <div style="flex:1;">
                        <div style="font-size:14px;font-weight:700;">
                            #@order.Id
                            @if (!string.IsNullOrEmpty(order.Table))
                            {
                                <span style="color:var(--pos-text-tertiary);font-weight:500;"> — @order.Table</span>
                            }
                        </div>
                        <div style="font-size:12px;color:var(--pos-text-tertiary);">@order.Customer</div>
                    </div>
                    <div style="text-align:right;">
                        <div style="font-size:14px;font-weight:700;color:var(--pos-orange-primary);">@FormatPrice(order.Total)</div>
                        <div style="font-size:11px;color:var(--pos-text-tertiary);">@order.Elapsed phút trước</div>
                    </div>
                    <span style="font-size:11px;padding:4px 10px;border-radius:6px;font-weight:600;
                                 background:@GetStatusBg(order.Status);color:@GetStatusColor(order.Status);">
                        @GetStatusLabel(order.Status)
                    </span>
                </div>

                @* EN: Order items / VI: Danh sách món *@
                <div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;">
                    @foreach (var item in order.Items)
                    {
                        <span style="font-size:12px;padding:4px 10px;border-radius:6px;background:var(--pos-bg-interactive);
                                     color:var(--pos-text-secondary);">
                            @item
                        </span>
                    }
                </div>

                @* EN: Quick actions / VI: Thao tác nhanh *@
                <div style="display:flex;gap:8px;">
                    <button style="padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;
                                   border:1px solid var(--pos-border-default);background:transparent;color:var(--pos-text-primary);"
                            @onclick="() => ViewOrder(order)">
                        <i data-lucide="eye" style="width:12px;height:12px;display:inline;"></i> Xem
                    </button>
                    @if (order.Status != "ready")
                    {
                        <button style="padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;
                                       border:none;background:rgba(255,92,0,.12);color:var(--pos-orange-primary);"
                                @onclick="() => UpdateStatus(order)">
                            <i data-lucide="refresh-cw" style="width:12px;height:12px;display:inline;"></i> Cập nhật
                        </button>
                    }
                    <button style="padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;
                                   border:none;background:rgba(239,68,68,.1);color:var(--pos-danger);"
                            @onclick="() => CancelOrder(order)">
                        <i data-lucide="x" style="width:12px;height:12px;display:inline;"></i> Hủy
                    </button>
                </div>
            </div>
        }
    </div>
</div>

@code {
    // EN: Operational data — requires dedicated shift/cash management API.
    // VI: Dữ liệu vận hành — cần API quản lý ca/tiền mặt riêng.
    // TODO: Integrate with Merchant Service staff/shift endpoints when available.

    // EN: Status filter / VI: Bộ lọc trạng thái
    private string _activeStatus = "all";
    private readonly List<StatusTab> _statusTabs = new()
    {
        new("all", "Tất cả"),
        new("pending", "Chờ xử lý"),
        new("preparing", "Đang làm"),
        new("ready", "Sẵn sàng"),
    };

    // EN: Demo pending orders / VI: Đơn hàng mẫu đang chờ
    private readonly List<PendingOrder> _orders = new()
    {
        new("PO001", "Bàn 3", "Trần Văn B", new[] { "Phở bò x2", "Gỏi cuốn x1" }, 285_000, "pending", 3),
        new("PO002", "Bàn 7", "Lê Thị C", new[] { "Cơm tấm x1", "Trà đá x2" }, 85_000, "preparing", 8),
        new("PO003", "", "Nguyễn Văn D (Mang đi)", new[] { "Bún bò Huế x1", "Chả giò x2" }, 160_000, "pending", 5),
        new("PO004", "Bàn 11", "Phạm Thị E", new[] { "Lẩu thái x1", "Nước mía x3" }, 295_000, "preparing", 15),
        new("PO005", "Bàn 2", "Hoàng Văn F", new[] { "Cà phê sữa x3", "Bánh mì x2" }, 155_000, "ready", 20),
        new("PO006", "Bàn 9", "Đỗ Minh G", new[] { "Gà nướng x1", "Cơm trắng x2", "Canh chua x1" }, 320_000, "pending", 1),
    };

    private IEnumerable<PendingOrder> FilteredOrders =>
        _activeStatus == "all" ? _orders : _orders.Where(o => o.Status == _activeStatus);

    private void ViewOrder(PendingOrder order) { }

    private void UpdateStatus(PendingOrder order)
    {
        order.Status = order.Status switch
        {
            "pending" => "preparing",
            "preparing" => "ready",
            _ => order.Status
        };
    }

    private void CancelOrder(PendingOrder order) => _orders.Remove(order);

    private static string GetStatusColor(string status) => status switch
    {
        "pending" => "#F59E0B",
        "preparing" => "#3B82F6",
        "ready" => "#22C55E",
        _ => "var(--pos-text-tertiary)"
    };

    private static string GetStatusBg(string status) => status switch
    {
        "pending" => "rgba(245,158,11,.15)",
        "preparing" => "rgba(59,130,246,.15)",
        "ready" => "rgba(34,197,94,.15)",
        _ => "var(--pos-bg-interactive)"
    };

    private static string GetStatusLabel(string status) => status switch
    {
        "pending" => "Chờ xử lý",
        "preparing" => "Đang làm",
        "ready" => "Sẵn sàng",
        _ => status
    };

    private record StatusTab(string Key, string Label);
    private class PendingOrder(string id, string table, string customer, string[] items, decimal total, string status, int elapsed)
    {
        public string Id { get; set; } = id;
        public string Table { get; set; } = table;
        public string Customer { get; set; } = customer;
        public string[] Items { get; set; } = items;
        public decimal Total { get; set; } = total;
        public string Status { get; set; } = status;
        public int Elapsed { get; set; } = elapsed;
    }
}
