@page "/admin/onboarding/device"
@layout AdminLayout
@inherits AdminBase

@*
    EN: Onboarding Step 5 — Device setup (POS terminal, printer, scanner pairing).
    VI: Bước 5 thiết lập — Kết nối thiết bị (máy POS, máy in, máy quét).
    Design: pencil-design/src/pages/tPOS/admin/onboarding-device.pen
*@

<PageTitle>Kết nối thiết bị — GoodGo Admin</PageTitle>

<div style="display:flex;height:100vh;overflow:hidden;">

    @* ═══ SIDEBAR — Step Progress ═══ *@
    <div style="width:260px;min-width:260px;background-color:var(--admin-bg-elevated);border-right:1px solid var(--admin-border-subtle);display:flex;flex-direction:column;height:100vh;">
        <div style="display:flex;align-items:center;gap:12px;padding:24px;border-bottom:1px solid var(--admin-border-subtle);">
            <div style="width:40px;height:40px;border-radius:12px;background:var(--admin-orange-gradient);display:flex;align-items:center;justify-content:center;color:#FFF;font-size:20px;font-weight:800;">G</div>
            <div style="display:flex;flex-direction:column;gap:2px;">
                <span style="font-size:16px;font-weight:700;">GoodGo Admin</span>
                <span style="font-size:11px;color:var(--admin-text-tertiary);">Thiết lập ban đầu</span>
            </div>
        </div>
        <div style="flex:1;padding:32px 24px;display:flex;flex-direction:column;">
            <span style="font-size:10px;font-weight:700;color:var(--admin-text-tertiary);letter-spacing:0.05em;margin-bottom:16px;">TIẾN TRÌNH</span>
            @foreach (var s in _steps)
            {
                var step = s;
                var isCompleted = step.Index < 5;
                var isCurrent = step.Index == 5;
                <div style="display:flex;align-items:center;gap:14px;padding:10px 8px;border-radius:10px;
                    background-color:@(isCurrent ? "rgba(255,92,0,0.08)" : "transparent");">
                    <div style="width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
                        background-color:@(isCompleted ? "#22C55E" : isCurrent ? "var(--admin-orange-primary)" : "var(--admin-bg-interactive)");
                        color:@(isCompleted || isCurrent ? "#FFF" : "var(--admin-text-tertiary)");
                        border:@(!isCompleted && !isCurrent ? "2px solid var(--admin-border-default)" : "none");">
                        @(isCompleted ? "✓" : step.Index)
                    </div>
                    <span style="font-size:14px;font-weight:@(isCurrent ? "600" : "500");color:@(isCompleted ? "var(--admin-text-primary)" : isCurrent ? "var(--admin-orange-primary)" : "var(--admin-text-tertiary)");">@step.Label</span>
                </div>
                @if (step.Index < 6)
                {
                    <div style="width:2px;height:24px;margin-left:23px;background-color:@(isCompleted ? "#22C55E" : "var(--admin-border-default)");"></div>
                }
            }
        </div>
    </div>

    @* ═══ MAIN CONTENT ═══ *@
    <div style="flex:1;display:flex;align-items:center;justify-content:center;padding:40px;overflow-y:auto;">
        <div class="admin-panel" style="width:720px;max-width:100%;padding:32px;border-radius:16px;display:flex;flex-direction:column;gap:24px;">

            <div style="display:flex;flex-direction:column;gap:8px;">
                <h2 style="font-size:22px;font-weight:700;margin:0;">Kết nối thiết bị</h2>
                <p style="font-size:14px;color:var(--admin-text-tertiary);margin:0;">Kết nối thiết bị POS và máy in để bắt đầu bán hàng</p>
            </div>

            @* QR Pairing section *@
            <div style="display:flex;gap:24px;">
                <div style="width:160px;height:160px;border-radius:12px;background-color:#FFFFFF;display:flex;align-items:center;justify-content:center;">
                    <div style="width:120px;height:120px;background-color:#E5E5E5;border-radius:8px;display:flex;align-items:center;justify-content:center;">
                        <i data-lucide="qr-code" style="width:60px;height:60px;color:#333;"></i>
                    </div>
                </div>
                <div style="flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;">
                    <div style="display:flex;flex-direction:column;gap:4px;">
                        <span style="font-size:16px;font-weight:700;">Quét mã QR</span>
                        <span style="font-size:13px;color:var(--admin-text-tertiary);">Mở ứng dụng GoodGo POS trên thiết bị và quét mã QR để kết nối</span>
                    </div>
                    <div style="display:flex;flex-direction:column;gap:4px;">
                        <span style="font-size:12px;color:var(--admin-text-tertiary);">Mã ghép nối</span>
                        <span style="font-size:20px;font-weight:700;letter-spacing:4px;color:var(--admin-orange-primary);">GG-8492</span>
                    </div>
                </div>
            </div>

            @* Connected devices *@
            <div style="display:flex;flex-direction:column;gap:12px;">
                <span style="font-size:13px;font-weight:600;color:var(--admin-text-secondary);">Thiết bị đã kết nối (1)</span>
                <div style="display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:12px;background-color:var(--admin-bg-interactive);">
                    <div style="display:flex;align-items:center;gap:12px;">
                        <div style="width:40px;height:40px;border-radius:10px;background-color:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;">
                            <i data-lucide="tablet" style="width:20px;height:20px;color:#22C55E;"></i>
                        </div>
                        <div style="display:flex;flex-direction:column;gap:2px;">
                            <span style="font-size:14px;font-weight:600;">iPad POS — Quầy 1</span>
                            <span style="font-size:12px;color:var(--admin-text-tertiary);">Kết nối 2 phút trước</span>
                        </div>
                    </div>
                    <div class="admin-status-badge admin-status-badge--online">
                        <div class="admin-status-badge__dot"></div>
                        Online
                    </div>
                </div>
            </div>

            @* Printer setup *@
            <div style="display:flex;flex-direction:column;gap:12px;">
                <span style="font-size:13px;font-weight:600;color:var(--admin-text-secondary);">Thiết lập máy in</span>
                <div style="display:flex;gap:12px;">
                    @foreach (var printer in _printerOptions)
                    {
                        var p = printer;
                        <div style="flex:1;padding:16px;border-radius:12px;background-color:var(--admin-bg-interactive);border:2px solid @(p.IsSelected ? "var(--admin-orange-primary)" : "var(--admin-border-default)");cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;"
                             @onclick="@(() => SelectPrinter(p.Key))">
                            <i data-lucide="@p.Icon" style="width:24px;height:24px;color:@(p.IsSelected ? "var(--admin-orange-primary)" : "var(--admin-text-tertiary)");"></i>
                            <span style="font-size:13px;font-weight:600;color:@(p.IsSelected ? "var(--admin-orange-primary)" : "var(--admin-text-primary)");">@p.Label</span>
                            <span style="font-size:11px;color:var(--admin-text-tertiary);text-align:center;">@p.Desc</span>
                        </div>
                    }
                </div>
            </div>

            @* Footer *@
            <div style="display:flex;justify-content:space-between;padding-top:8px;">
                <div style="display:flex;gap:12px;">
                    <button class="admin-btn-secondary" @onclick="@(() => NavigateTo("onboarding/staff"))">
                        <i data-lucide="arrow-left"></i>
                        <span>Quay lại</span>
                    </button>
                </div>
                <div style="display:flex;gap:12px;">
                    <button class="admin-btn-secondary" @onclick="@(() => NavigateTo("onboarding/ready"))">
                        <span>Bỏ qua</span>
                    </button>
                    <button class="admin-btn-primary" @onclick="@(() => NavigateTo("onboarding/ready"))">
                        <span>Tiếp tục</span>
                        <i data-lucide="arrow-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@code {
    private string _selectedPrinter = "thermal";

    private record PrinterOption(string Key, string Label, string Icon, string Desc, bool IsSelected);
    private List<PrinterOption> _printerOptions = new();

    protected override void OnInitialized()
    {
        UpdatePrinterOptions();
    }

    private void SelectPrinter(string key)
    {
        _selectedPrinter = key;
        UpdatePrinterOptions();
    }

    private void UpdatePrinterOptions()
    {
        _printerOptions = new()
        {
            new("thermal", "Máy in nhiệt", "printer", "In hóa đơn 58/80mm", _selectedPrinter == "thermal"),
            new("bluetooth", "Bluetooth", "bluetooth", "Kết nối không dây", _selectedPrinter == "bluetooth"),
            new("usb", "USB", "usb", "Kết nối có dây", _selectedPrinter == "usb"),
        };
    }

    private record StepInfo(int Index, string Label);
    private readonly StepInfo[] _steps = new[]
    {
        new StepInfo(1, "Doanh nghiệp"),
        new StepInfo(2, "Cửa hàng"),
        new StepInfo(3, "Sản phẩm"),
        new StepInfo(4, "Nhân viên"),
        new StepInfo(5, "Thiết bị"),
        new StepInfo(6, "Hoàn tất"),
    };
}
