@*
    EN: Order History — Today's orders with table, items, total, payment method, time, server name.
    VI: Lịch sử đơn hàng — Đơn hàng hôm nay với bàn, món, tổng, PTTT, giờ, tên PV.
*@
@page "/pos/restaurant/order-history"
@layout PosLayout
@inherits PosBase

<div style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
    @* ═══ HEADER / TIÊU ĐỀ ═══ *@
    <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="@(() => NavigateTo("restaurant"))">
            <i data-lucide="arrow-left" style="width:14px;"></i> Quay lại
        </button>
        <span style="font-size:16px;font-weight:700;">Lịch sử đơn hàng</span>
        <span style="flex:1;"></span>
        <span style="font-size:12px;color:var(--pos-text-tertiary);">Hôm nay · @_orders.Count đơn</span>
    </div>

    @* ═══ SEARCH & FILTERS / TÌM KIẾM & LỌC ═══ *@
    <div style="padding:10px 16px;display:flex;gap:10px;border-bottom:1px solid var(--pos-border-subtle);">
        <div style="flex:1;display:flex;align-items:center;gap:8px;background:var(--pos-bg-interactive);border-radius:var(--pos-radius);padding:0 12px;">
            <i data-lucide="search" style="width:14px;color:var(--pos-text-tertiary);"></i>
            <input type="text" @bind="_searchQuery" @bind:event="oninput" placeholder="Tìm theo bàn, tên PV..."
                   style="flex:1;background:transparent;border:none;color:var(--pos-text-primary);font-size:13px;
                          padding:8px 0;outline:none;font-family:var(--pos-font);" />
        </div>
        <div class="pos-category-tabs" style="padding:0;">
            @foreach (var f in _filters)
            {
                <button class="pos-category-tab @(f == _activeFilter ? "pos-category-tab--active" : "")"
                        style="font-size:12px;padding:6px 12px;" @onclick="() => _activeFilter = f">@f</button>
            }
        </div>
    </div>

    @* ═══ ORDER LIST / DANH SÁCH ĐƠN ═══ *@
    <div style="flex:1;overflow-y:auto;padding:8px 16px;">
        @foreach (var order in FilteredOrders)
        {
            <div @onclick="() => _expandedId = _expandedId == order.Id ? null : order.Id"
                 style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);margin-bottom:8px;
                        cursor:pointer;transition:all .2s ease;overflow:hidden;">
                @* EN: Order row / VI: Dòng đơn *@
                <div style="display:flex;align-items:center;gap:12px;padding:12px 16px;">
                    <div style="width:40px;height:40px;border-radius:10px;background:var(--pos-bg-interactive);
                                display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
                                color:var(--pos-orange-primary);">
                        @order.Table
                    </div>
                    <div style="flex:1;">
                        <div style="font-size:14px;font-weight:600;">#@order.Id</div>
                        <div style="font-size:12px;color:var(--pos-text-tertiary);margin-top:1px;">
                            @order.Server · @order.ItemCount món
                        </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);margin-top:1px;">@order.Time</div>
                    </div>
                    <span style="font-size:11px;padding:3px 8px;border-radius:6px;font-weight:600;
                                background:@PaymentBg(order.PaymentMethod);color:@PaymentColor(order.PaymentMethod);">
                        @order.PaymentMethod
                    </span>
                    <i data-lucide="@(_expandedId == order.Id ? "chevron-up" : "chevron-down")"
                       style="width:14px;color:var(--pos-text-tertiary);"></i>
                </div>

                @* EN: Expanded detail / VI: Chi tiết mở rộng *@
                @if (_expandedId == order.Id)
                {
                    <div style="padding:0 16px 14px;border-top:1px solid var(--pos-border-subtle);">
                        @foreach (var item in order.Items)
                        {
                            <div style="display:flex;justify-content:space-between;padding:6px 0;font-size:13px;
                                        border-bottom:1px solid var(--pos-border-subtle);">
                                <span>@item.Qty x @item.Name</span>
                                <span style="color:var(--pos-text-secondary);">@FormatPrice(item.Price * item.Qty)</span>
                            </div>
                        }
                    </div>
                }
            </div>
        }
    </div>

    @* ═══ FOOTER SUMMARY / TỔNG KẾT ═══ *@
    <div style="padding:10px 16px;border-top:1px solid var(--pos-border-subtle);display:flex;justify-content:space-between;
                font-size:13px;background:var(--pos-bg-elevated);">
        <span style="color:var(--pos-text-secondary);">Tổng @FilteredOrders.Count() đơn</span>
        <span style="font-weight:700;color:var(--pos-orange-primary);">@FormatPrice(FilteredOrders.Sum(o => o.Total))</span>
    </div>
