import Link from "next/link";
import { auth } from "@/lib/auth";
import { db } from "@/lib/db";
import { markAllNotificationsRead } from "@/lib/actions/notification-settings";

export default async function NotificationsPage() {
  const session = await auth();
  const userId = (session?.user as { id?: string } | undefined)?.id as string;

  const notifications = await db.notification.findMany({
    where: { userId },
    orderBy: { createdAt: "desc" },
    take: 50,
  });

  const hasUnread = notifications.some((n) => !n.isRead);

  return (
    <div>
      <div className="flex items-center justify-between">
        <h1 className="font-heading text-3xl font-semibold text-terracotta">
          Notifications
        </h1>
        <Link
          href="/notifications/settings"
          className="text-sm text-charcoal/60 hover:text-terracotta hover:underline"
        >
          Settings
        </Link>
      </div>

      {hasUnread && (
        <form action={markAllNotificationsRead} className="mt-4">
          <button
            type="submit"
            className="text-sm font-medium text-terracotta hover:underline"
          >
            Mark all as read
          </button>
        </form>
      )}

      {notifications.length === 0 ? (
        <p className="mt-10 text-charcoal/60">No notifications yet.</p>
      ) : (
        <ul className="mt-6 flex flex-col divide-y divide-charcoal/10 border-t border-charcoal/10">
          {notifications.map((notification) => {
            const content = (
              <div
                className={`flex items-start gap-3 py-4 ${
                  notification.isRead ? "" : "font-medium"
                }`}
              >
                {!notification.isRead && (
                  <span
                    className="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-terracotta"
                    aria-hidden="true"
                  />
                )}
                <div className={notification.isRead ? "pl-5" : ""}>
                  <p className="text-charcoal">{notification.message}</p>
                  <p className="mt-1 text-xs font-normal text-charcoal/50">
                    {notification.createdAt.toLocaleString()}
                  </p>
                </div>
              </div>
            );

            return (
              <li key={notification.id}>
                {notification.linkUrl ? (
                  <Link href={notification.linkUrl} className="block hover:bg-charcoal/5">
                    {content}
                  </Link>
                ) : (
                  content
                )}
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}