@*
    EN: Order Customize — Drink customization: size, sugar, ice, toppings.
    VI: Tùy chỉnh đơn hàng — Tùy chỉnh đồ uống: size, đường, đá, topping.
*@
@page "/pos/cafe/order-customize"
@layout PosLayout
@inherits PosBase

<div style="display:flex;height:100%;">
    @* EN: Customization panel / VI: Panel tùy chỉnh *@
    <div style="flex:1;padding:24px;overflow-y:auto;">
        <div style="max-width:560px;margin:0 auto;">
            @* EN: Product header / VI: Tiêu đề sản phẩm *@
            <div style="display:flex;align-items:center;gap:16px;margin-bottom:28px;">
                <div style="width:72px;height:72px;border-radius:var(--pos-radius);background:var(--pos-bg-elevated);display:flex;align-items:center;justify-content:center;">
                    <i data-lucide="coffee" style="width:32px;height:32px;color:var(--pos-orange-primary);"></i>
                </div>
                <div>
                    <div style="font-size:20px;font-weight:700;">@_productName</div>
                    <div style="font-size:15px;color:var(--pos-orange-primary);font-weight:600;">@FormatPrice(_basePrice + _extraPrice)</div>
                </div>
            </div>

            @* EN: Size selection / VI: Chọn size *@
            <div style="margin-bottom:24px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--pos-text-secondary);">Kích cỡ</div>
                <div style="display:flex;gap:10px;">
                    @foreach (var size in _sizes)
                    {
                        <button style="flex:1;padding:14px;border-radius:var(--pos-radius);border:2px solid @(_selectedSize == size.Label ? "var(--pos-orange-primary)" : "var(--pos-border-default)");
                                       background:@(_selectedSize == size.Label ? "rgba(255,92,0,0.1)" : "var(--pos-bg-elevated)");color:var(--pos-text-primary);cursor:pointer;text-align:center;"
                                @onclick="() => SelectSize(size)">
                            <div style="font-size:18px;font-weight:700;">@size.Label</div>
                            <div style="font-size:12px;color:var(--pos-text-tertiary);margin-top:4px;">@size.Desc</div>
                            @if (size.Extra > 0)
                            {
                                <div style="font-size:11px;color:var(--pos-orange-primary);margin-top:2px;">+@FormatPrice(size.Extra)</div>
                            }
                        </button>
                    }
                </div>
            </div>

            @* EN: Sugar level / VI: Mức đường *@
            <div style="margin-bottom:24px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--pos-text-secondary);">Mức đường</div>
                <div style="display:flex;gap:8px;">
                    @foreach (var sugar in _sugarLevels)
                    {
                        <button style="flex:1;padding:12px;border-radius:var(--pos-radius);border:2px solid @(_selectedSugar == sugar ? "var(--pos-orange-primary)" : "var(--pos-border-default)");
                                       background:@(_selectedSugar == sugar ? "rgba(255,92,0,0.1)" : "var(--pos-bg-elevated)");color:var(--pos-text-primary);cursor:pointer;font-size:14px;font-weight:500;"
                                @onclick="() => _selectedSugar = sugar">
                            @sugar
                        </button>
                    }
                </div>
            </div>

            @* EN: Ice level / VI: Mức đá *@
            <div style="margin-bottom:24px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--pos-text-secondary);">Mức đá</div>
                <div style="display:flex;gap:8px;">
                    @foreach (var ice in _iceLevels)
                    {
                        <button style="flex:1;padding:12px;border-radius:var(--pos-radius);border:2px solid @(_selectedIce == ice ? "var(--pos-orange-primary)" : "var(--pos-border-default)");
                                       background:@(_selectedIce == ice ? "rgba(255,92,0,0.1)" : "var(--pos-bg-elevated)");color:var(--pos-text-primary);cursor:pointer;font-size:14px;font-weight:500;"
                                @onclick="() => _selectedIce = ice">
                            @ice
                        </button>
                    }
                </div>
            </div>

            @* EN: Toppings / VI: Topping *@
            <div style="margin-bottom:24px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--pos-text-secondary);">Topping</div>
                <div style="display:grid;grid-template-columns:repeat(2, 1fr);gap:8px;">
                    @foreach (var topping in _toppings)
                    {
                        var isSelected = _selectedToppings.Contains(topping.Name);
                        <button style="padding:12px 16px;border-radius:var(--pos-radius);border:2px solid @(isSelected ? "var(--pos-orange-primary)" : "var(--pos-border-default)");
                                       background:@(isSelected ? "rgba(255,92,0,0.1)" : "var(--pos-bg-elevated)");color:var(--pos-text-primary);cursor:pointer;display:flex;justify-content:space-between;align-items:center;"
                                @onclick="() => ToggleTopping(topping)">
                            <span style="font-size:14px;">@topping.Name</span>
                            <span style="font-size:12px;color:var(--pos-orange-primary);">+@FormatPrice(topping.Price)</span>
                        </button>
                    }
                </div>
            </div>
        </div>
    </div>

    @* EN: Confirm panel / VI: Panel xác nhận *@
    <div style="width:300px;background:var(--pos-bg-elevated);border-left:1px solid var(--pos-border-subtle);padding:24px;display:flex;flex-direction:column;">
        <div style="font-size:15px;font-weight:600;margin-bottom:16px;">Tóm tắt</div>
        <div style="flex:1;font-size:13px;color:var(--pos-text-secondary);display:flex;flex-direction:column;gap:8px;">
            <div>Size: <strong style="color:var(--pos-text-primary);">@_selectedSize</strong></div>
            <div>Đường: <strong style="color:var(--pos-text-primary);">@_selectedSugar</strong></div>
            <div>Đá: <strong style="color:var(--pos-text-primary);">@_selectedIce</strong></div>
            <div>Topping: <strong style="color:var(--pos-text-primary);">@(_selectedToppings.Any() ? string.Join(", ", _selectedToppings) : "Không")</strong></div>
        </div>
        <div style="border-top:1px solid var(--pos-border-subtle);padding-top:16px;margin-top:16px;">
            <div class="pos-cart-total" style="margin-bottom:16px;">
                <span class="pos-cart-total__label">Tổng</span>
                <span class="pos-cart-total__value" style="font-size:20px;">@FormatPrice(_basePrice + _extraPrice)</span>
            </div>
            <button class="pos-btn-checkout" @onclick="Confirm">Xác nhận</button>
        </div>
    </div>
