@*
    EN: Menu Management — Quick menu: toggle availability, sold-out marking, price override.
    VI: Quản lý menu — Menu nhanh: bật/tắt khả dụng, đánh dấu hết hàng, ghi đè giá.
*@
@page "/pos/cafe/menu-management"
@layout PosLayout
@inherits PosBase

<div style="display:flex;flex-direction:column;height:100%;padding:20px;gap:16px;">
    @* EN: Header / VI: Tiêu đề *@
    <div style="display:flex;justify-content:space-between;align-items:center;">
        <div>
            <h2 style="font-size:20px;font-weight:700;margin:0;">Quản lý menu</h2>
            <span style="font-size:13px;color:var(--pos-text-tertiary);">Cập nhật tình trạng món — @_items.Count(i => i.Available) / @_items.Count có sẵn</span>
        </div>
        <div style="display:flex;gap:8px;">
            @foreach (var cat in _filterCategories)
            {
                <button class="pos-category-tab @(_filterCategory == cat ? "pos-category-tab--active" : "")"
                        @onclick="() => _filterCategory = cat">
                    @cat
                </button>
            }
        </div>
    </div>

    @* EN: Menu items table / VI: Bảng danh sách món *@
    <div style="flex:1;overflow-y:auto;">
        <div style="display:flex;flex-direction:column;gap:4px;">
            @* EN: Table header / VI: Header bảng *@
            <div style="display:grid;grid-template-columns:1fr 100px 120px 140px 80px;gap:12px;padding:10px 16px;font-size:12px;color:var(--pos-text-tertiary);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;">
                <span>Tên món</span>
                <span>Danh mục</span>
                <span style="text-align:right;">Giá gốc</span>
                <span style="text-align:right;">Giá hiện tại</span>
                <span style="text-align:center;">Trạng thái</span>
            </div>

            @foreach (var item in FilteredItems)
            {
                <div style="display:grid;grid-template-columns:1fr 100px 120px 140px 80px;gap:12px;padding:14px 16px;background:var(--pos-bg-elevated);border-radius:var(--pos-radius);align-items:center;
                            opacity:@(item.Available ? "1" : "0.5");">
                    @* EN: Item name / VI: Tên món *@
                    <div style="display:flex;align-items:center;gap:12px;">
                        <div style="width:40px;height:40px;border-radius:8px;background:var(--pos-bg-interactive);display:flex;align-items:center;justify-content:center;">
                            <i data-lucide="coffee" style="width:18px;height:18px;color:var(--pos-text-tertiary);"></i>
                        </div>
                        <div>
                            <div style="font-size:14px;font-weight:500;">@item.Name</div>
                            @if (!item.Available)
                            {
                                <span style="font-size:10px;color:var(--pos-danger);font-weight:600;text-transform:uppercase;">Hết hàng</span>
                            }
                        </div>
                    </div>

                    @* EN: Category / VI: Danh mục *@
                    <span style="font-size:12px;color:var(--pos-text-tertiary);">@item.Category</span>

                    @* EN: Original price / VI: Giá gốc *@
                    <span style="font-size:13px;color:var(--pos-text-secondary);text-align:right;">@FormatPrice(item.OriginalPrice)</span>

                    @* EN: Current price (editable) / VI: Giá hiện tại (chỉnh sửa) *@
                    <div style="text-align:right;">
                        @if (item.IsEditingPrice)
                        {
                            <input type="number" value="@item.CurrentPrice" style="width:100px;padding:6px 8px;border-radius:6px;border:1px solid var(--pos-orange-primary);background:var(--pos-bg-interactive);color:var(--pos-text-primary);font-size:13px;text-align:right;outline:none;"
                                   @onchange="@((ChangeEventArgs e) => { item.CurrentPrice = decimal.Parse(e.Value?.ToString() ?? "0"); item.IsEditingPrice = false; })" />
                        }
                        else
                        {
                            <span style="font-size:14px;font-weight:600;color:@(item.CurrentPrice != item.OriginalPrice ? "var(--pos-warning)" : "var(--pos-orange-primary)");cursor:pointer;"
                                  @onclick="() => item.IsEditingPrice = true">
                                @FormatPrice(item.CurrentPrice)
                                @if (item.CurrentPrice != item.OriginalPrice)
                                {
                                    <i data-lucide="pencil" style="width:10px;height:10px;vertical-align:middle;margin-left:4px;"></i>
                                }
                            </span>
                        }
                    </div>

                    @* EN: Toggle availability / VI: Bật/tắt khả dụng *@
                    <div style="text-align:center;">
                        <button style="width:44px;height:24px;border-radius:12px;border:none;cursor:pointer;position:relative;transition:background 0.2s;
                                       background:@(item.Available ? "var(--pos-success)" : "var(--pos-bg-interactive)");"
                                @onclick="() => item.Available = !item.Available">
                            <span style="position:absolute;top:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left 0.2s;
                                         left:@(item.Available ? "22px" : "2px");"></span>
                        </button>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

@code {
    private string _filterCategory = "Tất cả";
    private readonly string[] _filterCategories = { "Tất cả", "Cà phê", "Trà", "Sinh tố", "Đồ ăn" };

    private IEnumerable<MenuItem> FilteredItems =>
        _filterCategory == "Tất cả" ? _items : _items.Where(i => i.Category == _filterCategory);

    // EN: Demo menu items / VI: Danh sách menu mẫu
    private readonly List<MenuItem> _items = new()
    {
        new("Cà phê sữa đá", "Cà phê", 35_000),
        new("Cà phê đen", "Cà phê", 29_000),
        new("Bạc xỉu", "Cà phê", 39_000),
        new("Espresso", "Cà phê", 45_000),
        new("Cappuccino", "Cà phê", 55_000),
        new("Latte", "Cà phê", 55_000),
        new("Trà đào", "Trà", 45_000),
        new("Trà vải", "Trà", 45_000),
        new("Trà sen vàng", "Trà", 49_000),
        new("Sinh tố bơ", "Sinh tố", 55_000) { Available = false },
        new("Sinh tố xoài", "Sinh tố", 49_000),
        new("Sinh tố dâu", "Sinh tố", 49_000) { Available = false },
        new("Bánh mì", "Đồ ăn", 25_000),
        new("Croissant", "Đồ ăn", 35_000),
        new("Cookie", "Đồ ăn", 20_000),
    };

    private class MenuItem(string name, string category, decimal price)
    {
        public string Name { get; set; } = name;
        public string Category { get; set; } = category;
        public decimal OriginalPrice { get; set; } = price;
        public decimal CurrentPrice { get; set; } = price;
        public bool Available { get; set; } = true;
        public bool IsEditingPrice { get; set; }
    }
}
