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

@*
    EN: Onboarding Step 4 — Add staff members (name, role, email, PIN, staff list preview)
    VI: Bước 4 thiết lập — Thêm nhân viên (tên, vai trò, email, mã PIN, danh sách)
    Design: pencil-design/src/pages/tPOS/admin/onboarding-staff.pen
*@

<PageTitle>Thêm nhân viên — 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 4/6 — Mời nhân viên cốt lõi vào hệ thống</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;">Thêm nhân viên</h2>
                <p style="margin:0;font-size:14px;color:var(--admin-text-tertiary);">Cung cấp quyền truy cập cho quản lý, thu ngân và nhân viên hỗ trợ.</p>
            </div>

            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;">
                <div class="admin-form-group">
                    <label class="admin-form-label">Họ tên nhân viên</label>
                    <input class="admin-form-input" type="text" @bind="_newStaffName" />
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Email</label>
                    <input class="admin-form-input" type="email" @bind="_newStaffEmail" />
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Vai trò</label>
                    <select class="admin-form-input" @bind="_newStaffRole">
                        <option value="manager">Quản lý</option>
                        <option value="cashier">Thu ngân</option>
                        <option value="barista">Barista</option>
                        <option value="waiter">Phục vụ</option>
                    </select>
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Mã PIN</label>
                    <input class="admin-form-input" type="text" maxlength="4" @bind="_newStaffPin" />
                </div>
            </div>

            <div style="display:flex;justify-content:flex-end;">
                <button class="admin-btn-primary" style="display:flex;align-items:center;gap:8px;" @onclick="AddStaff">
                    <i data-lucide="user-plus"></i>
                    <span>Mời nhân viên</span>
                </button>
            </div>

            <div style="display:flex;flex-direction:column;gap:10px;">
                <div style="display:flex;align-items:center;justify-content:space-between;">
                    <h3 style="margin:0;font-size:16px;font-weight:600;">Nhân viên đã mời (@_staffList.Count)</h3>
                    <span style="font-size:12px;color:var(--admin-text-tertiary);">Những mã PIN có thể đổi sau</span>
                </div>
                <div style="display:flex;flex-direction:column;gap:10px;">
                    @foreach (var staff in _staffList)
                    {
                        <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:12px;border:1px solid var(--admin-border-subtle);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:@staff.Color;display:flex;align-items:center;justify-content:center;font-weight:600;color:#FFF;">
                                    @staff.Initials
                                </div>
                                <div>
                                    <div style="font-weight:600;">@staff.Name</div>
                                    <div style="font-size:12px;color:var(--admin-text-tertiary);">@staff.Role</div>
                                </div>
                            </div>
                            <div style="display:flex;flex-direction:column;align-items:flex-end;gap:4px;">
                                <span style="font-size:12px;color:var(--admin-text-tertiary);">PIN: @staff.Pin</span>
                                <span class="admin-status-badge admin-status-badge--setup">
                                    <div class="admin-status-badge__dot"></div>
                                    Đang chờ
                                </span>
                            </div>
                        </div>
                    }
                </div>
            </div>

            <div style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;">
                <button class="admin-btn-secondary" @onclick='() => NavigateTo("onboarding/products")' 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/device")'>Bỏ qua</button>
                    <button class="admin-btn-primary" @onclick='() => NavigateTo("onboarding/device")' 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 = 4;
    private string _newStaffName = "Nguyễn Văn A";
    private string _newStaffEmail = "van.a@goodgo.vn";
    private string _newStaffRole = "cashier";
    private string _newStaffPin = "1234";

    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 StaffItem(string Name, string Email, string Role, string Pin, string Initials, string Color);
    private List<StaffItem> _staffList = new()
    {
        new("Nguyễn Văn A", "manager@goodgo.vn", "Quản lý", "8974", "VA", "#3B82F6"),
        new("Trần Thị B", "cashier@goodgo.vn", "Thu ngân", "5621", "TB", "#EC4899"),
    };

    private void AddStaff()
    {
        if (string.IsNullOrWhiteSpace(_newStaffName) || string.IsNullOrWhiteSpace(_newStaffEmail))
        {
            return;
        }

        var initials = string.Empty;
        foreach (var chunk in _newStaffName.Split(' ', StringSplitOptions.RemoveEmptyEntries))
        {
            if (chunk.Length > 0)
            {
                initials += char.ToUpper(chunk[0]);
            }
        }

        if (string.IsNullOrEmpty(initials) && _newStaffEmail.Length >= 2)
        {
            initials = _newStaffEmail.Substring(0, 2).ToUpper();
        }

        var roleLabel = _newStaffRole switch
        {
            "manager" => "Quản lý",
            "barista" => "Barista",
            "waiter" => "Phục vụ",
            _ => "Thu ngân",
        };

        _staffList.Insert(0, new StaffItem(_newStaffName, _newStaffEmail, roleLabel, _newStaffPin, initials, "#8B5CF6"));
        _newStaffName = string.Empty;
        _newStaffEmail = string.Empty;
        _newStaffPin = string.Empty;
    }
}