</div>

@code {
    private string _searchQuery = string.Empty;
    private string _activeFilter = "Tất cả";
    private string? _expandedId;
    private readonly string[] _filters = { "Tất cả", "Tiền mặt", "Thẻ", "Chuyển khoản" };

    // EN: Demo order history / VI: Lịch sử đơn mẫu
    private readonly List<HistoryOrder> _orders = new()
    {
        new("DH001", "B3", "10:15", "Nguyễn Văn A", 3, 285_000, "Tiền mặt",
            new() { new("Phở bò tái", 75_000, 2), new("Gỏi cuốn", 45_000, 1), new("Trà đá", 10_000, 3), new("Chả giò", 40_000, 1) }),
        new("DH002", "B7", "11:30", "Trần Thị B", 2, 395_000, "Thẻ",
            new() { new("Lẩu thái", 250_000, 1), new("Nước mía", 15_000, 2), new("Cơm tấm sườn", 65_000, 1), new("Bia Sài Gòn", 25_000, 2) }),
        new("DH003", "B2", "12:00", "Lê Minh C", 4, 520_000, "Chuyển khoản",
            new() { new("Cá kho tộ", 120_000, 1), new("Gà nướng mật ong", 180_000, 1), new("Bún bò Huế", 80_000, 1), new("Trà đá", 10_000, 4), new("Bia Sài Gòn", 25_000, 4) }),
        new("DH004", "B11", "12:45", "Phạm Đức D", 2, 175_000, "Tiền mặt",
            new() { new("Cơm tấm sườn", 65_000, 1), new("Bún bò Huế", 80_000, 1), new("Trà đá", 10_000, 3) }),
        new("DH005", "B6", "13:15", "Nguyễn Văn A", 3, 310_000, "Thẻ",
            new() { new("Phở bò tái", 75_000, 2), new("Gỏi cuốn", 45_000, 2), new("Cà phê sữa", 29_000, 1), new("Súp cua", 55_000, 1) }),
        new("DH006", "B9", "14:00", "Hoàng Thị E", 5, 680_000, "Chuyển khoản",
            new() { new("Lẩu thái", 250_000, 1), new("Gà nướng mật ong", 180_000, 1), new("Chả giò", 40_000, 2), new("Nộm bò bóp thấu", 65_000, 1), new("Trà đá", 10_000, 5), new("Bia Sài Gòn", 25_000, 3) }),
        new("DH007", "B4", "17:30", "Vũ Thành F", 2, 195_000, "Tiền mặt",
            new() { new("Phở bò tái", 75_000, 1), new("Cá kho tộ", 120_000, 1) }),
        new("DH008", "B1", "18:15", "Trần Thị B", 3, 340_000, "Thẻ",
            new() { new("Bún bò Huế", 80_000, 2), new("Gỏi cuốn", 45_000, 2), new("Cà phê sữa", 29_000, 2), new("Bánh flan", 25_000, 2) }),
    };

    private IEnumerable<HistoryOrder> FilteredOrders
    {
        get
        {
            var result = _orders.AsEnumerable();
            if (!string.IsNullOrWhiteSpace(_searchQuery))
                result = result.Where(o => o.Server.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase)
                    || o.Table.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase)
                    || o.Id.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase));
            if (_activeFilter != "Tất cả")
                result = result.Where(o => o.PaymentMethod == _activeFilter);
            return result;
        }
    }

    private static string PaymentBg(string m) => m switch
    {
        "Tiền mặt" => "rgba(34,197,94,.15)", "Thẻ" => "rgba(59,130,246,.15)",
        "Chuyển khoản" => "rgba(245,158,11,.15)", _ => "var(--pos-bg-interactive)"
    };

    private static string PaymentColor(string m) => m switch
    {
        "Tiền mặt" => "var(--pos-success)", "Thẻ" => "var(--pos-info)",
        "Chuyển khoản" => "var(--pos-warning)", _ => "var(--pos-text-tertiary)"
    };

    private record HistoryOrder(string Id, string Table, string Time, string Server, int ItemCount, decimal Total, string PaymentMethod, List<OrderItem> Items);
    private record OrderItem(string Name, decimal Price, int Qty);
}
