@page "/staff/pos"
@layout StaffLayout
@using WebClientTpos.Client.Services
@inject NavigationManager Nav
@inject IJSRuntime JS

@*
    EN: Cashier POS redirect — redirects cashier to the actual POS screen.
    VI: Chuyển hướng POS thu ngân — chuyển thu ngân đến màn hình POS.
*@

<PageTitle>Thu ngân - POS</PageTitle>

<div class="staff-page">
    <div class="staff-page-header">
        <h1 class="staff-page-title">Thu ngân</h1>
        <p class="staff-page-subtitle">Chọn cửa hàng để bắt đầu bán hàng</p>
    </div>

    <div style="text-align:center;padding:48px;">
        <div style="width:80px;height:80px;border-radius:24px;background:rgba(255,92,0,0.12);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;">
            <i data-lucide="monitor" style="width:36px;height:36px;color:#FF5C00;"></i>
        </div>
        <h3 style="font-size:18px;font-weight:600;color:var(--admin-text-primary);margin:0 0 8px;">Mở POS</h3>
        <p style="font-size:14px;color:var(--admin-text-tertiary);margin:0 0 24px;">Nhấn nút bên dưới để mở màn hình thu ngân toàn màn hình</p>

        @if (_shopId.HasValue)
        {
            <button class="staff-btn-primary" style="padding:14px 32px;font-size:16px;" @onclick="OpenPos">
                <i data-lucide="external-link"></i>
                Mở POS Cafe
            </button>
        }
        else
        {
            <p style="color:var(--admin-text-tertiary);">Chưa được phân công cửa hàng. Vui lòng liên hệ quản lý.</p>
        }
    </div>
</div>

@code {
    private Guid? _shopId;
    [CascadingParameter] private StaffLayout? Layout { get; set; }

    protected override void OnInitialized()
    {
        _shopId = Layout?.ShopId;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        try { await JS.InvokeVoidAsync("lucide.createIcons"); } catch { }
    }

    private void OpenPos()
    {
        if (_shopId.HasValue)
            Nav.NavigateTo($"/pos/{_shopId}/cafe", forceLoad: true);
    }
}
