@page "/auth/login"
@page "/login"
@layout MainLayout
@inject NavigationManager Navigation
@inject IJSRuntime JS

<PageTitle>Chọn loại tài khoản — aPOS POS</PageTitle>

<div style="min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px 60px;">

    <h1 style="font-size:28px;font-weight:800;color:var(--pos-text-primary, #FFFFFF);margin:0 0 8px;text-align:center;">
        Chọn loại tài khoản
    </h1>
    <p style="font-size:15px;color:var(--pos-text-tertiary, #ADADB0);margin:0 0 40px;text-align:center;">
        Đăng nhập với vai trò phù hợp
    </p>

    <div style="display:grid;grid-template-columns:repeat(2, 1fr);gap:16px;max-width:560px;width:100%;">
        @foreach (var role in _roles)
        {
            <div @onclick="() => Navigation.NavigateTo(role.Href)"
                 style="background:var(--pos-bg-elevated, #18181B);border:2px solid var(--pos-border-default, #2A2A2E);border-radius:var(--pos-radius, 12px);padding:28px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;cursor:pointer;transition:border-color 0.2s, transform 0.15s;"
                 onmouseover="this.style.borderColor='@role.Color';this.style.transform='translateY(-2px)';"
                 onmouseout="this.style.borderColor='var(--pos-border-default, #2A2A2E)';this.style.transform='none';">
                <div style="width:48px;height:48px;border-radius:12px;background:@(role.Color)18;display:flex;align-items:center;justify-content:center;">
                    <i data-lucide="@role.Icon" style="width:24px;height:24px;color:@role.Color;"></i>
                </div>
                <h3 style="font-size:15px;font-weight:700;color:var(--pos-text-primary, #FFFFFF);margin:0;">@role.Title</h3>
                <p style="font-size:12px;color:var(--pos-text-tertiary, #ADADB0);margin:0;line-height:1.4;">@role.Description</p>
            </div>
        }
    </div>

    <p style="margin-top:32px;font-size:14px;color:var(--pos-text-tertiary, #ADADB0);">
        Chưa có tài khoản?
        <a href="/register" style="color:var(--pos-orange-primary, #FF5C00);text-decoration:none;font-weight:600;">Đăng ký ngay</a>
    </p>
</div>

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

    private record RoleCard(string Title, string Href, string Icon, string Color, string Description);

    private readonly RoleCard[] _roles =
    [
        new("Chủ doanh nghiệp", "/auth/login/admin",    "building",   "#3B82F6", "Quản lý toàn bộ hệ thống, cửa hàng, nhân viên"),
        new("Quản lý chi nhánh", "/auth/login/branch",   "store",      "#8B5CF6", "Quản lý chi nhánh, ca làm việc, báo cáo"),
        new("Nhân viên",         "/auth/login/staff",     "user-check", "#22C55E", "Thu ngân, barista, phục vụ, bếp"),
        new("Khách hàng",        "/auth/login/customer",  "heart",      "#EC4899", "Tích điểm, ưu đãi, lịch sử mua hàng"),
    ];
}
