@page "/auth/login/staff"
@layout AuthLayout
@using WebClientTpos.Client.Services
@inherits AuthBase

@*
    EN: Staff login page — centered card layout, green CTA, role hints.
    VI: Trang đăng nhập Nhân viên — layout card giữa, CTA xanh lá, gợi ý vai trò.
    Design: pencil-design/src/pages/tPOS/auth/login/staff-desktop.pen
*@

<PageTitle>@L["Auth_Staff_PageTitle"]</PageTitle>

<div class="auth-page">
    <AuthCard Title="@L["Auth_Staff_Title"]"
              Subtitle="@L["Auth_Staff_Subtitle"]"
              Icon="user-check"
              IconClass="auth-icon--green"
              RoleBadge="@L["Auth_Staff_RoleBadge"]"
              RoleBadgeClass="auth-role-badge--green"
              Compact="true">
        <ChildContent>
            <div class="auth-form">
                @if (!string.IsNullOrEmpty(_errorMessage))
                {
                    <div style="margin-bottom:16px;padding:12px 16px;border-radius:8px;background:rgba(239,68,68,0.12);color:#EF4444;font-size:14px;display:flex;align-items:center;gap:8px;">
                        <i data-lucide="alert-circle" style="width:16px;height:16px;flex-shrink:0;"></i>
                        <span>@_errorMessage</span>
                    </div>
                }

                <AuthInput Label="@L["Auth_Staff_IdLabel"]"
                           InputType="text"
                           Placeholder="@L["Auth_Staff_IdPlaceholder"]"
                           PrefixIcon="user"
                           InputId="staff-id"
                           AutoComplete="username"
                           Value="@_email"
                           ValueChanged="@(e => _email = e.Value?.ToString() ?? "")" />

                <AuthInput Label="@L["Auth_Staff_PasswordLabel"]"
                           InputType="password"
                           Placeholder="••••••••"
                           PrefixIcon="lock"
                           InputId="staff-password"
                           AutoComplete="current-password"
                           Value="@_password"
                           ValueChanged="@(e => _password = e.Value?.ToString() ?? "")" />
            </div>

            <AuthButton Variant="green" IconName="log-in" Disabled="@_isLoading" Loading="@_isLoading" OnClick="HandleLogin">
                @if (_isLoading)
                {
                    <span>Đang xử lý...</span>
                }
                else
                {
                    @L["Auth_Staff_Submit"]
                }
            </AuthButton>
        </ChildContent>
        <FooterContent>
            <div class="auth-role-hints">
                <span class="auth-role-hints-title">@L["Auth_Staff_Roles"]</span>
                <div class="auth-role-list">
                    <span class="auth-role-item">
                        <i data-lucide="monitor"></i> @L["Auth_Staff_RoleCashier"]
                    </span>
                    <span class="auth-role-item">
                        <i data-lucide="coffee"></i> @L["Auth_Staff_RoleBarista"]
                    </span>
                    <span class="auth-role-item">
                        <i data-lucide="clipboard-list"></i> @L["Auth_Staff_RoleWaiter"]
                    </span>
                    <span class="auth-role-item">
                        <i data-lucide="settings"></i> @L["Auth_Staff_RoleManager"]
                    </span>
                </div>
            </div>
            <span class="auth-footer-text">
                @L["Auth_Staff_ForgotPwd"] <a href="/forgot-password">@L["Auth_Staff_ContactManager"]</a>
            </span>
        </FooterContent>
    </AuthCard>
</div>

@code {
    [Inject] private AuthService AuthSvc { get; set; } = default!;
    [Inject] private NavigationManager Nav { get; set; } = default!;
    [Inject] private PosDataService DataService { get; set; } = default!;

    private string _email = "";
    private string _password = "";
    private bool _isLoading = false;
    private string? _errorMessage;

    private async Task HandleLogin()
    {
        if (_isLoading) return;
        _errorMessage = null;

        if (string.IsNullOrWhiteSpace(_email))
        {
            _errorMessage = "Vui lòng nhập mã nhân viên";
            return;
        }
        if (string.IsNullOrWhiteSpace(_password))
        {
            _errorMessage = "Vui lòng nhập mật khẩu";
            return;
        }

        _isLoading = true;
        StateHasChanged();

        try
        {
            var (ok, error) = await AuthSvc.LoginAsync(_email, _password, "staff");

            if (ok)
            {
                // EN: Route to staff dashboard — StaffLayout will detect role
                // VI: Điều hướng đến staff dashboard — StaffLayout sẽ phát hiện vai trò
                _isLoading = false;
                StateHasChanged();
                await Task.Delay(500);
                Nav.NavigateTo("/staff/dashboard", forceLoad: true);
            }
            else
            {
                _errorMessage = error ?? "Đăng nhập thất bại";
                _isLoading = false;
            }
        }
        catch (Exception)
        {
            _errorMessage = "Lỗi kết nối. Vui lòng thử lại.";
            _isLoading = false;
        }
    }
}
