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

@*
    EN: Onboarding Step 5 — Device setup (POS terminal, printer, scanner, test print)
    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, in thử)
    Design: pencil-design/src/pages/tPOS/admin/onboarding-device.pen
*@

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

<div class="admin-content" style="padding:40px;">
    <div class="admin-panel" style="max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:32px;">

        <section>
            <div style="display:flex;gap:8px;align-items:center;margin-bottom:12px;">
                @for (int i = 1; i <= 6; i++)
                {
                    <div style="width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
                        background-color:@(i == currentStep ? "var(--admin-orange-primary)" : i < currentStep ? "rgba(34,197,94,0.2)" : "var(--admin-bg-interactive)");
                        color:@(i == currentStep ? "#FFF" : i < currentStep ? "#22C55E" : "var(--admin-text-tertiary)");">
                        @(i < currentStep ? "✓" : i)
                    </div>
                    @if (i < 6)
                    {
                        <div style="flex:1;height:2px;background-color:@(i < currentStep ? "#22C55E" : "var(--admin-border-subtle)");"></div>
                    }
                }
            </div>
            <div style="display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-bottom:6px;">
                @for (int i = 1; i <= 6; i++)
                {
                    <span style="text-align:center;font-size:12px;font-weight:@(i == currentStep ? "600" : "500");color:@(i == currentStep ? "var(--admin-orange-primary)" : "var(--admin-text-tertiary)");">
                        @_steps[i - 1].Label
                    </span>
                }
            </div>
            <p style="font-size:12px;color:var(--admin-text-tertiary);margin:0;">Bước 5/6 — Ghép nối thiết bị và đảm bảo trang bị vận hành</p>
        </section>

        <section class="admin-panel" style="padding:32px;display:flex;flex-direction:column;gap:24px;">
            <div style="display:flex;flex-direction:column;gap:6px;">
                <h2 style="font-size:24px;margin:0;font-weight:700;">Kết nối thiết bị</h2>
                <p style="margin:0;font-size:14px;color:var(--admin-text-tertiary);">Kết nối máy POS, máy in và máy quét để chuẩn bị cho phiên bán hàng đầu tiên.</p>
            </div>

            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;">
                <div style="border-radius:14px;border:1px solid var(--admin-border-subtle);padding:20px;display:flex;flex-direction:column;gap:12px;">
                    <div style="display:flex;align-items:center;gap:10px;font-weight:600;color:var(--admin-orange-primary);">
                        <i data-lucide="tablet" style="width:24px;height:24px;"></i>
                        <span>Thiết bị POS</span>
                    </div>
                    <span style="font-size:14px;font-weight:600;">@_terminalLabel</span>
                    <p style="margin:0;font-size:13px;color:var(--admin-text-tertiary);">Ghép nối qua mã QR hoặc Bluetooth trong ứng dụng aPOS POS.</p>
                    <button class="admin-btn-secondary" @onclick="PairTerminal">Ghép nối</button>
                </div>
                <div style="border-radius:14px;border:1px solid var(--admin-border-subtle);padding:20px;display:flex;flex-direction:column;gap:12px;">
                    <div style="display:flex;align-items:center;gap:10px;font-weight:600;color:@(_scannerPaired ? "#22C55E" : "var(--admin-text-primary)");">
                        <i data-lucide="radio" style="width:20px;height:20px;color:@(_scannerPaired ? "#22C55E" : "var(--admin-text-tertiary)");"></i>
                        <span>Máy quét mã vạch</span>
                    </div>
                    <span style="font-size:13px;color:var(--admin-text-tertiary);">@(_scannerPaired ? "Đã ghép nối" : "Chưa ghép nối")</span>
                    <button class="admin-btn-primary" @onclick="ToggleScannerPairing">@(_scannerPaired ? "Đặt lại" : "Ghép nối")</button>
                </div>
            </div>

            <div style="display:flex;flex-direction:column;gap:16px;">
                <div style="display:flex;align-items:center;justify-content:space-between;">
                    <div>
                        <h3 style="margin:0;font-size:18px;font-weight:600;">Máy in hóa đơn</h3>
                        <p style="margin:0;font-size:13px;color:var(--admin-text-tertiary);">Chọn cổng kết nối phù hợp với cửa hàng</p>
                    </div>
                    <span style="font-size:12px;color:var(--admin-orange-primary);font-weight:600;">Đang sử dụng: @GetPrinterLabel()</span>
                </div>
                <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;">
                    @foreach (var printer in _printerOptions)
                    {
                        <div style="border-radius:12px;padding:16px;border:2px solid @(printer.Key == _selectedPrinter ? "var(--admin-orange-primary)" : "var(--admin-border-default)");background-color:@(printer.Key == _selectedPrinter ? "rgba(255,92,0,0.1)" : "var(--admin-bg-interactive)");">
                            <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px;font-weight:600;color:@(printer.Key == _selectedPrinter ? "var(--admin-orange-primary)" : "var(--admin-text-primary)");">
                                <i data-lucide="printer" style="width:20px;height:20px;"></i>
                                <span>@printer.Label</span>
                            </div>
                            <p style="margin:0;font-size:12px;color:var(--admin-text-tertiary);">@printer.Description</p>
                            <button class="admin-btn-secondary" style="margin-top:12px;width:100%;" @onclick="() => SelectPrinter(printer.Key)">Chọn</button>
                        </div>
                    }
                </div>
            </div>

            <div style="border-radius:14px;border:1px solid var(--admin-border-subtle);padding:20px;display:flex;flex-direction:column;gap:12px;">
                <div style="display:flex;align-items:center;gap:10px;">
                    <i data-lucide="printer" style="width:24px;height:24px;color:var(--admin-orange-primary);"></i>
                    <span style="font-weight:600;">In thử</span>
                </div>
                <p style="margin:0;font-size:13px;color:var(--admin-text-tertiary);">Đảm bảo đầu ra từ máy in trông ổn và dễ đọc.</p>
                <div style="display:flex;gap:12px;flex-wrap:wrap;">
                    <button class="admin-btn-primary" @onclick="TriggerTestPrint">In thử</button>
                    <span style="font-size:12px;color:var(--admin-text-secondary);">@_testPrintMessage</span>
                </div>
            </div>

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

@code {
    private int currentStep = 5;
    private string _selectedPrinter = "thermal";
    private string _testPrintMessage = "Chưa test";
    private bool _scannerPaired = false;
    private string _terminalLabel = "iPad POS — Quầy 1";

    private record StepInfo(int Index, string Label);
    private readonly StepInfo[] _steps =
    {
        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"),
    };

    private record PrinterOption(string Key, string Label, string Description);
    private readonly PrinterOption[] _printerOptions =
    {
        new PrinterOption("thermal", "Máy in nhiệt", "Hóa đơn 58/80mm"),
        new PrinterOption("bluetooth", "Bluetooth", "Không dây cho quầy nhỏ"),
        new PrinterOption("usb", "USB", "Kết nối có dây ổn định"),
    };

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

    private void PairTerminal()
    {
        _terminalLabel = "iPad POS — Quầy 2";
    }

    private void ToggleScannerPairing()
    {
        _scannerPaired = !_scannerPaired;
    }

    private void TriggerTestPrint()
    {
        _testPrintMessage = "Đã in thành công";
    }

    private string GetPrinterLabel()
        => Array.Find(_printerOptions, p => p.Key == _selectedPrinter)?.Label ?? "Máy in nhiệt";
}
