import config from "@payload-config";
import { getPayload } from "payload";
import { headers as nextHeaders } from "next/headers";
import { BellIcon } from "lucide-react";
import { NotificationsInbox } from "@/components/frontend/notifications/NotificationsInbox";

export const metadata = {
  title: "Notifications — Polaris Task Force",
};

export default async function NotificationsPage() {
  const payload = await getPayload({ config });
  const { user } = await payload.auth({
    headers: await nextHeaders(),
    canSetHeaders: false,
  });
  const userId = user?.id ?? 0;

  const notificationsRes = await payload.find({
    collection: "user-notifications",
    where: { user: { equals: userId } },
    limit: 200,
    sort: "-createdAt",
    depth: 0,
  });
  const notifications = notificationsRes.docs;

  return (
    <div className="p-5 flex flex-col gap-6">
      <div className="flex flex-col gap-1">
        <div className="flex items-center gap-2">
          <BellIcon className="size-5 text-muted-foreground" />
          <h1 className="text-lg font-semibold">Notifications</h1>
        </div>
        <p className="text-sm text-muted-foreground">
          Updates and activity from across Polaris Task Force.
        </p>
      </div>

      <NotificationsInbox notifications={notifications} />
    </div>
  );
}