@*
    EN: Order Note — Special notes interface with quick chips, custom textarea, kitchen priority.
    VI: Ghi chú đơn hàng — Giao diện ghi chú đặc biệt với chip nhanh, textarea tùy chỉnh, ưu tiên bếp.
*@
@page "/pos/{ShopId:guid}/restaurant/order-note"
@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="message-square" style="width:18px;height:18px;display:inline;"></i> Ghi chú đặc biệt
        </span>
    </div>

    <div style="flex:1;overflow-y:auto;padding:16px;">
        <div style="max-width:600px;margin:0 auto;">
            @* ═══ CURRENT ITEM / MÓN HIỆN TẠI ═══ *@
            <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:16px;margin-bottom:20px;
                        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="beef" style="width:24px;height:24px;color:var(--pos-orange-primary);"></i>
                </div>
                <div>
                    <div style="font-size:16px;font-weight:700;">@_currentItem</div>
                    <div style="font-size:13px;color:var(--pos-orange-primary);font-weight:600;">@FormatPrice(75_000)</div>
                </div>
            </div>

            @* ═══ QUICK NOTE CHIPS / CHIP GHI CHÚ NHANH ═══ *@
            <div style="margin-bottom:20px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--pos-text-secondary);">Ghi chú nhanh</div>
                <div style="display:flex;flex-wrap:wrap;gap:8px;">
                    @foreach (var chip in _quickChips)
                    {
                        var isSelected = _selectedChips.Contains(chip);
                        <button style="padding:10px 16px;border-radius:20px;font-size:13px;font-weight:500;cursor:pointer;
                                       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:@(isSelected ? "var(--pos-orange-primary)" : "var(--pos-text-primary)");"
                                @onclick="() => ToggleChip(chip)">
                            @chip
                        </button>
                    }
                </div>
            </div>

            @* ═══ CUSTOM NOTE / GHI CHÚ TÙY CHỈNH ═══ *@
            <div style="margin-bottom:20px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--pos-text-secondary);">Ghi chú tùy chỉnh</div>
                <textarea @bind="_customNote" placeholder="Nhập ghi chú cho món ăn..."
                          style="width:100%;min-height:100px;padding:12px;border-radius:var(--pos-radius);
                                 border:1px solid var(--pos-border-default);background:var(--pos-bg-interactive);
                                 color:var(--pos-text-primary);font-size:13px;font-family:var(--pos-font);resize:vertical;"></textarea>
            </div>

            @* ═══ ALLERGEN TAGS / THẺ DỊ ỨNG ═══ *@
            <div style="margin-bottom:20px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--pos-text-secondary);">
                    <i data-lucide="shield-alert" style="width:14px;height:14px;display:inline;"></i> Cảnh báo dị ứng
                </div>
                <div style="display:flex;gap:8px;">
                    @foreach (var tag in _allergenTags)
                    {
                        <span style="font-size:12px;padding:6px 12px;border-radius:6px;font-weight:600;
                                    background:rgba(239,68,68,.1);color:var(--pos-danger);border:1px solid rgba(239,68,68,.3);">
                            @tag
                        </span>
                    }
                </div>
            </div>

            @* ═══ KITCHEN PRIORITY / ƯU TIÊN BẾP ═══ *@
            <div style="margin-bottom:20px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--pos-text-secondary);">Ưu tiên bếp</div>
                <div style="display:flex;gap:10px;">
                    @foreach (var priority in _priorities)
                    {
                        <button style="flex:1;padding:14px;border-radius:var(--pos-radius);text-align:center;cursor:pointer;
                                       border:2px solid @(_selectedPriority == priority.Key ? priority.Color : "var(--pos-border-default)");
                                       background:@(_selectedPriority == priority.Key ? priority.Bg : "var(--pos-bg-elevated)");"
                                @onclick="() => _selectedPriority = priority.Key">
                            <i data-lucide="@priority.Icon" style="width:18px;height:18px;color:@priority.Color;display:block;margin:0 auto 6px;"></i>
                            <div style="font-size:13px;font-weight:600;color:@priority.Color;">@priority.Label</div>
                        </button>
                    }
                </div>
            </div>

            @* ═══ APPLY ALL CHECKBOX / ÁP DỤNG CHO TẤT CẢ ═══ *@
            <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:14px 16px;
                        display:flex;align-items:center;gap:10px;cursor:pointer;"
                 @onclick="() => _applyToAll = !_applyToAll">
                <div style="width:22px;height:22px;border-radius:6px;border:2px solid @(_applyToAll ? "var(--pos-orange-primary)" : "var(--pos-border-default)");
                            background:@(_applyToAll ? "var(--pos-orange-primary)" : "transparent");
                            display:flex;align-items:center;justify-content:center;">
                    @if (_applyToAll)
                    {
                        <i data-lucide="check" style="width:14px;height:14px;color:#fff;"></i>
                    }
                </div>
                <span style="font-size:13px;font-weight:500;">Áp dụng cho tất cả các món</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="SaveNote">
            <i data-lucide="save" style="width:14px;height:14px;display:inline;"></i> Lưu ghi chú
        </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 = "Phở bò tái";
    private string _customNote = string.Empty;
    private string _selectedPriority = "normal";
    private bool _applyToAll = false;
    private readonly HashSet<string> _selectedChips = new();

    private readonly string[] _quickChips = { "Ít hành", "Không rau", "Thêm nước mắm", "Cay nhiều", "Không MSG", "Chín kỹ" };
    private readonly string[] _allergenTags = { "Không" };

    // EN: Priority options / VI: Các mức ưu tiên
    private readonly List<PriorityOption> _priorities = new()
    {
        new("normal", "Thường", "clock", "var(--pos-text-tertiary)", "var(--pos-bg-interactive)"),
        new("urgent", "Gấp", "zap", "var(--pos-warning)", "rgba(245,158,11,.1)"),
        new("vip", "VIP", "crown", "var(--pos-orange-primary)", "rgba(255,92,0,.1)"),
    };

    private void ToggleChip(string chip)
    {
        if (!_selectedChips.Remove(chip))
            _selectedChips.Add(chip);
    }

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

    private record PriorityOption(string Key, string Label, string Icon, string Color, string Bg);
}
