@*
    EN: Karaoke F&B Order — Food & beverage ordering for active room session.
    VI: Gọi F&B Karaoke — Đặt đồ ăn thức uống cho phiên phòng đang hoạt động.
*@
@page "/pos/karaoke/order-fnb"
@layout PosLayout
@inherits PosBase

@* ═══ PRODUCT PANEL (LEFT) / PANEL SẢN PHẨM (TRÁI) ═══ *@
<div class="pos-product-panel">
    @* EN: Header + room info / VI: Tiêu đề + thông tin phòng *@
    <div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--pos-border-subtle);">
        <button style="background:var(--pos-bg-interactive);border:none;color:var(--pos-text-primary);
                       padding:8px 12px;border-radius:8px;cursor:pointer;font-size:13px;"
                @onclick="@(() => NavigateTo("karaoke/room-session"))">
            <i data-lucide="arrow-left" style="width:16px;height:16px;display:inline;"></i>
        </button>
        <span style="font-size:16px;font-weight:700;">Gọi F&B</span>
        <span style="font-size:12px;color:var(--pos-text-tertiary);margin-left:auto;">Phòng VIP 2</span>
    </div>

    @* EN: Category tabs / VI: Tab danh mục *@
    <div class="pos-category-tabs">
        @foreach (var cat in _categories)
        {
            <button class="pos-category-tab @(cat == _activeCategory ? "pos-category-tab--active" : "")"
                    @onclick="() => _activeCategory = cat">
                @cat
            </button>
        }
    </div>

    @* ═══ PRODUCT GRID / LƯỚI SẢN PHẨM ═══ *@
    <div class="pos-product-grid">
        @foreach (var product in FilteredProducts)
        {
            <div class="pos-product-card" @onclick="() => AddToOrder(product)">
                <div class="pos-product-card__image" style="display:flex;align-items:center;justify-content:center;">
                    <i data-lucide="@GetCategoryIcon(product.Category)"
                       style="width:28px;height:28px;color:var(--pos-text-tertiary);"></i>
                </div>
                <span class="pos-product-card__name">@product.Name</span>
                <span class="pos-product-card__price">@FormatPrice(product.Price)</span>
            </div>
        }
    </div>
</div>

@* ═══ ORDER PANEL (RIGHT) / PANEL ĐƠN HÀNG (PHẢI) ═══ *@
<div class="pos-cart-panel">
    <div class="pos-cart-header">
        <span class="pos-cart-header__title">Đơn F&B</span>
        <span style="font-size:12px;color:var(--pos-text-tertiary);">@_orderItems.Count món</span>
    </div>

    <div class="pos-cart-items">
        @if (_orderItems.Any())
        {
            @foreach (var item in _orderItems)
            {
                <div class="pos-cart-item">
                    <div class="pos-cart-item__info">
                        <span class="pos-cart-item__name">@item.Name</span>
                        <span class="pos-cart-item__price">@FormatPrice(item.Price)</span>
                    </div>
                    <div class="pos-cart-item__qty">
                        <button @onclick="() => ChangeQty(item, -1)">−</button>
                        <span style="font-size:14px;font-weight:600;min-width:20px;text-align:center;">@item.Qty</span>
                        <button @onclick="() => ChangeQty(item, 1)">+</button>
                    </div>
                </div>
            }
        }
        else
        {
            <div style="text-align:center;padding:32px 16px;color:var(--pos-text-tertiary);font-size:13px;">
                Chọn món để thêm vào đơn
            </div>
        }
    </div>

    <div class="pos-cart-footer">
        @if (_orderItems.Any())
        {
            <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--pos-text-tertiary);margin-bottom:8px;">
                <span>Ghi chú: Gửi vào phòng VIP 2</span>
            </div>
        }
        <div class="pos-cart-total">
            <span class="pos-cart-total__label">Tổng F&B</span>
            <span class="pos-cart-total__value">@FormatPrice(_orderItems.Sum(i => i.Price * i.Qty))</span>
        </div>
        <button class="pos-btn-checkout" @onclick="@(() => NavigateTo("karaoke/room-session"))">
            <i data-lucide="send" style="width:18px;height:18px;"></i> Gửi đơn
        </button>
    </div>
</div>

@code {
    // EN: Category filter / VI: Bộ lọc danh mục
    private string _activeCategory = "Tất cả";
    private readonly string[] _categories = { "Tất cả", "Đồ uống", "Đồ ăn", "Mồi" };

    // EN: Product catalog / VI: Danh mục sản phẩm
    private readonly List<Product> _products = new()
    {
        // EN: Beverages / VI: Đồ uống
        new("Bia Tiger", 35_000, "Đồ uống"), new("Bia Heineken", 40_000, "Đồ uống"),
        new("Bia Sài Gòn", 25_000, "Đồ uống"), new("Coca-Cola", 20_000, "Đồ uống"),
        new("Nước suối", 10_000, "Đồ uống"), new("Nước cam ép", 35_000, "Đồ uống"),
        new("Trà đào", 30_000, "Đồ uống"), new("Nước dừa", 25_000, "Đồ uống"),
        // EN: Food / VI: Đồ ăn
        new("Cơm chiên", 55_000, "Đồ ăn"), new("Mì xào", 50_000, "Đồ ăn"),
        new("Gà rán", 65_000, "Đồ ăn"), new("Pizza mini", 75_000, "Đồ ăn"),
        new("Khoai tây chiên", 40_000, "Đồ ăn"), new("Xúc xích nướng", 45_000, "Đồ ăn"),
        // EN: Snacks / VI: Mồi
        new("Khô mực nướng", 85_000, "Mồi"), new("Đậu phộng rang", 30_000, "Mồi"),
        new("Trái cây dĩa", 120_000, "Mồi"), new("Bò khô", 60_000, "Mồi"),
        new("Mực rim", 70_000, "Mồi"), new("Bánh tráng trộn", 35_000, "Mồi"),
    };

    // EN: Order items / VI: Mục đơn hàng
    private readonly List<OrderItem> _orderItems = new();

    private IEnumerable<Product> FilteredProducts =>
        _activeCategory == "Tất cả" ? _products : _products.Where(p => p.Category == _activeCategory);

    private void AddToOrder(Product p)
    {
        var existing = _orderItems.FirstOrDefault(i => i.Name == p.Name);
        if (existing != null) existing.Qty++;
        else _orderItems.Add(new OrderItem(p.Name, p.Price));
    }

    private void ChangeQty(OrderItem item, int delta)
    {
        item.Qty += delta;
        if (item.Qty <= 0) _orderItems.Remove(item);
    }

    private static string GetCategoryIcon(string cat) => cat switch
    {
        "Đồ uống" => "beer", "Đồ ăn" => "utensils", "Mồi" => "popcorn", _ => "package"
    };

    private record Product(string Name, decimal Price, string Category);
    private class OrderItem(string name, decimal price)
    {
        public string Name { get; set; } = name;
        public decimal Price { get; set; } = price;
        public int Qty { get; set; } = 1;
    }
}
