@*
    EN: Milk Foam Options — Milk type, foam level, temperature, extras for drink customization.
    VI: Tùy chọn sữa & foam — Loại sữa, mức foam, nhiệt độ, thêm topping cho đồ uống.
*@
@page "/pos/{ShopId:guid}/cafe/milk-foam-options"
@layout PosLayout
@inherits PosBase

<div style="display:flex;height:100%;">
    @* ═══ CUSTOMIZATION PANEL / 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;">
                <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("cafe"))">
                    <i data-lucide="arrow-left" style="width:16px;height:16px;display:inline;"></i>
                </button>
                <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>

            @* ═══ MILK TYPE / LOẠI SỮA ═══ *@
            <div style="margin-bottom:24px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--pos-text-secondary);">
                    <i data-lucide="milk" style="width:14px;height:14px;display:inline;"></i> Loại sữa
                </div>
                <div style="display:flex;flex-wrap:wrap;gap:8px;">
                    @foreach (var milk in _milkTypes)
                    {
                        <button style="padding:12px 16px;border-radius:var(--pos-radius);border:2px solid @(_selectedMilk == milk.Name ? "var(--pos-orange-primary)" : "var(--pos-border-default)");
                                       background:@(_selectedMilk == milk.Name ? "rgba(255,92,0,0.1)" : "var(--pos-bg-elevated)");color:var(--pos-text-primary);cursor:pointer;font-size:13px;font-weight:500;"
                                @onclick="() => SelectMilk(milk)">
                            @milk.Name
                            @if (milk.Extra > 0)
                            {
                                <span style="font-size:11px;color:var(--pos-orange-primary);margin-left:4px;">+@FormatPrice(milk.Extra)</span>
                            }
                        </button>
                    }
                </div>
            </div>

            @* ═══ FOAM LEVEL / MỨC FOAM ═══ *@
            <div style="margin-bottom:24px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--pos-text-secondary);">
                    <i data-lucide="cloud" style="width:14px;height:14px;display:inline;"></i> Mức foam
                </div>
                <div style="display:flex;gap:8px;">
                    @foreach (var foam in _foamLevels)
                    {
                        <button style="flex:1;padding:12px;border-radius:var(--pos-radius);border:2px solid @(_selectedFoam == foam ? "var(--pos-orange-primary)" : "var(--pos-border-default)");
                                       background:@(_selectedFoam == foam ? "rgba(255,92,0,0.1)" : "var(--pos-bg-elevated)");color:var(--pos-text-primary);cursor:pointer;font-size:14px;font-weight:500;"
                                @onclick="() => _selectedFoam = foam">
                            @foam
                        </button>
                    }
                </div>
            </div>

            @* ═══ TEMPERATURE / NHIỆT ĐỘ ═══ *@
            <div style="margin-bottom:24px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--pos-text-secondary);">
                    <i data-lucide="thermometer" style="width:14px;height:14px;display:inline;"></i> Nhiệt độ
                </div>
                <div style="display:flex;gap:8px;">
                    @foreach (var temp in _temperatures)
                    {
                        <button style="flex:1;padding:14px;border-radius:var(--pos-radius);border:2px solid @(_selectedTemp == temp.Label ? "var(--pos-orange-primary)" : "var(--pos-border-default)");
                                       background:@(_selectedTemp == temp.Label ? "rgba(255,92,0,0.1)" : "var(--pos-bg-elevated)");color:var(--pos-text-primary);cursor:pointer;text-align:center;"
                                @onclick="() => _selectedTemp = temp.Label">
                            <div style="font-size:20px;margin-bottom:4px;">@temp.Emoji</div>
                            <div style="font-size:14px;font-weight:600;">@temp.Label</div>
                        </button>
                    }
                </div>
            </div>

            @* ═══ EXTRAS / THÊM ═══ *@
            <div style="margin-bottom:24px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--pos-text-secondary);">
                    <i data-lucide="plus-circle" style="width:14px;height:14px;display:inline;"></i> Thêm
                </div>
                <div style="display:grid;grid-template-columns:repeat(2, 1fr);gap:8px;">
                    @foreach (var extra in _extras)
                    {
                        var isSelected = _selectedExtras.Contains(extra.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="() => ToggleExtra(extra)">
                            <span style="font-size:14px;">@extra.Name</span>
                            <span style="font-size:12px;color:var(--pos-orange-primary);">+@FormatPrice(extra.Price)</span>
                        </button>
                    }
                </div>
            </div>
        </div>
    </div>

    @* ═══ SUMMARY PANEL / PANEL TÓM TẮT ═══ *@
    <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>Sữa: <strong style="color:var(--pos-text-primary);">@_selectedMilk</strong></div>
            <div>Foam: <strong style="color:var(--pos-text-primary);">@_selectedFoam</strong></div>
            <div>Nhiệt độ: <strong style="color:var(--pos-text-primary);">@_selectedTemp</strong></div>
            <div>Thêm: <strong style="color:var(--pos-text-primary);">@(_selectedExtras.Any() ? string.Join(", ", _selectedExtras) : "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 {
    // EN: Static UI configuration — does not require DB data / VI: Cấu hình UI tĩnh — không cần dữ liệu từ DB

    private string _productName = "Latte";
    private decimal _basePrice = 45_000;
    private decimal _extraPrice = 0;
    private string _selectedMilk = "Sữa tươi";
    private string _selectedFoam = "Vừa";
    private string _selectedTemp = "Nóng";
    private readonly HashSet<string> _selectedExtras = new();

    // EN: Milk type options / VI: Các loại sữa
    private readonly List<MilkOption> _milkTypes = new()
    {
        new("Sữa tươi", 0),
        new("Sữa đặc", 0),
        new("Sữa yến mạch", 15_000),
        new("Sữa hạnh nhân", 15_000),
        new("Sữa dừa", 10_000),
    };

    private readonly string[] _foamLevels = { "Nhiều foam", "Vừa", "Ít foam", "Không foam" };

    // EN: Temperature options / VI: Các mức nhiệt độ
    private readonly List<TempOption> _temperatures = new()
    {
        new("Nóng", "🔥"),
        new("Lạnh", "🧊"),
        new("Ấm", "☕"),
    };

    // EN: Extra options / VI: Tùy chọn thêm
    private readonly List<ExtraOption> _extras = new()
    {
        new("Whipped cream", 10_000),
        new("Caramel drizzle", 5_000),
        new("Chocolate sauce", 5_000),
        new("Cinnamon", 3_000),
    };

    private void SelectMilk(MilkOption milk)
    {
        _selectedMilk = milk.Name;
        RecalcExtra();
    }

    private void ToggleExtra(ExtraOption extra)
    {
        if (!_selectedExtras.Remove(extra.Name))
            _selectedExtras.Add(extra.Name);
        RecalcExtra();
    }

    private void RecalcExtra()
    {
        var milkExtra = _milkTypes.First(m => m.Name == _selectedMilk).Extra;
        var extrasTotal = _extras.Where(e => _selectedExtras.Contains(e.Name)).Sum(e => e.Price);
        _extraPrice = milkExtra + extrasTotal;
    }

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

    private record MilkOption(string Name, decimal Extra);
    private record TempOption(string Label, string Emoji);
    private record ExtraOption(string Name, decimal Price);
}
