@using System.Linq
@using BankSampahApp.Models
@inject BankSampahApp.Services.INotificationService NotificationService
@{
    var notifications = (await NotificationService.GetNotificationsAsync())
        .OrderBy(n => n.IsRead)
        .ThenByDescending(n => n.CreatedAt)
        .Take(5)
        .ToList();
}

<div class="navbar bg-white shadow-sm border-b border-gray-100 sticky top-0 z-20 w-full px-4 justify-between lg:justify-end">
    <div class="navbar-start">
        <label for="my-drawer-2" class="btn bg-bpsrw-500 drawer-button btn-square lg:hidden">
            <i class="ph ph-list text-lg"></i>
        </label>
    </div>
    <div class="navbar-end gap-4">
        <button class="btn btn-ghost btn-square rounded-lg border-gray-200">
            <span class="icon icon-outline">help</span>
        </button>
        <div class="dropdown dropdown-end">
            <div tabindex="0" role="button" class="btn btn-ghost btn-square avatar avatar-online rounded-lg border-gray-200">
                <span class="icon icon-outline">notifications</span>
            </div>
            <div tabindex="0" class="dropdown-content card card-sm bg-base-100 z-1 w-lg shadow-md">
                <div class="card-body">
                    <h2 class="card-title">
                        Notifikasi
                    </h2>
                    <ul class="divide-y border rounded border-gray-200">
                        @foreach (var notification in notifications)
                        {
                            <li>
                                <a class="flex gap-3 p-4 transition rounded hover:bg-gray-100 @(notification.IsRead ? string.Empty : "bg-gray-50")"
                                   href="@Url.Action("Show", "Notifications", new { id = notification.Id })">
                                    <div class="@GetSeverityWrapClasses(notification.Severity)">
                                        <span class="icon icon-outline">@GetSeverityIcon(notification.Severity)</span>
                                    </div>
                                    <div class="flex flex-col gap-1 flex-1">
                                        <div class="flex flex-wrap items-center justify-between gap-2">
                                            <div class="font-semibold text-gray-800">@notification.Title</div>
                                            <div class="flex items-center gap-2">
                                                <span class="text-xs uppercase font-semibold text-gray-500">
                                                    @GetCategoryLabel(notification.Category)
                                                </span>
                                                @if (!notification.IsRead)
                                                {
                                                    <span class="inline-flex size-2 rounded-full bg-bpsrw-500"></span>
                                                    <span class="text-[11px] font-semibold text-bpsrw-500 uppercase">baru</span>
                                                }
                                            </div>
                                        </div>
                                        <p class="text-xs text-gray-600 line-clamp-2">
                                            @notification.Summary
                                        </p>
                                            <span class="text-[11px] text-gray-400">@notification.CreatedAt.ToString("dd MMM yyyy HH:mm")</span>
                                    </div>
                                </a>
                            </li>
                        }
                    </ul>
                    <div class="card-actions">
                        <a href="@Url.Action("Index", "Notifications")" class="btn btn-primary btn-soft btn-sm">Lihat Semua</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="divider divider-horizontal m-0"></div>
        <div class="dropdown dropdown-end">
            <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar border-bpsrw-500 border-2">
                <div class="w-10 rounded-lg">
                    <img alt="Avatar"
                        src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
                </div>
            </div>
            <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
                <li><a>Profile</a></li>
                <li><a>Settings</a></li>
                <li><a href="@Url.Action("Index", "Home")">Logout</a></li>
            </ul>
        </div>
    </div>
</div>

@functions {
    private static string GetSeverityWrapClasses(NotificationSeverity severity) => severity switch
    {
        NotificationSeverity.Success => "bg-green-100 text-green-600 rounded size-10 flex items-center justify-center",
        NotificationSeverity.Warning => "bg-yellow-100 text-yellow-600 rounded size-10 flex items-center justify-center",
        NotificationSeverity.Error => "bg-red-100 text-red-600 rounded size-10 flex items-center justify-center",
        _ => "bg-gray-100 text-gray-600 rounded size-10 flex items-center justify-center"
    };

    private static string GetSeverityIcon(NotificationSeverity severity) => severity switch
    {
        NotificationSeverity.Success => "check",
        NotificationSeverity.Warning => "warning",
        NotificationSeverity.Error => "error",
        _ => "info"
    };

    private static string GetCategoryLabel(NotificationCategory category) => category switch
    {
        NotificationCategory.StatusAkun => "Status Akun",
        NotificationCategory.Transaksi => "Transaksi",
        NotificationCategory.Pengajuan => "Pengajuan",
        _ => category.ToString()
    };
}