import { auth } from "@/lib/auth";
import { prisma } from "@/lib/db";

export default async function NotificationsPage() {
  const session = await auth();
  const items = await prisma.notification.findMany({
    where: {
      OR: [{ userId: session?.user?.id }, { userId: null }],
    },
    orderBy: { createdAt: "desc" },
    take: 50,
  });

  return (
    <div className="space-y-4">
      <div>
        <h1 className="text-2xl font-bold">مركز التنبيهات</h1>
        <p className="text-sm text-muted">تنبيهات الليميت والعمليات والأمان</p>
      </div>
      <div className="card overflow-hidden">
        {items.length === 0 ? (
          <div className="empty-state">لا توجد تنبيهات حالياً</div>
        ) : (
          <ul className="divide-y divide-border-subtle">
            {items.map((n) => (
              <li key={n.id} className="px-5 py-4">
                <div className="flex items-start justify-between gap-3">
                  <div>
                    <div className="font-semibold">{n.title}</div>
                    <div className="mt-1 text-sm text-muted">{n.message}</div>
                  </div>
                  {!n.isRead && (
                    <span className="rounded-full bg-brand-yellow px-2 py-0.5 text-xs font-bold">
                      جديد
                    </span>
                  )}
                </div>
                <div className="mt-2 text-xs text-muted">
                  {n.createdAt.toLocaleString("ar-EG")}
                </div>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}