@page "/staff/notifications"
@layout StaffLayout
@using WebClientTpos.Client.Services
@inject PosDataService DataService
@inject IJSRuntime JS

@*
    EN: Staff notifications page.
    VI: Trang thông báo nhân viên.
*@

<PageTitle>Thông báo</PageTitle>

<div class="staff-page">
    <div class="staff-page-header">
        <h1 class="staff-page-title">Thông báo</h1>
        <p class="staff-page-subtitle">Thông báo và cập nhật từ cửa hàng</p>
    </div>

    @if (_loading)
    {
        <div style="text-align:center;padding:48px;">
            <MudProgressCircular Indeterminate="true" Size="Size.Medium" Color="Color.Success" />
        </div>
    }
    else if (_notifications.Count == 0)
    {
        <div style="text-align:center;padding:48px;">
            <div style="width:64px;height:64px;border-radius:20px;background:rgba(34,197,94,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
                <i data-lucide="bell-off" style="width:28px;height:28px;color:#22C55E;"></i>
            </div>
            <h3 style="font-size:16px;font-weight:600;color:var(--admin-text-primary);margin:0 0 8px;">Không có thông báo</h3>
            <p style="font-size:13px;color:var(--admin-text-tertiary);">Bạn đã đọc tất cả thông báo</p>
        </div>
    }
    else
    {
        <div style="display:flex;flex-direction:column;gap:8px;">
            @foreach (var n in _notifications)
            {
                <div style="background:var(--admin-bg-elevated);border:1px solid @(n.IsRead ? "var(--admin-border-default)" : "#22C55E33");border-radius:var(--admin-radius-lg);padding:16px 20px;display:flex;gap:14px;align-items:flex-start;">
                    <div style="width:36px;height:36px;border-radius:10px;background:@GetIconBg(n.Type);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <i data-lucide="@GetIcon(n.Type)" style="width:18px;height:18px;color:@GetIconColor(n.Type);"></i>
                    </div>
                    <div style="flex:1;min-width:0;">
                        <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px;">
                            <span style="font-size:14px;font-weight:600;color:var(--admin-text-primary);">@n.Title</span>
                            @if (!n.IsRead)
                            {
                                <span style="width:8px;height:8px;border-radius:4px;background:#22C55E;flex-shrink:0;"></span>
                            }
                        </div>
                        <p style="font-size:13px;color:var(--admin-text-secondary);margin:0 0 6px;">@n.Message</p>
                        <span style="font-size:11px;color:var(--admin-text-tertiary);">@FormatTime(n.CreatedAt)</span>
                    </div>
                </div>
            }
        </div>
    }
</div>

@code {
    private List<PosDataService.StaffNotification> _notifications = new();
    private bool _loading = true;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            _notifications = await DataService.GetMyNotificationsAsync();
        }
        catch { }
        finally { _loading = false; }
    }

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

    private static string GetIcon(string type) => type switch
    {
        "schedule" => "calendar-days",
        "payroll" => "wallet",
        "leave" => "calendar-off",
        "alert" => "alert-triangle",
        _ => "bell"
    };

    private static string GetIconBg(string type) => type switch
    {
        "schedule" => "rgba(59,130,246,0.12)",
        "payroll" => "rgba(139,92,246,0.12)",
        "leave" => "rgba(245,158,11,0.12)",
        "alert" => "rgba(239,68,68,0.12)",
        _ => "rgba(34,197,94,0.12)"
    };

    private static string GetIconColor(string type) => type switch
    {
        "schedule" => "#3B82F6",
        "payroll" => "#8B5CF6",
        "leave" => "#F59E0B",
        "alert" => "#EF4444",
        _ => "#22C55E"
    };

    private static string FormatTime(DateTime dt)
    {
        var diff = DateTime.UtcNow - dt;
        if (diff.TotalMinutes < 60) return $"{(int)diff.TotalMinutes} phút trước";
        if (diff.TotalHours < 24) return $"{(int)diff.TotalHours} giờ trước";
        if (diff.TotalDays < 7) return $"{(int)diff.TotalDays} ngày trước";
        return dt.ToString("dd/MM/yyyy");
    }
}
