@*
    EN: Café POS Mobile — Single column: categories, product grid, floating cart button.
    VI: POS Café Mobile — Một cột: danh mục, lưới sản phẩm, nút giỏ hàng nổi.
*@
@page "/pos/cafe/mobile"
@layout PosLayout
@inherits PosBase

<div style="display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;">
    @* EN: Category tabs / VI: Tab danh mục *@
    <div class="pos-category-tabs" style="padding:8px 12px;">
        @foreach (var cat in _categories)
        {
            <button class="pos-category-tab @(cat == _selectedCategory ? "pos-category-tab--active" : "")"
                    style="padding:10px 16px;font-size:14px;"
                    @onclick="() => _selectedCategory = cat">
                @cat
            </button>
        }
    </div>

    @* EN: Product grid / VI: Lưới sản phẩm *@
    <div class="pos-product-grid" style="grid-template-columns:repeat(2, 1fr);gap:10px;padding:12px;">
        @foreach (var product in FilteredProducts)
        {
            <div class="pos-product-card" style="padding:10px;" @onclick="() => AddToCart(product)">
                <div class="pos-product-card__image" style="aspect-ratio:1.2;display:flex;align-items:center;justify-content:center;">
                    <i data-lucide="coffee" style="width:28px;height:28px;color:var(--pos-text-tertiary);"></i>
                </div>
                <span class="pos-product-card__name" style="font-size:12px;">@product.Name</span>
                <span class="pos-product-card__price" style="font-size:13px;">@FormatPrice(product.Price)</span>
            </div>
        }
    </div>

    @* EN: Floating cart button / VI: Nút giỏ hàng nổi *@
    @if (_cartItems.Any())
    {
        <button style="position:fixed;bottom:20px;right:20px;width:64px;height:64px;border-radius:50%;background:var(--pos-orange-primary);border:none;color:#fff;font-size:20px;cursor:pointer;box-shadow:0 4px 20px rgba(255,92,0,0.4);display:flex;align-items:center;justify-content:center;z-index:100;"
                @onclick="() => _showCart = !_showCart">
            <i data-lucide="shopping-cart" style="width:24px;height:24px;"></i>
            <span style="position:absolute;top:-4px;right:-4px;background:var(--pos-danger);color:#fff;font-size:11px;font-weight:700;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;">
                @_cartItems.Sum(i => i.Qty)
            </span>
        </button>
    }

    @* EN: Bottom sheet cart / VI: Giỏ hàng dạng sheet dưới *@
    @if (_showCart)
    {
        <div class="pos-dialog-overlay" @onclick="() => _showCart = false">
            <div style="position:fixed;bottom:0;left:0;right:0;max-height:70vh;background:var(--pos-bg-elevated);border-radius:20px 20px 0 0;display:flex;flex-direction:column;overflow:hidden;"
                 @onclick:stopPropagation="true">
                @* EN: Handle bar / VI: Thanh kéo *@
                <div style="padding:12px;display:flex;justify-content:center;">
                    <div style="width:40px;height:4px;border-radius:2px;background:var(--pos-border-default);"></div>
                </div>

                <div class="pos-cart-header">
                    <span class="pos-cart-header__title">Giỏ hàng</span>
                    <button style="background:none;border:none;color:var(--pos-danger);font-size:13px;cursor:pointer;"
                            @onclick="() => { _cartItems.Clear(); _showCart = false; }">Xóa</button>
                </div>

                <div class="pos-cart-items" style="max-height:40vh;">
                    @foreach (var item in _cartItems)
                    {
                        <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;">@item.Qty</span>
                                <button @onclick="() => ChangeQty(item, 1)">+</button>
                            </div>
                        </div>
                    }
                </div>

                <div class="pos-cart-footer">
                    <div class="pos-cart-total">
                        <span class="pos-cart-total__label">Tổng cộng</span>
                        <span class="pos-cart-total__value">@FormatPrice(CartTotal)</span>
                    </div>
                    <button class="pos-btn-checkout" @onclick="Checkout">Thanh toán</button>
                </div>
            </div>
        </div>
    }
</div>

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

    private readonly List<Product> _products = new()
    {
        new("Cà phê sữa đá", 35_000, "Cà phê"),
        new("Cà phê đen", 29_000, "Cà phê"),
        new("Bạc xỉu", 39_000, "Cà phê"),
        new("Cappuccino", 55_000, "Cà phê"),
        new("Trà đào", 45_000, "Trà"),
        new("Trà vải", 45_000, "Trà"),
        new("Sinh tố bơ", 55_000, "Sinh tố"),
        new("Sinh tố xoài", 49_000, "Sinh tố"),
        new("Bánh mì", 25_000, "Đồ ăn"),
        new("Croissant", 35_000, "Đồ ăn"),
    };

    private readonly List<CartItem> _cartItems = new();
    private IEnumerable<Product> FilteredProducts =>
        _selectedCategory == "Tất cả" ? _products : _products.Where(p => p.Category == _selectedCategory);
    private decimal CartTotal => _cartItems.Sum(i => i.Price * i.Qty);

    private void AddToCart(Product product)
    {
        var existing = _cartItems.FirstOrDefault(i => i.Name == product.Name);
        if (existing != null) existing.Qty++;
        else _cartItems.Add(new CartItem(product.Name, product.Price));
    }

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

    private void Checkout() => NavigateTo("cafe/order-customize");

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