@*
    EN: Spa Journey Tracker — Horizontal step tracker: Check-in → Dịch vụ → Thực hiện → Thanh toán → Hoàn tất.
    VI: Theo dõi hành trình Spa — Thanh bước ngang: Check-in → Dịch vụ → Thực hiện → Thanh toán → Hoàn tất.
*@
@page "/pos/{ShopId:guid}/spa/spa-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("spa"))">
            <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 Spa</span>
        <span style="flex:1;"></span>
        <span style="font-size:12px;padding:4px 12px;border-radius:6px;font-weight:600;
                     background:rgba(245,158,11,.15);color:#F59E0B;">
            <i data-lucide="crown" style="width:12px;height:12px;display:inline;"></i> Gold
        </span>
    </div>

    @* ═══ STEP TRACKER / THANH BƯỚC ═══ *@
    <div style="padding:20px 16px;flex-shrink:0;">
        <div style="display:flex;align-items:center;justify-content:center;gap:0;">
            @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:40px;height:40px;border-radius:50%;background:@bgColor;
                                display:flex;align-items:center;justify-content:center;color:@fgColor;
                                font-size:14px;font-weight:700;cursor:pointer;"
                         @onclick="() => _currentStep = stepIdx">
                        @if (isCompleted)
                        {
                            <i data-lucide="check" style="width:18px;height:18px;"></i>
                        }
                        else
                        {
                            <span>@(stepIdx + 1)</span>
                        }
                    </div>
                    <div style="font-size:11px;margin-top:6px;font-weight:@(isActive ? "700" : "500");
                                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:80px;margin:0 8px;margin-bottom:20px;
                                background:@(stepIdx < _currentStep ? "var(--pos-success)" : "var(--pos-border-default)");"></div>
                }
            }
        </div>
    </div>

    @* ═══ STEP CONTENT / NỘI DUNG BƯỚC ═══ *@
    <div style="flex:1;overflow-y:auto;padding:0 16px 16px;">
        @* EN: Customer info card / VI: Thẻ thông tin khách *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:16px;margin-bottom:16px;
                    display:flex;align-items:center;gap:14px;">
            <div style="width:48px;height:48px;border-radius:50%;background:var(--pos-orange-primary);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#fff;flex-shrink:0;">
                M
            </div>
            <div style="flex:1;">
                <div style="font-size:15px;font-weight:700;">Nguyễn Thị Mai</div>
                <div style="font-size:12px;color:var(--pos-text-tertiary);">0901234567 • Gold • 2,450 điểm</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;">#SP-20250220-001</div>
            </div>
        </div>

        @* EN: Step-specific content / VI: Nội dung theo bước *@
        @switch (_currentStep)
        {
            case 0:
                @* ═══ CHECK-IN STEP / BƯỚC CHECK-IN ═══ *@
                <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="log-in" style="width:18px;height:18px;display:inline;"></i> Check-in
                    </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);">Giờ hẹn</span>
                            <span style="font-weight:600;">14:00</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);">13:55 (sớm 5 phút)</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);">Phòng chờ</span>
                            <span style="font-weight:600;">Phòng chờ VIP</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);">Nước uống</span>
                            <span style="font-weight:600;">Trà thảo mộc (đã phục vụ)</span>
                        </div>
                    </div>
                </div>
                break;

            case 1:
                @* ═══ SERVICE STEP / BƯỚC DỊCH VỤ ═══ *@
                <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="list-checks" style="width:18px;height:18px;display:inline;"></i> Dịch vụ đã chọn
                    </div>
                    @foreach (var svc in _bookedServices)
                    {
                        <div style="display:flex;align-items:center;gap:12px;padding:12px;
                                    background:var(--pos-bg-interactive);border-radius:8px;margin-bottom:8px;">
                            <div style="width:40px;height:40px;border-radius:10px;background:@GetServiceBg(svc.Type);
                                        display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                <i data-lucide="@GetServiceIcon(svc.Type)" style="width:18px;height:18px;color:@GetServiceFg(svc.Type);"></i>
                            </div>
                            <div style="flex:1;">
                                <div style="font-size:13px;font-weight:600;">@svc.Name</div>
                                <div style="font-size:11px;color:var(--pos-text-tertiary);">@svc.Duration phút • KTV: @svc.Therapist</div>
                            </div>
                            <span style="font-size:14px;font-weight:600;">@FormatPrice(svc.Price)</span>
                        </div>
                    }
                </div>
                break;

            case 2:
                @* ═══ IN-PROGRESS STEP / BƯỚC THỰC HIỆN ═══ *@
                <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="activity" style="width:18px;height:18px;display:inline;"></i> Đang thực hiện
                    </div>
                    @foreach (var svc in _bookedServices)
                    {
                        var statusColor = svc.Status == "done" ? "var(--pos-success)"
                            : svc.Status == "active" ? "var(--pos-orange-primary)" : "var(--pos-text-tertiary)";
                        var statusLabel = svc.Status == "done" ? "Hoàn thành"
                            : svc.Status == "active" ? "Đang thực hiện" : "Chờ";
                        <div style="display:flex;align-items:center;gap:12px;padding:12px;
                                    background:var(--pos-bg-interactive);border-radius:8px;margin-bottom:8px;
                                    border-left:3px solid @statusColor;">
                            <div style="flex:1;">
                                <div style="font-size:13px;font-weight:600;">@svc.Name</div>
                                <div style="font-size:11px;color:var(--pos-text-tertiary);">KTV: @svc.Therapist</div>
                            </div>
                            <span style="font-size:12px;font-weight:600;color:@statusColor;">@statusLabel</span>
                        </div>
                    }
                </div>
                break;

            case 3:
                @* ═══ PAYMENT STEP / BƯỚC THANH TOÁN ═══ *@
                <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 svc in _bookedServices)
                        {
                            <div style="display:flex;justify-content:space-between;font-size:13px;">
                                <span>@svc.Name</span>
                                <span style="font-weight:600;">@FormatPrice(svc.Price)</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(_bookedServices.Sum(s => s.Price))</span>
                            </div>
                            <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;">
                                <span style="color:#22C55E;">Giảm giá Gold (-10%)</span>
                                <span style="color:#22C55E;">-@FormatPrice(_bookedServices.Sum(s => s.Price) * 0.1m)</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(_bookedServices.Sum(s => s.Price) * 0.9m)</span>
                            </div>
                        </div>
                    </div>

                    @* EN: Payment methods / VI: Phương thức thanh toán *@
                    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:16px;">
                        <button style="padding:14px;border-radius:var(--pos-radius);background:var(--pos-bg-interactive);
                                       border:1px solid var(--pos-border-default);color:var(--pos-text-primary);cursor:pointer;text-align:center;font-size:12px;">
                            <i data-lucide="banknote" style="width:20px;height:20px;display:block;margin:0 auto 4px;"></i>
                            Tiền mặt
                        </button>
                        <button style="padding:14px;border-radius:var(--pos-radius);background:rgba(59,130,246,.1);
                                       border:1px solid rgba(59,130,246,.3);color:#3B82F6;cursor:pointer;text-align:center;font-size:12px;">
                            <i data-lucide="credit-card" style="width:20px;height:20px;display:block;margin:0 auto 4px;"></i>
                            Thẻ
                        </button>
                        <button style="padding:14px;border-radius:var(--pos-radius);background:rgba(34,197,94,.1);
                                       border:1px solid rgba(34,197,94,.3);color:#22C55E;cursor:pointer;text-align:center;font-size:12px;">
                            <i data-lucide="smartphone" style="width:20px;height:20px;display:block;margin:0 auto 4px;"></i>
                            Chuyển khoản
                        </button>
                    </div>
                </div>
                break;

            case 4:
                @* ═══ COMPLETE STEP / BƯỚC HOÀN TẤT ═══ *@
                <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 Thị Mai đã sử dụng dịch vụ
                    </div>
                    <div style="font-size:13px;color:var(--pos-text-tertiary);margin-bottom:20px;">
                        +99 điểm tích lũy • Tổng: 2,549 điểm
                    </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++">
                @_steps[_currentStep].Action <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("spa"))">
                <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 = 2;
    private readonly List<StepInfo> _steps = new()
    {
        new("Check-in", "check-in", "Tiếp tục"),
        new("Dịch vụ", "service", "Bắt đầu"),
        new("Thực hiện", "progress", "Thanh toán"),
        new("Thanh toán", "payment", "Hoàn tất"),
        new("Hoàn tất", "complete", "Xong"),
    };

    // EN: Booked services / VI: Dịch vụ đã đặt
    private readonly List<BookedService> _bookedServices = new()
    {
        new("Massage toàn thân", 500_000, 60, "Trần Thị Hoa", "Massage", "done"),
        new("Facial collagen", 600_000, 60, "Nguyễn Minh Tú", "Facial", "active"),
    };

    private static string GetServiceBg(string type) => type switch
    {
        "Massage" => "rgba(255,92,0,.15)", "Facial" => "rgba(139,92,246,.15)",
        "Body" => "rgba(34,197,94,.15)", _ => "rgba(59,130,246,.15)"
    };

    private static string GetServiceFg(string type) => type switch
    {
        "Massage" => "#FF5C00", "Facial" => "#8B5CF6", "Body" => "#22C55E", _ => "#3B82F6"
    };

    private static string GetServiceIcon(string type) => type switch
    {
        "Massage" => "hand", "Facial" => "sparkles", "Body" => "bath", _ => "scissors"
    };

    private record StepInfo(string Label, string Id, string Action);
    private record BookedService(string Name, decimal Price, int Duration, string Therapist, string Type, string Status);
}
