@*
    EN: Allergen Warning — Allergen alert display with toggles, severity levels, customer profile.
    VI: Cảnh báo dị ứng — Hiển thị cảnh báo dị ứng với toggle, mức độ nghiêm trọng, hồ sơ khách.
*@
@page "/pos/{ShopId:guid}/restaurant/allergen-warning"
@layout PosLayout
@inherits PosBase

<div style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
    @* ═══ HEADER / TIÊU ĐỀ ═══ *@
    <div style="padding:12px 16px;border-bottom:1px solid var(--pos-border-subtle);display:flex;align-items:center;gap:12px;">
        <button class="pos-category-tab" @onclick="@(() => NavigateTo("restaurant"))">
            <i data-lucide="arrow-left" style="width:14px;"></i> Quay lại
        </button>
        <span style="font-size:16px;font-weight:700;">
            <i data-lucide="shield-alert" style="width:18px;height:18px;display:inline;"></i> Cảnh báo dị ứng
        </span>
        <span style="flex:1;"></span>
        <span style="font-size:12px;padding:4px 10px;border-radius:6px;font-weight:600;
                     background:rgba(239,68,68,.15);color:var(--pos-danger);">
            2 chất gây dị ứng
        </span>
    </div>

    @* ═══ CURRENT ITEM / MÓN HIỆN TẠI ═══ *@
    <div style="padding:12px 16px;">
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:16px;display:flex;align-items:center;gap:14px;">
            <div style="width:56px;height:56px;border-radius:var(--pos-radius);background:var(--pos-bg-interactive);display:flex;align-items:center;justify-content:center;">
                <i data-lucide="utensils" style="width:24px;height:24px;color:var(--pos-orange-primary);"></i>
            </div>
            <div style="flex:1;">
                <div style="font-size:16px;font-weight:700;">@_currentItem</div>
                <div style="font-size:12px;color:var(--pos-text-tertiary);margin-top:2px;">@FormatPrice(65_000)</div>
            </div>
            <div style="display:flex;gap:6px;">
                @foreach (var tag in _itemAllergens)
                {
                    <span style="font-size:11px;padding:4px 8px;border-radius:6px;font-weight:600;
                                background:rgba(239,68,68,.15);color:var(--pos-danger);">@tag</span>
                }
            </div>
        </div>
    </div>

    <div style="flex:1;overflow-y:auto;padding:0 16px 16px;">
        @* ═══ ALLERGEN GRID / LƯỚI CHẤT GÂY DỊ ỨNG ═══ *@
        <div style="margin-bottom:20px;">
            <div style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--pos-text-secondary);">Chất gây dị ứng phổ biến</div>
            <div style="display:grid;grid-template-columns:repeat(4, 1fr);gap:10px;">
                @foreach (var allergen in _allergens)
                {
                    var isActive = _activeAllergens.Contains(allergen.Name);
                    <div style="padding:16px;border-radius:var(--pos-radius);text-align:center;cursor:pointer;
                                background:@(isActive ? SeverityBg(allergen.Severity) : "var(--pos-bg-elevated)");
                                border:2px solid @(isActive ? SeverityColor(allergen.Severity) : "transparent");
                                transition:all .2s ease;"
                         @onclick="() => ToggleAllergen(allergen.Name)">
                        <div style="font-size:28px;margin-bottom:8px;">@allergen.Icon</div>
                        <div style="font-size:13px;font-weight:600;color:var(--pos-text-primary);">@allergen.Name</div>
                        @if (isActive)
                        {
                            <div style="font-size:10px;font-weight:600;margin-top:4px;color:@SeverityColor(allergen.Severity);">
                                @SeverityLabel(allergen.Severity)
                            </div>
                        }
                    </div>
                }
            </div>
        </div>

        @* ═══ SEVERITY LEGEND / CHÚ THÍCH MỨC ĐỘ ═══ *@
        <div style="margin-bottom:20px;">
            <div style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--pos-text-secondary);">Mức độ nghiêm trọng</div>
            <div style="display:flex;gap:12px;">
                <div style="flex:1;padding:12px;border-radius:var(--pos-radius);background:rgba(239,68,68,.1);border-left:4px solid var(--pos-danger);text-align:center;">
                    <div style="font-size:13px;font-weight:700;color:var(--pos-danger);">Cao</div>
                    <div style="font-size:11px;color:var(--pos-text-tertiary);margin-top:2px;">Nguy hiểm</div>
                </div>
                <div style="flex:1;padding:12px;border-radius:var(--pos-radius);background:rgba(255,92,0,.1);border-left:4px solid var(--pos-orange-primary);text-align:center;">
                    <div style="font-size:13px;font-weight:700;color:var(--pos-orange-primary);">Trung bình</div>
                    <div style="font-size:11px;color:var(--pos-text-tertiary);margin-top:2px;">Cẩn thận</div>
                </div>
                <div style="flex:1;padding:12px;border-radius:var(--pos-radius);background:rgba(245,158,11,.1);border-left:4px solid var(--pos-warning);text-align:center;">
                    <div style="font-size:13px;font-weight:700;color:var(--pos-warning);">Thấp</div>
                    <div style="font-size:11px;color:var(--pos-text-tertiary);margin-top:2px;">Lưu ý</div>
                </div>
            </div>
        </div>

        @* ═══ CUSTOMER PROFILE / HỒ SƠ KHÁCH ═══ *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:16px;">
            <div style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--pos-text-secondary);">
                <i data-lucide="user" style="width:14px;height:14px;display:inline;"></i> Hồ sơ dị ứng khách hàng
            </div>
            <div style="display:flex;align-items:center;gap:12px;padding:12px;background:var(--pos-bg-interactive);border-radius:8px;">
                <div style="width:40px;height:40px;border-radius:50%;background:var(--pos-orange-primary);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;">
                    B
                </div>
                <div style="flex:1;">
                    <div style="font-size:13px;font-weight:600;">Trần Thị B</div>
                    <div style="font-size:11px;color:var(--pos-text-tertiary);">Dị ứng: Hải sản, Đậu phộng</div>
                </div>
                <span style="font-size:11px;padding:4px 8px;border-radius:6px;font-weight:600;
                            background:rgba(239,68,68,.15);color:var(--pos-danger);">Cao</span>
            </div>
        </div>
    </div>

    @* ═══ FOOTER ACTIONS / NÚT HÀNH ĐỘNG ═══ *@
    <div style="padding:12px 16px;border-top:1px solid var(--pos-border-subtle);display:flex;gap:8px;flex-shrink:0;">
        <button style="flex:1;padding:12px;border-radius:var(--pos-radius);background:var(--pos-bg-interactive);
                       border:1px solid var(--pos-border-default);color:var(--pos-text-primary);cursor:pointer;font-size:13px;"
                @onclick="@(() => NavigateTo("restaurant"))">
            Hủy
        </button>
        <button class="pos-btn-checkout" style="flex:1;" @onclick="ConfirmAllergens">
            <i data-lucide="check" style="width:14px;height:14px;display:inline;"></i> Xác nhận
        </button>
    </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 _currentItem = "Gỏi cuốn tôm";
    private readonly string[] _itemAllergens = { "Hải sản", "Đậu phộng" };
    private readonly HashSet<string> _activeAllergens = new() { "Hải sản", "Đậu phộng" };

    // EN: Common allergens / VI: Chất gây dị ứng phổ biến
    private readonly List<AllergenInfo> _allergens = new()
    {
        new("Đậu phộng", "🥜", "high"),
        new("Hải sản", "🦐", "high"),
        new("Sữa", "🥛", "medium"),
        new("Trứng", "🥚", "medium"),
        new("Lúa mì", "🌾", "low"),
        new("Đậu nành", "🫘", "low"),
        new("Hạt cây", "🌰", "medium"),
        new("Cá", "🐟", "high"),
    };

    private void ToggleAllergen(string name)
    {
        if (!_activeAllergens.Remove(name))
            _activeAllergens.Add(name);
    }

    private void ConfirmAllergens() => NavigateTo("restaurant");

    private static string SeverityColor(string s) => s switch
    {
        "high" => "var(--pos-danger)", "medium" => "var(--pos-orange-primary)",
        "low" => "var(--pos-warning)", _ => "var(--pos-text-tertiary)"
    };

    private static string SeverityBg(string s) => s switch
    {
        "high" => "rgba(239,68,68,.1)", "medium" => "rgba(255,92,0,.1)",
        "low" => "rgba(245,158,11,.1)", _ => "var(--pos-bg-interactive)"
    };

    private static string SeverityLabel(string s) => s switch
    {
        "high" => "Cao", "medium" => "Trung bình", "low" => "Thấp", _ => s
    };

    private record AllergenInfo(string Name, string Icon, string Severity);
}