</div>

@code {
    private string _productName = "Cà phê sữa đá";
    private decimal _basePrice = 35_000;
    private decimal _extraPrice = 0;
    private string _selectedSize = "M";
    private string _selectedSugar = "100%";
    private string _selectedIce = "Đầy đá";
    private readonly HashSet<string> _selectedToppings = new();

    private readonly List<SizeOption> _sizes = new()
    {
        new("S", "Nhỏ", 0),
        new("M", "Vừa", 0),
        new("L", "Lớn", 10_000),
    };

    private readonly string[] _sugarLevels = { "100%", "70%", "50%", "0%" };
    private readonly string[] _iceLevels = { "Đầy đá", "Ít đá", "Không đá" };

    private readonly List<ToppingOption> _toppings = new()
    {
        new("Trân châu đen", 10_000),
        new("Trân châu trắng", 10_000),
        new("Thạch cà phê", 10_000),
        new("Kem cheese", 15_000),
        new("Shot espresso", 15_000),
        new("Sữa dừa", 10_000),
    };

    private void SelectSize(SizeOption size)
    {
        _selectedSize = size.Label;
        RecalcExtra();
    }

    private void ToggleTopping(ToppingOption topping)
    {
        if (!_selectedToppings.Remove(topping.Name))
            _selectedToppings.Add(topping.Name);
        RecalcExtra();
    }

    private void RecalcExtra()
    {
        var sizeExtra = _sizes.First(s => s.Label == _selectedSize).Extra;
        var toppingExtra = _toppings.Where(t => _selectedToppings.Contains(t.Name)).Sum(t => t.Price);
        _extraPrice = sizeExtra + toppingExtra;
    }

    private void Confirm() => NavigateTo("cafe");

    private record SizeOption(string Label, string Desc, decimal Extra);
    private record ToppingOption(string Name, decimal Price);
}
