@*
    EN: Restaurant Journey — End-to-end restaurant workflow: Đón khách → Chọn bàn → Đặt món → Bếp → Tiếp tục → Thanh toán → Hoàn tất.
    VI: Hành trình nhà hàng — Quy trình từ đầu đến cuối: Đón khách → Chọn bàn → Đặt món → Bếp → Tiếp tục → Thanh toán → Hoàn tất.
*@
@page "/pos/{ShopId:guid}/restaurant/restaurant-journey"
@layout PosLayout
@inherits PosBase

<div style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
    @* ═══ HEADER / TIÊU ĐỀ ═══ *@
    <div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--pos-border-subtle);flex-shrink:0;">
        <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("restaurant"))">
            <i data-lucide="arrow-left" style="width:16px;height:16px;display:inline;"></i>
        </button>
        <span style="font-size:16px;font-weight:700;">Hành trình nhà hàng</span>
        <span style="flex:1;"></span>
        <span style="font-size:12px;color:var(--pos-text-tertiary);">Khách: Nguyễn Văn A · 4 người · Bàn 7</span>
    </div>

    @* ═══ STEP TRACKER / THANH BƯỚC ═══ *@
    <div style="padding:20px 16px;flex-shrink:0;overflow-x:auto;">
        <div style="display:flex;align-items:center;justify-content:center;gap:0;min-width:600px;">
            @for (int i = 0; i < _steps.Count; i++)
            {
                var step = _steps[i];
                var stepIdx = i;
                var isActive = stepIdx == _currentStep;
                var isCompleted = stepIdx < _currentStep;
                var bgColor = isCompleted ? "var(--pos-success)" : isActive ? "var(--pos-orange-primary)" : "var(--pos-bg-interactive)";
                var fgColor = isCompleted || isActive ? "#FFF" : "var(--pos-text-tertiary)";

                @* EN: Step circle / VI: Vòng tròn bước *@
                <div style="display:flex;flex-direction:column;align-items:center;z-index:1;">
                    <div style="width:36px;height:36px;border-radius:50%;background:@bgColor;
                                display:flex;align-items:center;justify-content:center;color:@fgColor;
                                font-size:13px;font-weight:700;cursor:pointer;"
                         @onclick="() => _currentStep = stepIdx">
                        @if (isCompleted)
                        {
                            <i data-lucide="check" style="width:16px;height:16px;"></i>
                        }
                        else
                        {
                            <i data-lucide="@step.Icon" style="width:16px;height:16px;"></i>
                        }
                    </div>
                    <div style="font-size:10px;margin-top:5px;font-weight:@(isActive ? "700" : "500");white-space:nowrap;
                                color:@(isActive ? "var(--pos-orange-primary)" : isCompleted ? "var(--pos-success)" : "var(--pos-text-tertiary)");">
                        @step.Label
                    </div>
                </div>

                @* EN: Connector line / VI: Đường nối *@
                @if (stepIdx < _steps.Count - 1)
                {
                    <div style="flex:1;height:2px;max-width:60px;margin:0 6px;margin-bottom:18px;
                                background:@(stepIdx < _currentStep ? "var(--pos-success)" : "var(--pos-border-default)");"></div>
                }
            }
        </div>
    </div>

    @* ═══ GUEST INFO CARD / THẺ KHÁCH ═══ *@
    <div style="padding:0 16px 12px;">
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:14px 16px;
                    display:flex;align-items:center;gap:14px;">
            <div style="width:44px;height:44px;border-radius:50%;background:var(--pos-orange-primary);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;flex-shrink:0;">
                A
            </div>
            <div style="flex:1;">
                <div style="font-size:14px;font-weight:700;">Nguyễn Văn A</div>
                <div style="font-size:12px;color:var(--pos-text-tertiary);">4 người · Bàn 7 · Khu VIP</div>
            </div>
            <div style="text-align:right;">
                <div style="font-size:11px;color:var(--pos-text-tertiary);">Mã đơn</div>
                <div style="font-size:13px;font-weight:600;font-family:monospace;">#NH-0047</div>
            </div>
        </div>
    </div>

    @* ═══ STEP CONTENT / NỘI DUNG BƯỚC ═══ *@
    <div style="flex:1;overflow-y:auto;padding:0 16px 16px;">
        @switch (_currentStep)
        {
            case 0:
                @* ═══ ĐÓN KHÁCH / WELCOME STEP ═══ *@
                <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;">
                    <div style="font-size:15px;font-weight:700;margin-bottom:16px;">
                        <i data-lucide="hand" style="width:18px;height:18px;display:inline;"></i> Đón khách
                    </div>
                    <div style="display:flex;flex-direction:column;gap:10px;">
                        <div style="display:flex;justify-content:space-between;font-size:13px;padding:10px;background:var(--pos-bg-interactive);border-radius:8px;">
                            <span style="color:var(--pos-text-secondary);">Tên khách</span>
                            <span style="font-weight:600;">Nguyễn Văn A</span>
                        </div>
                        <div style="display:flex;justify-content:space-between;font-size:13px;padding:10px;background:var(--pos-bg-interactive);border-radius:8px;">
                            <span style="color:var(--pos-text-secondary);">Số người</span>
                            <span style="font-weight:600;">4 người</span>
                        </div>
                        <div style="display:flex;justify-content:space-between;font-size:13px;padding:10px;background:var(--pos-bg-interactive);border-radius:8px;">
                            <span style="color:var(--pos-text-secondary);">Giờ đến</span>
                            <span style="font-weight:600;color:var(--pos-success);">18:30</span>
                        </div>
                        <div style="display:flex;justify-content:space-between;font-size:13px;padding:10px;background:var(--pos-bg-interactive);border-radius:8px;">
                            <span style="color:var(--pos-text-secondary);">Ghi chú</span>
                            <span style="font-weight:600;color:var(--pos-warning);">Sinh nhật</span>
                        </div>
                    </div>
                </div>
                break;

            case 1:
                @* ═══ CHỌN BÀN / TABLE SELECT STEP ═══ *@
                <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;">
                    <div style="font-size:15px;font-weight:700;margin-bottom:16px;">
                        <i data-lucide="layout-grid" style="width:18px;height:18px;display:inline;"></i> Chọn bàn
                    </div>
                    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;">
                        @foreach (var table in _availableTables)
                        {
                            var isSelected = table.Name == "Bàn 7";
                            <div style="padding:16px;border-radius:var(--pos-radius);text-align:center;cursor:pointer;
                                        background:@(isSelected ? "rgba(255,92,0,.15)" : "var(--pos-bg-interactive)");
                                        border:2px solid @(isSelected ? "var(--pos-orange-primary)" : "transparent");">
                                <div style="font-size:16px;font-weight:700;">@table.Name</div>
                                <div style="font-size:11px;color:var(--pos-text-tertiary);margin-top:4px;">@table.Seats chỗ · @table.Section</div>
                            </div>
                        }
                    </div>
                </div>
                break;

            case 2:
                @* ═══ ĐẶT MÓN / ORDER STEP ═══ *@
                <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;">
                    <div style="font-size:15px;font-weight:700;margin-bottom:16px;">
                        <i data-lucide="utensils" style="width:18px;height:18px;display:inline;"></i> Đặt món
                    </div>
                    @foreach (var item in _orderItems)
                    {
                        <div style="display:flex;justify-content:space-between;align-items:center;padding:10px;
                                    background:var(--pos-bg-interactive);border-radius:8px;margin-bottom:8px;">
                            <div>
                                <div style="font-size:13px;font-weight:600;">@item.Name</div>
                                <div style="font-size:11px;color:var(--pos-text-tertiary);">x@item.Qty</div>
                            </div>
                            <span style="font-size:14px;font-weight:600;">@FormatPrice(item.Price * item.Qty)</span>
                        </div>
                    }
                    <div style="display:flex;justify-content:space-between;margin-top:8px;padding-top:10px;
                                border-top:1px solid var(--pos-border-subtle);font-size:14px;font-weight:700;">
                        <span>Tổng</span>
                        <span style="color:var(--pos-orange-primary);">@FormatPrice(_orderItems.Sum(i => i.Price * i.Qty))</span>
                    </div>
                </div>
                break;

            case 3:
                @* ═══ BẾP / KITCHEN STEP ═══ *@
                <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;">
                    <div style="font-size:15px;font-weight:700;margin-bottom:16px;">
                        <i data-lucide="chef-hat" style="width:18px;height:18px;display:inline;"></i> Bếp đang chuẩn bị
                    </div>
                    @foreach (var item in _orderItems)
                    {
                        <div style="display:flex;align-items:center;gap:10px;padding:10px;
                                    background:var(--pos-bg-interactive);border-radius:8px;margin-bottom:8px;
                                    border-left:3px solid @(item.Status == "done" ? "var(--pos-success)" : item.Status == "cooking" ? "var(--pos-warning)" : "var(--pos-text-tertiary)");">
                            <div style="flex:1;">
                                <div style="font-size:13px;font-weight:600;">@item.Name</div>
                            </div>
                            <span style="font-size:12px;font-weight:600;color:@(item.Status == "done" ? "var(--pos-success)" : item.Status == "cooking" ? "var(--pos-warning)" : "var(--pos-text-tertiary)");">
                                @(item.Status == "done" ? "Xong" : item.Status == "cooking" ? "Đang nấu" : "Chờ")
                            </span>
                        </div>
                    }
                </div>
                break;

            case 4:
                @* ═══ TIẾP TỤC / CONTINUE STEP ═══ *@
                <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;">
                    <div style="font-size:15px;font-weight:700;margin-bottom:16px;">
                        <i data-lucide="utensils-crossed" style="width:18px;height:18px;display:inline;"></i> Phục vụ bàn
                    </div>
                    <div style="display:flex;flex-direction:column;gap:10px;">
                        <div style="display:flex;justify-content:space-between;font-size:13px;padding:10px;background:var(--pos-bg-interactive);border-radius:8px;">
                            <span style="color:var(--pos-text-secondary);">Trạng thái</span>
                            <span style="font-weight:600;color:var(--pos-success);">Đã phục vụ xong</span>
                        </div>
                        <div style="display:flex;justify-content:space-between;font-size:13px;padding:10px;background:var(--pos-bg-interactive);border-radius:8px;">
                            <span style="color:var(--pos-text-secondary);">Gọi thêm?</span>
                            <span style="font-weight:600;">Có thể gọi thêm món</span>
                        </div>
                        <div style="display:flex;justify-content:space-between;font-size:13px;padding:10px;background:var(--pos-bg-interactive);border-radius:8px;">
                            <span style="color:var(--pos-text-secondary);">Thời gian ngồi</span>
                            <span style="font-weight:600;">45 phút</span>
                        </div>
                    </div>
                </div>
                break;

            case 5:
                @* ═══ THANH TOÁN / PAYMENT STEP ═══ *@
                <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;">
                    <div style="font-size:15px;font-weight:700;margin-bottom:16px;">
                        <i data-lucide="credit-card" style="width:18px;height:18px;display:inline;"></i> Thanh toán
                    </div>
                    <div style="display:flex;flex-direction:column;gap:8px;">
                        @foreach (var item in _orderItems)
                        {
                            <div style="display:flex;justify-content:space-between;font-size:13px;">
                                <span>@item.Qty x @item.Name</span>
                                <span style="font-weight:600;">@FormatPrice(item.Price * item.Qty)</span>
                            </div>
                        }
                        <div style="border-top:1px solid var(--pos-border-subtle);padding-top:10px;margin-top:4px;">
                            <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;">
                                <span style="color:var(--pos-text-secondary);">Tạm tính</span>
                                <span>@FormatPrice(_orderItems.Sum(i => i.Price * i.Qty))</span>
                            </div>
                            <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;">
                                <span style="color:var(--pos-text-secondary);">VAT (8%)</span>
                                <span>@FormatPrice(_orderItems.Sum(i => i.Price * i.Qty) * 0.08m)</span>
                            </div>
                            <div style="display:flex;justify-content:space-between;font-size:16px;font-weight:700;padding-top:8px;border-top:1px solid var(--pos-border-subtle);">
                                <span>Tổng thanh toán</span>
                                <span style="color:var(--pos-orange-primary);">@FormatPrice(_orderItems.Sum(i => i.Price * i.Qty) * 1.08m)</span>
                            </div>
                        </div>
                    </div>
                </div>
                break;

            case 6:
                @* ═══ HOÀN TẤT / COMPLETE STEP ═══ *@
                <div style="text-align:center;padding:40px 20px;">
                    <div style="width:80px;height:80px;border-radius:50%;background:rgba(34,197,94,.15);
                                display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
                        <i data-lucide="check-circle" style="width:40px;height:40px;color:#22C55E;"></i>
                    </div>
                    <div style="font-size:20px;font-weight:700;color:var(--pos-success);margin-bottom:8px;">Hoàn tất!</div>
                    <div style="font-size:14px;color:var(--pos-text-secondary);margin-bottom:4px;">
                        Cảm ơn quý khách Nguyễn Văn A
                    </div>
                    <div style="font-size:13px;color:var(--pos-text-tertiary);margin-bottom:20px;">
                        Bàn 7 · 4 người · Tổng: @FormatPrice(_orderItems.Sum(i => i.Price * i.Qty) * 1.08m)
                    </div>
                    <div style="display:flex;gap:12px;justify-content:center;">
                        <button style="padding:12px 24px;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;">
                            <i data-lucide="printer" style="width:14px;height:14px;display:inline;"></i> In hóa đơn
                        </button>
                        <button style="padding:12px 24px;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;">
                            <i data-lucide="star" style="width:14px;height:14px;display:inline;"></i> Đánh giá
                        </button>
                    </div>
                </div>
                break;
        }
    </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;">
        @if (_currentStep > 0)
        {
            <button style="padding:12px 20px;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="() => _currentStep--">
                <i data-lucide="arrow-left" style="width:14px;height:14px;display:inline;"></i> Quay lại
            </button>
        }
        <span style="flex:1;"></span>
        @if (_currentStep < _steps.Count - 1)
        {
            <button class="pos-btn-checkout" style="width:auto;padding:12px 24px;" @onclick="() => _currentStep++">
                Tiếp <i data-lucide="arrow-right" style="width:14px;height:14px;display:inline;"></i>
            </button>
        }
        else
        {
            <button class="pos-btn-checkout" style="width:auto;padding:12px 24px;" @onclick="@(() => NavigateTo("restaurant"))">
                <i data-lucide="home" style="width:14px;height:14px;display:inline;"></i> Về trang chính
            </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 int _currentStep = 0;

    // EN: Journey steps / VI: Các bước hành trình
    private readonly List<StepInfo> _steps = new()
    {
        new("Đón khách", "hand"),
        new("Chọn bàn", "layout-grid"),
        new("Đặt món", "utensils"),
        new("Bếp", "chef-hat"),
        new("Tiếp tục", "utensils-crossed"),
        new("Thanh toán", "credit-card"),
        new("Hoàn tất", "check-circle"),
    };

    // EN: Available tables / VI: Bàn trống
    private readonly List<TableInfo> _availableTables = new()
    {
        new("Bàn 5", 4, "Trong nhà"), new("Bàn 7", 6, "VIP"), new("Bàn 8", 2, "Ngoài trời"),
        new("Bàn 11", 4, "Trong nhà"), new("Bàn 12", 8, "VIP"), new("Bàn 6", 4, "Ngoài trời"),
    };

    // EN: Demo order items / VI: Các món trong đơn mẫu
    private readonly List<OrderItem> _orderItems = new()
    {
        new("Phở bò tái", 75_000, 2, "done"),
        new("Gỏi cuốn", 45_000, 1, "cooking"),
        new("Lẩu thái", 250_000, 1, "pending"),
        new("Trà đá", 10_000, 4, "done"),
    };

    private record StepInfo(string Label, string Icon);
    private record TableInfo(string Name, int Seats, string Section);
    private class OrderItem(string name, decimal price, int qty, string status)
    {
        public string Name { get; set; } = name;
        public decimal Price { get; set; } = price;
        public int Qty { get; set; } = qty;
        public string Status { get; set; } = status;
    }
}
